150 lines
6.2 KiB
HTML
150 lines
6.2 KiB
HTML
<!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>
|
||
<button id="logout" class="text-button" type="button" hidden>UITLOGGEN</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>[libraries] muziek=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 id="cover-placeholder" class="cover-placeholder">
|
||
<div class="record"></div>
|
||
<span>RKT</span>
|
||
</div>
|
||
<img id="cover-image" alt="" hidden>
|
||
</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>
|
||
|
||
<section id="login-overlay" class="login-overlay" aria-labelledby="login-title" hidden>
|
||
<form id="login-form" class="login-panel">
|
||
<span class="brand-mark">RKT</span>
|
||
<p class="panel-kicker">WEB PLAYER</p>
|
||
<h1 id="login-title">Aanmelden</h1>
|
||
<label for="login-username">Gebruikersnaam</label>
|
||
<input id="login-username" name="username" autocomplete="username" required>
|
||
<label for="login-password">Wachtwoord</label>
|
||
<input id="login-password" name="password" type="password" autocomplete="current-password" required>
|
||
<p id="login-error" class="login-error" role="alert"></p>
|
||
<button id="login-submit" class="text-button" type="submit">AANMELDEN</button>
|
||
</form>
|
||
</section>
|
||
|
||
<script src="/app.js" defer></script>
|
||
</body>
|
||
</html>
|