aboutsummaryrefslogtreecommitdiff
path: root/client/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'client/index.html')
-rw-r--r--client/index.html77
1 files changed, 60 insertions, 17 deletions
diff --git a/client/index.html b/client/index.html
index 1cfcd5d..1025d69 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,33 +1,76 @@
<!DOCTYPE html>
<html>
<head>
+ <meta charset="UTF-8"/>
+ <title>Radio Station Emulator</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet preload" href="./css/styles.css" type="text/css" as="style"/>
</head>
<body>
- <h1>Radio station example</h1>
+ <h1>Radio Station Emulator</h1>
<div>
- <p>Hit play!</p>
+ <p>
+ If you are visiting for the first time, you might need to "Allow Audio" first.
+ Please do and refresh the page.
+ </p>
+ <p>
+ Sometimes, you will need to press the "Sync" button more than once. That's mostly
+ due to bandwidth capabilities of both the server and the client. The "tune" would
+ be right if you press it multiple times and land near the same timespace over and
+ over. Three to four times would be enough.
+ </p>
<button onclick="sync_radio()">Sync!</button>
- <div class="radio-player">
+ <progress></progress>
+ <div style="display:flex; flex-direction:row; align-items: center; gap: 3px;">
+ <p>Show playback: </p>
+ <pre class="relative-time"></pre>
+ <p>/</p>
+ <pre class="show-duration"></pre>
+ </div>
+ <div class="radio-player" hidden>
<audio preload="auto" controls style="width: 100%;">
<source src=""/>
</audio>
</div>
</div>
<div>
- <h2>Artist</h2>
- <p class="artist"></p>
- <h2>Title</h2>
- <p class="title"></p>
- <h2>You are here for (seconds)</h2>
- <p class="you-are-here"></p>
- <h2>Started on</h2>
- <p class="started-on"></p>
- <h2>Current time</h2>
- <p class="current-time"></p>
- <h2>Hash of current show</h2>
- <p class="current-show-hash"></p>
- <h2>Hash of list</h2>
- <p class="list-hash"></p>
+ <h2>Current "show" info</h2>
+ <div class="groups">
+ <table>
+ <tr>
+ <th>Artist</th>
+ <th>Title</th>
+ <th>Duration</th>
+ </tr>
+ <tr>
+ <td class="artist"></td>
+ <td class="title"></td>
+ <td class="starts-on"></td>
+ </tr>
+ </table>
+ </div>
+ <h2>Sync info</h2>
+ <div class="groups">
+ <table>
+ <tr>
+ <th>You are here for (seconds)</th>
+ <th>Started on (seconds)</th>
+ <th>Initial "tune in" time (seconds)</th>
+ </tr>
+ <tr>
+ <td class="you-are-here"></td>
+ <td class="started-on"></td>
+ <td class="current-time"></td>
+ </tr>
+ </table>
+ </div>
+ <h2>Data segments</h2>
+ <div class="groups">
+ <h3>Hash of current show</h3>
+ <p class="current-show-hash"></p>
+ <h3>Hash of list</h3>
+ <p class="list-hash"></p>
+ </div>
</div>
<div>
<a href="./data.html" target="_blank">Data</a>