UI adjust + optimize

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

module/service.sh

@@ -38,23 +38,29 @@ ln -s "$MODPATH/webui" "$TS/webroot"
 # Optimization
 OUTPUT_APP="$MODPATH/common/tmp/applist"
 OUTPUT_SKIP="$MODPATH/common/tmp/skiplist"
+OUTPUT_TMP="$MODPATH/common/tmp/tmp_applist"
 
 until [ "$(getprop sys.boot_completed)" = "1" ]; do
     sleep 1
 done
 
 mkdir -p "$MODPATH/common/tmp"
+pm list packages -3 2>/dev/null | awk -F: '{print $2}' > "$OUTPUT_TMP"
+pm path com.google.android.gms >/dev/null 2>&1 && echo "com.google.android.gms" >> "$OUTPUT_TMP"
+
 echo "# This file is generated from service.sh to speed up load time" > "$OUTPUT_APP"
 echo "# This file is generated from service.sh to speed up load time" > "$OUTPUT_SKIP"
-pm list packages -3 </dev/null 2>&1 | cat | awk -F: '{print $2}' | while read -r PACKAGE; do
-    APK_PATH=$(pm path "$PACKAGE" </dev/null 2>&1 | cat | grep "base.apk" | awk -F: '{print $2}' | tr -d '\r')
+cat "$OUTPUT_TMP" | while read -r PACKAGE; do
+    APK_PATH=$(pm path "$PACKAGE" 2>/dev/null | grep "base.apk" | awk -F: '{print $2}' | tr -d '\r')
     if [ -n "$APK_PATH" ]; then
-        APP_NAME=$(aapt dump badging "$APK_PATH" </dev/null 2>&1 | cat | grep "application-label:" | sed "s/application-label://g; s/'//g")
+        APP_NAME=$(aapt dump badging "$APK_PATH" 2>/dev/null | grep "application-label:" | sed "s/application-label://g; s/'//g")
         echo "app-name: $APP_NAME, package-name: $PACKAGE" >> "$OUTPUT_APP"
     else
         echo "app-name: Unknown App package-name: $PACKAGE" >> "$OUTPUT_APP"
     fi
-    if ! aapt dump xmltree "$APK_PATH" AndroidManifest.xml </dev/null 2>&1 | cat | grep -qE "xposed.category|xposeddescription"; then
+    if ! aapt dump xmltree "$APK_PATH" AndroidManifest.xml 2>/dev/null | grep -qE "xposed.category|xposeddescription"; then
         echo "$PACKAGE" >> "$OUTPUT_SKIP"
     fi
 done
+
+rm -f "$OUTPUT_TMP"

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 {