"Stimmen" verwandelt: Fans reichen selbst Testimonials ein

Nutzer-Wunsch 20.08.2026: "eine richtig geile kachel ... wo die leute mit
namen und tiktok namen mir eine nachricht schreiben können die ich in die
verwaltung kriege, und dann kann ich die ausgewählten über die
verwaltungsseite auf die website hinzufügen ... das wird mega persoenlich
zu den fans, bitte wirklich krass geil speziell."

- Neue, augenschonend gestaltete Einreich-Kachel auf stimmen.html: Name,
  TikTok-Name (optional), Nachricht -- landet NIE automatisch oeffentlich,
  sondern immer erst als Entwurf in der Verwaltung.
  Warmer Babyblau/Rosé-Farbverlauf, wandernder Lichtschein, pulsierendes
  Herz -- ersetzt die 3 ewigen "Hier steht bald..."-Platzhalterkarten.
- Neue Verwaltungs-Sektion "💬 Stimmen verwalten": Warteschlange (offene
  zuerst), Freigeben/Ablehnen/Löschen pro Eintrag.
- Freigegebene Stimmen erscheinen automatisch in einer neuen, spezielleren
  Zitat-Kartenoptik (großes Anführungszeichen, Name + TikTok-Chip) --
  Abschnitt bleibt komplett unsichtbar, solange keine einzige freigegeben
  wurde.
- Backend: neue Tabelle `testimonials` (Migration 0006), routes/
  testimonials.js (oeffentliches Einreichen + Lesen freigegebener,
  admin-Warteschlange + Status/Loeschen mit neuer TESTIMONIALS_MANAGE-
  Berechtigung). 18 automatisierte Tests gegen eine Fake-DB bestanden.
- Alles per Playwright visuell durchgespielt: leerer Zustand, Einreichen
  -> Erfolgsmeldung, freigegebene Stimmen-Anzeige, Verwaltungs-Warteschlange
  mit allen Aktionen.

Backend-Teil (server-internal/, cloudflare-worker/migrations/) noch ohne
Deploy-Zugriff -- Dogi muss ihn manuell auf dogiintern ausrollen.

Co-Authored-By: Claude Opus 5 <[email protected]>

stimmen.html

@@ -19,10 +19,10 @@
 <meta name="twitter:description" content="Was die Community und das Team über DogFather sagen." />
 <meta name="twitter:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
 
-<link rel="stylesheet" href="assets/css/main.css?v=20260820j" />
-<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260820j" />
-<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260820j" />
-<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260820j" />
+<link rel="stylesheet" href="assets/css/main.css?v=20260820k" />
+<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260820k" />
+<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260820k" />
+<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260820k" />
 </head>
 <body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-stimmen.jpg');--page-bg-mobile:url('/assets/img/bg-stimmen-mobile.jpg');">
 <div id="site-header"></div>
@@ -37,27 +37,58 @@
     </div>
   </section>
 
+  <!-- ===== Eigene Stimme einreichen (20.08.2026, Nutzer-Wunsch: "eine
+       richtig geile kachel ... wo die leute mit namen und tiktok namen
+       mir eine nachricht schreiben können", "das wird mega persoenlich
+       zu den fans"). Landet in der Verwaltung, wird NIE automatisch
+       veroeffentlicht -- siehe server-internal/routes/testimonials.js. -->
   <section class="section-tight">
-    <div class="container grid grid-3">
-      <div class="card">
-        <p class="quote" data-i18n="st_quote_community">„Hier steht bald eine echte Stimme aus der Community. 🩵"</p>
-        <p class="small muted" data-i18n="st_label_community">— Community-Mitglied</p>
-      </div>
-      <div class="card">
-        <p class="quote" data-i18n="st_quote_team">„Hier steht bald eine echte Stimme aus dem Team. 🩵"</p>
-        <p class="small muted" data-i18n="st_label_team">— Team-Mitglied</p>
-      </div>
-      <div class="card">
-        <p class="quote" data-i18n="st_quote_scout">„Hier steht bald eine echte Stimme von Scouts &amp; Creatorn. 🩵"</p>
-        <p class="small muted" data-i18n="st_label_scout">— Scout/Creator</p>
+    <div class="container">
+      <div class="stimmen-einreichen-kachel" id="stimmen-formular-box">
+        <span class="stimmen-einreichen-glanz" aria-hidden="true"></span>
+        <div class="stimmen-einreichen-kopf">
+          <span class="stimmen-einreichen-herz" aria-hidden="true">💌</span>
+          <h2 data-i18n="st_form_titel">Deine Stimme zählt</h2>
+          <p class="small" data-i18n="st_form_text">
+            Was bedeutet dir Team Dogi? Schreib uns deine Geschichte — mit etwas Glück liest DogFather sie
+            persönlich und stellt sie hier auf die Seite.
+          </p>
+        </div>
+        <form id="stimmen-formular">
+          <div class="field">
+            <label for="st-name" data-i18n="st_form_name_label">Dein Name</label>
+            <input type="text" id="st-name" maxlength="60" required />
+          </div>
+          <div class="field">
+            <label for="st-tiktok" data-i18n="st_form_tiktok_label">TikTok-Name (optional)</label>
+            <input type="text" id="st-tiktok" maxlength="40" placeholder="@dein-name" />
+          </div>
+          <div class="field">
+            <label for="st-nachricht" data-i18n="st_form_nachricht_label">Deine Nachricht</label>
+            <textarea id="st-nachricht" maxlength="500" rows="4" required data-i18n-attr="placeholder:st_form_nachricht_placeholder" placeholder="Erzähl uns, was dir Team Dogi bedeutet …"></textarea>
+          </div>
+          <button type="submit" class="btn btn-primary" style="width:100%;" data-i18n="st_form_absenden">💙 Nachricht einreichen</button>
+        </form>
+        <p class="stimmen-erfolg" id="stimmen-erfolg" data-i18n="st_form_erfolg">Danke dir! Deine Nachricht wurde eingereicht und wird von Dogi persönlich geprüft. 🩵</p>
+        <p class="stimmen-fehler" id="stimmen-fehler"></p>
       </div>
     </div>
-      <!-- TODO: Echte Testimonials von Community, Team, Scouts und Creator sammeln (mit Einverständnis zur Veröffentlichung). Bis dahin bleiben hier Platzhalter stehen. -->
+  </section>
+
+  <!-- ===== Echte, freigegebene Stimmen -- bleibt komplett unsichtbar, bis
+       mindestens eine Nachricht in der Verwaltung freigegeben wurde (kein
+       Platzhaltertext mehr). ===== -->
+  <section class="section-tight" id="stimmen-echte-root" hidden>
+    <div class="container">
+      <h2 class="text-center" data-i18n="st_echte_titel">Das sagt die Community</h2>
+      <div class="grid grid-3" id="stimmen-echte-grid" style="margin-top:1.6rem;"></div>
+    </div>
   </section>
 </main>
 
 <div id="site-footer"></div>
-<script src="assets/js/i18n-stimmen.js?v=20260820j"></script>
-<script src="assets/js/main.js?v=20260820j"></script>
+<script src="assets/js/i18n-stimmen.js?v=20260820k"></script>
+<script src="assets/js/main.js?v=20260820k"></script>
+<script src="assets/js/stimmen.js?v=20260820k"></script>
 </body>
 </html>