145 lines
7.3 KiB
HTML
145 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Neon Wave Player - Cyberpunk Media Interface</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="media-player" role="application" aria-label="Neon Wave Media Player">
|
|
<div class="player-container">
|
|
<!-- Visualizer Section -->
|
|
<section class="visualizer-section" aria-label="Audio Visualizer">
|
|
<canvas id="waveform-visualizer" class="waveform-canvas" width="800" height="200"></canvas>
|
|
<div class="glitch-overlay" aria-hidden="true"></div>
|
|
</section>
|
|
|
|
<!-- Media Display -->
|
|
<section class="media-display" aria-label="Now Playing">
|
|
<div class="album-art-container">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23111'/%3E%3Ctext x='150' y='150' text-anchor='middle' fill='%23ff00ff' font-size='24'%3ENO MEDIA%3C/text%3E%3C/svg%3E"
|
|
alt="Album artwork"
|
|
class="album-art"
|
|
id="album-art">
|
|
<div class="hologram-effect" aria-hidden="true"></div>
|
|
</div>
|
|
<div class="track-info">
|
|
<h1 id="track-title" class="track-title">Select a Track</h1>
|
|
<p id="track-artist" class="track-artist">No Artist</p>
|
|
<div class="track-metadata">
|
|
<span id="track-genre" class="metadata-tag">Genre</span>
|
|
<span id="track-year" class="metadata-tag">Year</span>
|
|
<span id="track-bpm" class="metadata-tag">BPM</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Progress Bar -->
|
|
<section class="progress-section" aria-label="Playback Progress">
|
|
<div class="time-display">
|
|
<time id="current-time" class="time-current">00:00</time>
|
|
<div class="progress-container">
|
|
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
<div class="progress-glow"></div>
|
|
</div>
|
|
<input type="range"
|
|
id="seek-slider"
|
|
class="seek-slider"
|
|
min="0"
|
|
max="100"
|
|
value="0"
|
|
aria-label="Seek position">
|
|
</div>
|
|
<time id="duration-time" class="time-duration">00:00</time>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Control Panel -->
|
|
<section class="control-panel" aria-label="Playback Controls">
|
|
<div class="main-controls">
|
|
<button class="control-btn" id="shuffle-btn" aria-label="Shuffle" data-active="false">
|
|
<svg viewBox="0 0 24 24" class="control-icon">
|
|
<path d="M3 17h2.5L12 7h-2.5l-6.5 10zm6.5-10L3 17h2.5l6.5-10H9.5zm5 0L21 17h-2.5L12 7h2.5zm-2.5 10h2.5l6.5-10H19l-6.5 10z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="control-btn" id="prev-btn" aria-label="Previous track">
|
|
<svg viewBox="0 0 24 24" class="control-icon">
|
|
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="control-btn control-btn-primary" id="play-pause-btn" aria-label="Play/Pause">
|
|
<svg viewBox="0 0 24 24" class="control-icon" id="play-icon">
|
|
<path d="M8 5v14l11-7z"/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" class="control-icon hidden" id="pause-icon">
|
|
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="control-btn" id="next-btn" aria-label="Next track">
|
|
<svg viewBox="0 0 24 24" class="control-icon">
|
|
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="control-btn" id="repeat-btn" aria-label="Repeat" data-mode="off">
|
|
<svg viewBox="0 0 24 24" class="control-icon">
|
|
<path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Volume and EQ Section -->
|
|
<section class="audio-controls" aria-label="Audio Controls">
|
|
<div class="volume-control">
|
|
<button class="control-btn" id="volume-btn" aria-label="Volume">
|
|
<svg viewBox="0 0 24 24" class="control-icon">
|
|
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="volume-slider-container">
|
|
<input type="range"
|
|
id="volume-slider"
|
|
class="volume-slider"
|
|
min="0"
|
|
max="100"
|
|
value="70"
|
|
aria-label="Volume level">
|
|
<div class="volume-level" id="volume-level">70%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equalizer">
|
|
<button class="eq-preset" data-preset="flat">FLAT</button>
|
|
<button class="eq-preset" data-preset="bass">BASS</button>
|
|
<button class="eq-preset" data-preset="vocal">VOCAL</button>
|
|
<button class="eq-preset active" data-preset="cyber">CYBER</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Playlist Section -->
|
|
<section class="playlist-section" aria-label="Playlist">
|
|
<header class="playlist-header">
|
|
<h2 class="playlist-title">Neural Tracks</h2>
|
|
<button class="playlist-action" id="add-track-btn" aria-label="Add track">
|
|
<svg viewBox="0 0 24 24" class="action-icon">
|
|
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
<div class="playlist-container" id="playlist-container">
|
|
<ul class="playlist" id="playlist" role="list" aria-label="Track list">
|
|
<!-- Playlist items will be dynamically added -->
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Audio Element -->
|
|
<audio id="audio-player" class="hidden"></audio>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |