UI adjust + optimize

- adjust about page appearance
- change mode menu shape to round
- enlarge on selected mode
- improve color recognition algorithm
- code optimize

module/webui/scripts/applist.js

@@ -37,7 +37,7 @@ export async function fetchAppList() {
             console.warn("Applist file not found or could not be loaded. Skipping applist lookup.");
         }
 
-        const result = await execCommand('pm list packages -3; pm path com.google.android.gms >/dev/null 2>&1 && echo "package:com.google.android.gms"');
+        const result = await execCommand('pm list packages -3; pm path com.google.android.gms >/dev/null 2>&1 && echo "package:com.google.android.gms" || true');
         const appEntries = result
             .split("\n")
             .map(line => {
@@ -116,7 +116,7 @@ export async function fetchAppList() {
     }
     const checkboxes = appListContainer.querySelectorAll(".checkbox");
     setupRadioButtonListeners();
-    setupCardHoldListener();
+    setupModeMenu();
     updateCheckboxColor();
 }
 
@@ -192,7 +192,7 @@ function setupRadioButtonListeners() {
 }
 
 // Hold to open menu
-function setupCardHoldListener() {
+function setupModeMenu() {
     let holdTimeout;
     function showMode(card) {
         const modeElement = card.querySelector(".mode");
@@ -229,7 +229,6 @@ function setupCardHoldListener() {
         card.addEventListener("pointercancel", () => clearTimeout(holdTimeout));
     });
 
-    // Close on click/scroll
     document.addEventListener("click", (event) => {
         if (!event.target.closest(".mode") || modeOverlay.contains(event.target)) {
             hideAllModes();

module/webui/scripts/main.js

@@ -219,7 +219,7 @@ function applyRippleEffect() {
                     const rgb = color.match(/\d+/g);
                     if (!rgb) return false;
                     const [r, g, b] = rgb.map(Number);
-                    return (r * 0.299 + g * 0.587 + b * 0.114) < 128; // Luma formula
+                    return (r * 0.299 + g * 0.587 + b * 0.114) < 96; // Luma formula
                 };
                 ripple.style.backgroundColor = isDarkColor(bgColor) ? "rgba(255, 255, 255, 0.2)" : "";
 

module/webui/styles/about.css

@@ -67,7 +67,14 @@
 }
 
 #disclaimer {
-    font-style: italic;
+    font-family: serif;
+    width: calc(100% - 80px);
+    padding: 8px 10px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    border-radius: 10px;
+    background-color: #F5F5F5;
 }
 
 #acknowledgment {
@@ -120,4 +127,8 @@
     .about-menu {
         background-color: #343434;
     }
+
+    #disclaimer {
+        background-color: #6E6E6E;
+    }
 }

module/webui/styles/applist.css

@@ -65,7 +65,7 @@
     display: none;
     flex-direction: row;
     gap: 10px;
-    padding: 10px;
+    padding: 10px 12px;
     position: absolute;
     left: 0;
     right: 0;
@@ -74,7 +74,7 @@
     background-color: #B1B1B1;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     border: 1px solid #ccc;
-    border-radius: 12px;
+    border-radius: 50px 50px;
     opacity: 0;
     transform: scale(0);
     transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
@@ -113,11 +113,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 35px;
-    height: 35px;
-    border-radius: 7px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50px 50px;
     box-sizing: border-box;
-    transition: border-color 0.2s ease;
+    transition: all 0.2s ease;
     border: 3px solid transparent;
     position: relative;
     overflow: hidden;
@@ -132,10 +132,11 @@
 }
 
 #generate-indicator {
-    background-color: #51FF00;
+    background-color: #36DB2B;
 }
 
 .mode-input[type="radio"]:checked ~ .mode-icon .status-indicator {
+    transform: scale(1.1);
     border-color: #fff;
 }
 
@@ -192,8 +193,8 @@
 }
 
 .checkbox-checked-generate:checked + .custom-checkbox {
-    border-color: #51FF00;
-    background-color: #51FF00;
+    border-color: #36DB2B;
+    background-color: #36DB2B;
 }
 
 .checkbox-checked-hack:checked + .custom-checkbox {