opt: add scale animation to overlay content, fix text alignment issue in add system app overlay

module/webui/index.html

@@ -145,7 +145,7 @@
 
     <!-- Help Overlay -->
     <div id="help-overlay" class="help-overlay overlay">
-        <div class="help-menu">
+        <div class="help-menu overlay-content">
             <button id="close-help" class="close-btn">&#x2715;</button>
             <div class="help-content">
                 <div class="help-content-header" data-i18n="help.help_instructions"></div>
@@ -195,7 +195,7 @@
 
     <!-- BootHash Input Overlay -->
     <div id="boot-hash-overlay" class="boot-hash-overlay overlay">
-        <div id="boot-hash-card" class="boot-hash-card">
+        <div id="boot-hash-card" class="boot-hash-card overlay-content">
             <div class="boot-hash-title" data-i18n="boot_hash.title"></div>
             <textarea id="boot-hash-input" class="boot-hash-input" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash.input_placeholder" oninput="window.trimInput(this)"></textarea>
             <button id="boot-hash-save-button" class="boot-hash-save-button ripple-element" data-i18n="boot_hash.save_button"></button>
@@ -204,7 +204,7 @@
 
     <!-- About Overlay -->
     <div id="about-overlay" class="about-overlay overlay">
-        <div class="about-menu">
+        <div class="about-menu overlay-content">
             <button id="close-about" class="close-btn">&#x2715;</button>
             <div class="about-title">
                 <p id="module_name_line1" data-i18n="about.module_name_line1"></p>
@@ -232,7 +232,7 @@
 
     <!-- Update Overlay -->
     <div class="update-overlay overlay">
-        <div class="update-menu">
+        <div class="update-menu overlay-content">
             <button id="close-update" class="close-btn">&#x2715;</button>
             <div class="update-content">
                 <h1 data-i18n="update.changelog"></h1>
@@ -263,7 +263,7 @@
 
     <!-- File Selector Overlay -->
     <div class="file-selector-overlay overlay">
-        <div class="file-selector">
+        <div class="file-selector overlay-content">
             <div class="file-selector-header">
                 <button class="back-button">
                     <svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="40 -1050 900 960" width="22px"><path d="M400-93.85 13.85-480 400-866.15l56.77 56.77L127.38-480l329.39 329.38L400-93.85Z"/></svg>
@@ -277,7 +277,7 @@
 
     <!-- Security Patch Overlay -->
     <div id="security-patch-overlay" class="security-patch-overlay overlay">
-        <div id="security-patch-card" class="security-patch-card">
+        <div id="security-patch-card" class="security-patch-card overlay-content">
             <div class="security-patch-header" data-i18n="security_patch.title"></div>
             <div class="security-patch-content">
                 <div id="normal-mode-inputs" class="normal-mode-inputs">
@@ -327,7 +327,7 @@
 
     <!-- Add System App Overlay -->
     <div id="add-system-app-overlay" class="add-system-app-overlay overlay">
-        <div id="add-system-app-card" class="add-system-app-card">
+        <div id="add-system-app-card" class="add-system-app-card overlay-content">
             <div class="add-system-app-title" data-i18n="add_system_app.title"></div>
             <div class="add-system-app-content">
                 <input type="text" id="system-app-input" placeholder="com.example.app" autocapitalize="none">
@@ -340,7 +340,7 @@
 
     <!-- Uninstall Confirmation Overlay -->
     <div class="uninstall-confirmation-overlay overlay" id="uninstall-confirmation-overlay">
-        <div class="uninstall-confirmation">
+        <div class="uninstall-confirmation overlay-content">
             <div class="uninstall-confirmation-title" data-i18n="confirmation.uninstall_title"></div>
             <p data-i18n="confirmation.uninstall_message"></p>
             <div class="uninstall-confirmation-button-container">

module/webui/scripts/about.js

@@ -6,6 +6,7 @@ const githubLink = document.getElementById('github');
 // Function to show about overlay
 document.getElementById("about").addEventListener("click", () => {
     const aboutOverlay = document.getElementById('about-overlay');
+    const aboutContent = document.querySelector('.about-menu');
     const closeAbout = document.getElementById('close-about');
 
     // Show about menu
@@ -13,11 +14,13 @@ document.getElementById("about").addEventListener("click", () => {
     aboutOverlay.style.display = 'flex';
     setTimeout(() => {
         aboutOverlay.style.opacity = '1';
+        aboutContent.classList.add('open');
     }, 10);
 
     const hideMenu = () => {
         document.body.classList.remove("no-scroll");
         aboutOverlay.style.opacity = '0';
+        aboutContent.classList.remove('open');
         setTimeout(() => {
             aboutOverlay.style.display = 'none';
         }, 200);

module/webui/scripts/boot_hash.js

@@ -1,6 +1,7 @@
 import { execCommand, showPrompt } from './main.js';
 
 const bootHashOverlay = document.getElementById('boot-hash-overlay');
+const bootHash = document.querySelector('.boot-hash-card');
 const inputBox = document.getElementById('boot-hash-input');
 const saveButton = document.getElementById('boot-hash-save-button');
 
@@ -16,11 +17,13 @@ document.getElementById("boot-hash").addEventListener("click", async () => {
     bootHashOverlay.style.display = "flex";
     setTimeout(() => {
         bootHashOverlay.style.opacity = 1;
+        bootHash.classList.add('open');
     }, 10);
 
     const closeBootHashMenu = () => {
         document.body.classList.remove("no-scroll");
         bootHashOverlay.style.opacity = 0;
+        bootHash.classList.remove('open');
         setTimeout(() => {
             bootHashOverlay.style.display = "none";
         }, 200);

module/webui/scripts/help.js

@@ -1,5 +1,6 @@
 const helpButton = document.getElementById('help-button');
 const helpOverlay = document.getElementById('help-overlay');
+const helpContent = document.querySelector('.help-menu');
 const closeHelp = document.getElementById('close-help');
 
 // Open help menu
@@ -8,11 +9,13 @@ helpButton.addEventListener("click", () => {
     helpOverlay.style.display = "flex";
     setTimeout(() => {
         helpOverlay.style.opacity = 1;
+        helpContent.classList.add('open');
     }, 10);
 });
 
 const hideHelpOverlay = () => {
     helpOverlay.style.opacity = 0;
+    helpContent.classList.remove('open');
     document.body.classList.remove("no-scroll");
     setTimeout(() => {
         helpOverlay.style.display = "none";

module/webui/scripts/main.js

@@ -173,27 +173,32 @@ document.getElementById("save").addEventListener("click", async () => {
 
 // Uninstall WebUI
 document.querySelector(".uninstall-container").addEventListener("click", () => {
-    const uninstallConfirmation = document.getElementById("uninstall-confirmation-overlay");
+    const uninstallOverlay = document.getElementById("uninstall-confirmation-overlay");
+    const uninstallContent = document.querySelector('.uninstall-confirmation');
     const cancelButton = document.getElementById("cancel-uninstall");
     const confirmButton = document.getElementById("confirm-uninstall")
 
-    uninstallConfirmation.style.display = 'flex';
+    uninstallOverlay.style.display = 'flex';
+    document.body.classList.add('no-scroll');
     setTimeout(() => {
-        uninstallConfirmation.style.opacity = 1;
+        uninstallOverlay.style.opacity = 1;
+        uninstallContent.classList.add('open');
     }, 10)
 
-    const closeUninstallConfirmation = () => {
+    const closeuninstallOverlay = () => {
-        uninstallConfirmation.style.opacity = 0;
+        document.body.classList.remove('no-scroll');
+        uninstallOverlay.style.opacity = 0;
+        uninstallContent.classList.remove('open');
         setTimeout(() => {
-            uninstallConfirmation.style.display = 'none';
+            uninstallOverlay.style.display = 'none';
         }, 200)
     }
-    cancelButton.addEventListener('click', () => closeUninstallConfirmation());
+    cancelButton.addEventListener('click', () => closeuninstallOverlay());
-    uninstallConfirmation.addEventListener('click', (e) => {
+    uninstallOverlay.addEventListener('click', (e) => {
-        if (e.target === uninstallConfirmation) closeUninstallConfirmation();
+        if (e.target === uninstallOverlay) closeuninstallOverlay();
     })
     confirmButton.addEventListener('click', () => {
-        closeUninstallConfirmation();
+        closeuninstallOverlay();
         uninstallWebUI();
     })
 });

module/webui/scripts/menu_option.js

@@ -79,11 +79,10 @@ document.getElementById("deselect-unnecessary").addEventListener("click", async
 export async function setupSystemAppMenu() {
     document.getElementById("add-system-app").addEventListener("click", () => openSystemAppOverlay());
     document.getElementById("add-system-app-overlay").addEventListener("click", (event) => {
-        if (event.target === event.currentTarget) {
+        if (event.target === event.currentTarget) closeSystemAppOverlay();
-            closeSystemAppOverlay();
-        }
     });
     const systemAppOverlay = document.getElementById("add-system-app-overlay");
+    const systemAppContent = document.querySelector('.add-system-app-card');
     const systemAppInput = document.getElementById("system-app-input");
     function openSystemAppOverlay() {
         renderSystemAppList();
@@ -91,12 +90,14 @@ export async function setupSystemAppMenu() {
         systemAppOverlay.style.display = "flex";
         setTimeout(() => {
             systemAppOverlay.style.opacity = "1";
+            systemAppContent.classList.add('open');
         }, 10);
         systemAppInput.value = "";
     }
     function closeSystemAppOverlay() {
         document.body.classList.remove("no-scroll");
         systemAppOverlay.style.opacity = "0";
+        systemAppContent.classList.remove('open');
         setTimeout(() => {
             systemAppOverlay.style.display = "none";
         }, 300);
@@ -237,6 +238,7 @@ document.getElementById("validkb").addEventListener("click", async () => {
 
 // File selector
 const fileSelector = document.querySelector('.file-selector-overlay');
+const fileSelectorContent = document.querySelector('.file-selector');
 let currentPath = '/storage/emulated/0/Download';
 
 // Function to display file in current path
@@ -389,6 +391,7 @@ fileSelector.addEventListener('click', (event) => {
 // Function to close custom keybox selector
 function closeCustomKeyboxSelector() {
     fileSelector.style.opacity = '0';
+    fileSelectorContent.classList.remove('open');
     document.body.classList.remove("no-scroll");
     setTimeout(() => {
         fileSelector.style.display = 'none';
@@ -399,8 +402,10 @@ function closeCustomKeyboxSelector() {
 document.getElementById('customkb').addEventListener('click', async () => {
     fileSelector.style.display = 'flex';
     document.body.classList.add("no-scroll");
-    fileSelector.offsetHeight;
+    setTimeout(() => {
         fileSelector.style.opacity = '1';
+        fileSelectorContent.classList.add('open');
+    }, 10)
     currentPath = '/storage/emulated/0/Download';
     const currentPathElement = document.querySelector('.current-path');
     currentPathElement.innerHTML = currentPath.split('/').filter(Boolean).join('<span class="separator">›</span>');

module/webui/scripts/security_patch.js

@@ -1,6 +1,7 @@
 import { basePath, execCommand, showPrompt } from './main.js';
 
 const overlay = document.getElementById('security-patch-overlay');
+const overlayContent = document.querySelector('.security-patch-card');
 const advancedToggle = document.getElementById('advanced-mode');
 const normalInputs = document.getElementById('normal-mode-inputs');
 const advancedInputs = document.getElementById('advanced-mode-inputs');
@@ -18,6 +19,7 @@ function showSecurityPatchDialog() {
     overlay.style.display = 'flex';
     setTimeout(() => {
         overlay.style.opacity = '1';
+        overlayContent.classList.add('open');
         loadCurrentConfig();
     }, 10);
 }
@@ -26,6 +28,7 @@ function showSecurityPatchDialog() {
 function hideSecurityPatchDialog() {
     document.body.classList.remove("no-scroll");
     overlay.style.opacity = '0';
+    overlayContent.classList.remove('open');
     setTimeout(() => {
         overlay.style.display = 'none';
     }, 200);

module/webui/scripts/update.js

@@ -1,8 +1,8 @@
 import { basePath, execCommand, showPrompt, noConnection, linkRedirect } from './main.js';
 import { updateCard } from './applist.js';
 
-const updateCardText = document.getElementById('redirect-to-release');
+const updateMenu = document.querySelector('.update-overlay');
-const UpdateMenu = document.querySelector('.update-overlay');
+const updateMenuContent = document.querySelector('.update-menu');
 const closeUpdate = document.getElementById('close-update');
 const releaseNotes = document.querySelector('.changelog');
 const installButton = document.querySelector('.install');
@@ -91,17 +91,19 @@ async function renderChangelog() {
 // Function to setup update menu
 function setupUpdateMenu() {
     function openUpdateMenu() {
-        UpdateMenu.style.display = "flex";
+        updateMenu.style.display = "flex";
         setTimeout(async () => {
-            UpdateMenu.style.opacity = "1";
+            updateMenu.style.opacity = "1";
+            updateMenuContent.classList.add('open');
         }, 10);
         document.body.classList.add("no-scroll");
     }
     function closeUpdateMenu() {
-        UpdateMenu.style.opacity = "0";
+        updateMenu.style.opacity = "0";
+        updateMenuContent.classList.remove('open');
         document.body.classList.remove("no-scroll");
         setTimeout(async () => {
-            UpdateMenu.style.display = "none";
+            updateMenu.style.display = "none";
         }, 200);
     }
 
@@ -150,10 +152,8 @@ function setupUpdateMenu() {
 
     // Close update menu
     closeUpdate.addEventListener("click", closeUpdateMenu);
-    UpdateMenu.addEventListener("click", (event) => {
+    updateMenu.addEventListener("click", (event) => {
-        if (event.target === UpdateMenu) {
+        if (event.target === updateMenu) closeUpdateMenu();
-            closeUpdateMenu();
-        }
     });
 
     // Install button

module/webui/styles/global.css

@@ -42,12 +42,22 @@ body {
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
     display: none;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.2s ease;
 }
 
+.overlay-content {
+    transform: scale(0.8);
+    transition: transform 0.2s ease;
+}
+
+.overlay-content.open {
+    transform: scale(1);
+}
+
 .close-btn {
     position: absolute;
     top: 12px;

module/webui/styles/system_app.css

@@ -11,7 +11,7 @@
     width: calc(90vw - 60px);
     max-width: 400px;
     max-height: calc(80vh - 60px);
-    overflow-y: scroll;
+    overflow-y: auto;
     padding: 30px;
     background-color: #fff;
     border-radius: 15px;
@@ -19,6 +19,7 @@
 }
 
 .add-system-app-title {
+    text-align: center;
     font-size: 26px;
     user-select: none;
     margin-bottom: 20px;
@@ -57,6 +58,7 @@
 }
 
 .current-system-app-list {
+    text-align: center;
     margin-top: 25px;
     margin-bottom: 10px;
     user-select: none;