aboutsummaryrefslogtreecommitdiff
path: root/client/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'client/index.html')
-rw-r--r--client/index.html81
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>