Audiofy – Musikwünsche für Partys

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>

server/app/static/index.html

@@ -0,0 +1,62 @@
+<!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>