<!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>