From c20e8cde1f9f4e09dd0675d0cb3bd05a7ba25006 Mon Sep 17 00:00:00 2001
From: KOWX712 <leecc0503@gmail.com>
Date: Sun, 2 Mar 2025 04:06:17 +0800
Subject: [PATCH] opt: reduce code

---
 module/webui/index.html                | 180 ++++++++++---------------
 module/webui/scripts/about.js          |  32 ++---
 module/webui/scripts/boot_hash.js      |  30 ++---
 module/webui/scripts/help.js           |  13 +-
 module/webui/scripts/main.js           |   2 +-
 module/webui/scripts/menu_option.js    |  13 +-
 module/webui/scripts/update.js         |   2 +-
 module/webui/styles/about.css          |  42 +-----
 module/webui/styles/applist.css        |  23 +---
 module/webui/styles/boot_hash.css      |  29 +---
 module/webui/styles/file_selector.css  |   9 +-
 module/webui/styles/global.css         |  38 ++++--
 module/webui/styles/header.css         |  57 ++------
 module/webui/styles/security_patch.css |  17 +--
 module/webui/styles/system_app.css     |  12 +-
 15 files changed, 156 insertions(+), 343 deletions(-)

diff --git a/module/webui/index.html b/module/webui/index.html
index 15bd01e..6a6d58d 100644
--- a/module/webui/index.html
+++ b/module/webui/index.html
@@ -144,119 +144,85 @@
     </template>
 
     <!-- Help Overlay -->
-    <div id="help-overlay" class="help-overlay">
+    <div id="help-overlay" class="help-overlay overlay">
         <div class="help-menu">
-            <button id="close-help" class="close-help">&#x2715;</button>
+            <button id="close-help" class="close-btn">&#x2715;</button>
             <div class="help-content">
-                <p data-i18n="help.help_instructions"></p>
-                <ul id="helpList">
-                    <li id="save_and_update_button">
-                        <strong data-i18n="help.save_and_update"></strong>
-                        <ul>
-                            <li data-i18n="help.save_and_update_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="refresh">
-                        <strong data-i18n="help.refresh"></strong>
-                        <ul>
-                            <li data-i18n="help.refresh_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="select_deselect">
-                        <strong data-i18n="help.select_deselect"></strong>
-                        <ul>
-                            <li data-i18n="help.select_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="select_denylist">
-                        <strong data-i18n="help.select_denylist"></strong>
-                        <ul>
-                            <li data-i18n="help.select_denylist_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="deselect_unnecessary">
-                        <strong data-i18n="help.deselect_unnecessary"></strong>
-                        <ul>
-                            <li data-i18n="help.deselect_unnecessary_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="add_system_app">
-                        <strong data-i18n="help.add_system_app"></strong>
-                        <ul>
-                            <li data-i18n="help.add_system_app_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="set_keybox">
-                        <strong data-i18n="help.set_keybox"></strong>
-                        <ul>
-                            <li data-i18n="help.set_keybox_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="set_custom_keybox">
-                        <strong data-i18n="help.set_custom_keybox"></strong>
-                        <ul>
-                            <li data-i18n="help.set_custom_keybox_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="set_security_patch">
-                        <strong data-i18n="help.set_security_patch"></strong>
-                        <ul>
-                            <li data-i18n="help.set_security_patch_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="set_verified_boot_hash">
-                        <strong data-i18n="help.set_verified_boot_hash"></strong>
-                        <ul>
-                            <li data-i18n="help.set_verified_boot_hash_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                </ul>
+                <div class="help-content-header" data-i18n="help.help_instructions"></div>
+                <div class="instruction">
+                    <strong data-i18n="help.save_and_update"></strong>
+                    <p data-i18n="help.save_and_update_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.refresh"></strong>
+                    <p data-i18n="help.refresh_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.select_deselect"></strong>
+                    <p data-i18n="help.select_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.select_denylist"></strong>
+                    <p data-i18n="help.select_denylist_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.deselect_unnecessary"></strong>
+                    <p data-i18n="help.deselect_unnecessary_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.add_system_app"></strong>
+                    <p data-i18n="help.add_system_app_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.set_keybox"></strong>
+                    <p data-i18n="help.set_keybox_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.set_custom_keybox"></strong>
+                    <p data-i18n="help.set_custom_keybox_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.set_security_patch"></strong>
+                    <p data-i18n="help.set_security_patch_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.set_verified_boot_hash"></strong>
+                    <p data-i18n="help.set_verified_boot_hash_description"></p>
+                </div>
             </div>
         </div>
     </div>
 
     <!-- BootHash Input Overlay -->
-    <div id="boot-hash-overlay" class="boot-hash-overlay"></div>
-    <div id="boot-hash-card" class="boot-hash-card">
-        <div class="boot-hash-title" data-i18n="boot_hash.title"></div>
-        <textarea id="boot-hash-input" class="boot-hash-input" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash.input_placeholder" oninput="window.trimInput(this)"></textarea>
-        <button id="boot-hash-save-button" class="boot-hash-save-button ripple-element" data-i18n="boot_hash.save_button"></button>
+    <div id="boot-hash-overlay" class="boot-hash-overlay overlay">
+        <div id="boot-hash-card" class="boot-hash-card">
+            <div class="boot-hash-title" data-i18n="boot_hash.title"></div>
+            <textarea id="boot-hash-input" class="boot-hash-input" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash.input_placeholder" oninput="window.trimInput(this)"></textarea>
+            <button id="boot-hash-save-button" class="boot-hash-save-button ripple-element" data-i18n="boot_hash.save_button"></button>
+        </div>
     </div>
 
     <!-- About Overlay -->
-    <div id="about-overlay" class="about-overlay">
-        <div id="about-menu" class="about-menu">
-            <button id="close-about" class="close-about">&#x2715;</button>
-            <div class="about-content">
+    <div id="about-overlay" class="about-overlay overlay">
+        <div class="about-menu">
+            <button id="close-about" class="close-btn">&#x2715;</button>
+            <div class="about-title">
                 <p id="module_name_line1" data-i18n="about.module_name_line1"></p>
                 <p id="module_name_line2" data-i18n="about.module_name_line2"></p>
                 <p><span id="authored" data-i18n="about.by"></span> KOWX712</p>
-                <br>
-                <p id="disclaimer" data-i18n="about.disclaimer"></p>
-                <br>
-                <p>
-                <div class="link">
-                    <i class="link-icon ripple-element" id="telegram" aria-hidden="true">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
-                        <span id="link-text" data-i18n="about.telegram_channel"></span>
-                    </i>
-                    <i class="link-icon ripple-element" id="github" aria-hidden="true">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
-                        <span id="link-text" data-i18n="about.github"></span>
-                    </i>
-                </div>
-                </p>
-                <br>
+            </div>
+            <div id="disclaimer" data-i18n="about.disclaimer"></div>
+            <div class="link">
+                <i class="link-icon ripple-element" id="telegram" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
+                    <span id="link-text" data-i18n="about.telegram_channel"></span>
+                </i>
+                <i class="link-icon ripple-element" id="github" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+                    <span id="link-text" data-i18n="about.github"></span>
+                </i>
+            </div>
+            <div class="acknowledgment">
                 <p id="acknowledgment" data-i18n="about.acknowledgment"></p>
                 <p>j-hc/zygisk-detach: WebUI template</p>
                 <p>markedjs/marked: Markdown Support</p>
@@ -265,9 +231,9 @@
     </div>
 
     <!-- Update Overlay -->
-    <div class="update-overlay">
+    <div class="update-overlay overlay">
         <div class="update-menu">
-            <button class="close-update">&#x2715;</button>
+            <button id="close-update" class="close-btn">&#x2715;</button>
             <div class="update-content">
                 <h1 data-i18n="update.changelog"></h1>
                 <div class="changelog"></div>
@@ -280,7 +246,7 @@
     </div>
 
     <!-- MMRL Permission Request Overlay -->
-    <div id="permission-popup" class="permission-popup hidden">
+    <div id="permission-popup" class="permission-popup overlay">
         <div class="permission-content">
             <h2 id="permission-title">Please allow JavaScript API in MMRL settings</h2>
             <div class="permission-steps">
@@ -294,11 +260,11 @@
     </div>
 
     <!-- File Selector Overlay -->
-    <div class="file-selector-overlay">
+    <div class="file-selector-overlay overlay">
         <div class="file-selector">
             <div class="file-selector-header">
                 <button class="back-button">
-                    <svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="40 -1000 900 960" width="22px"><path d="M400-93.85 13.85-480 400-866.15l56.77 56.77L127.38-480l329.39 329.38L400-93.85Z"/></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="40 -1050 900 960" width="22px"><path d="M400-93.85 13.85-480 400-866.15l56.77 56.77L127.38-480l329.39 329.38L400-93.85Z"/></svg>
                 </button>
                 <div class="current-path">/storage/emulated/0/Download</div>
                 <button class="close-selector">&#x2715;</button>
@@ -308,7 +274,7 @@
     </div>
 
     <!-- Security Patch Overlay -->
-    <div id="security-patch-overlay" class="security-patch-overlay">
+    <div id="security-patch-overlay" class="security-patch-overlay overlay">
         <div id="security-patch-card" class="security-patch-card">
             <div class="security-patch-header" data-i18n="security_patch.title"></div>
             <div class="security-patch-content">
@@ -358,7 +324,7 @@
     </div>
 
     <!-- Add System App Overlay -->
-    <div id="add-system-app-overlay" class="add-system-app-overlay">
+    <div id="add-system-app-overlay" class="add-system-app-overlay overlay">
         <div id="add-system-app-card" class="add-system-app-card">
             <div class="add-system-app-title" data-i18n="add_system_app.title"></div>
             <div class="add-system-app-content">
diff --git a/module/webui/scripts/about.js b/module/webui/scripts/about.js
index 77a3611..72c9e18 100644
--- a/module/webui/scripts/about.js
+++ b/module/webui/scripts/about.js
@@ -6,35 +6,27 @@ const githubLink = document.getElementById('github');
 // Function to show about overlay
 document.getElementById("about").addEventListener("click", () => {
     const aboutOverlay = document.getElementById('about-overlay');
-    const aboutMenu = document.getElementById('about-menu');
     const closeAbout = document.getElementById('close-about');
-    const showMenu = () => {
-        aboutOverlay.style.display = 'flex';
-        setTimeout(() => {
-            aboutOverlay.style.opacity = '1';
-            aboutMenu.style.opacity = '1';
-        }, 10);
-        document.body.style.overflow = 'hidden';
-    };
+
+    // Show about menu
+    document.body.classList.add("no-scroll");
+    aboutOverlay.style.display = 'flex';
+    setTimeout(() => {
+        aboutOverlay.style.opacity = '1';
+    }, 10);
+
     const hideMenu = () => {
+        document.body.classList.remove("no-scroll");
         aboutOverlay.style.opacity = '0';
-        aboutMenu.style.opacity = '0';
         setTimeout(() => {
             aboutOverlay.style.display = 'none';
-            document.body.style.overflow = 'auto';
         }, 200);
     };
-    showMenu();
-    closeAbout.addEventListener('click', (event) => {
-        event.stopPropagation();
-        hideMenu();
-    });
+
+    closeAbout.addEventListener("click", hideMenu);
     aboutOverlay.addEventListener('click', (event) => {
-        if (!aboutMenu.contains(event.target)) {
-            hideMenu();
-        }
+        if (event.target === aboutOverlay) hideMenu();
     });
-    menu.addEventListener('click', (event) => event.stopPropagation());
 });
 
 // Event listener for link redirect
diff --git a/module/webui/scripts/boot_hash.js b/module/webui/scripts/boot_hash.js
index ba6e997..d562c3d 100644
--- a/module/webui/scripts/boot_hash.js
+++ b/module/webui/scripts/boot_hash.js
@@ -1,7 +1,6 @@
 import { execCommand, showPrompt } from './main.js';
 
 const bootHashOverlay = document.getElementById('boot-hash-overlay');
-const card = document.getElementById('boot-hash-card');
 const inputBox = document.getElementById('boot-hash-input');
 const saveButton = document.getElementById('boot-hash-save-button');
 
@@ -12,25 +11,20 @@ window.trimInput = (input) => {
 
 // Function to handle Verified Boot Hash
 document.getElementById("boot-hash").addEventListener("click", async () => {
-    const showCard = () => {
-        bootHashOverlay.style.display = "flex";
-        card.style.display = "flex";
-        requestAnimationFrame(() => {
-            bootHashOverlay.classList.add("show");
-            card.classList.add("show");
-        });
-        document.body.style.overflow = "hidden";
-    };
-    const closeCard = () => {
-        bootHashOverlay.classList.remove("show");
-        card.classList.remove("show");
+    // Display boot hash menu
+    document.body.classList.add("no-scroll");
+    bootHashOverlay.style.display = "flex";
+    setTimeout(() => {
+        bootHashOverlay.style.opacity = 1;
+    }, 10);
+
+    const closeBootHashMenu = () => {
+        document.body.classList.remove("no-scroll");
+        bootHashOverlay.style.opacity = 0;
         setTimeout(() => {
             bootHashOverlay.style.display = "none";
-            card.style.display = "none";
-            document.body.style.overflow = "auto";
         }, 200);
     };
-    showCard();
     try {
         const bootHashContent = await execCommand("cat /data/adb/boot_hash");
         const validHash = bootHashContent
@@ -50,14 +44,14 @@ document.getElementById("boot-hash").addEventListener("click", async () => {
                 resetprop -n ro.boot.vbmeta.digest ${inputValue}
             `);
             showPrompt("prompt.boot_hash_set");
-            closeCard();
+            closeBootHashMenu();
         } catch (error) {
             console.error("Failed to update boot_hash:", error);
             showPrompt("prompt.boot_hash_set_error", false);
         }
     });
     bootHashOverlay.addEventListener("click", (event) => {
-        if (event.target === bootHashOverlay) closeCard();
+        if (event.target === bootHashOverlay) closeBootHashMenu();
     });
 
     // Enter to save
diff --git a/module/webui/scripts/help.js b/module/webui/scripts/help.js
index 24ff35a..ee2e098 100644
--- a/module/webui/scripts/help.js
+++ b/module/webui/scripts/help.js
@@ -1,21 +1,18 @@
 const helpButton = document.getElementById('help-button');
 const helpOverlay = document.getElementById('help-overlay');
 const closeHelp = document.getElementById('close-help');
-const helpList = document.getElementById('help-list');
 
 // Open help menu
 helpButton.addEventListener("click", () => {
-    helpOverlay.classList.remove("hide");
-    helpOverlay.style.display = "flex";
-    requestAnimationFrame(() => {
-        helpOverlay.classList.add("show");
-    });
     document.body.classList.add("no-scroll");
+    helpOverlay.style.display = "flex";
+    setTimeout(() => {
+        helpOverlay.style.opacity = 1;
+    }, 10);
 });
 
 const hideHelpOverlay = () => {
-    helpOverlay.classList.remove("show");
-    helpOverlay.classList.add("hide");
+    helpOverlay.style.opacity = 0;
     document.body.classList.remove("no-scroll");
     setTimeout(() => {
         helpOverlay.style.display = "none";
diff --git a/module/webui/scripts/main.js b/module/webui/scripts/main.js
index 235fed9..3e3b8b4 100644
--- a/module/webui/scripts/main.js
+++ b/module/webui/scripts/main.js
@@ -214,7 +214,7 @@ async function checkMMRL() {
             MMRL_API = true;
         } catch (error) {
             console.error('Permission check failed:', error);
-            permissionPopup.classList.remove('hidden');
+            permissionPopup.style.display('flex');
             MMRL_API = false;
         }
     }
diff --git a/module/webui/scripts/menu_option.js b/module/webui/scripts/menu_option.js
index 0d80055..9d9b7b5 100644
--- a/module/webui/scripts/menu_option.js
+++ b/module/webui/scripts/menu_option.js
@@ -234,9 +234,11 @@ document.getElementById("validkb").addEventListener("click", async () => {
     });
 });
 
+// File selector
 const fileSelector = document.querySelector('.file-selector-overlay');
 let currentPath = '/storage/emulated/0/Download';
 
+// Function to display file in current path
 function updateCurrentPath() {
     const currentPathElement = document.querySelector('.current-path');
     const segments = currentPath.split('/').filter(Boolean);
@@ -281,17 +283,8 @@ async function listFiles(path, skipAnimation = false) {
                 <span>..</span>
             `;
             backItem.addEventListener('click', async () => {
-                currentPath = currentPath.split('/').slice(0, -1).join('/');
-                if (currentPath === '') currentPath = '/storage/emulated/0';
-                const currentPathElement = document.querySelector('.current-path');
-                currentPathElement.innerHTML = currentPath.split('/').filter(Boolean).join('<span class="separator">›</span>');
-                currentPathElement.scrollTo({ 
-                    left: currentPathElement.scrollWidth,
-                    behavior: 'smooth'
-                });
-                await listFiles(currentPath);
+                document.querySelector('.back-button').click();
             });
-            
             fileList.appendChild(backItem);
         }
         items.forEach(item => {
diff --git a/module/webui/scripts/update.js b/module/webui/scripts/update.js
index 6f0d023..549481e 100644
--- a/module/webui/scripts/update.js
+++ b/module/webui/scripts/update.js
@@ -3,7 +3,7 @@ import { updateCard } from './applist.js';
 
 const updateCardText = document.getElementById('redirect-to-release');
 const UpdateMenu = document.querySelector('.update-overlay');
-const closeUpdate = document.querySelector('.close-update');
+const closeUpdate = document.getElementById('close-update');
 const releaseNotes = document.querySelector('.changelog');
 const installButton = document.querySelector('.install');
 const rebootButton = document.querySelector('.reboot');
diff --git a/module/webui/styles/about.css b/module/webui/styles/about.css
index 6e4f081..70dba12 100644
--- a/module/webui/styles/about.css
+++ b/module/webui/styles/about.css
@@ -1,53 +1,24 @@
 .about-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.5);
     z-index: 1100;
-    display: none;
-    justify-content: center;
     align-items: center;
-    opacity: 0;
-    transition: opacity 0.2s ease;
 }
 
 .about-menu {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 90vw;
+    position: relative;
+    width: calc(90vw - 60px);
     max-width: 800px;
-    transform: translate(-50%, -50%);
     background: #fff;
     border-radius: 15px;
-    padding: 30px 0;
-    z-index: 1200;
+    padding: 30px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-    z-index: 1200;
-    opacity: 0;
     display: flex;
     flex-direction: column;
     gap: 15px;
-    transition: opacity 0.2s ease;
-}
-
-.close-about {
-    position: absolute;
-    top: 15px;
-    right: 12px;
-    background: none;
-    border: none;
-    font-size: 18px;
-    color: #ccc;
-    user-select: none;
 }
 
 .link,
-.about-content p {
+.about-menu p {
     margin: 0;
-    padding: 0 30px;
     font-size: 16px;
     text-align: left;
 }
@@ -69,11 +40,8 @@
 
 #disclaimer {
     font-family: serif;
-    width: calc(100% - 80px);
+    width: calc(100% - 20px);
     padding: 8px 10px;
-    left: 0;
-    right: 0;
-    margin: auto;
     border-radius: 10px;
     background-color: #F5F5F5;
 }
diff --git a/module/webui/styles/applist.css b/module/webui/styles/applist.css
index 58849e8..59d8c7d 100644
--- a/module/webui/styles/applist.css
+++ b/module/webui/styles/applist.css
@@ -43,18 +43,8 @@
 }
 
 .update-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.5);
     z-index: 1800;
-    justify-content: center;
     align-items: center;
-    opacity: 0;
-    transition: opacity 0.2s ease;
 }
 
 .update-menu {
@@ -65,18 +55,7 @@
     padding: 30px;
     border-radius: 15px;
     text-align: left;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-    transition: opacity 0.2s ease;
-}
-
-.close-update {
-    position: absolute;
-    top: 15px;
-    right: 12px;
-    background: none;
-    border: none;
-    font-size: 20px;
-    color: #ccc;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
 .update-content h3 {
diff --git a/module/webui/styles/boot_hash.css b/module/webui/styles/boot_hash.css
index 1df469a..78473d0 100644
--- a/module/webui/styles/boot_hash.css
+++ b/module/webui/styles/boot_hash.css
@@ -1,45 +1,20 @@
 .boot-hash-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.5);
     z-index: 1200;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.2s ease, visibility 0.2s ease;
 }
 
 .boot-hash-card {
     position: fixed;
     top: 10%;
-    left: 50%;
-    transform: translateX(-50%);
     width: calc(90% - 60px);
     max-width: 300px;
+    height: fit-content;
     background-color: #fff;
     border-radius: 18px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-    z-index: 1200;
     padding: 30px;
-    display: none;
+    display: flex;
     flex-direction: column;
     gap: 15px;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-}
-
-.boot-hash-overlay.show {
-    visibility: visible;
-    opacity: 1;
-}
-
-.boot-hash-card.show {
-    display: flex;
-    opacity: 1;
 }
 
 .boot-hash-title {
diff --git a/module/webui/styles/file_selector.css b/module/webui/styles/file_selector.css
index a86c03a..34bcedd 100644
--- a/module/webui/styles/file_selector.css
+++ b/module/webui/styles/file_selector.css
@@ -21,6 +21,7 @@
     border-radius: 15px;
     display: flex;
     flex-direction: column;
+    position: relative;
     overflow: hidden;
 }
 
@@ -55,7 +56,7 @@
     border: none;
     font-size: 20px;
     color: #ccc;
-    padding: 5px;
+    padding: 0 5px;
 }
 
 .file-list {
@@ -83,7 +84,7 @@
 
 .file-item svg {
     margin-right: 10px;
-    fill: #6E6E6E;
+    fill: #ccc;
 }
 
 .file-item span {
@@ -114,8 +115,4 @@
     .back-button {
         fill: #C2C2C2;
     }
-
-    .file-item svg {
-        fill: #C2C2C2;
-    }
 }
\ No newline at end of file
diff --git a/module/webui/styles/global.css b/module/webui/styles/global.css
index 44f8324..85dd196 100644
--- a/module/webui/styles/global.css
+++ b/module/webui/styles/global.css
@@ -35,6 +35,30 @@ body {
     pointer-events: auto;
 }
 
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: none;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.close-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: none;
+    border: none;
+    font-size: 18px;
+    color: #ccc;
+    user-select: none;
+}
+
 .prompt {
     position: fixed;
     bottom: 0;
@@ -107,20 +131,8 @@ body {
 }
 
 .permission-popup {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.85);
-    display: flex;
-    justify-content: center;
     align-items: center;
-    z-index: 9999;
-}
-
-.permission-popup.hidden {
-    display: none;
+    z-index: 2000;
 }
 
 .permission-content {
diff --git a/module/webui/styles/header.css b/module/webui/styles/header.css
index 0774f68..d7c3b1c 100644
--- a/module/webui/styles/header.css
+++ b/module/webui/styles/header.css
@@ -148,74 +148,39 @@
     justify-content: center;
     align-items: center;
     opacity: 0;
-    transition: opacity 0.4s ease;
-}
-
-.help-overlay.show {
-    display: flex;
-    opacity: 1;
-}
-
-.help-overlay.hide {
-    opacity: 0;
+    transition: opacity 0.2s ease;
 }
 
 .help-menu {
     position: relative;
-    width: 90vw;
+    width: calc(95vw - 60px);
     max-width: 800px;
     background-color: white;
-    padding: 10px 0;
+    padding: 30px;
     border-radius: 15px;
     text-align: left;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
-.close-help {
-    position: absolute;
-    top: 15px;
-    right: 12px;
-    background: none;
-    border: none;
-    font-size: 20px;
-    color: #ccc;
-    user-select: none;
-}
-
 .help-content {
-    max-height: 85vh;
-    padding: 0 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    max-height: calc(85vh - 60px);
     overflow-y: auto;
 }
 
-.help-content p {
+.help-content-header {
     font-size: 26px;
     user-select: none;
 }
 
-.help-content ul {
-    padding-left: 0;
-    list-style-type: none;
-}
-
-.help-content ul li {
-    font-weight: bold;
+.instruction strong {
     font-size: 18px;
 }
 
-.help-content ul ul li {
-    font-weight: normal;
-    font-size: 16px;
-}
-
-.help-content ul ul ul li {
-    color: #777777;
-    font-weight: normal;
-    font-size: 14px;
-}
-
-.help-content ul ul ul li a {
-    color: inherit;
+.instruction p {
+    margin: 0;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/module/webui/styles/security_patch.css b/module/webui/styles/security_patch.css
index 0352191..a8be66d 100644
--- a/module/webui/styles/security_patch.css
+++ b/module/webui/styles/security_patch.css
@@ -1,15 +1,5 @@
 .security-patch-overlay {
-    display: none;
-    position: fixed;
-    justify-content: center;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
     z-index: 2000;
-    transition: opacity 0.2s ease;
-    opacity: 0;
 }
 
 .security-patch-card {
@@ -19,8 +9,7 @@
     background-color: white;
     padding: 30px;
     border-radius: 15px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    z-index: 2001;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
     width: calc(90% - 60px);
     max-width: 300px;
     max-height: calc(80% - 60px);
@@ -153,10 +142,6 @@
 }
 
 @media (prefers-color-scheme: dark) {
-    .security-patch-overlay {
-        background-color: rgba(0, 0, 0, 0.8);
-    }
-
     .security-patch-card {
         background-color: #343434;
         color: white;
diff --git a/module/webui/styles/system_app.css b/module/webui/styles/system_app.css
index 2af2a37..a5884de 100644
--- a/module/webui/styles/system_app.css
+++ b/module/webui/styles/system_app.css
@@ -1,15 +1,5 @@
 .add-system-app-overlay {
-    display: none;
-    position: fixed;
-    justify-content: center;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
     z-index: 2000;
-    transition: opacity 0.2s ease;
-    opacity: 0;
 }
 
 .add-system-app-card {
@@ -25,7 +15,7 @@
     padding: 30px;
     background-color: #fff;
     border-radius: 15px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
 .add-system-app-title {