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

Minor UI change

Browse Source 
change icon, enhanced UI experience
This commit is contained in:
KOWX712
2024-11-08 01:30:05 +08:00
parent 6bab7df285
commit 5591a3ed14
3 changed files with 72 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
module/webroot/index.html
View File

@@ -4,27 +4,31 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/styles.css" type="text/css"> <link rel="stylesheet" href="/styles.css" type="text/css">
<script type="module" crossorigin src="/index.js"></script> <script type="module" crossorigin src="/index.js"></script>
</head> </head>
<body> <body>
<div id="title">Tricky Addon - Update Target List</div> <div id="title">Tricky Addon - Update Target List</div>
<div class="search-card"> <div class="search-menu-container">
<input type="text" class="search-input" id="search" placeholder="Search"> <div class="search-card">
<button class="clear-btn" id="clear-btn">&#x2715;</button> <span class="search-icon"><i class="fa fa-search"></i></span>
</div> <input type="text" class="search-input" id="search" placeholder="Search">
<div class="menu"> <button class="clear-btn" id="clear-btn"><i class="fa fa-close"></i></button>
<input type="checkbox" id="menu-toggle" class="menu-toggle" style="display: none;"> </div>
<label for="menu-toggle" id="menu-button"> <div class="menu">
<span class="menu-icon">&#9776;</span> <input type="checkbox" id="menu-toggle" class="menu-toggle">
</label> <label for="menu-toggle" id="menu-button">
<div id="menu-options" class="menu-options"> <span class="menu-icon"><i class="fa fa-bars"></i></span>
<ul> </label>
<li id="refresh">Refresh</li> <div id="menu-options" class="menu-options">
<li id="select-all">Select All</li> <ul>
<li id="deselect-all">Deselect All</li> <li id="refresh">Refresh</li>
<li id="deselect-xposed">Deselect Xposed</li> <li id="select-all">Select All</li>
</ul> <li id="deselect-all">Deselect All</li>
<li id="deselect-xposed">Deselect Xposed</li>
</ul>
</div>
</div> </div>
</div> </div>
<div id="apps-list"></div> <div id="apps-list"></div>

20
module/webroot/index.js
View File

@@ -156,14 +156,15 @@ function showPrompt(message, isSuccess = true) {
}, 500); }, 500);
} }
// Menu toggle functionality
function setupMenuToggle() { function setupMenuToggle() {
const menuButton = document.getElementById('menu-button'); const menuButton = document.getElementById('menu-button');
const menuIcon = menuButton.querySelector('.menu-icon'); const menuIcon = menuButton.querySelector('.menu-icon');
const menuOptions = document.getElementById('menu-options'); const menuOptions = document.getElementById('menu-options');
let menuOpen = false; let menuOpen = false;
let menuAnimating = false;
menuButton.addEventListener('click', (event) => { menuButton.addEventListener('click', (event) => {
if (menuAnimating) return;
event.stopPropagation(); event.stopPropagation();
if (menuOptions.classList.contains('visible')) { if (menuOptions.classList.contains('visible')) {
closeMenu(); closeMenu();
@@ -196,6 +197,7 @@ function setupMenuToggle() {
}); });
function openMenu() { function openMenu() {
menuAnimating = true;
menuOptions.style.display = 'block'; menuOptions.style.display = 'block';
setTimeout(() => { setTimeout(() => {
menuOptions.classList.remove('hidden'); menuOptions.classList.remove('hidden');
@@ -203,19 +205,22 @@ function setupMenuToggle() {
menuIcon.classList.add('menu-open'); menuIcon.classList.add('menu-open');
menuIcon.classList.remove('menu-closed'); menuIcon.classList.remove('menu-closed');
menuOpen = true; menuOpen = true;
menuAnimating = false;
}, 10); }, 10);
} }
function closeMenu() { function closeMenu() {
if (menuOptions.classList.contains('visible')) { if (menuOptions.classList.contains('visible')) {
menuAnimating = true;
menuOptions.classList.remove('visible'); menuOptions.classList.remove('visible');
menuOptions.classList.add('hidden'); menuOptions.classList.add('hidden');
menuIcon.classList.remove('menu-open'); menuIcon.classList.remove('menu-open');
menuIcon.classList.add('menu-closed'); menuIcon.classList.add('menu-closed');
setTimeout(() => { setTimeout(() => {
menuOptions.style.display = 'none'; menuOptions.style.display = 'none';
}, 400); menuOpen = false;
menuOpen = false; menuAnimating = false;
}, 200);
} }
} }
} }
@@ -227,6 +232,7 @@ searchInput.addEventListener("input", (e) => {
apps.forEach(app => { apps.forEach(app => {
const name = app.querySelector(".name").textContent.toLowerCase(); const name = app.querySelector(".name").textContent.toLowerCase();
app.style.display = name.includes(searchQuery) ? "block" : "none"; app.style.display = name.includes(searchQuery) ? "block" : "none";
window.scrollTo(0, 0);
}); });
if (searchQuery !== "") { if (searchQuery !== "") {
clearBtn.style.display = "block"; clearBtn.style.display = "block";
@@ -239,6 +245,7 @@ searchInput.addEventListener("input", (e) => {
clearBtn.addEventListener("click", () => { clearBtn.addEventListener("click", () => {
searchInput.value = ""; searchInput.value = "";
clearBtn.style.display = "none"; clearBtn.style.display = "none";
window.scrollTo(0, 0);
const apps = appListContainer.querySelectorAll(".card"); const apps = appListContainer.querySelectorAll(".card");
apps.forEach(app => { apps.forEach(app => {
app.style.display = "block"; app.style.display = "block";
@@ -305,17 +312,16 @@ document.addEventListener('DOMContentLoaded', async () => {
// Scroll event // Scroll event
let lastScrollY = window.scrollY; let lastScrollY = window.scrollY;
const searchMenuContainer = document.querySelector('.search-menu-container');
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
if (isRefreshing) return; if (isRefreshing) return;
if (window.scrollY > lastScrollY) { if (window.scrollY > lastScrollY) {
title.style.transform = 'translateY(-100%)'; title.style.transform = 'translateY(-100%)';
searchCard.style.transform = 'translateY(-35px)'; searchMenuContainer.style.transform = 'translateY(-35px)';
menu.style.transform = 'translateY(-35px)';
floatingBtn.style.transform = 'translateY(0)'; floatingBtn.style.transform = 'translateY(0)';
} else { } else {
title.style.transform = 'translateY(0)'; title.style.transform = 'translateY(0)';
searchCard.style.transform = 'translateY(0)'; searchMenuContainer.style.transform = 'translateY(0)';
menu.style.transform = 'translateY(0)';
floatingBtn.style.transform = 'translateY(-100px)'; floatingBtn.style.transform = 'translateY(-100px)';
} }
lastScrollY = window.scrollY; lastScrollY = window.scrollY;

62
module/webroot/styles.css
View File

@@ -21,29 +21,40 @@ body {
margin-top: 100px; margin-top: 100px;
} }
.search-menu-container {
display: flex;
position: fixed;
top: 40px;
width: calc(100% - 15px);
z-index: 1000;
transition: transform 0.3s ease;
}
.search-card { .search-card {
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
position: fixed; border-radius: 50px;
top: 40px; left: 0;
transition: transform 0.3s ease; width: calc(100% - 80px);
width: calc(100% - 100px); position: absolute;
z-index: 1000;
} }
.search-icon {
position: absolute;
left: 18px;
}
.search-input { .search-input {
background-color: #fff; background-color: #fff;
border: none; border: none;
box-sizing: border-box;
font-size: 14px; font-size: 14px;
outline: none; outline: none;
padding: 5px 15px; padding: 5px 30px;
text-align: left;
width: 100%; width: 100%;
} }
@@ -52,7 +63,6 @@ body {
right: 10px; right: 10px;
border: none; border: none;
background: none; background: none;
color: #ccc;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
display: none; display: none;
@@ -61,11 +71,8 @@ body {
.menu { .menu {
display: flex; display: flex;
position: fixed; right: 0;
top: 40px; position: absolute;
right: 10px;
z-index: 1000;
transition: transform 0.3s ease;
} }
.menu-toggle { .menu-toggle {
@@ -75,17 +82,18 @@ body {
#menu-button { #menu-button {
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 25px; border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 13px 17px; width: 50px;
text-align: center; height: 50px;
position: relative; display: flex;
z-index: 1000; justify-content: center;
align-items: center;
} }
.menu-icon { .menu-icon {
display: inline-block; display: inline-block;
transition: transform 0.3s ease; transition: transform 0.2s ease;
} }
.menu-icon.menu-open { .menu-icon.menu-open {
@@ -106,7 +114,7 @@ body {
top: 110%; top: 110%;
right: 0; right: 0;
transform: translateX(120%); transform: translateX(120%);
transition: transform 0.3s ease; transition: transform 0.2s ease;
width: auto; width: auto;
white-space: nowrap; white-space: nowrap;
} }
@@ -224,15 +232,18 @@ body {
.floating-btn { .floating-btn {
background-color: #007bff; background-color: #007bff;
border: none; border: none;
border-radius: 24px;
box-shadow: 0 4px 8px #0003; box-shadow: 0 4px 8px #0003;
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10px 20px; padding: 12px 17px;
font-size: 16px; font-size: 17px;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
} }
.loading { .loading {
@@ -271,6 +282,7 @@ body {
border: 1px solid #6E6E6E; border: 1px solid #6E6E6E;
} }
.clear-btn,
.search-input{ .search-input{
color: white; color: white;
} }