157 lines
7.7 KiB
HTML
157 lines
7.7 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<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" data-i18n="output">OUTPUT</label>
|
||
<select id="renderer"></select>
|
||
<button id="discover" class="square-button" type="button" data-i18n-title="searchPlayers" title="Search for network players" aria-label="Search for network players">↻</button>
|
||
<select id="language" class="language-select" aria-label="Language">
|
||
<option value="en">EN</option><option value="nl">NL</option><option value="de">DE</option><option value="fr">FR</option><option value="es">ES</option>
|
||
</select>
|
||
<button id="logout" class="text-button" type="button" data-i18n="logout" data-i18n-aria="logout" aria-label="Log out" hidden>LOG OUT</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="transport-bar" data-i18n-aria="playbackControls" aria-label="Playback controls">
|
||
<div class="transport-buttons">
|
||
<button id="previous" class="command-button" type="button" data-i18n-aria="previousTrack" aria-label="Previous track">‹</button>
|
||
<button id="play" class="command-button play-button" type="button" data-i18n-aria="playOrPause" aria-label="Play or pause">▶</button>
|
||
<button id="stop" class="command-button" type="button" data-i18n-aria="stop" aria-label="Stop">■</button>
|
||
<button id="next" class="command-button" type="button" data-i18n-aria="nextTrack" aria-label="Next track">›</button>
|
||
</div>
|
||
|
||
<div class="seek-control">
|
||
<input id="seek" type="range" min="0" max="100" value="0" step="0.1" data-i18n-aria="playbackPosition" aria-label="Playback position">
|
||
<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" data-i18n-aria="repeatMode" aria-label="Repeat mode">↻</button>
|
||
<div id="volume-control" class="volume-control">
|
||
<button id="volume-toggle" class="volume-toggle" type="button" data-i18n-aria="setVolume" aria-label="Set volume" aria-controls="volume-slider" aria-expanded="false">VOL</button>
|
||
<label id="volume-slider" class="volume-slider" for="volume">
|
||
<span aria-hidden="true">VOL</span>
|
||
<input id="volume" type="range" min="0" max="100" value="50" data-i18n-aria="volume" aria-label="Volume">
|
||
<output id="volume-value">50%</output>
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="workspace">
|
||
<aside class="left-pane">
|
||
<section class="library-pane panel">
|
||
<div class="panel-header library-header">
|
||
<div>
|
||
<span class="panel-kicker" data-i18n="musicLibrary">MUSIC LIBRARY</span>
|
||
<select id="library" data-i18n-aria="musicLibrary" aria-label="Music library"></select>
|
||
</div>
|
||
<button id="library-up" class="square-button" type="button" data-i18n-title="upFolder" title="Up one folder" aria-label="Up one folder">↑</button>
|
||
</div>
|
||
<nav id="breadcrumb" class="breadcrumb" data-i18n-aria="currentFolder" aria-label="Current folder"></nav>
|
||
<div id="library-empty" class="empty-state" hidden>
|
||
<p data-i18n="noLibraryConfigured">No library configured.</p>
|
||
<code>[libraries] muziek=D:\Muziek</code>
|
||
</div>
|
||
<ul id="library-entries" class="library-list" data-i18n-aria="folderContents" aria-label="Folder contents"></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" data-i18n="nowPlaying">NOW PLAYING</span>
|
||
<h1 id="now-title" data-i18n="nothingSelected">Nothing selected yet</h1>
|
||
<p id="now-meta" data-i18n="addTrackHint">Add a track from the library</p>
|
||
</div>
|
||
</section>
|
||
</aside>
|
||
|
||
<section class="playlist-pane panel">
|
||
<div class="tabs-bar">
|
||
<div id="tabs" class="tabs" role="tablist" data-i18n-aria="playlists" aria-label="Playlists"></div>
|
||
<button id="tab-add" class="tab-add" type="button" data-i18n-title="newPlaylist" title="New playlist" aria-label="New playlist">＋</button>
|
||
</div>
|
||
|
||
<div class="playlist-toolbar">
|
||
<div>
|
||
<span class="panel-kicker" data-i18n="playlist">PLAYLIST</span>
|
||
<strong id="track-count">0 tracks</strong>
|
||
</div>
|
||
<button id="playlist-clear" class="text-button" type="button" data-i18n="clearList">CLEAR LIST</button>
|
||
</div>
|
||
|
||
<div id="playlist-empty" class="empty-state playlist-empty">
|
||
<p data-i18n="emptyPlaylist">This playlist is empty.</p>
|
||
<span data-i18n="emptyPlaylistHint">Use ＋ next to a track or folder.</span>
|
||
</div>
|
||
|
||
<div class="playlist-scroll">
|
||
<table class="playlist-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="number-column">#</th>
|
||
<th data-i18n="title">TITLE</th>
|
||
<th data-i18n="album">ALBUM</th>
|
||
<th class="duration-column" data-i18n="duration">DURATION</th>
|
||
<th class="action-column"><span class="visually-hidden" data-i18n="actions">Actions</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">— channels</span>
|
||
<span id="audio-format">—</span>
|
||
<span id="audio-source">—</span>
|
||
</div>
|
||
<p id="status" role="status" aria-live="polite" data-i18n="connecting">Connecting…</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" data-i18n="signIn">Sign in</h1>
|
||
<label for="login-username" data-i18n="username">Username</label>
|
||
<input id="login-username" name="username" autocomplete="username" required>
|
||
<label for="login-password" data-i18n="password">Password</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" data-i18n="signIn">Sign in</button>
|
||
</form>
|
||
</section>
|
||
|
||
<script src="/translate.js" defer></script>
|
||
<script src="/app.js" defer></script>
|
||
</body>
|
||
</html>
|