aboutsummaryrefslogtreecommitdiff
path: root/client/index.html
diff options
context:
space:
mode:
authorkaotisk <kaotisk@arching-kaos.org>2024-10-14 04:29:56 +0300
committerkaotisk <kaotisk@arching-kaos.org>2024-10-14 04:29:56 +0300
commit95ae29fe3341a2858e3c5195dbc72ed72efd8c96 (patch)
treeb196386f8d18c181a6669c2bd8c22d479cd619c4 /client/index.html
parent30475d7b4d0b4e7aa49435050fb95c932278c10d (diff)
downloadarching-kaos-radio-95ae29fe3341a2858e3c5195dbc72ed72efd8c96.tar.gz
arching-kaos-radio-95ae29fe3341a2858e3c5195dbc72ed72efd8c96.tar.bz2
arching-kaos-radio-95ae29fe3341a2858e3c5195dbc72ed72efd8c96.zip
Bug fixes, styling
Diffstat (limited to 'client/index.html')
-rw-r--r--client/index.html58
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">