opt: boot hash window ui

This commit is contained in:
KOWX712
2025-02-21 02:44:17 +08:00
parent 09f6f522de
commit a8e388d4cf
5 changed files with 23 additions and 36 deletions

View File

@@ -219,12 +219,8 @@
<div id="boot-hash-overlay" class="boot-hash-overlay"></div> <div id="boot-hash-overlay" class="boot-hash-overlay"></div>
<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>
<div class="boot-hash-value ripple-element"> <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="input-box" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash.input_placeholder"></textarea> <button id="boot-hash-save-button" class="boot-hash-save-button ripple-element" data-i18n="boot_hash.save_button"></button>
</div>
<div class="boot-hash-button-container">
<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 -->

View File

@@ -5,6 +5,11 @@ 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');
// Remove empty spaces from input
window.trimInput = (input) => {
input.value = input.value.replace(/\s+/g, '');
};
// 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 = () => { const showCard = () => {
@@ -51,4 +56,11 @@ document.getElementById("boot-hash").addEventListener("click", async () => {
bootHashOverlay.addEventListener("click", (event) => { bootHashOverlay.addEventListener("click", (event) => {
if (event.target === bootHashOverlay) closeCard(); if (event.target === bootHashOverlay) closeCard();
}); });
// Enter to save
inputBox.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
saveButton.click();
}
});
}); });

View File

@@ -49,42 +49,25 @@
user-select: none; user-select: none;
} }
.boot-hash-value { .boot-hash-input {
width: 100%; width: 100%;
height: 100px; height: 100px;
font-size: 16px; font-size: 16px;
background-color: #FFF; padding: 10px;
background-color: #F5F5F5;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 10px; border-radius: 10px;
box-sizing: border-box; box-sizing: border-box;
}
.input-box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 10px;
font-size: 16px;
border-radius: 9px;
box-sizing: border-box;
background-color: transparent;
outline-color: #007bff; outline-color: #007bff;
} resize: none;
.boot-hash-button-container {
display: flex;
justify-content: center;
margin-top: 10px;
} }
.boot-hash-save-button { .boot-hash-save-button {
width: 50%; width: 100%;
padding: 12px; padding: 12px;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
font-size: 18px; font-size: 20px;
font-weight: bold; font-weight: bold;
background-color: #007bff; background-color: #007bff;
color: white; color: white;
@@ -98,12 +81,9 @@
background-color: #343434; background-color: #343434;
} }
.input-box { .boot-hash-input {
background-color: #232323;
color: #fff; color: #fff;
}
.boot-hash-value {
background-color: #343434;
border: 1px solid #6E6E6E; border: 1px solid #6E6E6E;
} }
} }

View File

@@ -40,7 +40,7 @@
outline: none; outline: none;
left: 10px; left: 10px;
padding: 0 30px; padding: 0 30px;
width: calc(100% - 10); width: calc(100% - 80px);
} }
.clear-btn { .clear-btn {

View File

@@ -118,7 +118,6 @@
outline-color: #007bff; outline-color: #007bff;
border-radius: 10px; border-radius: 10px;
font-size: 16px; font-size: 16px;
transition: border-color 0.2s ease;
} }
.button-container { .button-container {