front-page.ctml
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title data-text="title">ASTEROID RADIO</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="icon" type="image/x-icon" href="/asteroid/static/favicon.ico"> 8 <link rel="icon" type="image/png" sizes="32x32" href="/asteroid/static/favicon-32x32.png"> 9 <link rel="icon" type="image/png" sizes="16x16" href="/asteroid/static/favicon-16x16.png"> 10 <link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css"> 11 <script src="/asteroid/static/js/auth-ui.js"></script> 12 <script src="/asteroid/static/js/front-page.js"></script> 13 <script src="/asteroid/static/js/recently-played.js"></script> 14 <script src="/api/asteroid/spectrum-analyzer.js"></script> 15 </head> 16 <body> 17 <div class="container"> 18 <header> 19 <h1 class="page-title"> 20 <img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;"> 21 <span data-text="station-name">ASTEROID RADIO</span> 22 <img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;"> 23 </h1> 24 <h3 class="page-subtitle">The Station at the End of Time</h3> 25 26 <!-- Spectrum Analyzer Canvas --> 27 <div style="text-align: center; margin: 15px 0;"> 28 <canvas id="spectrum-canvas" width="800" height="100" style="max-width: 100%; border: 1px solid #00ff00; background: #000; border-radius: 4px;"></canvas> 29 <div style="margin-top: 8px; font-size: 0.9em;"> 30 <label style="margin-right: 10px;"> 31 Style: 32 <select id="spectrum-style-selector" onchange="setSpectrumStyle(this.value)" style="padding: 3px; background: #000; color: #00ff00; border: 1px solid #00ff00;"> 33 <option value="bars">Bars</option> 34 <option value="wave">Wave</option> 35 <option value="dots">Dots</option> 36 </select> 37 </label> 38 <label> 39 Theme: 40 <select id="spectrum-theme-selector" onchange="setSpectrumTheme(this.value)" style="padding: 3px; background: #000; color: #00ff00; border: 1px solid #00ff00;"> 41 <option value="monotone">Monotone</option> 42 <option value="green">Green</option> 43 <option value="blue">Blue</option> 44 <option value="purple">Purple</option> 45 <option value="red">Red</option> 46 <option value="amber">Amber</option> 47 <option value="rainbow">Rainbow</option> 48 </select> 49 </label> 50 </div> 51 </div> 52 53 <nav class="nav"> 54 <a href="/asteroid/">Home</a> 55 <a href="/asteroid/player">Player</a> 56 <a href="/asteroid/about">About</a> 57 <a href="/asteroid/status">Status</a> 58 <a href="/asteroid/profile" data-show-if-logged-in>Profile</a> 59 <a href="/asteroid/admin" data-show-if-admin>Admin</a> 60 <a href="/asteroid/login" data-show-if-logged-out>Login</a> 61 <a href="/asteroid/register" data-show-if-logged-out>Register</a> 62 <a href="/asteroid/logout" data-show-if-logged-in class="btn-logout">Logout</a> 63 </nav> 64 </header> 65 66 <main> 67 <div class="live-stream"> 68 <div style="margin-bottom: 20px;"> 69 <h2 style="color: #00ff00; margin: 0;"><span class="live-stream-indicator" style="font-size: 1rem;">🟢</span> LIVE STREAM</h2> 70 </div> 71 72 <!-- Stream Quality Selector --> 73 <div class="live-stream-quality"> 74 <label for="stream-quality" class="live-stream-label" ><strong>Quality:</strong></label> 75 <select id="stream-quality" onchange="changeStreamQuality()"> 76 <option value="aac">AAC 96kbps (Recommended)</option> 77 <option value="mp3">MP3 128kbps (Compatible)</option> 78 <option value="low">MP3 64kbps (Low Bandwidth)</option> 79 </select> 80 </div> 81 82 <input type="hidden" id="stream-base-url" lquery="(val stream-base-url)"> 83 <p><strong class="live-stream-label">Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p> 84 <p><strong class="live-stream-label">Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p> 85 <p><strong class="live-stream-label" class="live-stream-label">BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers</span></p> 86 87 <div style="display: flex; gap: 10px; justify-content: end; margin-bottom: 20px;"> 88 <button id="reconnect-btn" class="btn btn-warning" onclick="reconnectStream()" style="font-size: 0.9em; display: none;"> 89 🔄 Reconnect Stream 90 </button> 91 <button id="popout-btn" class="btn btn-info" onclick="openPopoutPlayer()" style="font-size: 0.9em;"> 92 🗗 Pop Out Player 93 </button> 94 <button id="frameset-btn" class="btn btn-secondary" onclick="enableFramesetMode()" style="font-size: 0.9em;"> 95 🖼️ Enable Persistent Player 96 </button> 97 </div> 98 99 <!-- Stream connection status --> 100 <div id="stream-status-indicator" style="display: none; padding: 8px; margin-bottom: 10px; border-radius: 4px; text-align: center;"></div> 101 102 <div id="audio-container"> 103 <audio id="live-audio" controls crossorigin="anonymous" style="width: 100%; margin: 10px 0;"> 104 <source id="audio-source" lquery="(attr :src default-stream-url :type default-stream-encoding)"> 105 Your browser does not support the audio element. 106 </audio> 107 </div> 108 </div> 109 110 <div id="now-playing" class="now-playing"></div> 111 112 <!-- Recently Played Tracks --> 113 <div id="recently-played-panel" class="recently-played-panel"> 114 <h3>Recently Played</h3> 115 <div id="recently-played-list" class="recently-played-list"> 116 <p class="loading">Loading...</p> 117 </div> 118 </div> 119 </main> 120 </div> 121 </body> 122 </html>