158 lines
6.2 KiB
HTML
158 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Radio1 Player</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<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>
|
|
<button id="menu-btn" class="icon-btn" aria-label="Menu">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<div class="header-info" data-tauri-drag-region>
|
|
<span class="app-title">Radio1 Player</span>
|
|
<span class="status-indicator" id="status-indicator">
|
|
<span class="status-dot"></span> <span id="status-text">Ready</span>
|
|
</span>
|
|
</div>
|
|
<div class="header-buttons">
|
|
<button id="cast-toggle-btn" class="icon-btn" aria-label="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>
|
|
<button id="close-btn" class="icon-btn close-btn" aria-label="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>
|
|
</header>
|
|
|
|
<section class="artwork-section">
|
|
<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>
|
|
</section>
|
|
|
|
<section class="track-info">
|
|
<h2 id="station-name">Radio 1 MB</h2>
|
|
<p id="station-subtitle">Live Stream</p>
|
|
</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>
|
|
|
|
</main>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |