Spaces:

workbykait
/

Radio

Running

App Files Files Community

workbykait commited on Feb 25

Commit

d4f7b1c

verified ·

1 Parent(s): 6d3f5a8

Update index.html

Browse files

Files changed (1) hide show

index.html +369 -19

index.html CHANGED Viewed

@@ -1,19 +1,369 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RADIO – ACCORDION</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect width="40" height="40" fill="%23000"/><path d="M0 0h1v40h-1zM0 0v1h40v-1zM39 0v40h1v-40zM0 39h40v1h-40z" fill="%23111111"/></svg>') repeat;
+            color: #eee;
+            font-family: 'Courier New', Courier, monospace;
+            line-height: 1.5;
+        }
+        header {
+            padding: 30px 40px;
+            border-bottom: 1px solid #222;
+            background: #000;
+        }
+        h1 {
+            font-size: 3.2rem;
+            letter-spacing: 6px;
+            text-transform: uppercase;
+        }
+        .subtitle {
+            font-size: 1rem;
+            color: #555;
+            margin-top: 8px;
+        }
+        main {
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 40px;
+        }
+        .accordion-section {
+            margin-bottom: 60px;
+        }
+        .section-title {
+            font-size: 2.4rem;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+            padding: 15px 20px;
+            background: #111;
+            border: 1px solid #222;
+            cursor: pointer;
+            user-select: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .section-title::after {
+            content: "▼";
+            font-size: 1.1rem;
+            transition: transform 0.2s;
+        }
+        .section-title.open::after {
+            transform: rotate(180deg);
+        }
+        .section-content {
+            display: none;
+            border: 1px solid #222;
+            border-top: none;
+            background: #0a0a0a;
+        }
+        .section-content.open {
+            display: block;
+        }
+        .station {
+            border-bottom: 1px solid #222;
+            padding: 25px 30px;
+        }
+        .station:last-child {
+            border-bottom: none;
+        }
+        .location {
+            font-size: 1.3rem;
+            color: #777;
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .name {
+            font-size: 2rem;
+            margin-bottom: 8px;
+        }
+        .meta {
+            font-size: 1.2rem;
+            color: #888;
+            margin-bottom: 18px;
+        }
+        .controls button {
+            background: #000;
+            color: #ccc;
+            border: 1px solid #444;
+            padding: 12px 24px;
+            font-size: 1.1rem;
+            font-family: inherit;
+            cursor: pointer;
+            margin-right: 12px;
+        }
+        .controls button:hover {
+            background: #222;
+            color: #fff;
+        }
+        #player {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: #000;
+            border-top: 1px solid #222;
+            padding: 20px 40px;
+            display: flex;
+            align-items: center;
+            gap: 30px;
+            flex-wrap: wrap;
+            z-index: 10;
+        }
+        #player-info {
+            flex: 1;
+            min-width: 200px;
+        }
+        #player-station {
+            font-size: 1.8rem;
+            font-weight: bold;
+        }
+        #player-track {
+            font-size: 1.2rem;
+            color: #777;
+            margin-top: 6px;
+        }
+        #player-controls button {
+            background: #000;
+            color: #ccc;
+            border: 1px solid #444;
+            padding: 14px 24px;
+            font-size: 1.4rem;
+            min-width: 70px;
+        }
+        #player-controls button:hover {
+            background: #222;
+            color: #fff;
+        }
+        audio {
+            display: none;
+        }
+        @media (max-width: 768px) {
+            main { padding: 20px; }
+            header { padding: 20px; }
+            h1 { font-size: 2.4rem; }
+            .section-title { font-size: 1.9rem; }
+            .name { font-size: 1.7rem; }
+            #player { padding: 15px; gap: 15px; flex-direction: column; text-align: center; }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>RADIO</h1>
+        <div class="subtitle">RAW STREAMS – ACCORDION LAYOUT – BLACK GRID</div>
+    </header>
+    <main>
+        <div class="accordion-section">
+            <div class="section-title" onclick="toggleSection(this)">UNITED STATES</div>
+            <div class="section-content">
+                <div class="station">
+                    <div class="location">SAN FRANCISCO, CA</div>
+                    <div class="name">GROOVE SALAD</div>
+                    <div class="meta">Chill / Downtempo – SomaFM</div>
+                    <div class="controls">
+                        <button onclick="play(1)">PLAY</button>
+                        <button onclick="stop()">STOP</button>
+                    </div>
+                </div>
+                <div class="station">
+                    <div class="location">SAN FRANCISCO, CA</div>
+                    <div class="name">BEAT BLENDER</div>
+                    <div class="meta">House / Electronic – SomaFM</div>
+                    <div class="controls">
+                        <button onclick="play(2)">PLAY</button>
+                        <button onclick="stop()">STOP</button>
+                    </div>
+                </div>
+                <div class="station">
+                    <div class="location">LOS ANGELES, CA</div>
+                    <div class="name">RADIO PARADISE</div>
+                    <div class="meta">Eclectic Rock</div>
+                    <div class="controls">
+                        <button onclick="play(3)">PLAY</button>
+                        <button onclick="stop()">STOP</button>
+                    </div>
+                </div>
+                <div class="station">
+                    <div class="location">SAN FRANCISCO, CA</div>
+                    <div class="name">SECRET AGENT</div>
+                    <div class="meta">Lounge / Spy – SomaFM</div>
+                    <div class="controls">
+                        <button onclick="play(4)">PLAY</button>
+                        <button onclick="stop()">STOP</button>
+                    </div>
+                </div>
+                <div class="station">
+                    <div class="location">SAN FRANCISCO, CA</div>
+                    <div class="name">LUSH</div>
+                    <div class="meta">Ambient / Dream – SomaFM</div>
+                    <div class="controls">
+                        <button onclick="play(5)">PLAY</button>
+                        <button onclick="stop()">STOP</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-section">
+            <div class="section-title" onclick="toggleSection(this)">UNITED KINGDOM</div>
+            <div class="section-content">
+                <div class="station">
+                    <div class="location">LONDON</div>
+                    <div class="name">BBC RADIO 1</div>
+                    <div class="meta">Pop / Dance Hits</div>
+                    <div class="controls">
+                        <button onclick="play(7)">PLAY</button>
+                        <button onclick="stop()">STOP</button>
+                    </div>
+                </div>
+                <div class="station">
+                    <div class="location">MANCHESTER / LONDON</div>
+                    <div class="name">BBC 6 MUSIC</div>
+                    <div class="meta">Alternative / Indie</div>
+                    <div class="controls">
+                        <button onclick="play(8)">PLAY</button>
+                        <button onclick="stop()">STOP</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <div id="player">
+        <div id="player-info">
+            <div id="player-station">NO STATION SELECTED</div>
+            <div id="player-track">Select and play a station above</div>
+        </div>
+        <div id="player-controls">
+            <button onclick="prev()"><i class="fa-solid fa-backward"></i></button>
+            <button id="mainPlay" onclick="toggle()"><i class="fa-solid fa-play"></i> PLAY</button>
+            <button onclick="next()"><i class="fa-solid fa-forward"></i></button>
+        </div>
+    </div>
+    <audio id="audio" crossorigin="anonymous"></audio>
+    <script>
+        const stations = [
+            {id:1, name:"GROOVE SALAD", stream:"https://ice1.somafm.com/groovesalad-128-mp3", location:"SAN FRANCISCO, CA", genre:"Chill / Downtempo"},
+            {id:2, name:"BEAT BLENDER", stream:"https://ice1.somafm.com/beatblender-128-mp3", location:"SAN FRANCISCO, CA", genre:"House / Electronic"},
+            {id:3, name:"RADIO PARADISE", stream:"https://stream.radioparadise.com/mp3-128", location:"LOS ANGELES, CA", genre:"Eclectic Rock"},
+            {id:4, name:"SECRET AGENT", stream:"https://ice1.somafm.com/secretagent-128-mp3", location:"SAN FRANCISCO, CA", genre:"Lounge / Spy"},
+            {id:5, name:"LUSH", stream:"https://ice1.somafm.com/lush-128-mp3", location:"SAN FRANCISCO, CA", genre:"Ambient / Dream"},
+            {id:7, name:"BBC RADIO 1", stream:"https://stream.live.vc.bbcmedia.co.uk/bbc_radio_one", location:"LONDON", genre:"Pop / Dance Hits"},
+            {id:8, name:"BBC 6 MUSIC", stream:"https://stream.live.vc.bbcmedia.co.uk/bbc_6music", location:"MANCHESTER / LONDON", genre:"Alternative / Indie"}
+        ];
+        let currentIndex = -1;
+        let isPlaying = false;
+        const audio = document.getElementById('audio');
+        const playerStation = document.getElementById('player-station');
+        const playerTrack = document.getElementById('player-track');
+        const mainPlayBtn = document.getElementById('mainPlay');
+        function toggleSection(el) {
+            el.classList.toggle('open');
+            const content = el.nextElementSibling;
+            content.classList.toggle('open');
+        }
+        function play(id) {
+            currentIndex = stations.findIndex(s => s.id === id);
+            if (currentIndex === -1) return;
+            const st = stations[currentIndex];
+            audio.src = st.stream;
+            audio.play().catch(e => console.log("Play failed:", e));
+            isPlaying = true;
+            updatePlayer();
+        }
+        function stop() {
+            audio.pause();
+            audio.currentTime = 0;
+            isPlaying = false;
+            updatePlayer();
+        }
+        function toggle() {
+            if (currentIndex === -1) return;
+            if (isPlaying) {
+                audio.pause();
+            } else {
+                audio.play().catch(()=>{});
+            }
+            isPlaying = !isPlaying;
+            updatePlayer();
+        }
+        function prev() {
+            if (currentIndex <= 0) currentIndex = stations.length - 1;
+            else currentIndex--;
+            play(stations[currentIndex].id);
+        }
+        function next() {
+            if (currentIndex >= stations.length - 1) currentIndex = 0;
+            else currentIndex++;
+            play(stations[currentIndex].id);
+        }
+        function updatePlayer() {
+            if (currentIndex === -1) {
+                playerStation.textContent = "NO STATION SELECTED";
+                playerTrack.textContent = "Select above";
+                mainPlayBtn.innerHTML = '<i class="fa-solid fa-play"></i> PLAY';
+                return;
+            }
+            const st = stations[currentIndex];
+            playerStation.textContent = st.name + " – " + st.location;
+            playerTrack.textContent = st.genre + (isPlaying ? " • LIVE" : " • PAUSED");
+            mainPlayBtn.innerHTML = isPlaying
+                ? '<i class="fa-solid fa-pause"></i> PAUSE'
+                : '<i class="fa-solid fa-play"></i> PLAY';
+        }
+        // Fake status messages
+        const messages = ["SIGNAL ACTIVE", "TRANSMISSION LIVE", "NO METADATA", "CARRIER DETECTED"];
+        setInterval(() => {
+            if (isPlaying && currentIndex !== -1) {
+                const rnd = Math.floor(Math.random() * messages.length);
+                playerTrack.textContent = messages[rnd] + " • " + stations[currentIndex].genre;
+            }
+        }, 15000);
+        audio.onplay  = () => { isPlaying = true;  updatePlayer(); };
+        audio.onpause = () => { isPlaying = false; updatePlayer(); };
+        // Init
+        window.onload = () => {
+            currentIndex = 0;
+            updatePlayer();
+        };
+    </script>
+</body>
+</html>