opt: reduce code

This commit is contained in:
KOWX712
2025-03-02 04:06:17 +08:00
parent 93e2e8c8ba
commit c20e8cde1f
15 changed files with 156 additions and 343 deletions

View File

@@ -144,107 +144,74 @@
</template> </template>
<!-- Help Overlay --> <!-- Help Overlay -->
<div id="help-overlay" class="help-overlay"> <div id="help-overlay" class="help-overlay overlay">
<div class="help-menu"> <div class="help-menu">
<button id="close-help" class="close-help">&#x2715;</button> <button id="close-help" class="close-btn">&#x2715;</button>
<div class="help-content"> <div class="help-content">
<p data-i18n="help.help_instructions"></p> <div class="help-content-header" data-i18n="help.help_instructions"></div>
<ul id="helpList"> <div class="instruction">
<li id="save_and_update_button">
<strong data-i18n="help.save_and_update"></strong> <strong data-i18n="help.save_and_update"></strong>
<ul> <p data-i18n="help.save_and_update_description"></p>
<li data-i18n="help.save_and_update_description"></li> </div>
</ul> <div class="instruction">
</li>
<br>
<li id="refresh">
<strong data-i18n="help.refresh"></strong> <strong data-i18n="help.refresh"></strong>
<ul> <p data-i18n="help.refresh_description"></p>
<li data-i18n="help.refresh_description"></li> </div>
</ul> <div class="instruction">
</li>
<br>
<li id="select_deselect">
<strong data-i18n="help.select_deselect"></strong> <strong data-i18n="help.select_deselect"></strong>
<ul> <p data-i18n="help.select_description"></p>
<li data-i18n="help.select_description"></li> </div>
</ul> <div class="instruction">
</li>
<br>
<li id="select_denylist">
<strong data-i18n="help.select_denylist"></strong> <strong data-i18n="help.select_denylist"></strong>
<ul> <p data-i18n="help.select_denylist_description"></p>
<li data-i18n="help.select_denylist_description"></li> </div>
</ul> <div class="instruction">
</li>
<br>
<li id="deselect_unnecessary">
<strong data-i18n="help.deselect_unnecessary"></strong> <strong data-i18n="help.deselect_unnecessary"></strong>
<ul> <p data-i18n="help.deselect_unnecessary_description"></p>
<li data-i18n="help.deselect_unnecessary_description"></li> </div>
</ul> <div class="instruction">
</li>
<br>
<li id="add_system_app">
<strong data-i18n="help.add_system_app"></strong> <strong data-i18n="help.add_system_app"></strong>
<ul> <p data-i18n="help.add_system_app_description"></p>
<li data-i18n="help.add_system_app_description"></li> </div>
</ul> <div class="instruction">
</li>
<br>
<li id="set_keybox">
<strong data-i18n="help.set_keybox"></strong> <strong data-i18n="help.set_keybox"></strong>
<ul> <p data-i18n="help.set_keybox_description"></p>
<li data-i18n="help.set_keybox_description"></li> </div>
</ul> <div class="instruction">
</li>
<br>
<li id="set_custom_keybox">
<strong data-i18n="help.set_custom_keybox"></strong> <strong data-i18n="help.set_custom_keybox"></strong>
<ul> <p data-i18n="help.set_custom_keybox_description"></p>
<li data-i18n="help.set_custom_keybox_description"></li> </div>
</ul> <div class="instruction">
</li>
<br>
<li id="set_security_patch">
<strong data-i18n="help.set_security_patch"></strong> <strong data-i18n="help.set_security_patch"></strong>
<ul> <p data-i18n="help.set_security_patch_description"></p>
<li data-i18n="help.set_security_patch_description"></li> </div>
</ul> <div class="instruction">
</li>
<br>
<li id="set_verified_boot_hash">
<strong data-i18n="help.set_verified_boot_hash"></strong> <strong data-i18n="help.set_verified_boot_hash"></strong>
<ul> <p data-i18n="help.set_verified_boot_hash_description"></p>
<li data-i18n="help.set_verified_boot_hash_description"></li> </div>
</ul>
</li>
<br>
</ul>
</div> </div>
</div> </div>
</div> </div>
<!-- BootHash Input Overlay --> <!-- BootHash Input Overlay -->
<div id="boot-hash-overlay" class="boot-hash-overlay"></div> <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">
<div class="boot-hash-title" data-i18n="boot_hash.title"></div> <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> <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> <button id="boot-hash-save-button" class="boot-hash-save-button ripple-element" data-i18n="boot_hash.save_button"></button>
</div> </div>
</div>
<!-- About Overlay --> <!-- About Overlay -->
<div id="about-overlay" class="about-overlay"> <div id="about-overlay" class="about-overlay overlay">
<div id="about-menu" class="about-menu"> <div class="about-menu">
<button id="close-about" class="close-about">&#x2715;</button> <button id="close-about" class="close-btn">&#x2715;</button>
<div class="about-content"> <div class="about-title">
<p id="module_name_line1" data-i18n="about.module_name_line1"></p> <p id="module_name_line1" data-i18n="about.module_name_line1"></p>
<p id="module_name_line2" data-i18n="about.module_name_line2"></p> <p id="module_name_line2" data-i18n="about.module_name_line2"></p>
<p><span id="authored" data-i18n="about.by"></span> KOWX712</p> <p><span id="authored" data-i18n="about.by"></span> KOWX712</p>
<br> </div>
<p id="disclaimer" data-i18n="about.disclaimer"></p> <div id="disclaimer" data-i18n="about.disclaimer"></div>
<br>
<p>
<div class="link"> <div class="link">
<i class="link-icon ripple-element" id="telegram" aria-hidden="true"> <i class="link-icon ripple-element" id="telegram" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
@@ -255,8 +222,7 @@
<span id="link-text" data-i18n="about.github"></span> <span id="link-text" data-i18n="about.github"></span>
</i> </i>
</div> </div>
</p> <div class="acknowledgment">
<br>
<p id="acknowledgment" data-i18n="about.acknowledgment"></p> <p id="acknowledgment" data-i18n="about.acknowledgment"></p>
<p>j-hc/zygisk-detach: WebUI template</p> <p>j-hc/zygisk-detach: WebUI template</p>
<p>markedjs/marked: Markdown Support</p> <p>markedjs/marked: Markdown Support</p>
@@ -265,9 +231,9 @@
</div> </div>
<!-- Update Overlay --> <!-- Update Overlay -->
<div class="update-overlay"> <div class="update-overlay overlay">
<div class="update-menu"> <div class="update-menu">
<button class="close-update">&#x2715;</button> <button id="close-update" class="close-btn">&#x2715;</button>
<div class="update-content"> <div class="update-content">
<h1 data-i18n="update.changelog"></h1> <h1 data-i18n="update.changelog"></h1>
<div class="changelog"></div> <div class="changelog"></div>
@@ -280,7 +246,7 @@
</div> </div>
<!-- MMRL Permission Request Overlay --> <!-- MMRL Permission Request Overlay -->
<div id="permission-popup" class="permission-popup hidden"> <div id="permission-popup" class="permission-popup overlay">
<div class="permission-content"> <div class="permission-content">
<h2 id="permission-title">Please allow JavaScript API in MMRL settings</h2> <h2 id="permission-title">Please allow JavaScript API in MMRL settings</h2>
<div class="permission-steps"> <div class="permission-steps">
@@ -294,11 +260,11 @@
</div> </div>
<!-- File Selector Overlay --> <!-- File Selector Overlay -->
<div class="file-selector-overlay"> <div class="file-selector-overlay overlay">
<div class="file-selector"> <div class="file-selector">
<div class="file-selector-header"> <div class="file-selector-header">
<button class="back-button"> <button class="back-button">
<svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="40 -1000 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> <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>
</button> </button>
<div class="current-path">/storage/emulated/0/Download</div> <div class="current-path">/storage/emulated/0/Download</div>
<button class="close-selector">&#x2715;</button> <button class="close-selector">&#x2715;</button>
@@ -308,7 +274,7 @@
</div> </div>
<!-- Security Patch Overlay --> <!-- Security Patch Overlay -->
<div id="security-patch-overlay" class="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">
<div class="security-patch-header" data-i18n="security_patch.title"></div> <div class="security-patch-header" data-i18n="security_patch.title"></div>
<div class="security-patch-content"> <div class="security-patch-content">
@@ -358,7 +324,7 @@
</div> </div>
<!-- Add System App Overlay --> <!-- Add System App Overlay -->
<div id="add-system-app-overlay" class="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">
<div class="add-system-app-title" data-i18n="add_system_app.title"></div> <div class="add-system-app-title" data-i18n="add_system_app.title"></div>
<div class="add-system-app-content"> <div class="add-system-app-content">

View File

@@ -6,35 +6,27 @@ const githubLink = document.getElementById('github');
// Function to show about overlay // Function to show about overlay
document.getElementById("about").addEventListener("click", () => { document.getElementById("about").addEventListener("click", () => {
const aboutOverlay = document.getElementById('about-overlay'); const aboutOverlay = document.getElementById('about-overlay');
const aboutMenu = document.getElementById('about-menu');
const closeAbout = document.getElementById('close-about'); const closeAbout = document.getElementById('close-about');
const showMenu = () => {
// Show about menu
document.body.classList.add("no-scroll");
aboutOverlay.style.display = 'flex'; aboutOverlay.style.display = 'flex';
setTimeout(() => { setTimeout(() => {
aboutOverlay.style.opacity = '1'; aboutOverlay.style.opacity = '1';
aboutMenu.style.opacity = '1';
}, 10); }, 10);
document.body.style.overflow = 'hidden';
};
const hideMenu = () => { const hideMenu = () => {
document.body.classList.remove("no-scroll");
aboutOverlay.style.opacity = '0'; aboutOverlay.style.opacity = '0';
aboutMenu.style.opacity = '0';
setTimeout(() => { setTimeout(() => {
aboutOverlay.style.display = 'none'; aboutOverlay.style.display = 'none';
document.body.style.overflow = 'auto';
}, 200); }, 200);
}; };
showMenu();
closeAbout.addEventListener('click', (event) => { closeAbout.addEventListener("click", hideMenu);
event.stopPropagation();
hideMenu();
});
aboutOverlay.addEventListener('click', (event) => { aboutOverlay.addEventListener('click', (event) => {
if (!aboutMenu.contains(event.target)) { if (event.target === aboutOverlay) hideMenu();
hideMenu();
}
}); });
menu.addEventListener('click', (event) => event.stopPropagation());
}); });
// Event listener for link redirect // Event listener for link redirect

View File

@@ -1,7 +1,6 @@
import { execCommand, showPrompt } from './main.js'; import { execCommand, showPrompt } from './main.js';
const bootHashOverlay = document.getElementById('boot-hash-overlay'); const bootHashOverlay = document.getElementById('boot-hash-overlay');
const card = document.getElementById('boot-hash-card');
const inputBox = document.getElementById('boot-hash-input'); const inputBox = document.getElementById('boot-hash-input');
const saveButton = document.getElementById('boot-hash-save-button'); const saveButton = document.getElementById('boot-hash-save-button');
@@ -12,25 +11,20 @@ window.trimInput = (input) => {
// Function to handle Verified Boot Hash // Function to handle Verified Boot Hash
document.getElementById("boot-hash").addEventListener("click", async () => { document.getElementById("boot-hash").addEventListener("click", async () => {
const showCard = () => { // Display boot hash menu
document.body.classList.add("no-scroll");
bootHashOverlay.style.display = "flex"; bootHashOverlay.style.display = "flex";
card.style.display = "flex"; setTimeout(() => {
requestAnimationFrame(() => { bootHashOverlay.style.opacity = 1;
bootHashOverlay.classList.add("show"); }, 10);
card.classList.add("show");
}); const closeBootHashMenu = () => {
document.body.style.overflow = "hidden"; document.body.classList.remove("no-scroll");
}; bootHashOverlay.style.opacity = 0;
const closeCard = () => {
bootHashOverlay.classList.remove("show");
card.classList.remove("show");
setTimeout(() => { setTimeout(() => {
bootHashOverlay.style.display = "none"; bootHashOverlay.style.display = "none";
card.style.display = "none";
document.body.style.overflow = "auto";
}, 200); }, 200);
}; };
showCard();
try { try {
const bootHashContent = await execCommand("cat /data/adb/boot_hash"); const bootHashContent = await execCommand("cat /data/adb/boot_hash");
const validHash = bootHashContent const validHash = bootHashContent
@@ -50,14 +44,14 @@ document.getElementById("boot-hash").addEventListener("click", async () => {
resetprop -n ro.boot.vbmeta.digest ${inputValue} resetprop -n ro.boot.vbmeta.digest ${inputValue}
`); `);
showPrompt("prompt.boot_hash_set"); showPrompt("prompt.boot_hash_set");
closeCard(); closeBootHashMenu();
} catch (error) { } catch (error) {
console.error("Failed to update boot_hash:", error); console.error("Failed to update boot_hash:", error);
showPrompt("prompt.boot_hash_set_error", false); showPrompt("prompt.boot_hash_set_error", false);
} }
}); });
bootHashOverlay.addEventListener("click", (event) => { bootHashOverlay.addEventListener("click", (event) => {
if (event.target === bootHashOverlay) closeCard(); if (event.target === bootHashOverlay) closeBootHashMenu();
}); });
// Enter to save // Enter to save

View File

@@ -1,21 +1,18 @@
const helpButton = document.getElementById('help-button'); const helpButton = document.getElementById('help-button');
const helpOverlay = document.getElementById('help-overlay'); const helpOverlay = document.getElementById('help-overlay');
const closeHelp = document.getElementById('close-help'); const closeHelp = document.getElementById('close-help');
const helpList = document.getElementById('help-list');
// Open help menu // Open help menu
helpButton.addEventListener("click", () => { helpButton.addEventListener("click", () => {
helpOverlay.classList.remove("hide");
helpOverlay.style.display = "flex";
requestAnimationFrame(() => {
helpOverlay.classList.add("show");
});
document.body.classList.add("no-scroll"); document.body.classList.add("no-scroll");
helpOverlay.style.display = "flex";
setTimeout(() => {
helpOverlay.style.opacity = 1;
}, 10);
}); });
const hideHelpOverlay = () => { const hideHelpOverlay = () => {
helpOverlay.classList.remove("show"); helpOverlay.style.opacity = 0;
helpOverlay.classList.add("hide");
document.body.classList.remove("no-scroll"); document.body.classList.remove("no-scroll");
setTimeout(() => { setTimeout(() => {
helpOverlay.style.display = "none"; helpOverlay.style.display = "none";

View File

@@ -214,7 +214,7 @@ async function checkMMRL() {
MMRL_API = true; MMRL_API = true;
} catch (error) { } catch (error) {
console.error('Permission check failed:', error); console.error('Permission check failed:', error);
permissionPopup.classList.remove('hidden'); permissionPopup.style.display('flex');
MMRL_API = false; MMRL_API = false;
} }
} }

View File

@@ -234,9 +234,11 @@ document.getElementById("validkb").addEventListener("click", async () => {
}); });
}); });
// File selector
const fileSelector = document.querySelector('.file-selector-overlay'); const fileSelector = document.querySelector('.file-selector-overlay');
let currentPath = '/storage/emulated/0/Download'; let currentPath = '/storage/emulated/0/Download';
// Function to display file in current path
function updateCurrentPath() { function updateCurrentPath() {
const currentPathElement = document.querySelector('.current-path'); const currentPathElement = document.querySelector('.current-path');
const segments = currentPath.split('/').filter(Boolean); const segments = currentPath.split('/').filter(Boolean);
@@ -281,17 +283,8 @@ async function listFiles(path, skipAnimation = false) {
<span>..</span> <span>..</span>
`; `;
backItem.addEventListener('click', async () => { backItem.addEventListener('click', async () => {
currentPath = currentPath.split('/').slice(0, -1).join('/'); document.querySelector('.back-button').click();
if (currentPath === '') currentPath = '/storage/emulated/0';
const currentPathElement = document.querySelector('.current-path');
currentPathElement.innerHTML = currentPath.split('/').filter(Boolean).join('<span class="separator"></span>');
currentPathElement.scrollTo({
left: currentPathElement.scrollWidth,
behavior: 'smooth'
}); });
await listFiles(currentPath);
});
fileList.appendChild(backItem); fileList.appendChild(backItem);
} }
items.forEach(item => { items.forEach(item => {

View File

@@ -3,7 +3,7 @@ import { updateCard } from './applist.js';
const updateCardText = document.getElementById('redirect-to-release'); const updateCardText = document.getElementById('redirect-to-release');
const UpdateMenu = document.querySelector('.update-overlay'); const UpdateMenu = document.querySelector('.update-overlay');
const closeUpdate = document.querySelector('.close-update'); const closeUpdate = document.getElementById('close-update');
const releaseNotes = document.querySelector('.changelog'); const releaseNotes = document.querySelector('.changelog');
const installButton = document.querySelector('.install'); const installButton = document.querySelector('.install');
const rebootButton = document.querySelector('.reboot'); const rebootButton = document.querySelector('.reboot');

View File

@@ -1,53 +1,24 @@
.about-overlay { .about-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1100; z-index: 1100;
display: none;
justify-content: center;
align-items: center; align-items: center;
opacity: 0;
transition: opacity 0.2s ease;
} }
.about-menu { .about-menu {
position: fixed; position: relative;
top: 50%; width: calc(90vw - 60px);
left: 50%;
width: 90vw;
max-width: 800px; max-width: 800px;
transform: translate(-50%, -50%);
background: #fff; background: #fff;
border-radius: 15px; border-radius: 15px;
padding: 30px 0; padding: 30px;
z-index: 1200;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 1200;
opacity: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
transition: opacity 0.2s ease;
}
.close-about {
position: absolute;
top: 15px;
right: 12px;
background: none;
border: none;
font-size: 18px;
color: #ccc;
user-select: none;
} }
.link, .link,
.about-content p { .about-menu p {
margin: 0; margin: 0;
padding: 0 30px;
font-size: 16px; font-size: 16px;
text-align: left; text-align: left;
} }
@@ -69,11 +40,8 @@
#disclaimer { #disclaimer {
font-family: serif; font-family: serif;
width: calc(100% - 80px); width: calc(100% - 20px);
padding: 8px 10px; padding: 8px 10px;
left: 0;
right: 0;
margin: auto;
border-radius: 10px; border-radius: 10px;
background-color: #F5F5F5; background-color: #F5F5F5;
} }

View File

@@ -43,18 +43,8 @@
} }
.update-overlay { .update-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1800; z-index: 1800;
justify-content: center;
align-items: center; align-items: center;
opacity: 0;
transition: opacity 0.2s ease;
} }
.update-menu { .update-menu {
@@ -65,18 +55,7 @@
padding: 30px; padding: 30px;
border-radius: 15px; border-radius: 15px;
text-align: left; text-align: left;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: opacity 0.2s ease;
}
.close-update {
position: absolute;
top: 15px;
right: 12px;
background: none;
border: none;
font-size: 20px;
color: #ccc;
} }
.update-content h3 { .update-content h3 {

View File

@@ -1,45 +1,20 @@
.boot-hash-overlay { .boot-hash-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1200; z-index: 1200;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
} }
.boot-hash-card { .boot-hash-card {
position: fixed; position: fixed;
top: 10%; top: 10%;
left: 50%;
transform: translateX(-50%);
width: calc(90% - 60px); width: calc(90% - 60px);
max-width: 300px; max-width: 300px;
height: fit-content;
background-color: #fff; background-color: #fff;
border-radius: 18px; border-radius: 18px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 1200;
padding: 30px; padding: 30px;
display: none; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
opacity: 0;
transition: opacity 0.2s ease;
}
.boot-hash-overlay.show {
visibility: visible;
opacity: 1;
}
.boot-hash-card.show {
display: flex;
opacity: 1;
} }
.boot-hash-title { .boot-hash-title {

View File

@@ -21,6 +21,7 @@
border-radius: 15px; border-radius: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
overflow: hidden; overflow: hidden;
} }
@@ -55,7 +56,7 @@
border: none; border: none;
font-size: 20px; font-size: 20px;
color: #ccc; color: #ccc;
padding: 5px; padding: 0 5px;
} }
.file-list { .file-list {
@@ -83,7 +84,7 @@
.file-item svg { .file-item svg {
margin-right: 10px; margin-right: 10px;
fill: #6E6E6E; fill: #ccc;
} }
.file-item span { .file-item span {
@@ -114,8 +115,4 @@
.back-button { .back-button {
fill: #C2C2C2; fill: #C2C2C2;
} }
.file-item svg {
fill: #C2C2C2;
}
} }

View File

@@ -35,6 +35,30 @@ body {
pointer-events: auto; pointer-events: auto;
} }
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
}
.close-btn {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
font-size: 18px;
color: #ccc;
user-select: none;
}
.prompt { .prompt {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@@ -107,20 +131,8 @@ body {
} }
.permission-popup { .permission-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center; align-items: center;
z-index: 9999; z-index: 2000;
}
.permission-popup.hidden {
display: none;
} }
.permission-content { .permission-content {

View File

@@ -148,74 +148,39 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
opacity: 0; opacity: 0;
transition: opacity 0.4s ease; transition: opacity 0.2s ease;
}
.help-overlay.show {
display: flex;
opacity: 1;
}
.help-overlay.hide {
opacity: 0;
} }
.help-menu { .help-menu {
position: relative; position: relative;
width: 90vw; width: calc(95vw - 60px);
max-width: 800px; max-width: 800px;
background-color: white; background-color: white;
padding: 10px 0; padding: 30px;
border-radius: 15px; border-radius: 15px;
text-align: left; text-align: left;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
} }
.close-help {
position: absolute;
top: 15px;
right: 12px;
background: none;
border: none;
font-size: 20px;
color: #ccc;
user-select: none;
}
.help-content { .help-content {
max-height: 85vh; display: flex;
padding: 0 30px; flex-direction: column;
gap: 20px;
max-height: calc(85vh - 60px);
overflow-y: auto; overflow-y: auto;
} }
.help-content p { .help-content-header {
font-size: 26px; font-size: 26px;
user-select: none; user-select: none;
} }
.help-content ul { .instruction strong {
padding-left: 0;
list-style-type: none;
}
.help-content ul li {
font-weight: bold;
font-size: 18px; font-size: 18px;
} }
.help-content ul ul li { .instruction p {
font-weight: normal; margin: 0;
font-size: 16px;
}
.help-content ul ul ul li {
color: #777777;
font-weight: normal;
font-size: 14px;
}
.help-content ul ul ul li a {
color: inherit;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {

View File

@@ -1,15 +1,5 @@
.security-patch-overlay { .security-patch-overlay {
display: none;
position: fixed;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2000; z-index: 2000;
transition: opacity 0.2s ease;
opacity: 0;
} }
.security-patch-card { .security-patch-card {
@@ -19,8 +9,7 @@
background-color: white; background-color: white;
padding: 30px; padding: 30px;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 2001;
width: calc(90% - 60px); width: calc(90% - 60px);
max-width: 300px; max-width: 300px;
max-height: calc(80% - 60px); max-height: calc(80% - 60px);
@@ -153,10 +142,6 @@
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.security-patch-overlay {
background-color: rgba(0, 0, 0, 0.8);
}
.security-patch-card { .security-patch-card {
background-color: #343434; background-color: #343434;
color: white; color: white;

View File

@@ -1,15 +1,5 @@
.add-system-app-overlay { .add-system-app-overlay {
display: none;
position: fixed;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2000; z-index: 2000;
transition: opacity 0.2s ease;
opacity: 0;
} }
.add-system-app-card { .add-system-app-card {
@@ -25,7 +15,7 @@
padding: 30px; padding: 30px;
background-color: #fff; background-color: #fff;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
} }
.add-system-app-title { .add-system-app-title {