ui change

no connection prompt, help menu overlay transition. Better readability installation script.

module/webroot/index.html

@@ -14,6 +14,9 @@
     <div class="title-container">
         <div id="title">Tricky Addon - Update Target List</div>
         <button id="help-button" class="help-button"><i class="fa fa-question-circle"></i></button>
+        <div class="no-connection">
+            <img src="wifi-slash.svg" alt="No Connection Icon" class="wifi-icon">
+        </div>
     </div>
     <div id="help-overlay" class="help-overlay">
         <div class="help-menu">

module/webroot/index.js

@@ -6,6 +6,7 @@ const searchMenuContainer = document.querySelector('.search-menu-container');
 const searchInput = document.getElementById("search");
 const clearBtn = document.getElementById("clear-btn");
 const title = document.querySelector('.title-container');
+const noConnection = document.querySelector(".no-connection");
 const helpButton = document.getElementById("help-button");
 const helpOverlay = document.getElementById("help-overlay");
 const closeHelp = document.getElementById("close-help");
@@ -14,6 +15,7 @@ const menu = document.querySelector('.menu');
 const floatingBtn = document.querySelector('.floating-btn');
 const basePath = "set-path";
 let excludeList = [];
+let isRefreshing = false;
 
 // Function to execute shell commands
 async function execCommand(command) {
@@ -75,20 +77,21 @@ async function fetchAppList() {
 }
 
 // Function to refresh app list
-let isRefreshing = false;
 async function refreshAppList() {
     isRefreshing = true;
     title.style.transform = 'translateY(0)';
     searchMenuContainer.style.transform = 'translateY(0)';
     floatingBtn.style.transform = 'translateY(0)';
-    const searchInput = document.getElementById("search");
     searchInput.value = '';
     clearBtn.style.display = "none";
     appListContainer.innerHTML = '';
     loadingIndicator.style.display = 'flex';
     await new Promise(resolve => setTimeout(resolve, 500));
     window.scrollTo(0, 0);
-    await fetchAppList();
+    if (noConnection.style.display === "flex") {
+        await runXposedScript();
+    }
+    await fetchAppList();[]
     loadingIndicator.style.display = 'none';
     isRefreshing = false;
 }
@@ -98,13 +101,16 @@ async function runXposedScript() {
     try {
         const scriptPath = `${basePath}get_exclude-list.sh`;
         await execCommand(scriptPath);
-        console.log("Exclude script executed successfully.");
+        console.log("Xposed script executed successfully.");
+        noConnection.style.display = "none";
     } catch (error) {
-        console.error("Failed to execute exclude script:", error);
+        console.error("Failed to execute Xposed script:", error);
+        showPrompt("Please check your Internet connection", false); 
+        noConnection.style.display = "flex";
     }
 }
 
-// Function to read the more exclude list and uncheck corresponding apps
+// Function to read the xposed list and uncheck corresponding apps
 async function deselectXposedApps() {
     try {
         const result = await execCommand(`cat ${basePath}exclude-list`);
@@ -159,6 +165,7 @@ function showPrompt(message, isSuccess = true) {
     }, 500);
 }
 
+// Function to toggle menu option
 function setupMenuToggle() {
     const menuButton = document.getElementById('menu-button');
     const menuIcon = menuButton.querySelector('.menu-icon');
@@ -296,11 +303,11 @@ document.getElementById("save").addEventListener("click", async () => {
             showPrompt("Config and target.txt updated");
         } catch (error) {
             console.error("Failed to update target list:", error);
-            showPrompt("File not found, please reinstall module!", false);
+            showPrompt("Config saved, but failed to update target list", false);
         }
     } catch (error) {
         console.error("Failed to update EXCLUDE file:", error);
-        showPrompt("File not found, please reinstall module!", false);
+        showPrompt("Failed to save config", false);
     }
     await readExcludeFile();
     await refreshAppList();
@@ -312,9 +319,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     document.getElementById("refresh").addEventListener("click", refreshAppList);
     document.getElementById("select-all").addEventListener("click", selectAllApps);
     document.getElementById("deselect-all").addEventListener("click", deselectAllApps);
-    document.getElementById("deselect-xposed").addEventListener("click", deselectXposedApps);
-    await runXposedScript();
+    document.getElementById("deselect-xposed").addEventListener("click", deselectXposedApps);   
     await fetchAppList();
+    runXposedScript();
     loadingIndicator.style.display = "none";
 });
 
@@ -335,17 +342,27 @@ window.addEventListener('scroll', () => {
     lastScrollY = window.scrollY;
 });
 
-// Show help overlay and disable scrolling
+// Show help overlay
 helpButton.addEventListener("click", () => {
+    helpOverlay.classList.remove("hide");
     helpOverlay.style.display = "flex";
+    requestAnimationFrame(() => {
+        helpOverlay.classList.add("show");
+    });
     document.body.classList.add("no-scroll");
 });
 
-// Hide the help overlay and re-enable scrolling, Close button and blank
+// Hide help overlay
 const hideHelpOverlay = () => {
-    helpOverlay.style.display = "none";
+    helpOverlay.classList.remove("show");
+    helpOverlay.classList.add("hide");
     document.body.classList.remove("no-scroll");
+    setTimeout(() => {
+        helpOverlay.style.display = "none";
+    }, 200);
 };
+
+// Hide when clicking on close button or outside of the overlay content
 closeHelp.addEventListener("click", hideHelpOverlay);
 helpOverlay.addEventListener("click", (event) => {
     if (event.target === helpOverlay) {

module/webroot/styles.css

@@ -25,6 +25,19 @@ body {
     padding-left: 10px;
 }
 
+.no-connection {
+    display: none;
+    align-items: center;
+    color: #7E7E7E;
+}
+
+.no-connection .wifi-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+    filter: invert(0.6) sepia(0) saturate(0) hue-rotate(180deg) brightness(0.8) contrast(1);
+}
+
 .help-button {
     margin-right: auto;
     padding: 0 10px;
@@ -46,6 +59,17 @@ body {
     z-index: 2000;
     justify-content: center;
     align-items: center;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.help-overlay.show {
+    display: flex;
+    opacity: 1;
+}
+
+.help-overlay.hide {
+    opacity: 0;
 }
 
 .help-menu {
@@ -203,6 +227,7 @@ body {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     display: none;
     position: absolute;
+    padding: 5px;
     top: 110%;
     right: 0;
     transform: translateX(120%);
@@ -228,7 +253,7 @@ body {
 
 .menu-options li {
     cursor: default;
-    padding: 15px 18px;
+    padding: 15px 12px;
     text-align: left;
 }
 

module/webroot/wifi-slash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.92,5.51h0L3.71,2.29A1,1,0,0,0,2.29,3.71L4.56,6A15.21,15.21,0,0,0,1.4,8.39a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.29A13.07,13.07,0,0,1,6.05,7.46L7.54,9a10.78,10.78,0,0,0-3.32,2.27,1,1,0,1,0,1.42,1.4,8.8,8.8,0,0,1,3.45-2.12l1.62,1.61a7.07,7.07,0,0,0-3.66,1.94,1,1,0,1,0,1.42,1.4A5,5,0,0,1,12,14a4.13,4.13,0,0,1,.63.05l7.66,7.66a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42ZM12,16a3,3,0,1,0,3,3A3,3,0,0,0,12,16Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,12,20ZM22.61,8.39A15,15,0,0,0,10.29,4.1a1,1,0,1,0,.22,2A13.07,13.07,0,0,1,21.2,9.81a1,1,0,0,0,1.41-1.42Zm-4.25,4.24a1,1,0,0,0,1.42-1.4,10.75,10.75,0,0,0-4.84-2.82,1,1,0,1,0-.52,1.92A8.94,8.94,0,0,1,18.36,12.63Z"/></svg>