|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>HOLOBOX - 8-bit Chiptune Jukebox</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/@tonejs/[email protected]/build/Midi.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); |
|
|
|
body { |
|
background-color: #0a0a1a; |
|
font-family: 'Press Start 2P', cursive; |
|
overflow: hidden; |
|
height: 100vh; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.holobox { |
|
position: relative; |
|
width: 400px; |
|
height: 500px; |
|
background-color: #111; |
|
border-radius: 10px; |
|
box-shadow: |
|
0 0 10px #0ff, |
|
0 0 20px #0ff, |
|
0 0 30px #0ff, |
|
inset 0 0 10px rgba(0, 255, 255, 0.5); |
|
padding: 20px; |
|
border: 4px solid #333; |
|
} |
|
|
|
.screen { |
|
width: 100%; |
|
height: 250px; |
|
background-color: #000; |
|
border: 4px solid #333; |
|
margin-bottom: 20px; |
|
position: relative; |
|
overflow: hidden; |
|
box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.3); |
|
} |
|
|
|
.pixel-grid { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-image: |
|
linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), |
|
linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px); |
|
background-size: 20px 20px; |
|
} |
|
|
|
.title { |
|
color: #0ff; |
|
text-align: center; |
|
font-size: 24px; |
|
margin-bottom: 10px; |
|
text-shadow: 0 0 5px #0ff; |
|
letter-spacing: 2px; |
|
} |
|
|
|
.buttons { |
|
display: flex; |
|
justify-content: space-around; |
|
margin-top: 30px; |
|
} |
|
|
|
.btn { |
|
width: 80px; |
|
height: 80px; |
|
border-radius: 50%; |
|
background-color: #222; |
|
border: 4px solid #333; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
cursor: pointer; |
|
transition: all 0.3s; |
|
position: relative; |
|
box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); |
|
} |
|
|
|
.btn:hover { |
|
transform: scale(1.05); |
|
box-shadow: 0 0 15px #0ff; |
|
} |
|
|
|
.btn.active { |
|
box-shadow: 0 0 20px #0ff, 0 0 30px #0ff; |
|
background-color: #0ff; |
|
} |
|
|
|
.btn i { |
|
font-size: 30px; |
|
color: #0ff; |
|
} |
|
|
|
.btn.active i { |
|
color: #000; |
|
} |
|
|
|
.btn::before { |
|
content: ''; |
|
position: absolute; |
|
top: -5px; |
|
left: -5px; |
|
right: -5px; |
|
bottom: -5px; |
|
border-radius: 50%; |
|
border: 2px solid #0ff; |
|
opacity: 0; |
|
transition: all 0.3s; |
|
} |
|
|
|
.btn:hover::before { |
|
opacity: 1; |
|
} |
|
|
|
.btn.active::before { |
|
opacity: 1; |
|
animation: pulse 1.5s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { |
|
transform: scale(1); |
|
opacity: 0.7; |
|
} |
|
70% { |
|
transform: scale(1.3); |
|
opacity: 0; |
|
} |
|
100% { |
|
transform: scale(1); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
.display { |
|
background-color: #111; |
|
color: #0ff; |
|
padding: 10px; |
|
border: 2px solid #333; |
|
margin-top: 20px; |
|
font-size: 12px; |
|
text-align: center; |
|
min-height: 40px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
text-shadow: 0 0 5px #0ff; |
|
box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.2); |
|
} |
|
|
|
.pixel { |
|
position: absolute; |
|
width: 10px; |
|
height: 10px; |
|
background-color: #0ff; |
|
opacity: 0; |
|
} |
|
|
|
.equalizer { |
|
position: absolute; |
|
bottom: 10px; |
|
left: 0; |
|
width: 100%; |
|
height: 60px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: flex-end; |
|
gap: 5px; |
|
} |
|
|
|
.bar { |
|
width: 10px; |
|
background-color: #0ff; |
|
border-radius: 2px; |
|
transition: height 0.1s; |
|
box-shadow: 0 0 5px #0ff; |
|
} |
|
|
|
.scanlines { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient( |
|
rgba(0, 0, 0, 0) 50%, |
|
rgba(0, 255, 255, 0.1) 50% |
|
); |
|
background-size: 100% 4px; |
|
pointer-events: none; |
|
} |
|
|
|
.glitch { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="1" fill="%230ff" opacity="0.1"/></svg>'); |
|
animation: glitch 5s infinite; |
|
opacity: 0.3; |
|
pointer-events: none; |
|
} |
|
|
|
@keyframes glitch { |
|
0%, 100% { transform: translate(0); } |
|
20% { transform: translate(-2px, 2px); } |
|
40% { transform: translate(-2px, -2px); } |
|
60% { transform: translate(2px, 2px); } |
|
80% { transform: translate(2px, -2px); } |
|
} |
|
|
|
.corner { |
|
position: absolute; |
|
width: 30px; |
|
height: 30px; |
|
border-color: #0ff; |
|
border-style: solid; |
|
border-width: 0; |
|
opacity: 0.7; |
|
} |
|
|
|
.corner-tl { |
|
top: 10px; |
|
left: 10px; |
|
border-top-width: 3px; |
|
border-left-width: 3px; |
|
} |
|
|
|
.corner-tr { |
|
top: 10px; |
|
right: 10px; |
|
border-top-width: 3px; |
|
border-right-width: 3px; |
|
} |
|
|
|
.corner-bl { |
|
bottom: 10px; |
|
left: 10px; |
|
border-bottom-width: 3px; |
|
border-left-width: 3px; |
|
} |
|
|
|
.corner-br { |
|
bottom: 10px; |
|
right: 10px; |
|
border-bottom-width: 3px; |
|
border-right-width: 3px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="holobox"> |
|
<div class="corner corner-tl"></div> |
|
<div class="corner corner-tr"></div> |
|
<div class="corner corner-bl"></div> |
|
<div class="corner corner-br"></div> |
|
|
|
<div class="title">HOLOBOX</div> |
|
<div class="screen"> |
|
<div class="pixel-grid"></div> |
|
<div class="glitch"></div> |
|
<div class="scanlines"></div> |
|
<div class="equalizer" id="equalizer"></div> |
|
</div> |
|
<div class="display" id="display">READY</div> |
|
<div class="buttons"> |
|
<div class="btn" id="btn1" data-song="1"> |
|
<i class="fas fa-space-shuttle"></i> |
|
</div> |
|
<div class="btn" id="btn2" data-song="2"> |
|
<i class="fas fa-robot"></i> |
|
</div> |
|
<div class="btn" id="btn3" data-song="3"> |
|
<i class="fas fa-gamepad"></i> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
Tone.start(); |
|
|
|
|
|
const equalizer = document.getElementById('equalizer'); |
|
for (let i = 0; i < 30; i++) { |
|
const bar = document.createElement('div'); |
|
bar.className = 'bar'; |
|
bar.style.height = '5px'; |
|
equalizer.appendChild(bar); |
|
} |
|
|
|
|
|
const screen = document.querySelector('.screen'); |
|
for (let i = 0; i < 50; i++) { |
|
const pixel = document.createElement('div'); |
|
pixel.className = 'pixel'; |
|
pixel.style.left = Math.random() * 100 + '%'; |
|
pixel.style.top = Math.random() * 100 + '%'; |
|
pixel.style.opacity = Math.random() * 0.5; |
|
screen.appendChild(pixel); |
|
|
|
animatePixel(pixel); |
|
} |
|
|
|
function animatePixel(pixel) { |
|
const duration = 2000 + Math.random() * 3000; |
|
const delay = Math.random() * 5000; |
|
|
|
setTimeout(() => { |
|
pixel.style.transition = `all ${duration}ms linear`; |
|
pixel.style.left = Math.random() * 100 + '%'; |
|
pixel.style.top = Math.random() * 100 + '%'; |
|
|
|
setTimeout(() => { |
|
pixel.style.transition = 'none'; |
|
pixel.style.left = Math.random() * 100 + '%'; |
|
pixel.style.top = Math.random() * 100 + '%'; |
|
animatePixel(pixel); |
|
}, duration); |
|
}, delay); |
|
} |
|
|
|
|
|
let currentPlayer = null; |
|
const display = document.getElementById('display'); |
|
const buttons = document.querySelectorAll('.btn'); |
|
|
|
|
|
const songs = [ |
|
{ |
|
name: "GALACTIC CRUISE", |
|
|
|
play: function() { |
|
display.textContent = "PLAYING: GALACTIC CRUISE"; |
|
startEqualizer(); |
|
return { stop: function() { stopEqualizer(); } }; |
|
} |
|
}, |
|
{ |
|
name: "ROBOT DANCE", |
|
play: function() { |
|
display.textContent = "PLAYING: ROBOT DANCE"; |
|
startEqualizer(); |
|
return { stop: function() { stopEqualizer(); } }; |
|
} |
|
}, |
|
{ |
|
name: "ARCADE BLAST", |
|
play: function() { |
|
display.textContent = "PLAYING: ARCADE BLAST"; |
|
startEqualizer(); |
|
return { stop: function() { stopEqualizer(); } }; |
|
} |
|
} |
|
]; |
|
|
|
|
|
let equalizerInterval; |
|
function startEqualizer() { |
|
const bars = document.querySelectorAll('.bar'); |
|
clearInterval(equalizerInterval); |
|
|
|
equalizerInterval = setInterval(() => { |
|
bars.forEach(bar => { |
|
const height = 5 + Math.random() * 55; |
|
bar.style.height = height + 'px'; |
|
bar.style.opacity = 0.1 + (height / 60) * 0.9; |
|
}); |
|
}, 100); |
|
} |
|
|
|
function stopEqualizer() { |
|
clearInterval(equalizerInterval); |
|
const bars = document.querySelectorAll('.bar'); |
|
bars.forEach(bar => { |
|
bar.style.height = '5px'; |
|
bar.style.opacity = '0.1'; |
|
}); |
|
} |
|
|
|
|
|
buttons.forEach(btn => { |
|
btn.addEventListener('click', function() { |
|
const songIndex = parseInt(this.getAttribute('data-song')) - 1; |
|
|
|
|
|
if (currentPlayer) { |
|
currentPlayer.stop(); |
|
document.querySelector('.btn.active')?.classList.remove('active'); |
|
} |
|
|
|
|
|
currentPlayer = songs[songIndex].play(); |
|
this.classList.add('active'); |
|
}); |
|
}); |
|
|
|
|
|
setTimeout(() => { |
|
screen.style.boxShadow = 'inset 0 0 20px rgba(0, 255, 255, 0.5)'; |
|
display.style.textShadow = '0 0 5px #0ff'; |
|
}, 500); |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=porkz/holobox" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
