prevent mistouch

module/webroot/index.html

@@ -27,6 +27,7 @@
                 <button class="language-option" data-lang="zh-CN">中文（简体）</button>
                 <button class="language-option" data-lang="zh-TW">中文（繁体）</button>
             </div>
+            <div id="language-overlay" class="language-overlay"></div>
         </div>
     </div>
 
@@ -67,6 +68,7 @@
                 </ul>
             </div>
         </div>
+        <div id="menu-overlay" class="menu-overlay"></div>
     </div>
 
     <!-- Applist Display -->

module/webroot/index.js

@@ -5,6 +5,7 @@ const noConnection = document.querySelector('.no-connection');
 const languageButton = document.querySelector('.language-button');
 const languageMenu = document.querySelector('.language-menu');
 const languageOptions = document.querySelectorAll('.language-option');
+const languageOverlay = document.getElementById('language-overlay');
 
 // Loading and Prompt Elements
 const loadingIndicator = document.querySelector('.loading');
@@ -22,6 +23,7 @@ const menu = document.querySelector('.menu');
 const menuButton = document.getElementById('menu-button');
 const menuOptions = document.getElementById('menu-options');
 const selectDenylistElement = document.getElementById('select-denylist');
+const menuOverlay = document.getElementById('menu-overlay');
 
 // Applist Elements
 const appTemplate = document.getElementById('app-template').content;
@@ -568,6 +570,7 @@ function setupMenuToggle() {
             menuOptions.classList.add('visible');
             menuIcon.classList.add('menu-open');
             menuIcon.classList.remove('menu-closed');
+            menuOverlay.style.display = 'flex';
             menuOpen = true;
             menuAnimating = false;
         }, 10);
@@ -580,6 +583,7 @@ function setupMenuToggle() {
             menuOptions.classList.add('hidden');
             menuIcon.classList.remove('menu-open');
             menuIcon.classList.add('menu-closed');
+            menuOverlay.style.display = 'none';
             setTimeout(() => {
                 menuOptions.style.display = 'none';
                 menuOpen = false;
@@ -589,6 +593,47 @@ function setupMenuToggle() {
     }
 }
 
+// Function to setup the language menu
+function setupLanguageMenu() {
+    languageButton.addEventListener("click", (event) => {
+        event.stopPropagation();
+        const isVisible = languageMenu.classList.contains("show");
+        if (isVisible) {
+            closeLanguageMenu();
+        } else {
+            openLanguageMenu();
+        }
+    });
+
+    document.addEventListener("click", (event) => {
+        if (!languageButton.contains(event.target) && !languageMenu.contains(event.target)) {
+            closeLanguageMenu();
+        }
+    });
+
+    languageOptions.forEach(option => {
+        option.addEventListener("click", () => {
+            closeLanguageMenu();
+        });
+    });
+
+    window.addEventListener('scroll', () => {
+        if (languageMenu.classList.contains("show")) {
+            closeLanguageMenu();
+        }
+    });
+
+    function openLanguageMenu() {
+        languageMenu.classList.add("show");
+        languageOverlay.style.display = 'flex';
+    }
+
+    function closeLanguageMenu() {
+        languageMenu.classList.remove("show");
+        languageOverlay.style.display = 'none';
+    }
+}
+
 // Focus on search input when search card is clicked
 searchCard.addEventListener("click", () => {
     searchInput.focus();
@@ -647,6 +692,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     const userLang = detectUserLanguage();
     await loadTranslations(userLang);
     setupMenuToggle();
+    setupLanguageMenu();
     document.getElementById("refresh").addEventListener("click", refreshAppList);
     document.getElementById("select-all").addEventListener("click", selectAllApps);
     document.getElementById("deselect-all").addEventListener("click", deselectAllApps);
@@ -663,27 +709,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     runExtraScript();
 });
 
-// Toggle the visibility of the language menu when clicking the button
-languageButton.addEventListener("click", (event) => {
-    event.stopPropagation();
-    const isVisible = languageMenu.classList.contains("show");
-    if (isVisible) {
-        languageMenu.classList.remove("show");
-    } else {
-        languageMenu.classList.add("show");
-    }
-});
-document.addEventListener("click", (event) => {
-    if (!languageButton.contains(event.target) && !languageMenu.contains(event.target)) {
-        languageMenu.classList.remove("show");
-    }
-});
-languageOptions.forEach(option => {
-    option.addEventListener("click", () => {
-        languageMenu.classList.remove("show");
-    });
-});
-
 // Scroll event
 let lastScrollY = window.scrollY;
 const scrollThreshold = 40;
@@ -698,9 +723,6 @@ window.addEventListener('scroll', () => {
         searchMenuContainer.style.transform = 'translateY(0)';
         floatingBtn.style.transform = 'translateY(-120px)';
     }
-    if (languageMenu.classList.contains("show")) {
-        languageMenu.classList.remove("show");
-    }
     lastScrollY = window.scrollY;
 });
 

module/webroot/styles.css

@@ -96,6 +96,17 @@ body {
     border-bottom: none;
 }
 
+.language-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: none;
+    z-index: 1100;
+    display: none;
+}
+
 .help-button {
     margin-right: auto;
     background: none;
@@ -444,6 +455,7 @@ body {
     padding: 5px 12px;
     top: 110%;
     right: 0;
+    z-index: 1200;
     transform: translateX(120%);
     transition: transform 0.2s ease;
     width: auto;
@@ -480,6 +492,17 @@ body {
     border-bottom: none;
 }
 
+.menu-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: none;
+    z-index: 1000;
+    display: none;
+}
+
 .card-box {
     display: flex;
     justify-content: center;