163 lines
8.2 KiB
HTML
163 lines
8.2 KiB
HTML
<!doctype html>
|
|
<html lang='en'>
|
|
<head>
|
|
<title>Radiostasis</title>
|
|
<meta charset='utf-8'>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel='stylesheet' href='/style.css'>
|
|
<link rel='stylesheet' href='/toastify.min.css'>
|
|
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>
|
|
<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'>
|
|
<link rel='icon' type='image/svg' href='/favicon.svg'>
|
|
<link rel='manifest' href='/site.webmanifest'>
|
|
<meta name='theme-color' content='#ffffff'>
|
|
</head>
|
|
<body>
|
|
<div id='container'>
|
|
<nav>
|
|
<a href='#'
|
|
hx-get='/partial/home.html'
|
|
hx-push-url='/'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>
|
|
<svg viewBox='0 0 50 50' fill='currentColor'>
|
|
<path d='M 42 8 L 8 8 C 3.589844 8 0 11.589844 0 16 L 0 38 C 0 40.207031 1.792969 42 4 42 L 5 42 L 5 43 C 5 44.101563 5.898438 45 7 45 L 10 45 C 11.101563 45 12 44.101563 12 43 L 12 42 L 38 42 L 38 43 C 38 44.101563 38.898438 45 40 45 L 43 45 C 44.101563 45 45 44.101563 45 43 L 45 42 L 46 42 C 48.207031 42 50 40.207031 50 38 L 50 16 C 50 11.589844 46.410156 8 42 8 Z M 41 16 L 44 16 L 44 20 L 41 20 Z M 10 18.015625 L 10 33.988281 C 7.574219 32.160156 6 29.269531 6 26 C 6 22.730469 7.574219 19.839844 10 18.015625 Z M 15 35.949219 C 13.941406 35.84375 12.933594 35.570313 12 35.160156 L 12 16.835938 C 12.933594 16.429688 13.941406 16.15625 15 16.050781 Z M 20 35.160156 C 19.066406 35.570313 18.058594 35.84375 17 35.949219 L 17 16.050781 C 18.058594 16.15625 19.066406 16.429688 20 16.835938 Z M 22 33.984375 L 22 18.015625 C 24.425781 19.839844 26 22.730469 26 26 C 26 29.269531 24.425781 32.160156 22 33.984375 Z M 31 16 L 39 16 L 39 20 L 31 20 Z M 34 30 C 34 27.789063 35.792969 26 38 26 C 40.210938 26 42 27.789063 42 30 C 42 32.210938 40.210938 34 38 34 C 35.792969 34 34 32.210938 34 30 Z' />
|
|
</svg>
|
|
Radiostasis
|
|
</a>
|
|
<a href='#'
|
|
hx-get='/partial/series.html'
|
|
hx-push-url='/series'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>All Series</a>
|
|
<details>
|
|
<summary>Genres</summary>
|
|
<ul>
|
|
<!-- begin genre list -->
|
|
<li hx-get='/partial/genre/adventure.html'
|
|
hx-push-url='/genre/adventure'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Adventure</li>
|
|
<li hx-get='/partial/genre/children.html'
|
|
hx-push-url='/genre/children'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Children</li>
|
|
<li hx-get='/partial/genre/comedy.html'
|
|
hx-push-url='/genre/comedy'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Comedy</li>
|
|
<li hx-get='/partial/genre/crime.html'
|
|
hx-push-url='/genre/crime'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Crime</li>
|
|
<li hx-get='/partial/genre/detective.html'
|
|
hx-push-url='/genre/detective'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Detective</li>
|
|
<li hx-get='/partial/genre/documentary.html'
|
|
hx-push-url='/genre/documentary'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Documentary</li>
|
|
<li hx-get='/partial/genre/drama.html'
|
|
hx-push-url='/genre/drama'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Drama</li>
|
|
<li hx-get='/partial/genre/game-show.html'
|
|
hx-push-url='/genre/game-show'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Game-Show</li>
|
|
<li hx-get='/partial/genre/horror.html'
|
|
hx-push-url='/genre/horror'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Horror</li>
|
|
<li hx-get='/partial/genre/music.html'
|
|
hx-push-url='/genre/music'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Music</li>
|
|
<li hx-get='/partial/genre/mystery.html'
|
|
hx-push-url='/genre/mystery'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Mystery</li>
|
|
<li hx-get='/partial/genre/sci-fi.html'
|
|
hx-push-url='/genre/sci-fi'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Sci-Fi</li>
|
|
<li hx-get='/partial/genre/western.html'
|
|
hx-push-url='/genre/western'
|
|
hx-target='main'
|
|
hx-swap='innerHTML show:top'>Western</li>
|
|
<!-- end genre list -->
|
|
</ul>
|
|
</details>
|
|
</nav>
|
|
<main hx-history-elt></main>
|
|
</div>
|
|
<div id='overlay'></div>
|
|
<div id='queue-container'>
|
|
<h2>Playlist</h2>
|
|
<div>
|
|
<h3>Now Playing:</h3>
|
|
<a href='#' id='clear-playlist'>Clear Playlist</a>
|
|
</div>
|
|
<ol>
|
|
</ol>
|
|
</div>
|
|
<footer>
|
|
<div>
|
|
<div id='progress'></div>
|
|
</div>
|
|
<div>
|
|
<div id='nowPlaying'>
|
|
<img alt='cover image' title='No media playing'
|
|
src='/transparent.png'>
|
|
<div>
|
|
<span title='No episode playing'>No episode playing</span>
|
|
<span title=''></span>
|
|
</div>
|
|
</div>
|
|
<div id='controls'>
|
|
<button class='seek' title='Rewind 10 seconds'>
|
|
<svg viewBox='0 0 16 16' fill='currentColor'>
|
|
<path fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/>
|
|
<path d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/>
|
|
<text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='0.3rem'>10</text>
|
|
</svg>
|
|
</button>
|
|
<button class='play' title='Play/Pause'>
|
|
<svg viewBox='0 0 16 16' fill='currentColor'>
|
|
<path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z'/>
|
|
</svg>
|
|
</button>
|
|
<button class='seek' title='Fast forward 30 seconds'>
|
|
<svg viewBox='0 0 16 16' fill='currentColor'>
|
|
<path fill-rule='evenodd' d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z'/>
|
|
<path d='M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z'/>
|
|
<text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='0.3rem'>30</text>
|
|
</svg>
|
|
</button>
|
|
<button class='seek' title='Next track'>
|
|
<svg viewBox='0 0 16 16' fill='currentColor'>
|
|
<path d='M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.693 3.3 4 3.678 4 4.308v7.384c0 .63.692 1.01 1.233.697L11.5 8.753V12a.5.5 0 0 0 1 0V4z'/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id='timeVolume'>
|
|
<span>--:-- / --:--</span>
|
|
<span>
|
|
<svg viewBox='0 0 16 16' fill='currentColor'>
|
|
<path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
|
|
<path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
|
|
<path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
|
|
</svg>
|
|
<input title='Volume' type='range' max='100' min='0' value='100'>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src='/htmx.min.js'></script>
|
|
<script src='/howler.min.js'></script>
|
|
<script src='/toastify.min.js'></script>
|
|
<script src='/radiostasis.js'></script>
|
|
</body>
|
|
</html>
|