view light9/ascoltami/index.html @ 2053:b7a3dff5514d

rough and untested port of asco from jquery to vanilla
author drewp@bigasterisk.com
date Fri, 13 May 2022 01:09:14 -0700
parents 7ed414bdaab9
children 16c7dd543250
line wrap: on
line source

<!DOCTYPE html>
<html>
  <head>
    <title>ascoltami on {{host}}</title>
    
    <link rel="Stylesheet" type="text/css" href="style.css">
    <style>
        #cmd-go { min-width: 5em; }
        .song-name { padding-left: 0.4em; }
    </style>
  </head>
  <body>
    <h1>ascoltami on {{host}}</h1>
    <div class="songs"></div>

    <div class="dimStalled">
      <table>
        <tr><td colspan="3"><strong>Song:</strong> <span id="currentSong"></span></td></tr>
        <tr>
          <td><strong>Time:</strong> <span id="currentTime"></span></td>
          <td><strong>Left:</strong> <span id="leftTime"></span></td>
          <td><strong>Until autostop:</strong> <span id="leftAutoStopTime"></span></td>
        </tr>
        <tr>

          <td colspan="3">
            <strong>Update freq:</strong> requested <span id="updateReq"></span>, actual <span id="updateActual"></span>
            <strong>States:</strong> <span id="states"></span>
          </td>
          
        </tr>
      </table>
      
      <div class="timeRow">
        <div id="timeSlider"></div>
      </div>
    </div>
    <div class="commands">
      <button id="cmd-stop" class="playMode"><strong>Stop</strong><div class="key">s</div></button>
      <button id="cmd-play" class="playMode"><strong>Play</strong> <div class="key">p</div></button>
      <button id="cmd-intro"><strong>Skip intro</strong> <div class="key">i</div></button>
      <button id="cmd-post"><strong>Skip to Post</strong> <div class="key">t</div></button>
      <button id="cmd-go"><strong>Go</strong> <div class="key">g</div><div id="next"></div></button>

      <!--
      <button id="cmd-out0"><strong>Output 0</strong></button>
      <button id="cmd-out1"><strong>Output 1</strong></button>
      -->
    </div>
    
    <p>Running on <span id="nav"></span></p>
    <p><a href="">reload</a></p>
    
    <script type="module" src="main.ts"></script>
  </body>
</html>