New Features
* Adds Glitch Entrance of Intro Modal (Into the Spiderverse Multidimensional jump)
This commit is contained in:
365
hg.css
365
hg.css
@@ -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 {
|
||||
|
||||
31
player.js
31
player.js
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user