diff options
| -rw-r--r-- | hg.css | 365 | ||||
| -rw-r--r-- | player.js | 31 |
2 files changed, 369 insertions, 27 deletions
@@ -69,6 +69,19 @@ body { transform: perspective(1000px) rotateX(5deg) rotateY(-2deg); transform-style: preserve-3d; animation: playerFloat 6s ease-in-out infinite, playerPulse 4s ease-in-out infinite alternate; + + /* Initially hidden */ + opacity: 0; + visibility: hidden; + transform: perspective(1000px) rotateX(5deg) rotateY(-2deg) scale(0.8); + transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +/* Show player after modal is closed */ +.music-player.show { + opacity: 1; + visibility: visible; + transform: perspective(1000px) rotateX(5deg) rotateY(-2deg) scale(1); } .music-player .color-overlay { @@ -261,14 +274,81 @@ dialog::backdrop { visibility: visible; opacity: 1; transition-delay: 0s; + animation: modalGlitchIn 1.5s ease-out forwards; } -.modal-bg { - position: absolute; - background: rgba(0, 0, 0, 0.8); - backdrop-filter: blur(2px); - width: 100%; - height: 100%; +@keyframes modalGlitchIn { + 0% { + opacity: 0; + transform: scale(0.8) translateX(0); + filter: hue-rotate(0deg) saturate(1); + } + + 10% { + opacity: 0.3; + transform: scale(0.9) translateX(-20px); + filter: hue-rotate(90deg) saturate(3); + } + + 15% { + opacity: 0.7; + transform: scale(1.1) translateX(15px); + filter: hue-rotate(-45deg) saturate(2); + } + + 20% { + opacity: 0.4; + transform: scale(0.85) translateX(-10px); + filter: hue-rotate(180deg) saturate(4); + } + + 25% { + opacity: 0.8; + transform: scale(1.05) translateX(8px); + filter: hue-rotate(-90deg) saturate(1.5); + } + + 30% { + opacity: 0.6; + transform: scale(0.95) translateX(-5px); + filter: hue-rotate(45deg) saturate(3); + } + + 40% { + opacity: 0.9; + transform: scale(1.02) translateX(3px); + filter: hue-rotate(-30deg) saturate(2); + } + + 50% { + opacity: 0.7; + transform: scale(0.98) translateX(-2px); + filter: hue-rotate(60deg) saturate(2.5); + } + + 65% { + opacity: 0.95; + transform: scale(1.01) translateX(1px); + filter: hue-rotate(-15deg) saturate(1.2); + } + + 80% { + opacity: 0.85; + transform: scale(0.99) translateX(-1px); + filter: hue-rotate(15deg) saturate(1.8); + } + + 90% { + opacity: 0.98; + transform: scale(1.005) translateX(0.5px); + filter: hue-rotate(-5deg) saturate(1.1); + } + + 100% { + opacity: 1; + transform: scale(1) translateX(0); + filter: hue-rotate(0deg) saturate(1); + } } .modal-container { @@ -286,16 +366,119 @@ dialog::backdrop { color: #00ffff; font-family: 'VCR', 'Consolas', 'Courier New', monospace; transform: perspective(800px) rotateX(2deg); + overflow: hidden; +} + +.modal-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, + transparent 0%, + rgba(255, 41, 117, 0.1) 25%, + rgba(0, 255, 255, 0.1) 50%, + rgba(255, 41, 117, 0.1) 75%, + transparent 100%); + animation: modalScanline 3s linear infinite; + pointer-events: none; + z-index: 1; +} + +.modal-container::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 255, 255, 0.03) 2px, + rgba(0, 255, 255, 0.03) 4px + ); + pointer-events: none; + z-index: 2; +} + +.modal-container > * { + position: relative; + z-index: 3; +} + +@keyframes modalScanline { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } } .modal-container h3 { color: #ff2975; text-shadow: 0 0 12px rgba(255, 41, 117, 0.8); - font-family: 'VCR', 'Consolas', 'Courier New', monospace; - font-size: 1.1em; - margin-bottom: 1em; - padding-bottom: 0.4em; - border-bottom: 1px solid rgba(255, 41, 117, 0.4); + font-size: 24px; + margin-bottom: 20px; + font-weight: bold; + animation: titleGlitch 0.8s ease-out 0.5s; +} + +@keyframes titleGlitch { + 0% { + transform: translateX(0); + opacity: 1; + } + 10% { + transform: translateX(-3px); + opacity: 0.8; + text-shadow: + -3px 0 #ff2975, + 3px 0 #00ffff, + 0 0 12px rgba(255, 41, 117, 0.8); + } + 20% { + transform: translateX(2px); + opacity: 0.9; + text-shadow: + 2px 0 #00ffff, + -2px 0 #ff2975, + 0 0 12px rgba(0, 255, 255, 0.8); + } + 30% { + transform: translateX(-1px); + opacity: 0.85; + text-shadow: + 1px 0 #ff2975, + -1px 0 #00ffff, + 0 0 12px rgba(255, 41, 117, 0.8); + } + 50% { + transform: translateX(1px); + opacity: 0.95; + text-shadow: + -1px 0 #00ffff, + 1px 0 #ff2975, + 0 0 12px rgba(0, 255, 255, 0.8); + } + 70% { + transform: translateX(-0.5px); + opacity: 0.98; + text-shadow: + 0.5px 0 #ff2975, + -0.5px 0 #00ffff, + 0 0 12px rgba(255, 41, 117, 0.8); + } + 100% { + transform: translateX(0); + opacity: 1; + text-shadow: 0 0 12px rgba(255, 41, 117, 0.8); + } } .modal-container h4 { @@ -304,6 +487,75 @@ dialog::backdrop { font-family: 'VCR', 'Consolas', 'Courier New', monospace; font-size: 0.9em; margin: 0.8em 0; + animation: contentGlitchIn 0.6s ease-out 1s both; +} + +#warning { + color: #ffff00; + text-shadow: 0 0 10px rgba(255, 255, 0, 0.8); + font-weight: bold; + text-align: center; + margin: 15px 0; + padding: 8px; + border: 1px solid rgba(255, 255, 0, 0.3); + background: rgba(255, 255, 0, 0.1); + animation: warningGlitch 0.8s ease-out 0.8s both; +} + +@keyframes contentGlitchIn { + 0% { + opacity: 0; + transform: translateY(10px); + filter: blur(2px); + } + 30% { + opacity: 0.6; + transform: translateY(-2px); + filter: blur(1px); + } + 60% { + opacity: 0.8; + transform: translateY(1px); + filter: blur(0.5px); + } + 100% { + opacity: 1; + transform: translateY(0); + filter: blur(0); + } +} + +@keyframes warningGlitch { + 0% { + opacity: 0; + transform: scale(0.8); + filter: hue-rotate(0deg); + } + 20% { + opacity: 0.7; + transform: scale(1.1); + filter: hue-rotate(45deg); + } + 40% { + opacity: 0.9; + transform: scale(0.95); + filter: hue-rotate(-30deg); + } + 60% { + opacity: 0.8; + transform: scale(1.05); + filter: hue-rotate(60deg); + } + 80% { + opacity: 0.95; + transform: scale(0.98); + filter: hue-rotate(-15deg); + } + 100% { + opacity: 1; + transform: scale(1); + filter: hue-rotate(0deg); + } } .modal-container p { @@ -319,6 +571,7 @@ dialog::backdrop { text-shadow: 0 0 8px rgba(255, 41, 117, 0.8); font-style: normal; font-weight: bold; + animation: contentGlitchIn 0.6s ease-out 1.2s both; } .modal-close { @@ -348,7 +601,34 @@ dialog::backdrop { color: #00ffff; text-shadow: 0 0 15px rgba(0, 255, 255, 0.8); transform: scale(1.1); - background: rgba(255, 41, 117, 0.1); + animation: buttonGlitch 0.5s ease-in-out; +} + +@keyframes buttonGlitch { + 0%, 100% { + transform: scale(1.1); + } + 25% { + transform: scale(1.1) translateX(-2px); + text-shadow: + -2px 0 #ff2975, + 2px 0 #00ffff, + 0 0 15px rgba(0, 255, 255, 0.8); + } + 50% { + transform: scale(1.1) translateX(2px); + text-shadow: + 2px 0 #ff2975, + -2px 0 #00ffff, + 0 0 15px rgba(255, 41, 117, 0.8); + } + 75% { + transform: scale(1.1) translateX(-1px); + text-shadow: + -1px 0 #00ffff, + 1px 0 #ff2975, + 0 0 15px rgba(0, 255, 255, 0.8); + } } .text-center { @@ -440,6 +720,19 @@ canvas { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 41, 117, 0.2); + + /* Initially hidden */ + opacity: 0; + visibility: hidden; + transform: translateY(100%); + transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +/* Show progress bar after modal is closed */ +.progress-bar-container.show { + opacity: 1; + visibility: visible; + transform: translateY(0); } .progress-info { @@ -856,23 +1149,37 @@ canvas { } .terminal-close:hover { - color: #ff2975; - text-shadow: 0 0 15px rgba(255, 41, 117, 1); - border-color: #ff2975; - background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(255, 41, 117, 0.2)); - box-shadow: - inset 0 1px 0 rgba(255, 41, 117, 0.3), - inset 0 -1px 0 rgba(0, 0, 0, 0.5), - 0 0 20px rgba(255, 41, 117, 0.4), - 0 2px 4px rgba(0, 0, 0, 0.3); - transform: translateY(-1px); + color: #00ffff; + text-shadow: 0 0 15px rgba(0, 255, 255, 0.8); + transform: scale(1.1); + animation: buttonGlitch 0.5s ease-in-out; } -.terminal-close:active { - transform: translateY(1px); - box-shadow: - inset 0 2px 4px rgba(0, 0, 0, 0.5), - 0 0 5px rgba(255, 41, 117, 0.3); +@keyframes buttonGlitch { + 0%, 100% { + transform: scale(1.1); + } + 25% { + transform: scale(1.1) translateX(-2px); + text-shadow: + -2px 0 #ff2975, + 2px 0 #00ffff, + 0 0 15px rgba(0, 255, 255, 0.8); + } + 50% { + transform: scale(1.1) translateX(2px); + text-shadow: + 2px 0 #ff2975, + -2px 0 #00ffff, + 0 0 15px rgba(255, 41, 117, 0.8); + } + 75% { + transform: scale(1.1) translateX(-1px); + text-shadow: + -1px 0 #00ffff, + 1px 0 #ff2975, + 0 0 15px rgba(0, 255, 255, 0.8); + } } .terminal-content { @@ -1006,6 +1313,7 @@ canvas { display: flex; gap: 1em; margin: 1em 0; + animation: contentGlitchIn 0.8s ease-out 1.4s both; } .controls-section { @@ -1025,6 +1333,7 @@ canvas { display: flex; flex-direction: column; gap: 0.3em; + animation: contentGlitchIn 0.6s ease-out 1.6s both; } .touch-grid { @@ -1058,6 +1367,7 @@ canvas { .features-compact { text-align: center; margin: 0.8em 0; + animation: contentGlitchIn 0.6s ease-out 1.8s both; } .features-compact p { @@ -1071,6 +1381,7 @@ canvas { .credit-compact { text-align: center; margin-top: 0.5em; + animation: contentGlitchIn 0.6s ease-out 2s both; } .credit-compact small { @@ -39,6 +39,19 @@ openDialog(); listenUploadFileChange(); + function showPlayerInterface() { + const musicPlayer = document.querySelector(".music-player"); + const progressBarContainer = document.getElementById("progress-bar-container"); + + if (musicPlayer) { + musicPlayer.classList.add("show"); + } + + if (progressBarContainer) { + progressBarContainer.classList.add("show"); + } + } + function initDynamicTooltips() { document.querySelectorAll("[title]").forEach((element) => { const title = element.getAttribute("title"); @@ -116,6 +129,12 @@ document.getElementById("initButton")?.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(); }); @@ -128,6 +147,18 @@ downloadHistory(); }); + // Handle modal exit clicks (background and close button) + document.addEventListener("click", (event) => { + if (event.target.classList.contains("modal-exit") || event.target.id === "initButton") { + // Only trigger if modal is actually open + if (modalEl.classList.contains("open")) { + setTimeout(() => { + showPlayerInterface(); + }, 300); + } + } + }); + document.addEventListener("keyup", (event) => { if (!terminalOverlay.classList.contains("hidden")) { return; |