Fixes and Features

* Fixes ENTER button doesn't close the intro modal
* Implements glitch effect for Terminal
* Pressing ENTER button on intro modal will now close the modal
This commit is contained in:
2025-07-02 00:28:45 +05:30
parent db6f27849f
commit b0241787ea
2 changed files with 129 additions and 5 deletions

74
hg.css
View File

@@ -1615,3 +1615,77 @@ canvas {
inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.1),
0 2px 8px rgba(0, 0, 0, 0.3); 0 2px 8px rgba(0, 0, 0, 0.3);
} }
/* Terminal Overlay Glitch Animations */
.terminal-overlay {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.terminal-overlay.open {
visibility: visible;
opacity: 1;
animation: terminalGlitchIn 1.2s ease-out forwards;
}
.terminal-overlay.closing {
animation: terminalGlitchOut 0.8s ease-in forwards;
}
@keyframes terminalGlitchIn {
0% {
opacity: 0;
transform: scale(0.7) translateX(0);
filter: hue-rotate(0deg) saturate(1) brightness(1);
}
8% {
opacity: 0.2;
transform: scale(0.8) translateX(-30px);
filter: hue-rotate(120deg) saturate(4) brightness(1.5);
}
12% {
opacity: 0.6;
transform: scale(1.15) translateX(25px);
filter: hue-rotate(-60deg) saturate(3) brightness(0.8);
}
16% {
opacity: 0.3;
transform: scale(0.75) translateX(-15px);
filter: hue-rotate(200deg) saturate(5) brightness(1.8);
}
20% {
opacity: 0.8;
transform: scale(1.08) translateX(12px);
filter: hue-rotate(-100deg) saturate(2) brightness(0.6);
}
100% {
opacity: 1;
transform: scale(1) translateX(0);
filter: hue-rotate(0deg) saturate(1) brightness(1);
}
}
@keyframes terminalGlitchOut {
0% {
opacity: 1;
transform: scale(1) translateX(0);
filter: hue-rotate(0deg) saturate(1) brightness(1);
}
15% {
opacity: 0.8;
transform: scale(1.02) translateX(2px);
filter: hue-rotate(30deg) saturate(2) brightness(1.2);
}
50% {
opacity: 0.2;
transform: scale(0.8) translateX(-12px);
filter: hue-rotate(-120deg) saturate(5) brightness(0.5);
}
100% {
opacity: 0;
visibility: hidden;
transform: scale(0.4) translateX(0);
filter: hue-rotate(0deg) saturate(1) brightness(1);
}
}

View File

@@ -143,13 +143,30 @@
initProgressBar(); initProgressBar();
}); });
document.getElementById("enterButton")?.addEventListener("click", async () => {
var hydra = new Hydra({ detectAudio: false });
modalEl.classList.remove("open");
// Show the music player and progress bar with a slight delay for better effect
setTimeout(() => {
showPlayerInterface();
}, 300); // Small delay to let the modal close animation start
getMusic().then(() => {
playMusic();
});
initHydra();
initControls();
initProgressBar();
});
document.getElementById("history").addEventListener("click", () => { document.getElementById("history").addEventListener("click", () => {
downloadHistory(); downloadHistory();
}); });
// Handle modal exit clicks (background and close button) // Handle modal exit clicks (background and close button)
document.addEventListener("click", (event) => { document.addEventListener("click", (event) => {
if (event.target.classList.contains("modal-exit") || event.target.id === "initButton") { if (event.target.classList.contains("modal-exit") || event.target.id === "initButton" || event.target.id === "enterButton") {
// Only trigger if modal is actually open // Only trigger if modal is actually open
if (modalEl.classList.contains("open")) { if (modalEl.classList.contains("open")) {
setTimeout(() => { setTimeout(() => {
@@ -193,6 +210,24 @@
case "t": case "t":
toggleTerminal(); toggleTerminal();
break; break;
case "Enter":
if (modalEl.classList.contains("open")) {
var hydra = new Hydra({ detectAudio: false });
modalEl.classList.remove("open");
// Show the music player and progress bar with a slight delay for better effect
setTimeout(() => {
showPlayerInterface();
}, 300); // Small delay to let the modal close animation start
getMusic().then(() => {
playMusic();
});
initHydra();
initControls();
initProgressBar();
}
break;
} }
}); });
@@ -1411,14 +1446,29 @@ https://retrowave.ru/${musicData.streamUrl}
} }
function toggleTerminal() { function toggleTerminal() {
terminalOverlay.classList.toggle("hidden"); if (terminalOverlay.classList.contains("hidden") || !terminalOverlay.classList.contains("open")) {
if (!terminalOverlay.classList.contains("hidden")) { openTerminal();
terminalInput.focus(); } else {
closeTerminal();
} }
} }
function openTerminal() {
terminalOverlay.classList.remove("hidden");
terminalOverlay.classList.remove("closing");
terminalOverlay.classList.add("open");
terminalInput.focus();
}
function closeTerminal() { function closeTerminal() {
terminalOverlay.classList.remove("open");
terminalOverlay.classList.add("closing");
// Wait for animation to complete before hiding
setTimeout(() => {
terminalOverlay.classList.add("hidden"); terminalOverlay.classList.add("hidden");
terminalOverlay.classList.remove("closing");
}, 800); // Match the animation duration
} }
function addTerminalLine(text, isCommand = false) { function addTerminalLine(text, isCommand = false) {