diff options
| -rw-r--r-- | client/css/styles.css | 11 | ||||
| -rw-r--r-- | client/index.html | 143 |
2 files changed, 82 insertions, 72 deletions
diff --git a/client/css/styles.css b/client/css/styles.css index 5dce3f4..ea7b323 100644 --- a/client/css/styles.css +++ b/client/css/styles.css @@ -27,6 +27,10 @@ body { div { display: flex; flex-direction: column; + gap: 0px; +} + +.main { gap: 10px; } @@ -102,6 +106,7 @@ summary:hover { flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; + gap: 10px; } .previously-played { @@ -172,3 +177,9 @@ audio { max-width: 128px; max-height: 128px; } + +.more-details { + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; +} diff --git a/client/index.html b/client/index.html index 9c9d90b..4bf6e4f 100644 --- a/client/index.html +++ b/client/index.html @@ -47,31 +47,6 @@ </div> <div class="div-row"> <button onclick="sync_radio()">Sync!</button> - <details style="width:100%;"> - <summary>Details</summary> - <div> - <p>Download progress:</p> - <progress class="dl-progress" max="100"></progress> - </div> - <div> - <p>Live progress:</p> - <progress class="play-progress"></progress> - </div> - <div class="div-inline"> - <div class="div-inline"> - <p>Listening at:</p> - <p class="listening-at"></p> - </div> - <div class="div-inline"> - <p>Show playback: </p> - <div class="no-break"> - <p class="relative-time"></p> - <p>/</p> - <p class="show-duration"></p> - </div> - </div> - </div> - </details> </div> </div> </div> @@ -79,7 +54,77 @@ </div> </div> <div class="more-details"> - <h2>More details</h2> + <details style="width:100%;"> + <summary>Progress details</summary> + <div> + <p>Download progress:</p> + <progress class="dl-progress" max="100"></progress> + </div> + <div> + <p>Live progress:</p> + <progress class="play-progress"></progress> + </div> + <div class="div-inline"> + <div class="div-inline"> + <p>Listening at:</p> + <p class="listening-at"></p> + </div> + <div class="div-inline"> + <p>Show playback: </p> + <div class="no-break"> + <p class="relative-time"></p> + <p>/</p> + <p class="show-duration"></p> + </div> + </div> + </div> + </details> + <details> + <summary>Sync info</summary> + <div class="groups"> + <table> + <tr> + <th>Time of visit (ms)</th> + <td class="time-of-visit"></td> + </tr> + <tr> + <th>Time elapsed since visited (s)</th> + <td class="you-are-here"></td> + </tr> + <tr> + <th>List started on (ms)</th> + <td class="started-on"></td> + </tr> + <tr> + <th>List duration (s)</th> + <td class="list-duration"></td> + </tr> + </table> + <h3>Calculations</h3> + <table> + <tr> + <th>Times Fully Played</th> + <td class="min-played"></td> + </tr> + <tr> + <th>Times Played</th> + <td class="max-played"></td> + </tr> + <tr> + <th>Dt = TP - TFP</th> + <td class="d-t"></td> + </tr> + <tr> + <th>Delta time</th> + <td class="delta-time"></td> + </tr> + <tr> + <th>Initial "tune in" time (s)</th> + <td class="current-time"></td> + </tr> + </table> + </div> + </details> <details > <summary>Info to get you started</summary> <h2>Notice</h2> @@ -145,52 +190,6 @@ </ul> </details> <details> - <summary>Sync info</summary> - <div class="groups"> - <table> - <tr> - <th>Time of visit (ms)</th> - <td class="time-of-visit"></td> - </tr> - <tr> - <th>Time elapsed since visited (s)</th> - <td class="you-are-here"></td> - </tr> - <tr> - <th>List started on (ms)</th> - <td class="started-on"></td> - </tr> - <tr> - <th>List duration (s)</th> - <td class="list-duration"></td> - </tr> - </table> - <h3>Calculations</h3> - <table> - <tr> - <th>Times Fully Played</th> - <td class="min-played"></td> - </tr> - <tr> - <th>Times Played</th> - <td class="max-played"></td> - </tr> - <tr> - <th>Dt = TP - TFP</th> - <td class="d-t"></td> - </tr> - <tr> - <th>Delta time</th> - <td class="delta-time"></td> - </tr> - <tr> - <th>Initial "tune in" time (s)</th> - <td class="current-time"></td> - </tr> - </table> - </div> - </details> - <details> <summary>Data segments</summary> <h3>Hash of list</h3> <pre class="list-hash"></pre> |