internal/web/assets/index.html
90 Zeilen · 3.3 KB · HTML
| 1 | |
| 2 | <html lang="de"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> |
| 6 | <meta name="theme-color" content="#11161f"> |
| 7 | <title>TV-Wall</title> |
| 8 | <link rel="stylesheet" href="/static/style.css"> |
| 9 | <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect width='16' height='16' rx='3' fill='%23111820'/><rect x='2.5' y='4' width='11' height='7' rx='1' fill='%2352b6ff'/><rect x='6' y='12' width='4' height='1.2' rx='.6' fill='%2352b6ff'/></svg>"> |
| 10 | </head> |
| 11 | <body> |
| 12 | |
| 13 | <header class="top"> |
| 14 | <div class="brand"> |
| 15 | <span class="logo" aria-hidden="true"></span> |
| 16 | <div> |
| 17 | <h1>TV-Wall</h1> |
| 18 | <p class="sub" id="deviceLine">wird geladen …</p> |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="now" id="nowPlaying"> |
| 22 | <span class="dot" id="statusDot"></span> |
| 23 | <span id="nowText">…</span> |
| 24 | </div> |
| 25 | </header> |
| 26 | |
| 27 | <main> |
| 28 | |
| 29 | <section class="card" id="uploadCard"> |
| 30 | <h2>Hochladen</h2> |
| 31 | <!-- Das Feld steht bewusst AUSSERHALB des Labels und ist nicht per |
| 32 | hidden-Attribut versteckt: iOS Safari oeffnet die Fotoauswahl sonst |
| 33 | zweimal (einmal ueber das Label, einmal per JavaScript) und verwirft |
| 34 | das Ergebnis. --> |
| 35 | <input type="file" id="fileInput" class="visually-hidden" multiple accept="image/*,video/*"> |
| 36 | <label class="drop" id="drop" for="fileInput"> |
| 37 | <span class="drop-icon" aria-hidden="true">＋</span> |
| 38 | <span class="drop-text">Dateien hierher ziehen<br><b>oder tippen zum Auswählen</b></span> |
| 39 | <span class="drop-hint" id="dropHint">Bilder und Videos</span> |
| 40 | </label> |
| 41 | <div class="progress" id="progressWrap" hidden> |
| 42 | <div class="bar"><div class="fill" id="progressFill"></div></div> |
| 43 | <span class="progress-label" id="progressLabel">0 %</span> |
| 44 | </div> |
| 45 | </section> |
| 46 | |
| 47 | <section class="card"> |
| 48 | <h2>Wiedergabe</h2> |
| 49 | <div class="controls"> |
| 50 | <button class="btn" data-action="prev" title="Vorheriger Eintrag">⏮ Zurück</button> |
| 51 | <button class="btn" data-action="pause" id="pauseBtn">⏸ Pause</button> |
| 52 | <button class="btn" data-action="next" title="Nächster Eintrag">⏭ Weiter</button> |
| 53 | <button class="btn ghost" data-action="reload" title="Playliste sofort neu laden">↻ Neu laden</button> |
| 54 | </div> |
| 55 | <div class="settings"> |
| 56 | <label class="field"> |
| 57 | <span>Anzeigedauer Bilder</span> |
| 58 | <span class="input-unit"> |
| 59 | <input type="number" id="durationInput" min="0.5" max="3600" step="0.5" inputmode="decimal"> |
| 60 | <span>Sek.</span> |
| 61 | </span> |
| 62 | </label> |
| 63 | <label class="switch"> |
| 64 | <input type="checkbox" id="muteInput"> |
| 65 | <span>Ton der Videos stummschalten</span> |
| 66 | </label> |
| 67 | <button class="btn small" id="saveSettings">Speichern</button> |
| 68 | </div> |
| 69 | </section> |
| 70 | |
| 71 | <section class="card"> |
| 72 | <div class="card-head"> |
| 73 | <h2>Playliste</h2> |
| 74 | <span class="counter" id="counter"></span> |
| 75 | </div> |
| 76 | <p class="hint">Reihenfolge per Ziehen ändern – oder mit den Pfeiltasten. Änderungen wirken sofort.</p> |
| 77 | <ul class="list" id="list"></ul> |
| 78 | <p class="empty" id="empty" hidden>Noch nichts da. Lade oben Bilder oder Videos hoch.</p> |
| 79 | </section> |
| 80 | |
| 81 | <footer class="foot"> |
| 82 | <span id="diskLine"></span> |
| 83 | </footer> |
| 84 | </main> |
| 85 | |
| 86 | <div class="toasts" id="toasts" aria-live="polite"></div> |
| 87 | |
| 88 | <script src="/static/app.js"></script> |
| 89 | </body> |
| 90 | </html> |