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

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 = () => {
-        uninstallConfirmation.style.opacity = 0;
+    const closeuninstallOverlay = () => {
+        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());
-    uninstallConfirmation.addEventListener('click', (e) => {
-        if (e.target === uninstallConfirmation) closeUninstallConfirmation();
+    cancelButton.addEventListener('click', () => closeuninstallOverlay());
+    uninstallOverlay.addEventListener('click', (e) => {
+        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) {
-            closeSystemAppOverlay();
-        }
+        if (event.target === event.currentTarget) 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;
-    fileSelector.style.opacity = '1';
+    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');
@@ -84,24 +84,26 @@ async function renderChangelog() {
             .split('\n')
             .filter(line => line.trim() !== '')
             .join('\n');
-            const formattedChangelog = marked.parse(cleanedChangelog);
-            releaseNotes.innerHTML = formattedChangelog;
+        const formattedChangelog = marked.parse(cleanedChangelog);
+        releaseNotes.innerHTML = formattedChangelog;
 }
 
 // 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) => {
-        if (event.target === UpdateMenu) {
-            closeUpdateMenu();
-        }
+    updateMenu.addEventListener("click", (event) => {
+        if (event.target === updateMenu) closeUpdateMenu();
     });
 
     // Install button