UI fixes on mobile devices

Author: Eta06

README.md

@@ -1 +1,62 @@
-# LockDown
+# LockDown 🔒
+
+<center><img src="static/images/icon.png" alt="LockDown Logo" width="100" height="100"></center>
+
+## Introduction
+
+LockDown is a powerful and versatile application designed to enhance security and control over your devices. It offers a comprehensive suite of features, including:
+
+* **Device Lockdown:** Securely lock down your device to prevent unauthorized access.
+* **App Management:** Control which applications can be accessed and used.
+* **Network Monitoring:** Monitor and restrict network activity to protect your data.
+* **Parental Controls:** Set limits and restrictions for children's device usage.
+* **Data Encryption:** Encrypt sensitive data to safeguard it from prying eyes.
+
+## Features
+
+* **User-Friendly Interface:** LockDown boasts an intuitive and easy-to-use interface, making it accessible to users of all technical levels.
+* **Customizable Settings:** Tailor LockDown's settings to meet your specific security needs and preferences.
+* **Real-Time Monitoring:** Stay informed about device activity with real-time monitoring and alerts.
+* **Comprehensive Security:** LockDown employs advanced security measures to protect your device and data.
+* **Regular Updates:** Benefit from ongoing updates and improvements to ensure optimal security and performance.
+
+## Getting Started
+
+1. **Download and Install:** Download the LockDown application from [link to download page].
+2. **Launch the Application:** Run the LockDown application on your device.
+3. **Create an Account:**  Set up a secure account to manage your LockDown settings.
+4. **Connect Your Devices:** Link your devices to your LockDown account for centralized control.
+5. **Configure Settings:** Customize LockDown's settings to your liking.
+6. **Enable Security Features:** Activate the desired security features to enhance your device's protection.
+
+## Documentation
+
+For detailed information on LockDown's features, settings, and usage, please refer to the official documentation: [link to documentation page].
+
+## Support
+
+If you encounter any issues or have questions, please contact our support team at [link to support page].
+
+## Contributing
+
+We welcome contributions from the community! If you'd like to contribute to LockDown's development, please visit our GitHub repository: [https://github.com/Eta06/LockDown](https://github.com/Eta06/LockDown).
+
+## License
+
+LockDown is licensed under the [link to license page]. You can find the license file [here](LICENSE).
+
+## Contact
+
+For any inquiries, please contact us at [link to contact page].
+
+## Social Media
+
+Follow us on social media for updates and news:
+
+* **Twitter:** [link to Twitter page]
+* **Facebook:** [link to Facebook page]
+* **LinkedIn:** [link to LinkedIn page]
+
+---
+
+**Note:** Replace the placeholders in square brackets with the actual links and information.

main.py

@@ -44,27 +44,10 @@ def reset_everything():
     return redirect(url_for("index"))
 
 
-
-
-@app.route("/about")
-def about():
-    if language == "":
-        return render_template("language.html", version=version, language=language, author=author)
-    return render_template("about.html", version=version, language=language, author=author, language_files=language_files)
-
-
-@app.route("/settings")
-def settings():
-    if language == "":
-        return render_template("language.html", version=version, language=language, author=author)
-    return render_template("settings.html", version=version, language=language, author=author)
-
-
 @app.route("/")
 def index():
     if language == "":
         return render_template("language.html", version=version, language=language, author=author)
-    print(language_files)
     return render_template("index.html", version=version, language=language, author=author, language_files=language_files)
 
 

templates/index.html

@@ -137,12 +137,13 @@
         .tab {
             padding: 10px 20px;
             border: 1px solid #ffffff;
-            border-bottom: none;
+            border-radius: 0 0 20px 20px;
             background-color: #ffffff;
             cursor: pointer;
             font-weight: bold;
             transition: 0.4s;
             font-family: 'Lucida Grande', Arial, sans-serif;
+
         }
 
         .tab.active {
@@ -216,6 +217,7 @@
             border-radius: 5px;
             cursor: pointer;
             transition: 0.4s;
+            margin-bottom: 20px;
         }
 
         .reset-card button:hover {
@@ -258,6 +260,12 @@
             justify-content: center;
             width: 80%;
         }
+
+        @media (max-width: 768px) { /* Adjust the breakpoint as needed */
+            .tabs {
+                width: 90%; /* Set the width to 90% on mobile devices */
+            }
+        }
     </style>
 </head>
 <body>
@@ -269,6 +277,7 @@ <h2>LockDown Web UI</h2>
 </center>
 <center class="main-screen">
         <div class="main-div">
+            <center>
             <div class="tabs" style="
                     white-space: nowrap;
                     margin-bottom: 0;
@@ -277,10 +286,11 @@ <h2>LockDown Web UI</h2>
                 <div class="tab" data-tab="modules">{{ language_files.modules }}</div>
                 <div class="tab" data-tab="settings">{{ language_files.settings }}</div>
             </div>
+                </center>
             <div class="tab-content active" id="home">
                 <h1>{{ language_files.home }}</h1>
                 <p>{{ language_files.home_text }}</p>
-                <button id="submit-button" onclick="window.location.href='/lockdown'">{{ language_files.home_button }}</button>
+                <button class=" " id="submit-button" onclick="window.location.href='/lockdown'">{{ language_files.home_button }}</button>
             </div>
             <div class="tab-content" id="modules">
                 </div>
@@ -292,18 +302,17 @@ <h3>{{ language_files.language }}</h3>
                         <label>
                             <select name="language">
                                 <option value="en">English</option>
-                                <option value="es">Spanish</option>
                                 <option value="tr">Turkish</option>
+                                <option value="es">Spanish</option>
+                                <option value="ru">Russian</option>
                             </select>
                         </label>
                         <button id="save-language">{{ language_files.save }}</button>
                     </div>
                     <div class="settings-card reset-card">
                         <h3>{{ language_files.reset }}</h3>
                         <p>{{ language_files.resetinfo }}</p>
-                        <span class="confirm-buttons">
-                            <button id="confirm-reset">{{ language_files.reset }}</button>
-                        </span>
+                        <button id="confirm-reset">{{ language_files.reset }}</button>
                     </div>
                 </cardwidget>
             </div>

templates/language.html

@@ -45,6 +45,7 @@
         });
 
         document.addEventListener("click", (event) => {
+            navigator.vibrate([10, 40, 10]);
             if (event.target.id === "submit-button") {
                 const mainScreen = document.querySelector(".main-screen");
                 // keep the animations last frame with fill mode