350 lines
12 KiB
HTML
350 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||
<meta name="theme-color" content="#101010" />
|
||
<title>s1ne</title>
|
||
<link rel="stylesheet" href="/static/styles.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<main class="page page-home" id="pageRoot">
|
||
<div class="view-tabs">
|
||
<button id="backButton" class="tab-button" type="button" hidden>back</button>
|
||
|
||
<button
|
||
id="favoritesTab"
|
||
class="tab-button icon-tab-button"
|
||
type="button"
|
||
aria-label="favorites"
|
||
title="favorites"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 24 24"
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
>
|
||
<path
|
||
d="m5.825 21l2.325-7.6L2 9h7.6L12 1l2.4 8H22l-6.15 4.4l2.325 7.6L12 16.3z"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
|
||
<button
|
||
id="playlistsTab"
|
||
class="tab-button icon-tab-button"
|
||
type="button"
|
||
aria-label="playlists"
|
||
title="playlists"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 24 24"
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
>
|
||
<path
|
||
d="M3 16v-2h8v2zm0-4v-2h12v2zm0-4V6h12v2zm13 13v-8l6 4z"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div style="padding-bottom:3px;padding-top:3px;"></div>
|
||
<section id="searchHero" class="search-hero" aria-label="search">
|
||
<div class="search-hero-inner">
|
||
<form id="searchForm" class="search-form search-form-hero">
|
||
<input
|
||
id="searchInput"
|
||
class="search-input"
|
||
type="search"
|
||
placeholder=""
|
||
autocomplete="off"
|
||
autofocus
|
||
/>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="status" class="status" aria-live="polite" style="opacity:0.1;"></div>
|
||
<div id="playlistHeader" class="playlist-header" hidden>
|
||
<div id="playlistTitle" class="playlist-title"></div>
|
||
<div class="playlist-header-actions">
|
||
<button id="playlistMoveUpButton" type="button" hidden>↑</button>
|
||
<button id="playlistMoveDownButton" type="button" hidden>↓</button>
|
||
<button id="playlistRemoveButton" type="button" hidden>×</button>
|
||
</div>
|
||
</div>
|
||
<section id="resultsSection" class="results-section results-section-home">
|
||
<table class="results-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="col-index">#</th>
|
||
<th class="col-title">title</th>
|
||
<th class="col-channel">channel</th>
|
||
<th class="col-duration">length</th>
|
||
<th class="col-meta">views</th>
|
||
<th class="col-play"></th>
|
||
<th class="col-download"></th>
|
||
<th class="col-fav"></th>
|
||
<th class="col-playlist"></th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody id="resultsBody">
|
||
<tr>
|
||
<td colspan="9" class="empty">no results</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div id="scrollSentinel" class="scroll-sentinel"></div>
|
||
</section>
|
||
|
||
<section id="queuePanel" class="queue-panel" style="background:transparent;opacity:0;display:none;" hidden>
|
||
<div class="queue-panel-header">
|
||
<strong>up next</strong>
|
||
<div class="queue-panel-actions">
|
||
<select id="queueModeSelect" aria-label="upcoming tracks">
|
||
<option value="queue">queue</option>
|
||
<option value="recommendations">recommendations</option>
|
||
</select>
|
||
<button id="queueRefreshButton" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
|
||
<path fill="#f2f2f2" d="M4.654 19.346v-1H7.75l-1.054-1.042q-1.148-1.148-1.672-2.49q-.524-1.34-.524-2.724q0-2.41 1.374-4.361T9.5 4.942v1.062q-1.82.765-2.91 2.424t-1.09 3.66q0 1.222.464 2.37q.463 1.15 1.44 2.127l1.019 1.019v-3.027h1v4.77zm9.846-.288v-1.062q1.82-.765 2.91-2.424t1.09-3.66q0-1.222-.463-2.37q-.464-1.15-1.44-2.126l-1.02-1.02v3.027h-1v-4.77h4.77v1H16.25l1.054 1.043q1.148 1.148 1.672 2.49q.524 1.341.524 2.726q0 2.41-1.374 4.36T14.5 19.058"/></svg></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="queueList" style="display:none;opacity:0;" class="queue-list"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer id="playerBar" class="player hidden">
|
||
<div class="now-playing">
|
||
<div id="playerTitle">∴s1neヅ★‣</div>
|
||
<div id="playerMeta" class="muted">choose a track</div>
|
||
</div>
|
||
|
||
<div class="player-controls">
|
||
<button
|
||
id="prevTrackButton"
|
||
class="queue-control-button icon-control-button"
|
||
type="button"
|
||
aria-label="previous track"
|
||
title="previous track"
|
||
>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M6 5h2v14H6zm3.5 7L19 5v14z" />
|
||
</svg>
|
||
</button>
|
||
|
||
<button
|
||
id="playPauseButton"
|
||
class="queue-control-button icon-control-button primary-control play-button"
|
||
type="button"
|
||
aria-label="play"
|
||
title="play"
|
||
>
|
||
<svg class="play-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M8 5v14l11-7z" />
|
||
</svg>
|
||
|
||
<svg class="pause-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M7 5h4v14H7zm6 0h4v14h-4z" />
|
||
</svg>
|
||
</button>
|
||
|
||
<button
|
||
id="nextTrackButton"
|
||
class="queue-control-button icon-control-button"
|
||
type="button"
|
||
aria-label="next"
|
||
title="next"
|
||
>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="m5 5 9.5 7L5 19zm11 0h2v14h-2z" />
|
||
</svg>
|
||
</button>
|
||
|
||
<input
|
||
id="seekBar"
|
||
class="player-seek"
|
||
type="range"
|
||
min="0"
|
||
max="100"
|
||
value="0"
|
||
step="0.1"
|
||
aria-label="seek through track"
|
||
/>
|
||
|
||
<span id="currentTime">0:00</span>
|
||
<span aria-hidden="true">-</span>
|
||
<span id="duration">0:00</span>
|
||
|
||
<input
|
||
id="volumeSlider"
|
||
class="player-volume"
|
||
type="range"
|
||
min="0"
|
||
max="100"
|
||
value="100"
|
||
step="1"
|
||
aria-label="volume"
|
||
/>
|
||
|
||
<button
|
||
id="autoplayButton"
|
||
class="queue-control-button icon-control-button mode-control"
|
||
type="button"
|
||
aria-label="autoplay enabled"
|
||
aria-pressed="true"
|
||
title="autoplay on"
|
||
>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M7 5v14l10-7z" />
|
||
<path d="M18 3h2v6h-2zM16 5h6v2h-6z" />
|
||
</svg>
|
||
<span class="control-indicator" aria-hidden="true"></span>
|
||
</button>
|
||
|
||
<button
|
||
id="shuffleButton"
|
||
class="queue-control-button icon-control-button mode-control"
|
||
type="button"
|
||
aria-label="shuffle disabled"
|
||
aria-pressed="false"
|
||
title="shuffle off"
|
||
>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path
|
||
d="M16 3h5v5h-2V6.4l-3.7 3.7-1.4-1.4L17.6 5H16zM4 6h3.2c1.7 0 3.3.8 4.3 2.2l5 6.9c.6.8 1.5 1.3 2.5 1.3h2v2h-2c-1.7 0-3.3-.8-4.3-2.2l-5-6.9C9.1 8.5 8.2 8 7.2 8H4zm0 10.4h3.2c1 0 1.9-.5 2.5-1.3l1.2-1.7 1.2 1.7-1 1.3c-.9 1.3-2.4 2-3.9 2H4zM19 14h2v5h-5v-2h1.6l-1.7-1.7 1.2-1.7L19 15.5z"
|
||
/>
|
||
</svg>
|
||
<span class="control-indicator" aria-hidden="true"></span>
|
||
</button>
|
||
|
||
<button
|
||
id="loopButton"
|
||
class="queue-control-button icon-control-button mode-control"
|
||
type="button"
|
||
aria-label="loop disabled"
|
||
aria-pressed="false"
|
||
title="loop off"
|
||
>
|
||
<svg class="loop-all-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path
|
||
d="M17 2l4 4-4 4V7H7a3 3 0 0 0-3 3v1H2v-1a5 5 0 0 1 5-5h10zM7 22l-4-4 4-4v3h10a3 3 0 0 0 3-3v-1h2v1a5 5 0 0 1-5 5H7z"
|
||
/>
|
||
</svg>
|
||
|
||
<svg class="loop-one-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path
|
||
d="M17 2l4 4-4 4V7H7a3 3 0 0 0-3 3v1H2v-1a5 5 0 0 1 5-5h10zM7 22l-4-4 4-4v3h10a3 3 0 0 0 3-3v-1h2v1a5 5 0 0 1-5 5H7z"
|
||
/>
|
||
<path class="loop-one-number" d="M11 9h2v7h-2v-5h-1V9z" />
|
||
</svg>
|
||
|
||
<span class="control-indicator" aria-hidden="true"></span>
|
||
</button>
|
||
|
||
<div id="seekThemePicker" class="seek-theme-picker">
|
||
<button
|
||
id="seekThemeButton"
|
||
class="queue-control-button icon-control-button theme-picker-button"
|
||
type="button"
|
||
aria-label="seek bar color"
|
||
aria-haspopup="listbox"
|
||
aria-expanded="false"
|
||
title="seek bar color"
|
||
>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path
|
||
fill="currentColor"
|
||
d="M8.94 16.56c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12L8.32.7a.996.996 0 1 0-1.41 1.41l1.68 1.68l-5.15 5.15a1.49 1.49 0 0 0 0 2.12zM10 5.21L14.79 10H5.21zM19 17c1.1 0 2-.9 2-2c0-1.33-2-3.5-2-3.5s-2 2.17-2 3.5c0 1.1.9 2 2 2m1 3H4c-1.1 0-2 .9-2 2s.9 2 2 2h16c1.1 0 2-.9 2-2s-.9-2-2-2"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
|
||
<div
|
||
id="seekThemeMenu"
|
||
class="seek-theme-menu"
|
||
role="listbox"
|
||
aria-label="seek bar color"
|
||
hidden
|
||
>
|
||
<button
|
||
class="seek-theme-option"
|
||
type="button"
|
||
role="option"
|
||
data-seek-theme="stone"
|
||
data-seek-color="#817567"
|
||
>
|
||
<span class="seek-color-swatch" style="--swatch:#817567"></span>
|
||
stone
|
||
</button>
|
||
|
||
<button
|
||
class="seek-theme-option"
|
||
type="button"
|
||
role="option"
|
||
data-seek-theme="blue"
|
||
data-seek-color="#6fa8dc"
|
||
>
|
||
<span class="seek-color-swatch" style="--swatch:#6fa8dc"></span>
|
||
sky
|
||
</button>
|
||
|
||
<button
|
||
class="seek-theme-option"
|
||
type="button"
|
||
role="option"
|
||
data-seek-theme="green"
|
||
data-seek-color="#78b88b"
|
||
>
|
||
<span class="seek-color-swatch" style="--swatch:#78b88b"></span>
|
||
grass
|
||
</button>
|
||
|
||
<button
|
||
class="seek-theme-option"
|
||
type="button"
|
||
role="option"
|
||
data-seek-theme="amber"
|
||
data-seek-color="#d4a857"
|
||
>
|
||
<span class="seek-color-swatch" style="--swatch:#d4a857"></span>
|
||
gold
|
||
</button>
|
||
|
||
<button
|
||
class="seek-theme-option"
|
||
type="button"
|
||
role="option"
|
||
data-seek-theme="rose"
|
||
data-seek-color="#c97b84"
|
||
>
|
||
<span class="seek-color-swatch" style="--swatch:#c97b84"></span>
|
||
rose
|
||
</button>
|
||
|
||
<button
|
||
class="seek-theme-option"
|
||
type="button"
|
||
role="option"
|
||
data-seek-theme="violet"
|
||
data-seek-color="#a78bd4"
|
||
>
|
||
<span class="seek-color-swatch" style="--swatch:#a78bd4"></span>
|
||
lavender
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<audio id="audioPlayer" preload="metadata"></audio>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|