130 lines
6.9 KiB
HTML
130 lines
6.9 KiB
HTML
<!doctype html>
|
|
<html lang='en'>
|
|
<head>
|
|
<title>Radiostasis</title>
|
|
<meta charset='utf-8'>
|
|
<script src='/htmx.min.js'></script>
|
|
<script src='/howler.min.js'></script>
|
|
<script src='/radiostasis.js'></script>
|
|
<link rel='stylesheet' href='/style.css'>
|
|
</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></main>
|
|
</div>
|
|
<footer>
|
|
<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 d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM7.729 5.055A.5.5 0 0 1 8 5.5v1.886l3.21-2.293A.5.5 0 0 1 12 5.5v5a.5.5 0 0 1-.79.407L8 8.614V10.5a.5.5 0 0 1-.79.407l-3.5-2.5a.5.5 0 0 1 0-.814l3.5-2.5a.5.5 0 0 1 .519-.038Z'/>
|
|
</svg>
|
|
</button>
|
|
<button class='play' title='Play/Pause'>
|
|
<svg title='Play/Pause' class='play' 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 title='Fast forward 30 seconds' class='seek' viewBox='0 0 16 16' fill='currentColor'>
|
|
<path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM4.79 5.093 8 7.386V5.5a.5.5 0 0 1 .79-.407l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 8 10.5V8.614l-3.21 2.293A.5.5 0 0 1 4 10.5v-5a.5.5 0 0 1 .79-.407Z'/>
|
|
</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>
|
|
</footer>
|
|
</body>
|
|
</html>
|