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),
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
58
player.js
58
player.js
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user