aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorkaotisk <kaotisk@arching-kaos.org>2024-10-11 05:07:12 +0300
committerkaotisk <kaotisk@arching-kaos.org>2024-10-11 05:07:12 +0300
commitc0200273c8c60e14d7f6577bd33212d71f2d45b3 (patch)
tree420d4ef7a5b879361524ecf74595c5f940de2c4b
parent72b1337ba63c5c9cdb964d11b032c2d88a85f3c9 (diff)
downloadarching-kaos-radio-c0200273c8c60e14d7f6577bd33212d71f2d45b3.tar.gz
arching-kaos-radio-c0200273c8c60e14d7f6577bd33212d71f2d45b3.tar.bz2
arching-kaos-radio-c0200273c8c60e14d7f6577bd33212d71f2d45b3.zip
Better formatting
-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>