228 lines
10 KiB
HTML
228 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>RadioPlayer</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link rel="manifest" href="manifest.json">
|
||
<meta name="theme-color" content="#1f1f2e">
|
||
<link rel="apple-touch-icon" href="assets/favicon_io/apple-touch-icon.png">
|
||
<script src="main.js" defer type="module"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app-container">
|
||
<div class="bg-shape shape-1"></div>
|
||
<div class="bg-shape shape-2"></div>
|
||
|
||
<main class="glass-card">
|
||
<header data-tauri-drag-region>
|
||
<div class="header-top-row">
|
||
<div class="header-icons-left" aria-hidden="true">
|
||
<button id="edit-stations-btn" class="icon-btn" title="Edit Stations" aria-label="Edit Stations">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 20h9" />
|
||
<path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" />
|
||
</svg>
|
||
</button>
|
||
<button id="cast-toggle-btn" class="icon-btn" aria-label="Cast" title="Cast">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a14 14 0 0 1 14 14h-2" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- status moved below station info -->
|
||
|
||
<div class="header-close">
|
||
<button id="close-btn" class="icon-btn close-btn" aria-label="Close" title="Close">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-third-row">
|
||
<div class="header-icons">
|
||
<button id="edit-stations-btn" class="icon-btn" title="Edit Stations" aria-label="Edit Stations">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 20h9" />
|
||
<path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" />
|
||
</svg>
|
||
</button>
|
||
<button id="cast-toggle-btn" class="icon-btn" aria-label="Cast" title="Cast">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a14 14 0 0 1 14 14h-2" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="artwork-section">
|
||
<div class="artwork-stack">
|
||
<div class="artwork-container">
|
||
<div class="artwork-placeholder">
|
||
<!-- Gooey SVG filter for fluid blob blending -->
|
||
<svg width="0" height="0" style="position:absolute">
|
||
<defs>
|
||
<filter id="goo">
|
||
<!-- increased blur for smoother, more transparent blending -->
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="18" result="blur" />
|
||
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
|
||
<feBlend in="SourceGraphic" in2="goo" />
|
||
</filter>
|
||
</defs>
|
||
</svg>
|
||
|
||
<div class="logo-blobs" aria-hidden="true">
|
||
<span class="blob b1"></span>
|
||
<span class="blob b2"></span>
|
||
<span class="blob b3"></span>
|
||
<span class="blob b4"></span>
|
||
<span class="blob b5"></span>
|
||
<span class="blob b6"></span>
|
||
<span class="blob b7"></span>
|
||
<span class="blob b8"></span>
|
||
<span class="blob b9"></span>
|
||
<span class="blob b10"></span>
|
||
</div>
|
||
|
||
<img id="station-logo-img" class="station-logo-img hidden" alt="station logo">
|
||
<span class="station-logo-text">1</span>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Coverflow-style station carousel under the artwork (drag or use arrows) -->
|
||
<div id="artwork-coverflow" class="artwork-coverflow" aria-label="Stations">
|
||
<button id="artwork-prev" class="coverflow-arrow left" aria-label="Previous station">‹</button>
|
||
<div id="artwork-coverflow-stage" class="artwork-coverflow-stage" role="list" aria-label="Station icons"></div>
|
||
<button id="artwork-next" class="coverflow-arrow right" aria-label="Next station">›</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="track-info">
|
||
<h2 id="station-name"></h2>
|
||
<div id="now-playing" class="now-playing hidden" aria-live="polite">
|
||
<div id="now-artist" class="now-artist" aria-hidden="false"></div>
|
||
<div id="now-title" class="now-title" aria-hidden="false"></div>
|
||
</div>
|
||
<p id="station-subtitle"></p>
|
||
<div id="status-indicator" class="status-indicator-wrap" aria-hidden="true">
|
||
<span class="status-dot"></span>
|
||
<span id="status-text"></span>
|
||
<span id="engine-badge" class="engine-badge" title="Playback engine">FFMPEG</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Visual Progress Bar (Live) -->
|
||
<div class="progress-container">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill"></div>
|
||
<div class="progress-handle"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="controls-section">
|
||
<button id="prev-btn" class="control-btn secondary" aria-label="Previous Station">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
|
||
</svg>
|
||
</button>
|
||
|
||
<button id="play-btn" class="control-btn primary" aria-label="Play">
|
||
<div class="icon-container">
|
||
<!-- Play Icon -->
|
||
<svg id="icon-play" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M8 5v14l11-7z" />
|
||
</svg>
|
||
<!-- Stop/Pause Icon (Hidden by default) -->
|
||
<svg id="icon-stop" class="hidden" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M6 6h12v12H6z" />
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
|
||
<button id="next-btn" class="control-btn secondary" aria-label="Next Station">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
|
||
</svg>
|
||
</button>
|
||
</section>
|
||
|
||
<section class="volume-section">
|
||
<button id="mute-btn" class="icon-btn small">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
|
||
<path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
|
||
</svg>
|
||
</button>
|
||
<div class="slider-container">
|
||
<input type="range" id="volume-slider" min="0" max="100" value="50">
|
||
</div>
|
||
<span id="volume-value">50%</span>
|
||
</section>
|
||
|
||
<!-- Hidden Cast Overlay (Beautified) -->
|
||
<div id="cast-overlay" class="overlay hidden" aria-hidden="true" data-tauri-drag-region>
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="deviceTitle">
|
||
<h2 id="deviceTitle">Choose</h2>
|
||
|
||
<ul id="device-list" class="device-list">
|
||
<!-- Render device items here -->
|
||
<li class="device">
|
||
<div class="device-main">Scanning...</div>
|
||
<div class="device-sub">Searching for speakers</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<button id="close-overlay" class="btn cancel" type="button">Cancel</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stations Editor Overlay -->
|
||
<div id="editor-overlay" class="overlay hidden" aria-hidden="true">
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="editorTitle">
|
||
<h2 id="editorTitle">Edit Stations</h2>
|
||
|
||
<ul id="editor-list" class="device-list"></ul>
|
||
|
||
<form id="add-station-form">
|
||
<div style="margin-bottom:8px;">
|
||
<input id="us_title" placeholder="Title" required style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit">
|
||
</div>
|
||
<div style="margin-bottom:8px;">
|
||
<input id="us_url" placeholder="Stream URL" required style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit">
|
||
</div>
|
||
<div style="margin-bottom:8px;">
|
||
<input id="us_logo" placeholder="Logo URL (optional)" style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit">
|
||
</div>
|
||
<div style="margin-bottom:12px;">
|
||
<input id="us_www" placeholder="Website (optional)" style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit">
|
||
</div>
|
||
<input type="hidden" id="us_id">
|
||
<input type="hidden" id="us_index">
|
||
<div style="display:flex;gap:8px;">
|
||
<button id="us_save_btn" class="btn cancel" type="submit" style="flex:1">Save</button>
|
||
<button id="editor-close-btn" class="btn" type="button" style="flex:0;background:#6b6bff">Close</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |