Initial import of rkt-web-player
This commit is contained in:
@@ -0,0 +1,131 @@
|
||||
<!doctype html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#171716">
|
||||
<title>RKT Web Player</title>
|
||||
<link rel="stylesheet" href="/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="app-shell">
|
||||
<header class="app-header">
|
||||
<div class="brand">
|
||||
<span class="brand-mark">RKT</span>
|
||||
<span class="brand-name">WEB PLAYER</span>
|
||||
</div>
|
||||
|
||||
<div class="output-control">
|
||||
<label for="renderer">UITVOER</label>
|
||||
<select id="renderer"></select>
|
||||
<button id="discover" class="square-button" type="button" title="Netwerkspelers zoeken" aria-label="Netwerkspelers zoeken">↻</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="transport-bar" aria-label="Afspeelbediening">
|
||||
<div class="transport-buttons">
|
||||
<button id="previous" class="command-button" type="button" aria-label="Vorige track">‹</button>
|
||||
<button id="play" class="command-button play-button" type="button" aria-label="Afspelen of pauzeren">▶</button>
|
||||
<button id="stop" class="command-button" type="button" aria-label="Stoppen">■</button>
|
||||
<button id="next" class="command-button" type="button" aria-label="Volgende track">›</button>
|
||||
</div>
|
||||
|
||||
<div class="seek-control">
|
||||
<input id="seek" type="range" min="0" max="100" value="0" step="0.1" aria-label="Afspeelpositie">
|
||||
<div class="time-display">
|
||||
<span id="position">00:00:00</span>
|
||||
<span class="time-divider">/</span>
|
||||
<span id="duration">00:00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="repeat" class="command-button repeat-button" type="button" aria-label="Herhaalmodus">↻</button>
|
||||
<label class="volume-control" for="volume">
|
||||
<span aria-hidden="true">VOL</span>
|
||||
<input id="volume" type="range" min="0" max="100" value="50">
|
||||
<output id="volume-value">50%</output>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section class="workspace">
|
||||
<aside class="left-pane">
|
||||
<section class="library-pane panel">
|
||||
<div class="panel-header library-header">
|
||||
<div>
|
||||
<span class="panel-kicker">MUZIEKBIBLIOTHEEK</span>
|
||||
<select id="library" aria-label="Muziekbibliotheek"></select>
|
||||
</div>
|
||||
<button id="library-up" class="square-button" type="button" title="Eén map omhoog" aria-label="Eén map omhoog">↑</button>
|
||||
</div>
|
||||
<nav id="breadcrumb" class="breadcrumb" aria-label="Huidige map"></nav>
|
||||
<div id="library-empty" class="empty-state" hidden>
|
||||
<p>Geen bibliotheek geconfigureerd.</p>
|
||||
<code>[library] paths=D:\Muziek</code>
|
||||
</div>
|
||||
<ul id="library-entries" class="library-list" aria-label="Mapinhoud"></ul>
|
||||
</section>
|
||||
|
||||
<section class="now-playing-pane panel">
|
||||
<div class="cover-art" aria-hidden="true">
|
||||
<div class="record"></div>
|
||||
<span>RKT</span>
|
||||
</div>
|
||||
<div class="track-summary">
|
||||
<span class="panel-kicker">NU AAN HET SPELEN</span>
|
||||
<h1 id="now-title">Nog niets gekozen</h1>
|
||||
<p id="now-meta">Voeg een track toe vanuit de bibliotheek</p>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section class="playlist-pane panel">
|
||||
<div class="tabs-bar">
|
||||
<div id="tabs" class="tabs" role="tablist" aria-label="Afspeellijsten"></div>
|
||||
<button id="tab-add" class="tab-add" type="button" title="Nieuwe afspeellijst" aria-label="Nieuwe afspeellijst">＋</button>
|
||||
</div>
|
||||
|
||||
<div class="playlist-toolbar">
|
||||
<div>
|
||||
<span class="panel-kicker">AFSPEELLIJST</span>
|
||||
<strong id="track-count">0 tracks</strong>
|
||||
</div>
|
||||
<button id="playlist-clear" class="text-button" type="button">LIJST WISSEN</button>
|
||||
</div>
|
||||
|
||||
<div id="playlist-empty" class="empty-state playlist-empty">
|
||||
<p>Deze afspeellijst is leeg.</p>
|
||||
<span>Gebruik <strong>＋</strong> bij een track of map.</span>
|
||||
</div>
|
||||
|
||||
<div class="playlist-scroll">
|
||||
<table class="playlist-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="number-column">#</th>
|
||||
<th>TITEL</th>
|
||||
<th>ALBUM</th>
|
||||
<th class="duration-column">DUUR</th>
|
||||
<th class="action-column"><span class="visually-hidden">Acties</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="playlist"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<footer class="status-bar">
|
||||
<div class="audio-status">
|
||||
<span id="audio-bits">— bit</span>
|
||||
<span id="audio-rate">— kHz</span>
|
||||
<span id="audio-channels">— kanalen</span>
|
||||
<span id="audio-format">—</span>
|
||||
<span id="audio-source">—</span>
|
||||
</div>
|
||||
<p id="status" role="status" aria-live="polite">Verbinden…</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script src="/app.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user