diff options
| -rw-r--r-- | client/index.html | 77 |
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> |