67 lines
2.9 KiB
HTML
67 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Gadget Radio - Cyberpunk Mainframe HUD</title>
|
|
</head>
|
|
<body class="bg-black overflow-hidden font-mono">
|
|
<!-- Three.js Canvas Container -->
|
|
<div id="canvas-container" class="fixed inset-0 z-10"></div>
|
|
|
|
<!-- Scanlines Overlay -->
|
|
<div id="terminal-overlay" class="scanlines fixed inset-0 pointer-events-none z-20"></div>
|
|
|
|
<!-- RGB Shift Overlay -->
|
|
<div id="rgb-shift-overlay" class="rgb-shift fixed inset-0 pointer-events-none z-30"></div>
|
|
|
|
<!-- Data Readouts - Top Left -->
|
|
<div class="data-panel fixed top-4 left-4 z-40" id="panel-top-left">
|
|
<div class="mb-2">/// GADGET RADIO /// v1.0.0 ///</div>
|
|
<div class="text-lime" id="status">>> SYSTEM: ONLINE</div>
|
|
<div class="mt-2">
|
|
<div>> BASS: <span id="freq-bass" class="text-cyan">0</span> Hz</div>
|
|
<div>> MIDS: <span id="freq-mids" class="text-cyan">0</span> Hz</div>
|
|
<div>> TREBLE: <span id="freq-treble" class="text-cyan">0</span> Hz</div>
|
|
</div>
|
|
<div class="mt-1">
|
|
<div>> VOLUME: <span id="volume" class="text-cyan">0</span> dB</div>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="volume-bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Readouts - Top Right -->
|
|
<div class="data-panel fixed top-4 right-4 z-40 text-right" id="panel-top-right">
|
|
<div>> FFT_SIZE: <span id="fft-size" class="text-cyan">—</span></div>
|
|
<div>> SAMPLE_RATE: <span id="sample-rate" class="text-cyan">—</span></div>
|
|
<div>> CHANNELS: <span id="channels" class="text-cyan">—</span></div>
|
|
</div>
|
|
|
|
<!-- Data Readouts - Bottom Left -->
|
|
<div class="data-panel fixed bottom-4 left-4 z-40" id="panel-bottom-left">
|
|
<div>> TRACK: <span id="track-name" class="text-lime">NO FILE LOADED</span></div>
|
|
<div class="mt-1">> LOOP: <span class="text-green">ENABLED</span></div>
|
|
<div class="mt-1">> STREAM: <span class="text-cyan">ACTIVE</span></div>
|
|
</div>
|
|
|
|
<!-- Data Readouts - Bottom Right -->
|
|
<div class="data-panel fixed bottom-4 right-4 z-40 text-right" id="panel-bottom-right">
|
|
<div>> TIME: <span id="current-time" class="text-cyan">00:00</span></div>
|
|
<div>> DURATION: <span id="duration" class="text-cyan">00:00</span></div>
|
|
<div class="mt-1">> FPS: <span id="fps-counter" class="text-cyan">60</span></div>
|
|
</div>
|
|
|
|
<!-- File Upload Overlay -->
|
|
<div id="upload-container" class="upload-container fixed inset-0 flex items-center justify-center z-50 pointer-events-all transition-opacity duration-500">
|
|
<button id="file-upload-btn" class="upload-button font-mono">
|
|
▶ LOAD AUDIO FILE
|
|
</button>
|
|
<input type="file" id="file-input" accept="audio/*" class="hidden" />
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|