Skip to content

Commit

Permalink
animation optimize
Browse files Browse the repository at this point in the history
  • Loading branch information
@KOWX712
KOWX712 committed Feb 7, 2025
1 parent c1b4c37 commit 7a219c0
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 43 deletions.
10 changes: 5 additions & 5 deletions webroot/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,23 +27,23 @@
<img src="/assets/snowflakes.png" alt="Christmas Limited Edition Logo">
</div>
</div>
<div class="box">
<div class="box ripple-container">
<div class="toggle-container" id="update">
<i class="control-icon" id="update-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="21px" viewBox="0 -960 960 960" width="21px"><path d="M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q17-72 85-137t145-65q33 0 56.5 23.5T520-716v242l64-62 56 56-160 160-160-160 56-56 64 62v-242q-76 14-118 73.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-48-22-89.5T600-680v-93q74 35 117 103.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm220-358Z"/></svg>
</i>
<ul id="reset-text">Update hosts file</ul>
</div>
</div>
<div class="box">
<div class="box ripple-container">
<div class="toggle-container" id="reset">
<i class="control-icon" id="reset-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="21px" viewBox="0 -960 960 960" width="21px"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>
</i>
<ul id="reset-text">Restore original hosts file</ul>
</div>
</div>
<div class="box">
<div class="box ripple-container">
<div class="toggle-container" id="block-porn">
<i class="control-icon" id="block-porn-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="21px" viewBox="0 -960 960 960" width="21px"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/></svg>
Expand All @@ -55,7 +55,7 @@
</label>
</div>
</div>
<div class="box">
<div class="box ripple-container">
<div class="toggle-container" id="block-gambling">
<i class="control-icon" id="block-gambling-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="21px" viewBox="0 -960 960 960" width="21px"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-83v-40q-35-5-67.5-19T312-256l-28 29q33 26 72.5 42.5T440-163Zm80 0q44-5 83.5-21.5T676-227l-28-29q-28 20-60.5 34T520-203v40Zm-40-117q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Zm253-4q26-33 42.5-72.5T797-440h-40q-5 35-19 67.5T704-312l29 28Zm-506 0 29-29q-20-28-34-60t-19-67h-40q5 44 21.5 83.5T227-284Zm253-36L360-480l120-160 120 160-120 160ZM163-520h40q5-35 19-67t34-60l-29-29q-26 33-42.5 72.5T163-520Zm594 0h40q-5-44-22-83.5T732-676l-28 28q20 28 34 60.5t19 67.5ZM313-704q28-20 60-34t67-19v-40q-44 5-83.5 21.5T284-733l29 29Zm335 0 28-28q-33-26-72.5-43T520-797v40q35 5 67.5 19t60.5 34Z"/></svg>
Expand All @@ -67,7 +67,7 @@
</label>
</div>
</div>
<div class="box">
<div class="box ripple-container">
<div class="toggle-container" id="block-fake">
<i class="control-icon" id="block-fake-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="21px" viewBox="0 -960 960 960" width="21px"><path d="M280-280q17 0 28.5-11.5T320-320q0-17-11.5-28.5T280-360q-17 0-28.5 11.5T240-320q0 17 11.5 28.5T280-280Zm-40-160h80v-240h-80v240Zm200 160h280v-80H440v80Zm0-160h280v-80H440v80Zm0-160h280v-80H440v80ZM160-120q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm0 0v-560 560Z"/></svg>
Expand Down
73 changes: 71 additions & 2 deletions webroot/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@ const links = [
{ element: sponsorLink, url: 'https://buymeacoffee.com/zg089', name: 'Sponsor' }
];

// Ripple effect configuration
const rippleClasses = ['.ripple-container', '.category-container button', '.link-icon'];

let isScrolling = false;
let modeActive = false;

// Function to handle about menu
function aboutMenu() {
const aboutOverlay = document.getElementById('about-overlay');
Expand Down Expand Up @@ -286,6 +292,68 @@ links.forEach(link => {
});
});

// Function to apply ripple effect
function applyRippleEffect() {
rippleClasses.forEach(selector => {
document.querySelectorAll(selector).forEach(element => {
if (element.dataset.rippleListener !== "true") {
element.addEventListener("pointerdown", function (event) {
if (isScrolling) return;
if (modeActive) return;

const ripple = document.createElement("span");
ripple.classList.add("ripple");

// Calculate ripple size and position
const rect = element.getBoundingClientRect();
const width = rect.width;
const size = Math.max(rect.width, rect.height);
const x = event.clientX - rect.left - size / 2;
const y = event.clientY - rect.top - size / 2;

// Determine animation duration
let duration = 0.3 + (width / 800) * 0.3;
duration = Math.min(0.8, Math.max(0.2, duration));

// Set ripple styles
ripple.style.width = ripple.style.height = `${size}px`;
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
ripple.style.animationDuration = `${duration}s`;
ripple.style.transition = `opacity ${duration}s ease`;

// Adaptive color
const computedStyle = window.getComputedStyle(element);
const bgColor = computedStyle.backgroundColor || "rgba(0, 0, 0, 0)";
const textColor = computedStyle.color;
const isDarkColor = (color) => {
const rgb = color.match(/\d+/g);
if (!rgb) return false;
const [r, g, b] = rgb.map(Number);
return (r * 0.299 + g * 0.587 + b * 0.114) < 96; // Luma formula
};
ripple.style.backgroundColor = isDarkColor(bgColor) ? "rgba(255, 255, 255, 0.2)" : "";

// Append ripple and handle cleanup
element.appendChild(ripple);
const handlePointerUp = () => {
ripple.classList.add("end");
setTimeout(() => {
ripple.classList.remove("end");
ripple.remove();
}, duration * 1000);
element.removeEventListener("pointerup", handlePointerUp);
element.removeEventListener("pointercancel", handlePointerUp);
};
element.addEventListener("pointerup", handlePointerUp);
element.addEventListener("pointercancel", handlePointerUp);
});
element.dataset.rippleListener = "true";
}
});
});
}

// Initial load
document.addEventListener('DOMContentLoaded', async () => {
document.getElementById("about-button").addEventListener("click", aboutMenu);
Expand All @@ -298,6 +366,7 @@ document.addEventListener('DOMContentLoaded', async () => {
getVersion();
getStatus();
blockPornStatus();
blockGamblingStatus()
blockFakenewsStatus()
blockGamblingStatus();
blockFakenewsStatus();
applyRippleEffect();
});
74 changes: 38 additions & 36 deletions webroot/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ body.input-focused {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
padding: 15px;
overflow: hidden;
user-select: none;
}

.festival {
Expand Down Expand Up @@ -93,6 +94,7 @@ body.input-focused {
border: none;
font-size: 18px;
color: #ccc;
user-select: none;
}

.about-content {
Expand All @@ -110,26 +112,31 @@ body.input-focused {

.logo-light {
display: inline-block;
user-select: none;
}

.logo-dark {
display: none;
user-select: none;
}

#module-name {
padding-top: 5px;
font-size: 28px;
user-select: none;
}

#author {
font-size: 14px;
user-select: none;
}

#credits {
padding-top: 10px;
padding-bottom: 5px;
font-weight: bold;
font-size: 20px;
user-select: none;
}

.link {
Expand All @@ -144,6 +151,9 @@ body.input-focused {
border-radius: 8px;
margin-bottom: 5px;
transition: background-color 0.2s ease;
position: relative;
overflow: hidden;
user-select: none;
}

.link-icon object {
Expand All @@ -157,43 +167,25 @@ body.input-focused {
background-color: #38A7ED;
}

#telegram:active {
background-color: #0B76BA;
}

#github {
background-color: #606060;
}

#github:active {
background-color: #211C1C;
}

#xda {
background-color: #FF8002;
color: #fff;
}

#xda:active {
background-color: #A95400;
color: #fff;
}

#sponsor {
background-color: #E7D705;
}

#sponsor:active {
background-color: #968B00;
}

#link-text {
font-size: 17px;
font-weight: bold;
}

.box {
position: relative;
width: 85vw;
max-width: 800px;
background-color: #fff;
Expand All @@ -202,17 +194,22 @@ body.input-focused {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
padding: 15px;
transition: background-color 0.2s ease;
position: relative;
overflow: hidden;
user-select: none;
}

.box h2 {
margin-top: 5px;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
user-select: none;
}

#version-status {
font-size: 14px;
user-select: none;
}

.toggle-container {
Expand Down Expand Up @@ -318,21 +315,8 @@ input:checked+.slider:before {
justify-content: center;
align-items: center;
transition: background-color 0.2s ease;
}

.current-mode-text:active,
.action-button:active,
.category-container button:active {
background-color: #850B00;
}

.box:active {
background-color: #ccc;
}

#whitelist:active,
#blacklist:active {
background-color: #fff;
position: relative;
overflow: hidden;
}

ul {
Expand Down Expand Up @@ -387,6 +371,7 @@ li:last-child {
width: auto;
max-width: calc(100% - 40px);
z-index: 1300;
user-select: none;
}

.prompt.visible {
Expand Down Expand Up @@ -435,6 +420,26 @@ li:last-child {
text-align: center;
}

.ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
opacity: 1;
animation: ripple-animation ease-out forwards;
pointer-events: none;
background: rgba(0, 0, 0, 0.2);
}

.ripple.end {
opacity: 0;
}

@keyframes ripple-animation {
to {
transform: scale(3);
}
}

@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
Expand All @@ -445,8 +450,6 @@ li:last-child {
border-bottom: 1px solid #6E6E6E;
}

#whitelist:active,
#blacklist:active,
.about-menu,
.box {
background-color: #343434;
Expand All @@ -470,7 +473,6 @@ li:last-child {
fill: #fff;
}

.box:active,
.slider {
background-color: #6E6E6E;
}
Expand Down

0 comments on commit 7a219c0

Please sign in to comment.