br0kenpixel/Tricky-Addon-Update-Target-List
1
0
Fork 0
mirror of https://github.com/KOWX712/Tricky-Addon-Update-Target-List.git synced 2025-09-06 06:37:09 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

Final touchup

Browse Source 
- UI adjust: color, placement, size

#7
This commit is contained in:
KOWX712
2024-12-29 03:08:34 +08:00
parent 77a6e06631
commit ae32ccf973
3 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
module/webui/index.html
View File

@@ -104,14 +104,6 @@
</div> </div>
</i> </i>
</label> </label>
<label class="mode-switch" id="hack">
<input type="radio" class="mode-input" id="hack-mode">
<i class="mode-icon">
<div class="status-indicator" id="hack-indicator">
<svg xmlns="http://www.w3.org/2000/svg" height="19px" viewBox="0 -960 960 960" width="19px" fill="#ffffff"><path d="M424-320q0-81 14.5-116.5T500-514q41-36 62.5-62.5T584-637q0-41-27.5-68T480-732q-51 0-77.5 31T365-638l-103-44q21-64 77-111t141-47q105 0 161.5 58.5T698-641q0 50-21.5 85.5T609-475q-49 47-59.5 71.5T539-320H424Zm56 240q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z"/></svg>
</div>
</i>
</label>
<label class="mode-switch" id="generate"> <label class="mode-switch" id="generate">
<input type="radio" class="mode-input" id="generate-mode"> <input type="radio" class="mode-input" id="generate-mode">
<i class="mode-icon"> <i class="mode-icon">
@@ -120,6 +112,14 @@
</div> </div>
</i> </i>
</label> </label>
<label class="mode-switch" id="hack">
<input type="radio" class="mode-input" id="hack-mode">
<i class="mode-icon">
<div class="status-indicator" id="hack-indicator">
<svg xmlns="http://www.w3.org/2000/svg" height="19px" viewBox="0 -960 960 960" width="19px" fill="#ffffff"><path d="M424-320q0-81 14.5-116.5T500-514q41-36 62.5-62.5T584-637q0-41-27.5-68T480-732q-51 0-77.5 31T365-638l-103-44q21-64 77-111t141-47q105 0 161.5 58.5T698-641q0 50-21.5 85.5T609-475q-49 47-59.5 71.5T539-320H424Zm56 240q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z"/></svg>
</div>
</i>
</label>
</div> </div>
<p class="name"></p> <p class="name"></p>
<div class="checkbox-wrapper"> <div class="checkbox-wrapper">

4
module/webui/scripts/main.js
View File

@@ -19,7 +19,7 @@ export const basePath = "set-path";
export const appsWithExclamation = []; export const appsWithExclamation = [];
export const appsWithQuestion = []; export const appsWithQuestion = [];
const ADDITIONAL_APPS = [ "com.google.android.gms", "io.github.vvb2060.keyattestation", "io.github.vvb2060.mahoshojo", "icu.nullptr.nativetest" ]; 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', '.boot-hash-save-button', '.boot-hash-value']; const rippleClasses = ['.language-option', '.menu-button', '.menu-options li', '.search-card', '.card', '.update-card', '.link-icon', '.floating-btn', '.uninstall-container', '.boot-hash-save-button', '.boot-hash-value', '.status-indicator'];
// Variables // Variables
let e = 0; let e = 0;
@@ -201,7 +201,7 @@ function applyRippleEffect() {
const y = event.clientY - rect.top - size / 2; const y = event.clientY - rect.top - size / 2;
// Determine animation duration // Determine animation duration
let duration = 0.2 + (width / 800) * 0.4; let duration = 0.3 + (width / 800) * 0.3;
duration = Math.min(0.8, Math.max(0.2, duration)); duration = Math.min(0.8, Math.max(0.2, duration));
// Set ripple styles // Set ripple styles

14
module/webui/styles/applist.css
View File

@@ -46,7 +46,7 @@
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
outline: none; outline: none;
padding: 10px; padding: 13px;
width: calc(100% - 30px); width: calc(100% - 30px);
max-width: 900px; max-width: 900px;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
@@ -113,12 +113,14 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 30px; width: 35px;
height: 30px; height: 35px;
border-radius: 7px; border-radius: 7px;
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.2s ease; transition: border-color 0.2s ease;
border: 3px solid transparent; border: 3px solid transparent;
position: relative;
overflow: hidden;
} }
#normal-indicator { #normal-indicator {
@@ -130,7 +132,7 @@
} }
#generate-indicator { #generate-indicator {
background-color: #6C00FF; background-color: #51FF00;
} }
.mode-input[type="radio"]:checked ~ .mode-icon .status-indicator { .mode-input[type="radio"]:checked ~ .mode-icon .status-indicator {
@@ -190,8 +192,8 @@
} }
.checkbox-checked-generate:checked + .custom-checkbox { .checkbox-checked-generate:checked + .custom-checkbox {
border-color: #6C00FF; border-color: #51FF00;
background-color: #6C00FF; background-color: #51FF00;
} }
.checkbox-checked-hack:checked + .custom-checkbox { .checkbox-checked-hack:checked + .custom-checkbox {