diff options
Diffstat (limited to 'client/index.html')
| -rw-r--r-- | client/index.html | 58 |
1 files changed, 40 insertions, 18 deletions
diff --git a/client/index.html b/client/index.html index 4205746..f5a9b53 100644 --- a/client/index.html +++ b/client/index.html @@ -7,8 +7,8 @@ <link rel="stylesheet preload" href="./css/styles.css" type="text/css" as="style"/> </head> <body> - <h1>Radio Station Emulator</h1> <div> + <h1>Radio Station Emulator</h1> <p> If you are visiting for the first time, you might need to "Allow Audio" first. Please do and refresh the page. @@ -23,25 +23,47 @@ Ideally, if "Listening at:" and "Show playback:" have the same value then you are in sync! </p> - <div style="display: flex; flex-direction: row; align-items: center; gap: 3px;"> + <div> <p>Download progress:</p> - <progress class="dl-progress" max="100" style="width: 100%;"></progress> + <progress class="dl-progress" max="100"></progress> </div> - <div style="display: flex; flex-direction: row; align-items: center; gap: 3px;"> - <button onclick="sync_radio()">Sync!</button> - <p>Live progress:</p> - <progress class="play-progress" style="width: 100%;"></progress> + <div> + <p>Live progress:</p> + <progress class="play-progress"></progress> </div> - <div style="display:flex; flex-direction:row; align-items: center; gap: 3px; justify-content: space-around;"> - <p>Listening at:</p> - <pre class="listening-at"></pre> - <p>Show playback: </p> - <pre class="relative-time"></pre> - <p>/</p> - <pre class="show-duration"></pre> + <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; + "> + <p>Listening at:</p> + <pre class="listening-at"></pre> + </div> + <div style=" + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: baseline; + justify-content: space-evenly; + "> + <p>Show playback: </p> + <pre class="relative-time"></pre> + <p>/</p> + <pre class="show-duration"></pre> + </div> </div> <div class="radio-player"> - <audio preload="auto" controls muted style="width: 100%;"></audio> + <audio preload="auto" controls muted></audio> </div> </div> <div> @@ -65,10 +87,10 @@ <td class="show-duration"></td> </tr> </table> - <h3>Show info (JSON)</h3> - <pre class="show-info"></pre> <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"> @@ -110,7 +132,7 @@ </tr> </table> <h3>List info (JSON)</h3> - <pre class="list-info"></pre> + <pre style="overflow-x: auto;" class="list-info"></pre> </div> <h2>Previously played:</h2> <div class="previously-played"> |