Simplify logic, add Material Design ripple effect

2025-09-06 06:37:09 +00:00 · 2024-12-26 20:52:01 +08:00
parent 10c02a6924
commit 1861e43a81
21 changed files with 190 additions and 184 deletions
--- a/module/common/get_extra.sh
+++ b/module/common/get_extra.sh
@@ -42,19 +42,17 @@ get_unnecessary() {
 }

 check_update() {
-    if [ -d "$MODPATH/update" ]; then
-        JSON=$(download "https://raw.githubusercontent.com/KOWX712/Tricky-Addon-Update-Target-List/main/update.json") || exit 1
-        REMOTE_VERSION=$(echo "$JSON" | grep -o '"versionCode": *[0-9]*' | awk -F: '{print $2}' | tr -d ' ')
-        LOCAL_VERSION=$(grep -o 'versionCode=[0-9]*' "$MODPATH/update/module.prop" | awk -F= '{print $2}')
-        if [ "$REMOTE_VERSION" -gt "$LOCAL_VERSION" ]; then
-            if [ "$MODPATH" = "/data/adb/modules/.TA_utl/common" ]; then
-                [ -d "/data/adb/modules/TA_utl" ] && rm -rf "/data/adb/modules/TA_utl"
-                cp -rf "$MODPATH/update" "/data/adb/modules/TA_utl"
-            else
-                cp -f "$MODPATH/update/module.prop" "/data/adb/modules/TA_utl/module.prop"
-            fi
-        echo "update"
+    JSON=$(download "https://raw.githubusercontent.com/KOWX712/Tricky-Addon-Update-Target-List/main/update.json") || exit 1
+    REMOTE_VERSION=$(echo "$JSON" | grep -o '"versionCode": *[0-9]*' | awk -F: '{print $2}' | tr -d ' ')
+    LOCAL_VERSION=$(grep -o 'versionCode=[0-9]*' "$MODPATH/update/module.prop" | awk -F= '{print $2}')
+    if [ "$REMOTE_VERSION" -gt "$LOCAL_VERSION" ]; then
+        if [ "$MODPATH" = "/data/adb/modules/.TA_utl/common" ]; then
+            [ -d "/data/adb/modules/TA_utl" ] && rm -rf "/data/adb/modules/TA_utl"
+            cp -rf "$MODPATH/update" "/data/adb/modules/TA_utl"
+        else
+            cp -f "$MODPATH/update/module.prop" "/data/adb/modules/TA_utl/module.prop"
        fi
+        echo "update"
    fi
 }

--- a/module/webui/index.html
+++ b/module/webui/index.html
@@ -5,21 +5,24 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="title">TrickyAddon</title>
+    <link rel="stylesheet" type="text/css" href="/mmrl/insets.css" />
    <link rel="stylesheet" href="styles/global.css" type="text/css">
    <link rel="stylesheet" href="styles/about.css" type="text/css">
    <link rel="stylesheet" href="styles/applist.css" type="text/css">
    <link rel="stylesheet" href="styles/boot-hash.css" type="text/css">
    <link rel="stylesheet" href="styles/header.css" type="text/css">
    <link rel="stylesheet" href="styles/search_menu.css" type="text/css">
-    <link rel="stylesheet" type="text/css" href="/mmrl/insets.css" />
    <script type="module" crossorigin src="scripts/main.js"></script>
+    <script type="module" crossorigin src="scripts/about.js"></script>
+    <script type="module" crossorigin src="scripts/help.js"></script>
+    <script type="module" crossorigin src="scripts/vbmeta-digest.js"></script>
 </head>

 <body>
    <!-- Header -->
    <div class="header-block"></div>
    <div class="header">
-        <div id="title" data-i18n="header.title"></div>
+        <div id="title" data-i18n="header.title"></div><span id="module-version"></span>
        <button id="help-button" class="help-button">
            <svg xmlns="http://www.w3.org/2000/svg" height="21px" viewBox="0 -1060 960 990" width="21px" fill="#6E6E6E"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
        </button>
@@ -59,7 +62,7 @@
        </div>
        <div class="menu">
            <input type="checkbox" id="menu-toggle" class="menu-toggle">
-            <label for="menu-toggle" id="menu-button">
+            <label for="menu-toggle" class="menu-button" id="menu-button">
                <i class="menu-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -1060 960 960" width="24px"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
                </i>
@@ -89,7 +92,7 @@
    </div>
    <template id="app-template">
        <div class="card-box">
-            <div class="card">
+            <div class="card" id="card">
                <div class="content" data-package="">
                    <p class="name"></p>
                    <input type="checkbox" class="checkbox">
--- a/module/webui/locales/en-US.json
+++ b/module/webui/locales/en-US.json
@@ -1,7 +1,7 @@
 {
    "language": "English",
    "header": {
-        "title": "Tricky Addon - Update Target List"
+        "title": "Tricky Addon"
    },
    "help": {
        "help_instructions": "Instructions",
--- a/module/webui/locales/es-ES.json
+++ b/module/webui/locales/es-ES.json
@@ -1,7 +1,7 @@
 {
    "language": "Español",
    "header": {
-        "title": "Tricky Addon - Update Target List"
+        "title": "Tricky Addon"
    },
    "help": {
        "help_instructions": "Instrucciones",
--- a/module/webui/locales/ja-JP.json
+++ b/module/webui/locales/ja-JP.json
@@ -1,7 +1,7 @@
 {
    "language": "日本語",
    "header": {
-        "title": "Tricky Addon - Update Target List"
+        "title": "Tricky Addon"
    },
    "help": {
        "help_instructions": "使い方",
--- a/module/webui/locales/ru-RU.json
+++ b/module/webui/locales/ru-RU.json
@@ -1,7 +1,7 @@
 {
    "language": "Русский",
    "header": {
-        "title": "Tricky Addon - Обновить список целей"
+        "title": "Tricky Addon"
    },
    "help": {
        "help_instructions": "Инструкции",
--- a/module/webui/locales/tl-PH.json
+++ b/module/webui/locales/tl-PH.json
@@ -1,7 +1,7 @@
 {
    "language": "Tagalog",
    "header": {
-        "title": "Tricky Addon - I-update ang Target List"
+        "title": "Tricky Addon"
    },
    "help": {
        "help_instructions": "Mga Tagubilin",
--- a/module/webui/locales/zh-CN.json
+++ b/module/webui/locales/zh-CN.json
@@ -1,7 +1,7 @@
 {
    "language": "中文（简体）",
    "header": {
-        "title": "TS插件 - 更新目标列表"
+        "title": "TS插件"
    },
    "help": {
        "help_instructions": "使用指南",
--- a/module/webui/locales/zh-TW.json
+++ b/module/webui/locales/zh-TW.json
@@ -1,7 +1,7 @@
 {
    "language": "中文（繁体）",
    "header": {
-        "title": "TS插件 - 更新目標列表"
+        "title": "TS插件"
    },
    "help": {
        "help_instructions": "使用指南",
--- a/module/webui/scripts/about.js
+++ b/module/webui/scripts/about.js
@@ -4,7 +4,7 @@ const telegramLink = document.getElementById('telegram');
 const githubLink = document.getElementById('github');

 // Function to show about overlay
-export function aboutMenu() {
+document.getElementById("about").addEventListener("click", () => {
    const aboutOverlay = document.getElementById('about-overlay');
    const aboutMenu = document.getElementById('about-menu');
    const closeAbout = document.getElementById('close-about');
@@ -35,7 +35,7 @@ export function aboutMenu() {
        }
    });
    menu.addEventListener('click', (event) => event.stopPropagation());
-}
+});

 // Event listener for link redirect
 telegramLink.addEventListener('click', async () => {
--- a/module/webui/scripts/help.js
+++ b/module/webui/scripts/help.js
@@ -3,28 +3,29 @@ const helpOverlay = document.getElementById('help-overlay');
 const closeHelp = document.getElementById('close-help');
 const helpList = document.getElementById('help-list');

-// Function to setup the help menu
-export function setupHelpOverlay() {
-    helpButton.addEventListener("click", () => {
-        helpOverlay.classList.remove("hide");
-        helpOverlay.style.display = "flex";
-        requestAnimationFrame(() => {
-            helpOverlay.classList.add("show");
-        });
-        document.body.classList.add("no-scroll");
+// Open help menu
+helpButton.addEventListener("click", () => {
+    helpOverlay.classList.remove("hide");
+    helpOverlay.style.display = "flex";
+    requestAnimationFrame(() => {
+        helpOverlay.classList.add("show");
    });
-    const hideHelpOverlay = () => {
-        helpOverlay.classList.remove("show");
-        helpOverlay.classList.add("hide");
-        document.body.classList.remove("no-scroll");
-        setTimeout(() => {
-            helpOverlay.style.display = "none";
-        }, 200);
-    };
-    closeHelp.addEventListener("click", hideHelpOverlay);
-    helpOverlay.addEventListener("click", (event) => {
-        if (event.target === helpOverlay) {
-            hideHelpOverlay();
-        }
-    });
-}
+    document.body.classList.add("no-scroll");
+});
+
+const hideHelpOverlay = () => {
+    helpOverlay.classList.remove("show");
+    helpOverlay.classList.add("hide");
+    document.body.classList.remove("no-scroll");
+    setTimeout(() => {
+        helpOverlay.style.display = "none";
+    }, 200);
+};
+
+// Close help menu
+closeHelp.addEventListener("click", hideHelpOverlay);
+helpOverlay.addEventListener("click", (event) => {
+    if (event.target === helpOverlay) {
+        hideHelpOverlay();
+    }
+});
--- a/module/webui/scripts/main.js
+++ b/module/webui/scripts/main.js
@@ -1,18 +1,13 @@
-import { aboutMenu } from './about.js';
 import { appListContainer, updateCard, fetchAppList } from './applist.js';
-import { setupHelpOverlay } from './help.js';
 import { initializeAvailableLanguages, detectUserLanguage, loadTranslations, setupLanguageMenu, translations } from './language.js';
-import { selectAllApps, deselectAllApps, selectDenylistApps, deselectUnnecessaryApps, aospkb, extrakb } from './menu_option.js';
+import { aospkb } from './menu_option.js';
 import { searchMenuContainer, searchInput, clearBtn, setupMenuToggle } from './search_menu.js';
-import { setBootHash } from './vbmeta-digest.js';
+import { updateCheck } from './update.js';

 // Header Elements
 const headerBlock = document.querySelector('.header-block');
 const title = document.querySelector('.header');
-const noConnection = document.querySelector('.no-connection');
-
-// Menu Elements
-const selectDenylistElement = document.getElementById('select-denylist');
+export const noConnection = document.querySelector('.no-connection');

 // Loading, Save and Prompt Elements
 const loadingIndicator = document.querySelector('.loading');
@@ -23,11 +18,24 @@ export const basePath = "set-path";
 export const appsWithExclamation = [];
 export const appsWithQuestion = [];
 const ADDITIONAL_APPS = [ "com.google.android.gms", "io.github.vvb2060.keyattestation", "io.github.vvb2060.mahoshojo", "icu.nullptr.nativetest" ];
+const rippleClasses = ['.language-option', '.menu-button', '.menu-options li', '.search-card', '.card', '.update-card', '.link-icon', '.floating-btn', '.uninstall-container'];

 // Variables
 let e = 0;
 let isRefreshing = false;

+// Function to load the version from module.prop
+async function getModuleVersion() {
+    const moduleVersion = document.getElementById('module-version');
+    try {
+        const version = await execCommand(`grep '^version=' ${basePath}common/update/module.prop | cut -d'=' -f2`);
+        moduleVersion.textContent = version;
+    } catch (error) {
+        console.error("Failed to read version from module.prop:", error);
+        updateVersion("Error reading version from module.prop");
+    }
+}
+
 // Function to refresh app list
 async function refreshAppList() {
    isRefreshing = true;
@@ -43,48 +51,29 @@ async function refreshAppList() {
    window.scrollTo(0, 0);
    if (noConnection.style.display === "flex") {
        try {
-            await updateCheck();
+            updateCheck();
            await execCommand(`[ -f ${basePath}common/tmp/exclude-list ] && rm -f "${basePath}common/tmp/exclude-list"`);
        } catch (error) {
            console.error("Error occurred:", error);
        }
    }
    await fetchAppList();
+    applyRippleEffect();
    loadingIndicator.style.display = 'none';
    document.querySelector('.uninstall-container').classList.remove('hidden-uninstall');
    isRefreshing = false;
 }

-// Function to run the update check
-async function updateCheck() {
-    try {
-        const scriptPath = `sh ${basePath}common/get_extra.sh --update`;
-        const output = await execCommand(scriptPath);
-        console.log("update script executed successfully.");
-        noConnection.style.display = "none";
-        if (output.includes("update")) {
-            console.log("Update detected from extra script.");
-            showPrompt("prompt.new_update");
-            updateCard.style.display = "flex";
-        } else {
-            console.log("No update detected from extra script.");
-        }
-    } catch (error) {
-        console.error("Failed to execute update script:", error);
-        showPrompt("prompt.no_internet", false);
-        noConnection.style.display = "flex";
-    }
-}
-
 // Function to check if Magisk
 async function checkMagisk() {
+    const selectDenylistElement = document.getElementById('select-denylist');
    try {
        const magiskEnv = await execCommand(`command -v magisk >/dev/null 2>&1 && echo "OK"`);
        if (magiskEnv.trim() === "OK") {
            console.log("Denylist conditions met, displaying element.");
            selectDenylistElement.style.display = "flex";
        } else {
-            console.log("ksud or apd detected, leaving denylist element hidden.");
+            console.log("not running on Magisk, leaving denylist element hidden.");
        }
    } catch (error) {
        console.error("Error while checking denylist conditions:", error);
@@ -169,6 +158,35 @@ function adjustHeaderForMMRL() {
    }
 }

+// Function to apply ripple effect
+function applyRippleEffect() {
+    rippleClasses.forEach(selector => {
+        document.querySelectorAll(selector).forEach(element => {
+            element.addEventListener("click", function(event) {
+                const ripple = document.createElement("span");
+                ripple.classList.add("ripple");
+
+                const rect = element.getBoundingClientRect();
+                const width = rect.width;
+                const size = Math.max(rect.width, rect.height);
+                const x = event.clientX - rect.left - size / 2;
+                const y = event.clientY - rect.top - size / 2;
+
+                let duration = 0.3 + (width / 800) * 0.5;
+                duration = Math.min(0.8, Math.max(0.2, duration));
+                ripple.style.width = ripple.style.height = `${size}px`;
+                ripple.style.left = `${x}px`;
+                ripple.style.top = `${y}px`;
+                ripple.style.animationDuration = `${duration}s`;
+                element.appendChild(ripple);
+                ripple.addEventListener("animationend", () => {
+                    ripple.remove();
+                });
+            });
+        });
+    });
+}
+
 // Scroll event
 let lastScrollY = window.scrollY;
 const scrollThreshold = 40;
@@ -191,25 +209,19 @@ window.addEventListener('scroll', () => {
 // Initial load
 document.addEventListener('DOMContentLoaded', async () => {
    adjustHeaderForMMRL();
+    getModuleVersion();
    await initializeAvailableLanguages();
    const userLang = detectUserLanguage();
    await loadTranslations(userLang);
    setupMenuToggle();
    setupLanguageMenu();
-    setupHelpOverlay();
-    document.getElementById("refresh").addEventListener("click", refreshAppList);
-    document.getElementById("select-all").addEventListener("click", selectAllApps);
-    document.getElementById("deselect-all").addEventListener("click", deselectAllApps);
-    document.getElementById("select-denylist").addEventListener("click", selectDenylistApps);
-    document.getElementById("deselect-unnecessary").addEventListener("click", deselectUnnecessaryApps);
-    document.getElementById("aospkb").addEventListener("click", aospkb);
-    document.getElementById("extrakb").addEventListener("click", extrakb);
-    document.getElementById("boot-hash").addEventListener("click", setBootHash);
-    document.getElementById("about").addEventListener("click", aboutMenu);
    await fetchAppList();
+    applyRippleEffect();
    checkMagisk();
    updateCheck();
    loadingIndicator.style.display = "none";
+    document.getElementById("refresh").addEventListener("click", refreshAppList);
+    document.getElementById("aospkb").addEventListener("click", aospkb);
    document.querySelector('.uninstall-container').classList.remove('hidden-uninstall');
 });

@@ -242,4 +254,4 @@ export async function execCommand(command) {
            reject(error);
        }
    });
-}
+}
--- a/module/webui/scripts/menu_option.js
+++ b/module/webui/scripts/menu_option.js
@@ -10,22 +10,18 @@ function toggleCheckboxes(shouldCheck) {
 }

 // Function to select all visible apps
-export function selectAllApps() {
-    toggleCheckboxes(true);
-}
+document.getElementById("select-all").addEventListener("click", () => toggleCheckboxes(true));

 // Function to deselect all visible apps
-export function deselectAllApps() {
-    toggleCheckboxes(false);
-}
+document.getElementById("deselect-all").addEventListener("click", () => toggleCheckboxes(false));

 // Function to read the denylist and check corresponding apps
-export async function selectDenylistApps() {
+document.getElementById("select-denylist").addEventListener("click", async () => {
    try {
        const result = await execCommand(`magisk --denylist ls 2>/dev/null | awk -F'|' '{print $1}' | grep -v "isolated" | sort | uniq`);
        const denylistApps = result.split("\n").map(app => app.trim()).filter(Boolean);
        const apps = document.querySelectorAll(".card");
-        await deselectAllApps();
+        toggleCheckboxes(false);
        apps.forEach(app => {
            const contentElement = app.querySelector(".content");
            const packageName = contentElement.getAttribute("data-package");
@@ -38,10 +34,10 @@ export async function selectDenylistApps() {
    } catch (error) {
        console.error("Failed to select Denylist apps:", error);
    }
-}
+});

 // Function to read the exclude list and uncheck corresponding apps
-export async function deselectUnnecessaryApps() {
+document.getElementById("deselect-unnecessary").addEventListener("click", async () => {
    try {
        const fileCheck = await execCommand(`test -f ${basePath}common/tmp/exclude-list && echo "exists" || echo "not found"`);
        if (fileCheck.trim() === "not found") {
@@ -71,7 +67,7 @@ export async function deselectUnnecessaryApps() {
    } catch (error) {
        console.error("Failed to deselect unnecessary apps:", error);
    }
-}
+});

 // Function to replace aosp kb
 export async function aospkb() {
@@ -88,7 +84,7 @@ export async function aospkb() {
 }

 // Function to replace valid kb
-export async function extrakb() {
+document.getElementById("extrakb").addEventListener("click", async () => {
    setTimeout(async () => {
        await execCommand(`sh ${basePath}common/get_extra.sh --kb`);
    }, 100);
@@ -108,4 +104,4 @@ export async function extrakb() {
        await aospkb();
        showPrompt("prompt.no_valid_fallback", false);
    }
-}
+});
--- a/module/webui/scripts/search_menu.js
+++ b/module/webui/scripts/search_menu.js
@@ -44,10 +44,7 @@ clearBtn.addEventListener("click", () => {

 // Function to toggle menu option
 export function setupMenuToggle() {
-    let menuOpen = false;
-    let menuAnimating = false;
    menuButton.addEventListener('click', (event) => {
-        if (menuAnimating) return;
        event.stopPropagation();
        if (menuOptions.classList.contains('visible')) {
            closeMenu();
@@ -73,31 +70,15 @@ export function setupMenuToggle() {
        });
    });
    function openMenu() {
-        menuAnimating = true;
-        menuOptions.style.display = 'block';
        setTimeout(() => {
-            menuOptions.classList.remove('hidden');
            menuOptions.classList.add('visible');
            menuIcon.classList.add('menu-open');
-            menuIcon.classList.remove('menu-closed');
            menuOverlay.style.display = 'flex';
-            menuOpen = true;
-            menuAnimating = false;
        }, 10);
    }
    function closeMenu() {
-        if (menuOptions.classList.contains('visible')) {
-            menuAnimating = true;
-            menuOptions.classList.remove('visible');
-            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;
-                menuAnimating = false;
-            }, 200);
-        }
+        menuOptions.classList.remove('visible');
+        menuIcon.classList.remove('menu-open');
+        menuOverlay.style.display = 'none';
    }
 }
--- a/module/webui/scripts/update.js
+++ b/module/webui/scripts/update.js
@@ -0,0 +1,22 @@
+import { basePath, execCommand, showPrompt, noConnection } from './main.js';
+import { updateCard } from './applist.js';
+
+// Function to run the update check
+export async function updateCheck() {
+    try {
+        const output = await execCommand(`sh ${basePath}common/get_extra.sh --update`);
+        console.log("update script executed successfully.");
+        noConnection.style.display = "none";
+        if (output.includes("update")) {
+            console.log("Update detected from extra script.");
+            showPrompt("prompt.new_update");
+            updateCard.style.display = "flex";
+        } else {
+            console.log("No update detected from extra script.");
+        }
+    } catch (error) {
+        console.error("Failed to execute update script:", error);
+        showPrompt("prompt.no_internet", false);
+        noConnection.style.display = "flex";
+    }
+}
--- a/module/webui/scripts/vbmeta-digest.js
+++ b/module/webui/scripts/vbmeta-digest.js
@@ -6,7 +6,7 @@ const inputBox = document.getElementById('boot-hash-input');
 const saveButton = document.getElementById('boot-hash-save-button');

 // Function to handle Verified Boot Hash
-export async function setBootHash() {
+document.getElementById("boot-hash").addEventListener("click", async () => {
    const showCard = () => {
        bootHashOverlay.style.display = "flex";
        card.style.display = "flex";
@@ -51,4 +51,4 @@ export async function setBootHash() {
    bootHashOverlay.addEventListener("click", (event) => {
        if (event.target === bootHashOverlay) closeCard();
    });
-}
+});
--- a/module/webui/styles/about.css
+++ b/module/webui/styles/about.css
@@ -79,6 +79,8 @@
    box-sizing: border-box;
    margin-bottom: 5px;
    transition: background-color 0.2s ease;
+    position: relative;
+    overflow: hidden;
 }

 .link-icon svg {
@@ -95,10 +97,6 @@
    fill: #fff;
 }

-#telegram:active {
-    background-color: #1A78B3;
-}
-
 #github {
    font-size: 18px;
    padding: 3px 10px;
@@ -107,11 +105,6 @@
    fill: #fff;
 }

-#github:active {
-    background-color: #4D4D4D;
-}
-
-
 #link-text {
    font-size: 17px;
    font-weight: bold;
--- a/module/webui/styles/applist.css
+++ b/module/webui/styles/applist.css
@@ -23,7 +23,8 @@
    padding: 12px;
    width: calc(100% - 30px);
    max-width: 900px;
-    transition: background-color 0.2s ease;
+    position: relative;
+    overflow: hidden;
 }

 #update-available {
@@ -39,7 +40,7 @@
 }

 .card {
-    background-color: white;
+    background-color: #fff;
    border: none;
    border-radius: 12px;
    margin: 0 auto;
@@ -49,11 +50,8 @@
    width: calc(100% - 30px);
    max-width: 900px;
    transition: background-color 0.2s ease;
-}
-
-.card:active,
-.update-card:active {
-    background-color: #C8C8C8;
+    position: relative;
+    overflow: hidden;
 }

 .content {
@@ -84,9 +82,4 @@
    .update-card {
        background-color: #4D4D4D;
    }
-
-    .card:active,
-    .update-card:active {
-        background-color: #616161;
-    }
 }
--- a/module/webui/styles/global.css
+++ b/module/webui/styles/global.css
@@ -32,10 +32,7 @@ body {
    font-weight: bold;
    transition: transform 0.3s ease-in-out, background-color 0.2s ease;
    border-radius: 50px 50px;
-}
-
-.floating-btn:active {
-    background-color: #003d80;
+    overflow: hidden;
 }

 .prompt {
@@ -132,11 +129,7 @@ body {
    border-radius: 8px;
    background-color: #CE0000;
    white-space: nowrap;
-    transition: background-color 0.2s ease;
-}
-
-.uninstall-container:active {
-    background-color: #830000;
+    overflow: hidden;
 }

 .uninstall-container i {
@@ -153,9 +146,30 @@ body {
    display: none;
 }

+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple-animation ease-out;
+    pointer-events: none;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+@keyframes ripple-animation {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #fff;
    }
+
+    .ripple {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
 }
--- a/module/webui/styles/header.css
+++ b/module/webui/styles/header.css
@@ -28,6 +28,7 @@
    height: var(--window-inset-top);
 }

+#module-version,
 #title {
    padding-left: 5px;
    font-size: 16.5px;
@@ -94,16 +95,14 @@
    white-space: nowrap;
    border-bottom: 1px solid #ccc;
    transition: background-color 0.2s ease;
+    position: relative;
+    overflow: hidden;
 }

 .language-option:last-child {
    border-bottom: none;
 }

-.language-option:active {
-    background-color: #C8C8C8;
-}
-
 .language-overlay {
    position: fixed;
    top: 0;
@@ -229,8 +228,4 @@
    .language-option {
        border-bottom: 1px solid #6E6E6E;
    }
-
-    .language-option:active {
-        background-color: #616161;
-    }
 }
--- a/module/webui/styles/search_menu.css
+++ b/module/webui/styles/search_menu.css
@@ -24,6 +24,7 @@
    height: calc(100% - 2px);
    width: calc(100% - 60px);
    position: absolute;
+    overflow: hidden;
 }

 .search-icon {
@@ -67,7 +68,7 @@
    display: none;
 }

-#menu-button {
+.menu-button {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 50%;
@@ -75,12 +76,16 @@
    width: 48px;
    display: flex;
    justify-content: center;
+    z-index: 200;
    align-items: center;
+    position: relative;
+    overflow: hidden;
 }

 .menu-icon {
    display: inline-block;
    fill: #000;
+    transform: rotate(0deg);
    transition: transform 0.2s ease;
 }

@@ -88,27 +93,25 @@
    transform: rotate(90deg);
 }

-.menu-icon.menu-closed {
-    transform: rotate(0deg);
-}
-
 .menu-options {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    display: none;
+    display: flex;
    position: absolute;
    padding: 5px 12px;
    top: 110%;
    right: 0;
    z-index: 1200;
-    transform: translateX(120%);
-    transition: transform 0.2s ease;
    width: auto;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(120%);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
 }

 #select-denylist {
@@ -117,13 +120,11 @@

 .menu-options.visible {
    display: block;
+    opacity: 1;
+    visibility: visible;
    transform: translateX(0);
 }

-.menu-options.hidden {
-    transform: translateX(140%);
-}
-
 .menu-options ul {
    list-style: none;
    margin: 0;
@@ -135,11 +136,8 @@
    padding: 12px 4px;
    text-align: left;
    border-bottom: 1px solid #ccc;
-    transition: background-color 0.2s ease;
-}
-
-.menu-options li:active {
-    background-color: #C8C8C8;
+    position: relative;
+    overflow: hidden;
 }

 .menu-options li:last-child {
@@ -153,7 +151,7 @@
    width: 100vw;
    height: 100vh;
    background-color: none;
-    z-index: 1000;
+    z-index: 100;
    display: none;
 }