light9 Files · web/ascoltami/index.html

Files @ 7e7874fed2e3

Branch filter:

Location: light9/web/ascoltami/index.html

7e7874fed2e3 2.0 KiB text/html Show Annotation Show as Raw Download as Raw

drewp@bigasterisk.com

buttons to add panels to the layout

<!DOCTYPE html>
<html>
  <head>
    <title>ascoltami on {{host}}</title>
    <link rel="stylesheet" href="../style.css" />
    <style>
      #cmd-go {
        min-width: 5em;
      }
      .song-name {
        padding-left: 0.4em;
      }
      .dimStalled #currentTime {
        font-size: 20px;
        background: green;
        color: black;
        padding: 3px;
      }
      .dimStalled {
        font-size: 90%;
      }
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        min-height: 100vh;
      }
      #page {
        width: 100%;
        height: 100vh; /* my phone was losing the bottom :( */
        display: flex;
        flex-direction: column;
      }
      #page > div,
      #page > p {
        flex: 0 1 auto;
        margin: 0;
      }
      light9-ascoltami-ui {
        flex: 1 1 auto;
      }
    </style>
    <meta
      name="viewport"
      content="user-scalable=no, width=device-width, initial-scale=.7"
    />
    <script type="module" src="./Light9AscoltamiUi"></script>
  </head>
  <body>
    <div id="page">
      <h1>ascoltami on {{host}}</h1>
      <div class="songs" style="display: none"></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">
               <span id="states"></span>
            </td>
          </tr>
        </table>
      </div>

      <hr />
      <light9-ascoltami-ui></light9-ascoltami-ui>
      <p><a href="">reload</a></p>
    </div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>