85 lines
3.3 KiB
HTML
85 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>RADIO</title>
|
|
<meta name="theme-color" content="#0daa1e">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Bebas+Neue&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/radio.css">
|
|
</head>
|
|
<body>
|
|
<div id="reconnect" class="hidden">DISCONNECTED — RECONNECTING...</div>
|
|
<div id="buffering" class="hidden">BUFFERING...</div>
|
|
<div id="top-bar">
|
|
<div id="hxc-btn" class="debug-btn hidden" title="HXC">🤘</div>
|
|
<div id="thps-btn" class="debug-btn hidden" title="THPS">🛹</div>
|
|
<div id="skip-btn" class="debug-btn hidden" title="skip">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M2 2l8 6-8 6V2z" fill="currentColor"/>
|
|
<rect x="12" y="2" width="2.5" height="12" rx="0.5" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
<div id="car-btn" title="car mode">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M3 9l1.5-4h7L13 9" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
|
|
<rect x="1.5" y="9" width="13" height="3.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
|
|
<circle cx="4.5" cy="12.5" r="1" fill="currentColor"/>
|
|
<circle cx="11.5" cy="12.5" r="1" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
<div id="vol-btn" title="volume">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M2 5.5h2.5L8 2v12L4.5 10.5H2a1 1 0 01-1-1v-3a1 1 0 011-1z" fill="currentColor"/>
|
|
<path d="M10.5 4.5c.8.8 1.3 2 1.3 3.5s-.5 2.7-1.3 3.5M12.5 2.5c1.3 1.3 2 3.2 2 5.5s-.7 4.2-2 5.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div id="vol-dropdown" class="hidden">
|
|
<input type="range" id="vol" min="0" max="200" value="80" orient="vertical">
|
|
</div>
|
|
<div id="splash">
|
|
<div id="freq">66.67 FM</div>
|
|
<div id="title" data-text="ACID RADIO">ACID<br>RADIO</div>
|
|
<div id="tagline">HARDCORE x HEAVY x PUNK</div>
|
|
<button id="tunein">TUNE IN</button>
|
|
<div id="listener-count">0 listening</div>
|
|
</div>
|
|
<div id="radio" class="hidden">
|
|
<div id="radio-header">ACID RADIO</div>
|
|
<div id="now-artist"></div>
|
|
<div id="now-track"></div>
|
|
<div id="now-genre"></div>
|
|
<div id="progress-row">
|
|
<span id="time-elapsed">0:00</span>
|
|
<div id="progress-wrap">
|
|
<div id="progress-bar"></div>
|
|
</div>
|
|
<span id="time-total">0:00</span>
|
|
</div>
|
|
<div id="votes">
|
|
<button id="vote-up" class="vote-btn" title="thumbs up">
|
|
<span class="vote-emoji">🤘</span>
|
|
<span id="count-up">0</span>
|
|
</button>
|
|
<button id="vote-down" class="vote-btn" title="thumbs down">
|
|
<span class="vote-emoji">👎</span>
|
|
<span id="count-down">0</span>
|
|
</button>
|
|
<button id="vote-skip" class="vote-btn" title="vote to skip">
|
|
<span class="vote-emoji">⏭</span>
|
|
<span id="skip-vote-count">0</span>
|
|
</button>
|
|
</div>
|
|
<div id="listener-count-radio">0 listening</div>
|
|
</div>
|
|
<video id="bg-video" muted playsinline></video>
|
|
<video id="bg-video2" muted playsinline></video>
|
|
<audio id="audio"></audio>
|
|
<script src="/radio.js"></script>
|
|
</body>
|
|
</html>
|