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>