Mercurial > code > home > repos > light9

comparison web/ascoltami/index.html @ 2439:06da5db2fafe

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
rewrite ascoltami to use the graph for more playback data
author drewp@bigasterisk.com
date Thu, 30 May 2024 01:08:07 -0700
parents 4556eebe5d73
children
comparison
equal deleted inserted replaced
2438:f2b3cfcc23d3 2439:06da5db2fafe
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>ascoltami on {{host}}</title> 4 <title>ascoltami on {{host}}</title>
5 <link rel="stylesheet" href="../style.css" /> 5 <link rel="stylesheet" href="../style.css" />
6 <style> 6 <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=.7" />
7 #cmd-go {
8 min-width: 5em;
9 }
10 .song-name {
11 padding-left: 0.4em;
12 }
13 .dimStalled #currentTime {
14 font-size: 20px;
15 background: green;
16 color: black;
17 padding: 3px;
18 }
19 .dimStalled {
20 font-size: 90%;
21 }
22 body {
23 margin: 0;
24 padding: 0;
25 overflow: hidden;
26 min-height: 100vh;
27 }
28 #page {
29 width: 100%;
30 height: 100vh; /* my phone was losing the bottom :( */
31 display: flex;
32 flex-direction: column;
33 }
34 #page > div,
35 #page > p {
36 flex: 0 1 auto;
37 margin: 0;
38 }
39 light9-ascoltami-ui {
40 flex: 1 1 auto;
41 }
42 </style>
43 <meta
44 name="viewport"
45 content="user-scalable=no, width=device-width, initial-scale=.7"
46 />
47 <script type="module" src="./Light9AscoltamiUi"></script> 7 <script type="module" src="./Light9AscoltamiUi"></script>
48 </head> 8 </head>
49 <body> 9 <body>
50 <div id="page"> 10 <light9-ascoltami-ui></light9-ascoltami-ui>
51 <h1>ascoltami on {{host}}</h1> 11 <p><a href="">reload</a></p>
52 <div class="songs" style="display: none"></div>
53
54 <div class="dimStalled">
55 <table>
56 <tr>
57 <td colspan="3">
58 <strong>Song:</strong> <span id="currentSong"></span>
59 </td>
60 </tr>
61 <tr>
62 <td><strong>Time:</strong> <span id="currentTime"></span></td>
63 <td><strong>Left:</strong> <span id="leftTime"></span></td>
64 <td>
65 <strong>Until autostop:</strong>
66 <span id="leftAutoStopTime"></span>
67 </td>
68 </tr>
69 <tr>
70 <td colspan="3">
71 <span id="states"></span>
72 </td>
73 </tr>
74 </table>
75 </div>
76
77 <hr />
78 <light9-ascoltami-ui></light9-ascoltami-ui>
79 <p><a href="">reload</a></p>
80 </div>
81 <script type="module" src="./main.ts"></script>
82 </body> 12 </body>
83 </html> 13 </html>