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:
74
hg.css
74
hg.css
@@ -1615,3 +1615,77 @@ canvas {
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
58
player.js
58
player.js
@@ -143,13 +143,30 @@
|
||||
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", () => {
|
||||
downloadHistory();
|
||||
});
|
||||
|
||||
// Handle modal exit clicks (background and close button)
|
||||
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
|
||||
if (modalEl.classList.contains("open")) {
|
||||
setTimeout(() => {
|
||||
@@ -193,6 +210,24 @@
|
||||
case "t":
|
||||
toggleTerminal();
|
||||
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() {
|
||||
terminalOverlay.classList.toggle("hidden");
|
||||
if (!terminalOverlay.classList.contains("hidden")) {
|
||||
terminalInput.focus();
|
||||
if (terminalOverlay.classList.contains("hidden") || !terminalOverlay.classList.contains("open")) {
|
||||
openTerminal();
|
||||
} else {
|
||||
closeTerminal();
|
||||
}
|
||||
}
|
||||
|
||||
function openTerminal() {
|
||||
terminalOverlay.classList.remove("hidden");
|
||||
terminalOverlay.classList.remove("closing");
|
||||
terminalOverlay.classList.add("open");
|
||||
terminalInput.focus();
|
||||
}
|
||||
|
||||
function closeTerminal() {
|
||||
terminalOverlay.classList.remove("open");
|
||||
terminalOverlay.classList.add("closing");
|
||||
|
||||
// Wait for animation to complete before hiding
|
||||
setTimeout(() => {
|
||||
terminalOverlay.classList.add("hidden");
|
||||
terminalOverlay.classList.remove("closing");
|
||||
}, 800); // Match the animation duration
|
||||
}
|
||||
|
||||
function addTerminalLine(text, isCommand = false) {
|
||||
|
||||
Reference in New Issue
Block a user