99admandClaude Opus 5.5
3610de7bae
Server (Website, Admin-Bereich, Player-API) und Player (raspotify + Controller) mit Install-Skripten für Debian-Systeme. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
63 lines
2.4 KiB
HTML
63 lines
2.4 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#121212">
|
||
<title>Audiofy – Musikwünsche</title>
|
||
<link rel="stylesheet" href="/static/app.css">
|
||
<link rel="preconnect" href="https://challenges.cloudflare.com">
|
||
<script src="/static/turnstile.js" defer></script>
|
||
<script src="/static/app.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<header>
|
||
<h1>Audiofy</h1>
|
||
<p class="untertitel">Musikwünsche</p>
|
||
</header>
|
||
|
||
<section id="jetzt" class="karte" aria-live="polite">
|
||
<h2>Läuft gerade</h2>
|
||
<div id="jetzt-inhalt" class="titel-zeile leer">
|
||
<span class="hinweis">Gerade läuft nichts.</span>
|
||
</div>
|
||
<div id="fortschritt" class="fortschritt" hidden><div id="fortschritt-balken"></div></div>
|
||
</section>
|
||
|
||
<div id="hinweis-pausiert" class="banner" hidden>Die Wunschannahme ist gerade pausiert.</div>
|
||
<div id="hinweis-moderation" class="banner leise" hidden>Wünsche werden vor dem Abspielen kurz geprüft.</div>
|
||
|
||
<section id="suche" class="karte">
|
||
<h2>Song wünschen</h2>
|
||
<label class="sr-only" for="suchfeld">Titel oder Interpret</label>
|
||
<input id="suchfeld" type="search" placeholder="Titel oder Interpret suchen …"
|
||
autocomplete="off" autocapitalize="off" spellcheck="false" maxlength="100" enterkeyhint="search">
|
||
<label class="name-zeile">
|
||
<span>Dein Name (optional)</span>
|
||
<input id="name" type="text" maxlength="30" autocomplete="nickname" placeholder="z. B. Tante Erna">
|
||
</label>
|
||
<p id="limit-info" class="hinweis klein"></p>
|
||
<div id="turnstile" class="turnstile"></div>
|
||
<ul id="treffer" class="liste"></ul>
|
||
</section>
|
||
|
||
<section id="meine-karte" class="karte" hidden>
|
||
<h2>Deine Wünsche</h2>
|
||
<ul id="meine" class="liste kompakt"></ul>
|
||
</section>
|
||
|
||
<section class="karte">
|
||
<h2>Als Nächstes gewünscht</h2>
|
||
<p id="freigabe-info" class="hinweis klein" hidden></p>
|
||
<ul id="warteschlange" class="liste"></ul>
|
||
<p id="warteschlange-leer" class="hinweis">Noch keine Wünsche – sei die oder der Erste!</p>
|
||
</section>
|
||
|
||
<footer>Suche und Titelinfos: Spotify</footer>
|
||
</main>
|
||
|
||
<div id="toast" class="toast" role="status" aria-live="assertive" hidden></div>
|
||
</body>
|
||
</html>
|