diff options
Diffstat (limited to 'client/index.html')
| -rw-r--r-- | client/index.html | 81 |
1 files changed, 36 insertions, 45 deletions
diff --git a/client/index.html b/client/index.html index f5a9b53..0e0145f 100644 --- a/client/index.html +++ b/client/index.html @@ -8,7 +8,15 @@ </head> <body> <div> - <h1>Radio Station Emulator</h1> + <div class="header"> + <img class="logo" src="./img/logo.jpg"/> + <div> + <h1>Radio Station Emulator</h1> + <em>by <a href="https://kaotisk-hund.com/" target="_blank">Kaotisk Hund</a>, for <a href="https://arching-kaos.org" target="_blank">Arching Kaos</a></em> + </div> + </div> + <details open> + <summary>Info to get you started</summary> <p> If you are visiting for the first time, you might need to "Allow Audio" first. Please do and refresh the page. @@ -23,6 +31,7 @@ Ideally, if "Listening at:" and "Show playback:" have the same value then you are in sync! </p> + </details> <div> <p>Download progress:</p> <progress class="dl-progress" max="100"></progress> @@ -32,34 +41,16 @@ <progress class="play-progress"></progress> </div> <button onclick="sync_radio()">Sync!</button> - <div style=" - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-evenly; - "> - <div style=" - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-evenly; - "> + <div class="div-inline"> + <div class="div-inline"> <p>Listening at:</p> - <pre class="listening-at"></pre> + <p class="listening-at"></p> </div> - <div style=" - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-evenly; - "> + <div class="div-inline"> <p>Show playback: </p> - <pre class="relative-time"></pre> + <p class="relative-time"></p> <p>/</p> - <pre class="show-duration"></pre> + <p class="show-duration"></p> </div> </div> <div class="radio-player"> @@ -79,43 +70,39 @@ <td class="title"></td> </tr> <tr> - <th>Starts On</th> + <th>Starts On (ms)</th> <td class="starts-on"></td> </tr> <tr> - <th>Duration</th> + <th>Duration (s)</th> <td class="show-duration"></td> </tr> </table> - <h3>Hash of current show</h3> - <p style="overflow-x: auto;" class="current-show-hash"></p> - <h3>Show info (JSON)</h3> - <pre style="overflow-x: auto;" class="show-info"></pre> </div> <h2>Sync info</h2> <div class="groups"> <table> <tr> - <th>Time elapsed since visited (seconds)</th> + <th>Time elapsed since visited (s)</th> <td class="you-are-here"></td> </tr> <tr> - <th>List started on (seconds)</th> + <th>List started on (ms)</th> <td class="started-on"></td> </tr> <tr> - <th>List duration (seconds)</th> + <th>List duration (s)</th> <td class="list-duration"></td> </tr> </table> <h3>Calculations</h3> <table> <tr> - <th>Times list played completely until now</th> + <th>Times Fully Played</th> <td class="min-played"></td> </tr> <tr> - <th>Times played until now</th> + <th>Times Played</th> <td class="max-played"></td> </tr> <tr> @@ -127,21 +114,25 @@ <td class="delta-time"></td> </tr> <tr> - <th>Initial "tune in" time (seconds)</th> + <th>Initial "tune in" time (s)</th> <td class="current-time"></td> </tr> </table> - <h3>List info (JSON)</h3> - <pre style="overflow-x: auto;" class="list-info"></pre> - </div> - <h2>Previously played:</h2> + <h2>Previously played (if any)</h2> <div class="previously-played"> </div> - <h2>Data segments</h2> - <div class="groups"> + <h2>Raw data</h2> + <details> + <summary>Data segments</summary> <h3>Hash of list</h3> - <p style="overflow-x: auto;" class="list-hash"></p> - </div> + <pre class="list-hash"></pre> + <h3>List info (JSON)</h3> + <pre class="list-info"></pre> + <h3>Hash of current show</h3> + <pre class="current-show-hash"></pre> + <h3>Show info (JSON)</h3> + <pre class="show-info"></pre> + </details> </div> <div> <a href="./data.html" target="_blank">Data</a> |