PyPI - tinyjukebox - Versions diffs - 0.47.0__py3-none-any.whl - Mend

tinyjukebox 0.47.0__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (154) hide show

tinyjukebox/__init__.py +7 -0
tinyjukebox/albumplayer/__init__.py +1 -0
tinyjukebox/albumplayer/aalbumplayer.py +402 -0
tinyjukebox/albumplayer/clock.py +39 -0
tinyjukebox/albumplayer/dummyplayer.py +49 -0
tinyjukebox/albumplayer/player_interface.py +97 -0
tinyjukebox/albumplayer/radioplayer.py +391 -0
tinyjukebox/albumplayer/simpleplayer.py +419 -0
tinyjukebox/albumplayer/spotifyplayer.py +671 -0
tinyjukebox/backup.py +176 -0
tinyjukebox/backups.py +340 -0
tinyjukebox/cli.py +1076 -0
tinyjukebox/control.py +1386 -0
tinyjukebox/core/__init__.py +1 -0
tinyjukebox/core/config.py +100 -0
tinyjukebox/core/logging/__init__.py +113 -0
tinyjukebox/core/microservice.py +303 -0
tinyjukebox/core/pubsub/__init__.py +15 -0
tinyjukebox/core/pubsub/base.py +196 -0
tinyjukebox/core/pubsub/localqueue.py +102 -0
tinyjukebox/core/pubsub/statistics.py +57 -0
tinyjukebox/core/py.typed +0 -0
tinyjukebox/core/schema/__init__.py +5 -0
tinyjukebox/core/schema/logger.py +40 -0
tinyjukebox/core/schema/microservice.py +48 -0
tinyjukebox/core/threads.py +39 -0
tinyjukebox/core/ui/__init__.py +5 -0
tinyjukebox/core/ui/cli.py +120 -0
tinyjukebox/core/ui/tools.py +73 -0
tinyjukebox/core/unexpected.py +46 -0
tinyjukebox/data/__init__.py +0 -0
tinyjukebox/data/activities.py +175 -0
tinyjukebox/data/activity.py +138 -0
tinyjukebox/data/common.py +91 -0
tinyjukebox/data/degraded.py +39 -0
tinyjukebox/data/jsondata.py +218 -0
tinyjukebox/data/sanitycheck.py +71 -0
tinyjukebox/data/tag.py +98 -0
tinyjukebox/data/tags.py +160 -0
tinyjukebox/data/target.py +568 -0
tinyjukebox/data/targetalbumtools.py +88 -0
tinyjukebox/data/targets.py +256 -0
tinyjukebox/data/volumelimits.py +68 -0
tinyjukebox/data_folder.py +180 -0
tinyjukebox/devices/__init__.py +1 -0
tinyjukebox/devices/baseclasses/__init__.py +1 -0
tinyjukebox/devices/baseclasses/adriver.py +115 -0
tinyjukebox/devices/baseclasses/aevents.py +47 -0
tinyjukebox/devices/baseclasses/gpiolevel.py +16 -0
tinyjukebox/devices/bluetooth/__init__.py +1 -0
tinyjukebox/devices/bluetooth/avrcp_input.py +118 -0
tinyjukebox/devices/bluetooth/bluez.py +446 -0
tinyjukebox/devices/bluetooth/link.py +396 -0
tinyjukebox/devices/bluetooth/virtual.py +155 -0
tinyjukebox/devices/drivermanager/__init__.py +1 -0
tinyjukebox/devices/drivermanager/driverfactory.py +75 -0
tinyjukebox/devices/drivermanager/drivermanager.py +151 -0
tinyjukebox/devices/drivers/__init__.py +31 -0
tinyjukebox/devices/drivers/bluetooth.py +257 -0
tinyjukebox/devices/drivers/input.py +165 -0
tinyjukebox/devices/drivers/rfid.py +297 -0
tinyjukebox/devices/drivers/rgbled.py +215 -0
tinyjukebox/devices/py.typed +0 -0
tinyjukebox/devices/schema/__init__.py +1 -0
tinyjukebox/devices/schema/adriver.py +33 -0
tinyjukebox/devices/schema/bluetooth.py +31 -0
tinyjukebox/devices/schema/drivermanager.py +41 -0
tinyjukebox/devices/schema/input.py +23 -0
tinyjukebox/devices/schema/rfid.py +44 -0
tinyjukebox/devices/schema/rgbled.py +26 -0
tinyjukebox/diagnostics.py +179 -0
tinyjukebox/errors.py +91 -0
tinyjukebox/headset.py +296 -0
tinyjukebox/images.py +133 -0
tinyjukebox/latency.py +43 -0
tinyjukebox/library/__init__.py +2 -0
tinyjukebox/library/diagnostics.py +183 -0
tinyjukebox/library/journal.py +94 -0
tinyjukebox/library/releases.py +348 -0
tinyjukebox/library/schema.py +98 -0
tinyjukebox/library/service.py +1115 -0
tinyjukebox/library/statistics.py +288 -0
tinyjukebox/library/store.py +1386 -0
tinyjukebox/messages.py +202 -0
tinyjukebox/metadata.py +133 -0
tinyjukebox/py.typed +0 -0
tinyjukebox/restore.py +391 -0
tinyjukebox/rgbled.py +158 -0
tinyjukebox/schema/__init__.py +1 -0
tinyjukebox/schema/activities.py +27 -0
tinyjukebox/schema/tags.py +54 -0
tinyjukebox/schema/targets.py +83 -0
tinyjukebox/schema/tinyjukebox.py +217 -0
tinyjukebox/schema/volume.py +28 -0
tinyjukebox/slots.py +234 -0
tinyjukebox/spotify/__init__.py +1 -0
tinyjukebox/spotify/account.py +647 -0
tinyjukebox/spotify/engine.py +568 -0
tinyjukebox/spotify/oembed.py +65 -0
tinyjukebox/spotify/soloist.py +198 -0
tinyjukebox/spotify/sound.py +316 -0
tinyjukebox/stm/__init__.py +0 -0
tinyjukebox/stm/base.py +174 -0
tinyjukebox/stm/playradio.py +237 -0
tinyjukebox/stm/playspotify.py +418 -0
tinyjukebox/stm/stmoperation.py +769 -0
tinyjukebox/stm/stmplayalbum.py +655 -0
tinyjukebox/stm/stmvolume.py +221 -0
tinyjukebox/sync/__init__.py +42 -0
tinyjukebox/sync/box.py +486 -0
tinyjukebox/sync/client.py +189 -0
tinyjukebox/sync/data.py +489 -0
tinyjukebox/sync/files.py +447 -0
tinyjukebox/sync/handshake.py +42 -0
tinyjukebox/sync/link.py +379 -0
tinyjukebox/sync/manifest.py +162 -0
tinyjukebox/sync/util.py +137 -0
tinyjukebox/tinyjukebox.py +680 -0
tinyjukebox/tools/__init__.py +1 -0
tinyjukebox/tools/backup.py +173 -0
tinyjukebox/tools/fill_library.py +120 -0
tinyjukebox/tools/import_cards.py +274 -0
tinyjukebox/tools/import_covers.py +138 -0
tinyjukebox/tools/migrate_box01.py +151 -0
tinyjukebox/volumemanager.py +355 -0
tinyjukebox/web/__init__.py +1 -0
tinyjukebox/web/auth.py +373 -0
tinyjukebox/web/certificates.py +111 -0
tinyjukebox/web/logbuffer.py +62 -0
tinyjukebox/web/server.py +1237 -0
tinyjukebox/web/uploads.py +262 -0
tinyjukebox/web/users.py +106 -0
tinyjukebox/web/web/app.js +3050 -0
tinyjukebox/web/web/favicon.svg +6 -0
tinyjukebox/web/web/help/de/admin.html +714 -0
tinyjukebox/web/web/help/de/manual.html +1147 -0
tinyjukebox/web/web/help/de/quick-guide.html +79 -0
tinyjukebox/web/web/help/en/admin.html +701 -0
tinyjukebox/web/web/help/en/manual.html +1126 -0
tinyjukebox/web/web/help/en/quick-guide.html +79 -0
tinyjukebox/web/web/help/help.css +25 -0
tinyjukebox/web/web/help/images/box-2026.jpg +0 -0
tinyjukebox/web/web/help/images/box-back.jpg +0 -0
tinyjukebox/web/web/help/images/lid-top.jpg +0 -0
tinyjukebox/web/web/help/images/logo-mark.svg +38 -0
tinyjukebox/web/web/index.html +867 -0
tinyjukebox/web/web/style.css +412 -0
tinyjukebox/web/web/texts/de.json +892 -0
tinyjukebox/web/web/texts/en.json +892 -0
tinyjukebox-0.47.0.dist-info/METADATA +236 -0
tinyjukebox-0.47.0.dist-info/RECORD +154 -0
tinyjukebox-0.47.0.dist-info/WHEEL +4 -0
tinyjukebox-0.47.0.dist-info/entry_points.txt +9 -0
tinyjukebox-0.47.0.dist-info/licenses/LICENSE.txt +21 -0

tinyjukebox/web/web/index.html ADDED Viewed

@@ -0,0 +1,867 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title>Tiny Jukebox</title>
+<link rel="icon" href="favicon.svg" type="image/svg+xml">
+<link rel="stylesheet" href="style.css">
+<script src="app.js" defer></script>
+</head>
+<body>
+<section id="login-view" class="login" hidden>
+  <form id="login-form" class="card login-card">
+    <div class="brand brand-large"><svg class="brand-logo" viewBox="0 0 64 64" aria-hidden="true"><circle class="lid" cx="32" cy="32" r="29"/><circle class="window" cx="31" cy="41" r="10.5"/><circle class="brand-led" cx="13.29" cy="28.7" r="2.8"/><circle class="key" cx="17.45" cy="19.79" r="4.2"/><circle class="key" cx="25.5" cy="14.15" r="4.2"/><circle class="key key-yellow" cx="35.3" cy="13.29" r="4.2"/><circle class="key key-yellow" cx="44.21" cy="17.45" r="4.2"/></svg>Tiny Jukebox</div>
+    <!-- the library or which box (app.js: showIdentity) -->
+    <p id="login-place" class="login-place" hidden></p>
+    <label><span data-t="login.user"></span> <input name="username" autocomplete="username" required autofocus></label>
+    <label><span data-t="login.password"></span> <input name="password" type="password" autocomplete="current-password" required></label>
+    <button type="submit" class="primary" data-t="login.submit"></button>
+    <p id="login-error" class="error" role="alert"></p>
+    <select class="language" data-t-label="language.label"></select>
+    <a id="login-help" class="login-help" target="_blank" rel="noopener" data-t="help.quick_guide"></a>
+  </form>
+</section>
+<div id="app-view" hidden>
+  <header class="topbar">
+    <div class="brand"><svg class="brand-logo" viewBox="0 0 64 64" aria-hidden="true"><circle class="lid" cx="32" cy="32" r="29"/><circle class="window" cx="31" cy="41" r="10.5"/><circle class="brand-led" cx="13.29" cy="28.7" r="2.8"/><circle class="key" cx="17.45" cy="19.79" r="4.2"/><circle class="key" cx="25.5" cy="14.15" r="4.2"/><circle class="key key-yellow" cx="35.3" cy="13.29" r="4.2"/><circle class="key key-yellow" cx="44.21" cy="17.45" r="4.2"/></svg>Tiny Jukebox
+      <span class="library-only muted small" data-t="library.title"></span>
+      <span id="place-name" class="box-only place-name" hidden></span>
+      <span id="led" class="led box-only" data-t-title="led.label" role="img" data-t-label="led.label"></span>
+      <span id="headset-icon" class="headset-icon" data-t-title="headset.connected" role="img"
+        data-t-label="headset.connected" hidden>🎧</span></div>
+    <nav class="tabs" role="tablist">
+      <button role="tab" data-tab="now" class="active box-only" data-t="tabs.now"></button>
+      <button role="tab" data-tab="boxes" class="library-only" data-t="tabs.boxes"></button>
+      <button role="tab" data-tab="versions" class="library-only" data-t="tabs.versions"></button>
+      <button role="tab" data-tab="tags" data-t="tabs.tags"></button>
+      <button role="tab" id="tab-button-statistics" data-tab="statistics" data-t="tabs.statistics"></button>
+      <button role="tab" data-tab="tag-management" data-t="tabs.tagman"></button>
+      <button role="tab" data-tab="albums" data-t="tabs.albums"></button>
+      <button role="tab" data-tab="radio" data-t="tabs.radio"></button>
+      <button role="tab" data-tab="spotify" data-t="tabs.spotify"></button>
+      <button role="tab" data-tab="bluetooth" class="box-only" data-t="tabs.bluetooth"></button>
+      <button role="tab" id="tab-button-upload" data-tab="upload" class="admin-only" data-t="tabs.upload"></button>
+      <button role="tab" data-tab="system" data-t="tabs.system"></button>
+      <button role="tab" data-tab="log" class="admin-only" data-t="tabs.log"></button>
+    </nav>
+    <div class="user"><select class="language" data-t-label="language.label"></select><span id="user-name"></span>
+      <!-- the help of the tab that is open (app.js: HELP_OF_TAB) -->
+      <a id="help-link" class="button help-link" target="_blank" rel="noopener" data-t="help.button"
+        data-t-title="help.title"></a><button id="logout" class="link" data-t="logout"></button></div>
+  </header>
+  <main>
+    <!-- after every login, until "Do not show it again" was ticked in this browser -->
+    <div id="help-hint" class="card notice row" hidden>
+      <span class="grow-text" data-t="help.hint"></span>
+      <a id="help-hint-open" class="button" target="_blank" rel="noopener" data-t="help.quick_guide"></a>
+      <label class="check"><input type="checkbox" id="help-hint-never"> <span data-t="help.hint.never"></span></label>
+      <button id="help-hint-close" class="link" data-t="common.close"></button>
+    </div>
+    <!-- a box without a library that asks before it installs a release: on every tab, until an admin answered -->
+    <div id="version-banner" class="card notice row admin-only box-only" hidden>
+      <span id="version-banner-text" class="grow-text"></span>
+      <button id="version-banner-install" class="primary" data-t="version.install"></button>
+      <button id="version-banner-skip" data-t="version.skip"></button>
+      <button id="version-banner-notes" class="link" data-t="version.offer.notes"></button>
+    </div>
+    <!-- now playing -->
+    <section id="tab-now" class="tab">
+      <div class="card now">
+        <div class="cover" id="now-cover"><span class="cover-placeholder">♪</span></div>
+        <div class="now-info">
+          <span id="now-state" class="badge">…</span>
+          <h1 id="now-title">–</h1>
+          <p id="now-artist" class="muted"></p>
+          <p class="muted small"><span id="now-tag"></span>
+            <button id="now-unlink" class="link admin-only" hidden data-t="common.unlink"></button></p>
+          <div id="now-track" class="track-now" hidden>
+            <div class="track-title" id="now-track-title"></div>
+            <div class="progress"><div id="now-progress" class="progress-bar"></div></div>
+            <div class="times small muted"><span id="now-pos">0:00</span><span id="now-len">0:00</span></div>
+          </div>
+          <div class="controls">
+            <button class="round" id="btn-prev" data-t-title="now.prev.title" data-t-label="common.back">⏮</button>
+            <button class="round" id="btn-playpause" data-t-title="common.pause" data-t-label="common.pause">⏸</button>
+            <button class="round" id="btn-next" data-t-title="now.next.title" data-t-label="common.next">⏭</button>
+            <button class="round" id="btn-restart" data-t-title="now.restart" data-t-label="now.restart">↺</button>
+          </div>
+          <div class="volume">
+            <button class="round small-round" id="btn-vol-down" data-t-title="now.quieter.title" data-t-label="common.quieter">−</button>
+            <input type="range" id="volume" min="0" max="100" step="1" data-t-label="common.volume">
+            <button class="round small-round" id="btn-vol-up" data-t-title="now.louder.title" data-t-label="common.louder">+</button>
+            <span id="volume-value" class="volume-value"></span>
+          </div>
+          <p class="muted small"><span id="volume-info"></span>
+            <button id="volume-limits" class="link admin-only" data-t="now.volume.change"></button></p>
+        </div>
+      </div>
+      <div id="now-link" class="card notice admin-only" hidden>
+        <h2 data-t="now.link.title"></h2>
+        <p class="muted" data-t="now.link.text"><code id="now-link-uid" data-part="uid"></code></p>
+        <div class="row">
+          <select id="now-link-album"></select>
+          <button id="now-link-button" class="primary" data-t="now.link.submit"></button>
+        </div>
+      </div>
+      <div class="card" id="now-tracks-card" hidden>
+        <h2 data-t="now.tracks"></h2>
+        <ol id="now-tracks" class="tracklist"></ol>
+      </div>
+    </section>
+    <!-- tags (the web page as rfid reader) -->
+    <section id="tab-tags" class="tab" hidden>
+      <div class="card">
+        <div class="card-head">
+          <h2 class="box-only" data-t="tags.title.box"></h2>
+          <h2 class="library-only" data-t="tabs.tags"></h2>
+          <button id="rfid-remove" class="box-only" data-t="tags.remove"></button>
+        </div>
+        <p class="muted small box-only" data-t="tags.help.box"></p>
+        <p class="muted small library-only" data-t="tags.help.library"></p>
+        <div class="row deck-controls">
+          <div class="segmented" id="deck-filter" role="group" data-t-label="tags.filter.label">
+            <button data-filter="all" data-t="tags.filter.all"></button>
+            <button data-filter="album" data-t="tags.filter.album"></button>
+            <button data-filter="radio" data-t="tags.filter.radio"></button>
+            <button data-filter="spotify" data-t="tags.filter.spotify"></button>
+          </div>
+          <div class="segmented" id="deck-view" role="group" data-t-label="tags.view.label">
+            <button data-view="tiles" data-t="tags.view.tiles"></button>
+            <button data-view="list" data-t="tags.view.list"></button>
+          </div>
+        </div>
+        <div id="deck" class="deck"></div>
+        <form id="rfid-form" class="row box-only">
+          <input name="uid" data-t-placeholder="tags.uid.placeholder" required>
+          <button type="submit" data-t="tags.place"></button>
+        </form>
+      </div>
+    </section>
+    <!-- tag management -->
+    <section id="tab-tag-management" class="tab" hidden>
+      <div class="card">
+        <div class="card-head">
+          <h2 data-t="tabs.tagman"></h2>
+          <label class="check"><input type="checkbox" id="tags-unmapped"> <span data-t="tagman.unlinked_only"></span></label>
+        </div>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="tagman.column.cover"></th><th data-t="common.name"></th><th data-t="common.uid"></th><th data-t="common.target"></th><th data-t="common.progress"></th><th></th></tr></thead>
+            <tbody id="tags-body"></tbody>
+          </table>
+        </div>
+        <p class="muted small" data-t="tagman.help"></p>
+      </div>
+      <!-- by hand (admin), or with the phone as reader of the library (every user; app.js says where) -->
+      <div id="tag-new-card" class="card">
+        <div class="card-head">
+          <h2 data-t="tagman.new.title"></h2>
+          <button id="scan-toggle" hidden data-t="scan.start"></button>
+        </div>
+        <p id="scan-refused" class="scan notice" hidden></p>
+        <div id="scan" class="scan" hidden>
+          <p class="muted" data-t="scan.help"></p>
+          <div id="scan-result"></div>
+        </div>
+        <form id="tag-new" class="admin-only">
+          <div class="row">
+            <input name="uid" data-t-placeholder="tagman.new.uid">
+            <input name="name" data-t-placeholder="tagman.new.name">
+            <select name="album_id" id="tag-new-album"></select>
+            <button type="submit" class="primary" data-t="common.create"></button>
+          </div>
+        </form>
+      </div>
+    </section>
+    <!-- albums -->
+    <section id="tab-albums" class="tab" hidden>
+      <div class="card">
+        <div class="card-head">
+          <h2 data-t="tabs.albums"></h2>
+          <div class="row admin-only">
+            <button id="albums-scan" data-t="albums.scan"></button>
+          </div>
+        </div>
+        <div class="row">
+          <label class="check"><input type="checkbox" id="albums-unmapped"> <span data-t="albums.without_tag_only"></span></label>
+        </div>
+        <div class="table-wrap">
+          <table class="table albums-table">
+            <thead id="albums-head"><tr>
+              <th data-t="common.image"></th>
+              <th data-sort="title" data-t="albums.column.title"></th>
+              <th data-sort="tracks" data-t="albums.column.tracks"></th>
+              <th data-sort="length" data-t="albums.column.length"></th>
+              <th data-sort="tag" data-t="tabs.tags"></th>
+              <th data-sort="created" data-t="albums.column.created"></th>
+              <th data-sort="folder" data-t="albums.column.folder"></th>
+            </tr></thead>
+            <tbody id="albums-list"></tbody>
+          </table>
+        </div>
+        <form id="album-add" class="row admin-only">
+          <input name="folder" data-t-placeholder="albums.add.folder" required>
+          <input name="title" data-t-placeholder="albums.add.title" maxlength="200" required>
+          <button type="submit" data-t="albums.add.submit"></button>
+        </form>
+      </div>
+    </section>
+    <!-- radio stations -->
+    <section id="tab-radio" class="tab" hidden>
+      <div class="card">
+        <h2 data-t="radio.title"></h2>
+        <p class="muted small" data-t="radio.help"></p>
+        <div id="radio-test" class="notice row admin-only box-only" hidden>
+          <span id="radio-test-text" class="grow-text"></span>
+          <button id="radio-test-stop" data-t="radio.test.stop"></button>
+        </div>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="common.image"></th><th data-t="common.name"></th><th data-t="radio.column.url"></th><th data-t="tabs.tags"></th><th></th></tr></thead>
+            <tbody id="radios-body"></tbody>
+          </table>
+        </div>
+      </div>
+      <form id="radio-new" class="card admin-only">
+        <h2 data-t="radio.new.title"></h2>
+        <p class="muted small" data-t="radio.new.help"></p>
+        <div class="row">
+          <input name="name" data-t-placeholder="radio.new.name" maxlength="100" required>
+          <input name="url" type="url" data-t-placeholder="radio.new.url" maxlength="2000" required class="grow">
+          <button type="button" id="radio-new-test" class="box-only" data-t="radio.test"></button>
+          <button type="submit" class="primary" data-t="common.create"></button>
+        </div>
+      </form>
+    </section>
+    <!-- entries of Spotify -->
+    <section id="tab-spotify" class="tab" hidden>
+      <div class="card">
+        <h2 data-t="spotify.title"></h2>
+        <p class="muted small" data-t="spotify.help"></p>
+        <div id="spotify-test" class="notice row admin-only box-only" hidden>
+          <span id="spotify-test-text" class="grow-text"></span>
+          <button id="spotify-test-stop" data-t="radio.test.stop"></button>
+        </div>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="common.image"></th><th data-t="common.name"></th><th data-t="spotify.column.kind"></th><th data-t="spotify.column.link"></th><th data-t="tabs.tags"></th><th></th></tr></thead>
+            <tbody id="spotify-body"></tbody>
+          </table>
+        </div>
+      </div>
+      <form id="spotify-new" class="card admin-only">
+        <h2 data-t="spotify.new.title"></h2>
+        <p class="muted small" data-t="spotify.new.help"></p>
+        <div class="row">
+          <input name="link" data-t-placeholder="spotify.new.link" maxlength="2000" required class="grow">
+          <input name="name" data-t-placeholder="spotify.new.name" maxlength="100">
+          <button type="button" id="spotify-new-test" class="box-only" data-t="radio.test"></button>
+          <button type="submit" class="primary" data-t="common.create"></button>
+        </div>
+      </form>
+      <div class="card admin-only library-only">
+        <h2 data-t="spotify.app.title"></h2>
+        <p class="muted small" data-t="spotify.app.help"></p>
+        <form id="spotify-app-form" class="row">
+          <input name="client" autocomplete="off" maxlength="32" data-t-placeholder="spotify.app.client" class="grow">
+          <button type="submit" data-t="common.save"></button>
+        </form>
+      </div>
+      <div class="card admin-only box-only">
+        <h2 data-t="spotify.account.title"></h2>
+        <p class="muted small" data-t="spotify.account.help"></p>
+        <p id="spotify-account-state"></p>
+        <form id="spotify-key" class="row">
+          <input name="key" type="password" autocomplete="off" data-t-placeholder="spotify.account.key" class="grow" required>
+          <button type="submit" data-t="spotify.account.key_save"></button>
+        </form>
+        <div class="row">
+          <button id="spotify-connect" class="primary" data-t="spotify.account.connect"></button>
+          <button id="spotify-disconnect" data-t="spotify.account.disconnect"></button>
+        </div>
+        <label class="row"><input type="checkbox" id="spotify-speaker"><span data-t="spotify.account.speaker"></span></label>
+      </div>
+      <div class="card admin-only box-only">
+        <h2 data-t="spotify.player.title"></h2>
+        <p id="spotify-player-state"></p>
+        <p id="spotify-player-asked" class="muted small"></p>
+        <p id="spotify-player-missing" class="muted small" hidden></p>
+        <button id="spotify-update" data-t="spotify.player.update"></button>
+      </div>
+    </section>
+    <!-- bluetooth headset -->
+    <section id="tab-bluetooth" class="tab" hidden>
+      <div class="card">
+        <div class="card-head">
+          <h2 data-t="bluetooth.title"></h2>
+          <div class="row admin-only">
+            <button id="bt-pair" class="primary" data-t="bluetooth.pair"></button>
+            <button id="bt-unpair" class="danger" data-t="bluetooth.unpair"></button>
+          </div>
+        </div>
+        <p id="bt-message" class="muted"></p>
+        <dl class="facts" id="bt-facts">
+          <dt data-t="common.name"></dt><dd id="bt-name"></dd>
+          <dt data-t="common.address"></dt><dd id="bt-address"></dd>
+          <dt data-t="bluetooth.connected"></dt><dd id="bt-connected"></dd>
+          <dt data-t="bluetooth.battery"></dt><dd id="bt-battery"></dd>
+          <dt data-t="common.volume"></dt><dd id="bt-volume"></dd>
+        </dl>
+        <dl class="facts">
+          <dt data-t="common.default_volume"></dt><dd id="bt-default"></dd>
+          <dt data-t="common.max_volume"></dt><dd id="bt-max"></dd>
+        </dl>
+        <div class="row admin-only"><button id="bt-limits" data-t="bluetooth.limits"></button></div>
+        <p class="muted small" data-t="bluetooth.help"></p>
+      </div>
+      <div class="card admin-only" id="bt-virtual" hidden>
+        <h2 data-t="bluetooth.virtual.title"></h2>
+        <p class="muted small" data-t="bluetooth.virtual.help"></p>
+        <div class="row">
+          <button id="bt-virtual-on" data-t="bluetooth.virtual.on"></button>
+          <button id="bt-virtual-off" data-t="bluetooth.virtual.off"></button>
+        </div>
+        <div class="controls" id="bt-virtual-buttons">
+          <button class="round" data-button="prev" data-t-title="common.back" data-t-label="common.back">⏮</button>
+          <button class="round" data-button="play" data-t-title="common.play" data-t-label="common.play">▶</button>
+          <button class="round" data-button="pause" data-t-title="common.pause" data-t-label="common.pause">⏸</button>
+          <button class="round" data-button="next" data-t-title="common.next" data-t-label="common.next">⏭</button>
+          <button class="round small-round" data-button="volume-down" data-t-title="common.quieter" data-t-label="common.quieter">−</button>
+          <button class="round small-round" data-button="volume-up" data-t-title="common.louder" data-t-label="common.louder">+</button>
+        </div>
+      </div>
+    </section>
+    <!-- upload -->
+    <section id="tab-upload" class="tab admin-only" hidden>
+      <div class="card notice" id="pending-uploads" hidden>
+        <h2 data-t="upload.pending.title"></h2>
+        <ul id="pending-list" class="pending-list"></ul>
+      </div>
+      <div class="card">
+        <h2 data-t="upload.title"></h2>
+        <p class="muted small" data-t="upload.help"></p>
+        <label><span data-t="upload.album_title"></span>
+          <input id="upload-name" data-t-placeholder="upload.album_title.placeholder" maxlength="150">
+        </label>
+        <label><span data-t="upload.cover"></span>
+          <input type="file" id="upload-cover" accept="image/jpeg,image/png,image/webp">
+        </label>
+        <div id="dropzone" class="dropzone" tabindex="0">
+          <p data-t="upload.drop"></p>
+          <div class="row center">
+            <label class="button"><span data-t="upload.choose_files"></span><input type="file" id="upload-files" accept=".mp3,audio/mpeg" multiple hidden></label>
+            <label class="button"><span data-t="upload.choose_folder"></span><input type="file" id="upload-folder" webkitdirectory hidden></label>
+          </div>
+        </div>
+        <ol id="upload-list" class="upload-list"></ol>
+        <label><span data-t="upload.link_tag"></span>
+          <select id="upload-tag"></select>
+        </label>
+        <div class="row">
+          <button id="upload-finish" class="primary" disabled data-t="upload.finish"></button>
+          <button id="upload-abort" disabled data-t="common.cancel"></button>
+        </div>
+        <p id="upload-message" role="status"></p>
+      </div>
+    </section>
+    <!-- system -->
+    <section id="tab-system" class="tab" hidden>
+      <div class="card">
+        <h2 data-t="tabs.system"></h2>
+        <dl class="facts">
+          <dt class="box-only" data-t="common.state"></dt><dd id="sys-state" class="box-only"></dd>
+          <dt class="box-only" data-t="system.tag"></dt><dd id="sys-tag" class="box-only"></dd>
+          <dt data-t="system.user"></dt><dd id="sys-user"></dd>
+          <dt data-t="language.label"></dt><dd><select class="language" data-t-label="language.label"></select></dd>
+        </dl>
+        <div class="row admin-only">
+          <button id="sys-sanity" data-t="system.sanity"></button>
+          <button id="sys-rebuild" class="danger box-only" data-t="system.rebuild"></button>
+        </div>
+        <pre id="sys-output" class="output" hidden></pre>
+      </div>
+      <!-- what the drivers say about buttons, led and rfid reader (app.js: loadHardware) -->
+      <div class="card box-only admin-only">
+        <h2 data-t="hardware.title"></h2>
+        <p class="muted small" data-t="hardware.help"></p>
+        <p id="hw-none" class="muted" hidden data-t="hardware.none"></p>
+        <div id="hw-view" hidden>
+          <h3 data-t="hardware.buttons"></h3>
+          <div class="table-wrap">
+            <table class="table">
+              <thead><tr><th data-t="hardware.column.button"></th><th data-t="hardware.column.pin"></th><th data-t="hardware.column.level"></th><th data-t="hardware.column.last"></th><th data-t="hardware.column.presses"></th><th data-t="hardware.column.driver"></th></tr></thead>
+              <tbody id="hw-buttons"></tbody>
+            </table>
+          </div>
+          <h3 data-t="hardware.led"></h3>
+          <div id="hw-leds"></div>
+          <h3 data-t="hardware.reader"></h3>
+          <div id="hw-readers"></div>
+        </div>
+      </div>
+      <div class="card admin-only">
+        <h2 data-t="backup.title"></h2>
+        <p class="muted small box-only" data-t="backup.help.box"></p>
+        <p class="muted small library-only" data-t="backup.help.library"></p>
+        <div class="row">
+          <a class="button" href="/api/backup" download data-t="backup.download"></a>
+          <a class="button" href="/api/backup?albums=1" download data-t="backup.download_albums"></a>
+        </div>
+        <p class="muted small" data-t="backup.albums_note"></p>
+        <!-- putting a backup back (app.js) -->
+        <h3 data-t="restore.title"></h3>
+        <p class="muted small" data-t="restore.help"></p>
+        <div class="row">
+          <label class="button" id="restore-choose"><span data-t="restore.choose"></span><input type="file" id="restore-file"
+            accept=".gz,.tar,application/gzip,application/x-tar" hidden></label>
+          <button type="button" id="restore-confirm" class="danger" data-t="restore.put_back" hidden></button>
+          <button type="button" id="restore-discard" data-t="restore.discard" hidden></button>
+        </div>
+        <p id="restore-state" class="muted small"></p>
+        <!-- the backups that the library, or a box without a library, makes by itself: two schedules (app.js) -->
+        <div id="backup-kept" hidden>
+          <h3 data-t="backup.schedule.title"></h3>
+          <form id="backup-form">
+            <fieldset>
+              <legend data-t="backup.without_albums"></legend>
+              <div class="row">
+                <label class="check"><input type="checkbox" name="plain-enabled"> <span data-t="backup.schedule.enabled"></span></label>
+                <label class="check" data-t="backup.schedule.every"><input type="number" name="plain-every" min="1" max="365" required data-part="every">
+                  <select name="plain-unit" data-part="unit">
+                    <option value="days" data-t="backup.unit.days"></option>
+                    <option value="weeks" data-t="backup.unit.weeks"></option>
+                    <option value="months" data-t="backup.unit.months"></option>
+                  </select>
+                  <input type="time" name="plain-time" required data-part="time"></label>
+                <label class="check"><input type="number" name="plain-keep" min="1" max="999" required> <span data-t="backup.schedule.keep"></span></label>
+              </div>
+              <div class="row">
+                <input name="plain-folder" class="grow" data-t-label="backup.folder"
+                  data-t-title="backup.folder.title">
+              </div>
+              <p id="backup-state-plain" class="muted small"></p>
+            </fieldset>
+            <fieldset>
+              <legend data-t="backup.with_albums"></legend>
+              <div class="row">
+                <label class="check"><input type="checkbox" name="albums-enabled"> <span data-t="backup.schedule.enabled"></span></label>
+                <label class="check" data-t="backup.schedule.every"><input type="number" name="albums-every" min="1" max="365" required data-part="every">
+                  <select name="albums-unit" data-part="unit">
+                    <option value="days" data-t="backup.unit.days"></option>
+                    <option value="weeks" data-t="backup.unit.weeks"></option>
+                    <option value="months" data-t="backup.unit.months"></option>
+                  </select>
+                  <input type="time" name="albums-time" required data-part="time"></label>
+                <label class="check"><input type="number" name="albums-keep" min="1" max="999" required> <span data-t="backup.schedule.keep"></span></label>
+              </div>
+              <div class="row">
+                <input name="albums-folder" class="grow" data-t-label="backup.folder"
+                  data-t-title="backup.folder.title">
+              </div>
+              <p id="backup-state-albums" class="muted small"></p>
+            </fieldset>
+            <div class="row">
+              <button type="submit" class="primary" data-t="common.save"></button>
+              <button type="button" id="backup-now" data-t="backup.now"></button>
+              <button type="button" id="backup-now-albums" data-t="backup.now_albums"></button>
+            </div>
+          </form>
+          <p id="backup-state" class="muted small"></p>
+          <div class="table-wrap">
+            <table class="table">
+              <thead><tr><th data-t="backup.column.when"></th><th data-t="backup.column.content"></th><th data-t="backup.column.size"></th><th></th></tr></thead>
+              <tbody id="backups-body"></tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div class="card box-only">
+        <h2 data-t="library.title"></h2>
+        <p class="muted small" data-t="library.help"></p>
+        <dl class="facts">
+          <dt data-t="common.address"></dt><dd id="lib-url"></dd>
+          <dt data-t="library.connection"></dt><dd id="lib-state"></dd>
+          <dt data-t="library.this_box"></dt>
+          <dd><span id="lib-box"></span>
+            <button id="lib-rename" type="button" class="link admin-only" data-t="boxes.rename" hidden></button></dd>
+          <dt data-t="library.unsettled"></dt><dd id="lib-outbox"></dd>
+        </dl>
+        <form id="lib-form" class="admin-only">
+          <div class="row">
+            <input name="url" type="url" data-t-placeholder="library.address.placeholder" data-t-label="library.address" required
+              class="grow">
+            <input name="bootstrap" type="password" data-t-placeholder="library.bootstrap.placeholder"
+              data-t-label="library.bootstrap" autocomplete="off">
+            <button type="submit" class="primary" data-t="common.save"></button>
+          </div>
+        </form>
+        <div class="row admin-only" id="lib-unlink-row" hidden>
+          <button id="lib-unlink" class="danger" data-t="library.unlink"></button>
+        </div>
+      </div>
+      <div class="card box-only admin-only">
+        <h2 data-t="common.version"></h2>
+        <p class="muted small" id="ver-help"></p>
+        <dl class="facts">
+          <dt data-t="version.running"></dt><dd id="ver-running"></dd>
+          <dt data-t="version.source"></dt><dd id="ver-source"></dd>
+          <dt data-t="version.updates"></dt>
+          <dd><select id="ver-mode-select" data-t-label="version.mode.label" hidden></select><span id="ver-mode"></span></dd>
+          <dt id="ver-offer-label" hidden data-t="version.new"></dt>
+          <dd id="ver-offer" hidden>
+            <div id="ver-offer-text"></div>
+            <details id="ver-offer-notes" hidden>
+              <summary data-t="version.offer.notes"></summary>
+              <pre class="output"></pre>
+            </details>
+            <div class="row">
+              <button id="ver-offer-install" class="primary"></button>
+              <button id="ver-offer-skip" data-t="version.skip" hidden></button>
+            </div>
+          </dd>
+          <dt id="ver-problem-label" hidden data-t="version.note"></dt><dd id="ver-problem" hidden></dd>
+          <dt id="ver-degraded-label" hidden data-t="version.degraded"></dt><dd id="ver-degraded" hidden><ul></ul></dd>
+        </dl>
+        <div id="ver-controls" hidden>
+          <div class="table-wrap">
+            <table class="table">
+              <thead><tr><th data-t="version.column.slot"></th><th data-t="common.version"></th><th data-t="common.state"></th></tr></thead>
+              <tbody id="ver-slots"></tbody>
+            </table>
+          </div>
+          <div class="row">
+            <button data-slot-command="check" data-t="version.check"></button>
+            <button data-slot-command="update --now" class="primary" data-t="version.update_now"></button>
+          </div>
+          <div class="row">
+            <button data-slot-command="revert" class="danger"
+              data-t-confirm="version.revert.confirm" data-t="version.revert"></button>
+            <button data-slot-command="fallback" class="danger"
+              data-t-confirm="version.fallback.confirm" data-t="version.fallback"></button>
+            <button data-slot-command="promote"
+              data-t-confirm="version.promote.confirm" data-t="version.promote"></button>
+          </div>
+          <pre id="ver-output" class="output" hidden></pre>
+        </div>
+      </div>
+      <div class="card">
+        <h2 data-t="password.title"></h2>
+        <p class="muted small" data-t="password.help"></p>
+        <form id="own-password">
+          <input name="username" autocomplete="username" hidden>
+          <div class="row">
+            <input name="current" type="password" data-t-placeholder="password.current" data-t-label="password.current"
+              autocomplete="current-password" required>
+            <input name="password" type="password" data-t-placeholder="password.new" data-t-label="password.new"
+              minlength="8" autocomplete="new-password" required>
+            <input name="repeat" type="password" data-t-placeholder="password.repeat"
+              data-t-label="password.repeat" minlength="8" autocomplete="new-password" required>
+            <button type="submit" class="primary" data-t="password.submit"></button>
+          </div>
+        </form>
+      </div>
+      <div class="card admin-only">
+        <h2 data-t="users.title"></h2>
+        <p class="muted small" data-t="users.help"></p>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="common.name"></th><th data-t="users.role"></th><th data-t="users.set_password"></th><th></th></tr></thead>
+            <tbody id="users-body"></tbody>
+          </table>
+        </div>
+        <form id="user-new">
+          <h3 data-t="users.new.title"></h3>
+          <div class="row">
+            <input name="username" data-t-placeholder="common.name" maxlength="64" autocomplete="off" required>
+            <input name="password" type="password" data-t-placeholder="users.new.password" minlength="8"
+              autocomplete="new-password" required>
+            <select name="role" data-t-label="users.role">
+              <option value="user" selected data-t="role.user"></option><option value="admin" data-t="role.admin"></option>
+            </select>
+            <button type="submit" class="primary" data-t="common.create"></button>
+          </div>
+        </form>
+      </div>
+      <div class="card box-only">
+        <h2 data-t="progress.title"></h2>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="progress.column.tag"></th><th data-t="common.album"></th><th data-t="common.track"></th><th data-t="progress.column.position"></th><th data-t="progress.column.finished"></th></tr></thead>
+            <tbody id="activities-body"></tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+    <!-- library: boxes -->
+    <section id="tab-boxes" class="tab library-only" hidden>
+      <div class="card">
+        <h2 data-t="tabs.boxes"></h2>
+        <p class="muted small" data-t="boxes.help"></p>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="common.name"></th><th data-t="common.version"></th><th data-t="boxes.column.contact"></th><th data-t="boxes.column.state"></th><th></th></tr></thead>
+            <tbody id="boxes-body"></tbody>
+          </table>
+        </div>
+      </div>
+      <div class="card admin-only" id="install-card">
+        <h2 data-t="boxes.add.title"></h2>
+        <p class="muted small" id="install-help"></p>
+        <div class="row" id="install-row">
+          <code id="install-line" class="grow selectable"></code>
+          <button id="install-copy" data-t="boxes.add.copy"></button>
+        </div>
+      </div>
+      <div class="card admin-only" id="phone-card">
+        <h2 data-t="phones.add.title"></h2>
+        <p class="muted small" id="phone-app-help"></p>
+        <div class="row" id="phone-app-row" hidden>
+          <a id="phone-app-link" href="/app.apk" download class="grow"></a>
+          <div id="phone-app-qr" class="qr"></div>
+        </div>
+        <p class="muted small" data-t="phones.pair.help"></p>
+        <div class="row"><button id="phone-pair" class="primary" data-t="phones.pair"></button></div>
+        <div id="phone-pair-qr" class="qr" hidden></div>
+        <p id="phone-pair-state" class="muted small" hidden></p>
+      </div>
+      <div class="card" id="uploads-card" hidden>
+        <h2 data-t="boxes.uploads.title"></h2>
+        <p class="muted small" data-t="boxes.uploads.help"></p>
+        <ul id="uploads-list"></ul>
+      </div>
+      <div class="card admin-only">
+        <h2 data-t="access.title"></h2>
+        <p class="muted small" data-t="access.help"></p>
+        <form id="bootstrap-form">
+          <div class="row">
+            <input name="password" type="password" data-t-placeholder="access.bootstrap.placeholder"
+              minlength="16" autocomplete="off" required class="grow">
+            <button type="submit" data-t="access.bootstrap.submit"></button>
+          </div>
+        </form>
+        <div class="row">
+          <button id="token-new" data-t="access.token.new"></button>
+          <code id="token-value" hidden></code>
+        </div>
+        <div class="row"><button id="library-verify" data-t="access.verify"></button></div>
+      </div>
+    </section>
+    <!-- library: versions of the box software -->
+    <section id="tab-versions" class="tab library-only" hidden>
+      <div class="card">
+        <div class="card-head">
+          <h2 data-t="releases.title"></h2>
+          <button id="releases-check" class="admin-only" data-t="releases.check"></button>
+        </div>
+        <p class="muted small" data-t="releases.help"></p>
+        <p id="releases-state" class="muted small"></p>
+        <div class="row">
+          <label class="check"><input type="checkbox" id="versions-hide-old" checked> <span data-t="releases.hide_old"></span></label>
+          <span id="versions-hidden" class="muted small"></span>
+        </div>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="common.version"></th><th data-t="common.state"></th><th data-t="releases.column.set"></th><th data-t="releases.column.runs_on"></th><th data-t="releases.column.prepared_on"></th><th></th></tr></thead>
+            <tbody id="versions-body"></tbody>
+          </table>
+        </div>
+        <form id="releases-keep-form" class="admin-only">
+          <div class="row">
+            <label class="check" data-t="releases.keep.label"><input type="number" name="versions" min="1" max="999" required data-part="versions"></label>
+            <button type="submit" data-t="common.save"></button>
+          </div>
+          <p class="muted small" data-t="releases.keep.help"></p>
+        </form>
+      </div>
+      <div class="card admin-only">
+        <h2 data-t="releases.access.title"></h2>
+        <p id="releases-token-state" class="muted small"></p>
+        <form id="releases-token-form">
+          <div class="row">
+            <input name="token" type="password" data-t-placeholder="releases.token.placeholder" autocomplete="off"
+              required class="grow">
+            <button type="submit" data-t="releases.token.submit"></button>
+          </div>
+        </form>
+      </div>
+    </section>
+    <!-- play statistics: of one box on its page; in the library of all boxes or of the one that is chosen -->
+    <section id="tab-statistics" class="tab" hidden>
+      <div class="card">
+        <div class="card-head">
+          <h2 data-t="statistics.title"></h2>
+          <select id="stats-box" data-t-label="statistics.box.label" hidden></select>
+        </div>
+        <p id="stats-help" class="muted small"></p>
+        <div id="stats-tags-wrap" class="table-wrap">
+          <table class="table">
+            <thead id="stats-tags-head"><tr><th data-sort="name" data-t="statistics.column.tag"></th><th data-sort="album" data-t="common.target"></th><th data-sort="plays" data-t="statistics.column.placed"></th><th data-sort="seconds" data-t="statistics.column.time"></th><th data-sort="finished" data-t="statistics.column.finished"></th><th data-sort="last" data-t="statistics.column.last"></th><th class="stats-several" data-t="statistics.column.boxes"></th></tr></thead>
+            <tbody id="stats-tags"></tbody>
+          </table>
+        </div>
+      </div>
+      <div id="stats-rest">
+      <div id="stats-boxes-card" class="card" hidden>
+        <h2 data-t="tabs.boxes"></h2>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="statistics.column.box"></th><th data-t="statistics.column.time"></th><th data-t="statistics.column.placed"></th><th data-t="statistics.column.last"></th></tr></thead>
+            <tbody id="stats-boxes"></tbody>
+          </table>
+        </div>
+      </div>
+      <div class="card">
+        <h2 data-t="statistics.days.title"></h2>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="statistics.column.day"></th><th class="stats-several" data-t="statistics.column.box"></th><th data-t="statistics.column.time"></th><th data-t="output.speaker"></th><th data-t="output.headphones"></th><th data-t="statistics.column.hours"></th></tr></thead>
+            <tbody id="stats-days"></tbody>
+          </table>
+        </div>
+        <p id="stats-unknown" class="muted small"></p>
+      </div>
+      <div class="card">
+        <h2 data-t="statistics.radio_skipped.title"></h2>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="statistics.column.station"></th><th data-t="statistics.column.time"></th></tr></thead>
+            <tbody id="stats-stations"></tbody>
+          </table>
+        </div>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="common.album"></th><th data-t="common.track"></th><th data-t="statistics.column.skipped"></th></tr></thead>
+            <tbody id="stats-skipped"></tbody>
+          </table>
+        </div>
+      </div>
+      <div class="card">
+        <h2 data-t="statistics.operation.title"></h2>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-t="common.version"></th><th data-t="statistics.column.starts"></th><th data-t="statistics.column.errors"></th><th data-t="statistics.column.fallbacks"></th><th data-t="statistics.column.installed"></th><th data-t="statistics.column.running"></th><th data-t="statistics.column.active"></th></tr></thead>
+            <tbody id="stats-versions"></tbody>
+          </table>
+        </div>
+        <p class="muted small" data-t="statistics.operation.help"></p>
+      </div>
+      <div id="stats-never-card" class="card" hidden>
+        <h2 data-t="statistics.never.title"></h2>
+        <p id="stats-never"></p>
+      </div>
+      </div>
+    </section>
+    <!-- log -->
+    <section id="tab-log" class="tab admin-only" hidden>
+      <div class="card">
+        <div class="card-head">
+          <h2 data-t="tabs.log"></h2>
+          <div class="row">
+            <select id="log-source" class="library-only" data-t-label="log.source"></select>
+            <select id="log-level" data-t-label="log.level">
+              <option value="DEBUG" data-t="log.level.debug"></option><option value="INFO" selected data-t="log.level.info"></option>
+              <option value="WARNING" data-t="log.level.warning"></option><option value="ERROR" data-t="log.level.error"></option>
+            </select>
+            <input id="log-text" data-t-placeholder="log.filter" data-t-label="log.filter">
+            <label class="check" id="log-follow-label"><input type="checkbox" id="log-follow" checked> <span data-t="log.live"></span></label>
+            <button id="log-download" data-t="log.export"></button>
+          </div>
+        </div>
+        <!-- a box chosen on the page of the library: what it delivered of its log (library.md, section 4.22) -->
+        <div id="log-box" class="row" hidden>
+          <select id="log-component" data-t-label="log.component"></select>
+          <select id="log-version" data-t-label="common.version"></select>
+          <select id="log-code" data-t-label="log.code"></select>
+          <label><span data-t="log.since"></span> <input type="datetime-local" id="log-since"></label>
+          <button id="log-copy" data-t="log.copy"></button>
+          <button id="log-export" data-t="log.export"></button>
+        </div>
+        <div id="log-startup" class="notice" hidden><p id="log-startup-text"></p><pre class="output" id="log-startup-error"></pre></div>
+        <div id="log-list" class="log-list" role="log"></div>
+      </div>
+    </section>
+  </main>
+</div>
+<dialog id="album-dialog">
+  <form method="dialog" class="dialog-close"><button data-t-label="common.close">✕</button></form>
+  <div class="dialog-head">
+    <div class="cover cover-small" id="dlg-cover"></div>
+    <div>
+      <h2 id="dlg-title"></h2>
+      <p id="dlg-meta" class="muted small"></p>
+      <div id="dlg-tags" class="tag-chips"></div>
+      <label class="button small admin-only"><span data-t="cover.change"></span><input type="file" id="dlg-cover-file" accept="image/jpeg,image/png,image/webp" hidden></label>
+    </div>
+  </div>
+  <div id="dlg-problems" class="notice problems" hidden>
+    <strong data-t="album.problems"></strong>
+    <ul id="dlg-problem-list"></ul>
+    <button id="dlg-playlist" class="admin-only" data-t="album.playlist.rebuild"></button>
+  </div>
+  <div id="dlg-broken" class="notice problems" hidden>
+    <strong data-t="album.broken"></strong>
+    <ul id="dlg-broken-list"></ul>
+    <button id="dlg-broken-forget" class="admin-only" data-t="album.broken.forget"></button>
+  </div>
+  <ol id="dlg-tracks" class="tracklist"></ol>
+  <div class="admin-only dialog-actions">
+    <label class="check"><input type="checkbox" id="dlg-delete-files"> <span data-t="album.delete_files"></span></label>
+    <button id="dlg-delete" class="danger" data-t="album.remove"></button>
+  </div>
+</dialog>
+<dialog id="limits-dialog">
+  <form method="dialog" class="dialog-close"><button data-t-label="common.close">✕</button></form>
+  <h2 data-t="limits.title"></h2>
+  <p class="muted small" data-t="limits.help"></p>
+  <form id="limits-form">
+    <fieldset>
+      <legend data-t="output.speaker"></legend>
+      <div class="row">
+        <label><span data-t="limits.default"></span> <input type="number" name="speaker_default" min="0" max="100" step="1" required></label>
+        <label><span data-t="limits.max"></span> <input type="number" name="speaker_max" min="0" max="100" step="1" required></label>
+      </div>
+    </fieldset>
+    <fieldset>
+      <legend data-t="output.headphones"></legend>
+      <div class="row">
+        <label><span data-t="limits.default"></span> <input type="number" name="headphones_default" min="0" max="100" step="1" required></label>
+        <label><span data-t="limits.max"></span> <input type="number" name="headphones_max" min="0" max="100" step="1" required></label>
+      </div>
+    </fieldset>
+    <div class="dialog-actions"><span></span><button type="submit" class="primary" data-t="common.save"></button></div>
+  </form>
+</dialog>
+<dialog id="phone-limits-dialog">
+  <form method="dialog" class="dialog-close"><button data-t-label="common.close">✕</button></form>
+  <h2 data-t="phones.limits.title"></h2>
+  <p class="muted small" data-t="phones.limits.help"></p>
+  <form id="phone-limits-form">
+    <div class="row">
+      <label><span data-t="output.speaker"></span> <input type="number" name="speaker" min="0" max="100" step="1" required></label>
+      <label><span data-t="output.headphones"></span> <input type="number" name="headphones" min="0" max="100" step="1" required></label>
+    </div>
+    <div class="dialog-actions"><span></span><button type="submit" class="primary" data-t="common.save"></button></div>
+  </form>
+</dialog>
+<div id="toast" class="toast" role="status" hidden></div>
+</body>
+</html>