feat: html-joke-ticker → html-quote-ticker (Programmierer-Zitate)

Witze durch 25–30 echte Programmierer-Zitate ersetzt (Linus Torvalds,
Donald Knuth, Brian Kernighan u.a.). Verzeichnis, Datei und alle
Referenzen umbenannt. Demo-Befehle auf Zitate-Konzept angepasst.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

examples/README.md

@@ -12,7 +12,7 @@ Jedes Projekt startet bewusst unvollständig — genau der Ausgangspunkt, für d
 | `go-fibonacci/` | Go | `/optimize --interactive` + `/continue` + `/shipit` |
 | `c-linkedlist/` | C | `/quick_check` + `/fix` + `/patch` |
 | `bash-sysreport/` | Bash | `/coder` von Null (kein Startcode) + `/quick_check` |
-| `html-joke-ticker/` | HTML/CSS/JS | `/optimize --no-tests` + `/patch` |
+| `html-quote-ticker/` | HTML/CSS/JS | `/optimize --no-tests` + `/patch` + Tailwind-Redesign |
 
 ## Demo-Workflow
 
@@ -22,7 +22,7 @@ Jedes Example braucht ein eigenes git-Repo, damit pi-coder commit-basierte
 Features nutzen kann (Loop-Erkennung, Diff-Anzeige, `/version`):
 
 ```bash
-for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-joke-ticker; do
+for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-quote-ticker; do
   cd examples/$dir
   git init -b main && git add -A && git commit -m "feat: initial $dir"
   cd ../..
@@ -64,7 +64,7 @@ und bereinigt Build-Artefakte (`target/`, `__pycache__` etc.).
 | 1 | `python-calculator` | ~5–10 min | Einstieg, Test-Loop |
 | 2 | `c-linkedlist` | ~5 min | `/quick_check` + `/fix`, kein Loop |
 | 3 | `bash-sysreport` | ~5–8 min | `/coder` von Null, kein Startcode |
-| 4 | `html-joke-ticker` | ~8–12 min | `/optimize --no-tests`, Frontend |
+| 4 | `html-quote-ticker` | ~8–12 min | `/optimize --no-tests`, Frontend |
 | 5 | `rust-wordcount` | ~10–15 min | Loop + `/version` |
 | 6 | `go-fibonacci` | ~15–20 min | `--interactive` + `/shipit` |
 
@@ -77,4 +77,4 @@ und bereinigt Build-Artefakte (`target/`, `__pycache__` etc.).
 [go-fibonacci](go-fibonacci/README.md) ·
 [c-linkedlist](c-linkedlist/README.md) ·
 [bash-sysreport](bash-sysreport/README.md) ·
-[html-joke-ticker](html-joke-ticker/README.md)
+[html-quote-ticker](html-quote-ticker/README.md)

examples/html-joke-ticker/jokes.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <title>Witze-Ticker</title>
-</head>
-<body>
-  <h1>Witze-Ticker</h1>
-  <div id="joke"><!-- TODO: Witz hier --></div>
-</body>
-</html>

examples/html-quote-ticker/PROTOKOLL.md

@@ -0,0 +1,17 @@
+# Demo-Protokoll: html-quote-ticker
+
+## Lauf 1
+
+**Datum:**
+**Befehl:**
+```
+/optimize "Erstelle einen Zitate-Ticker ..." --no-tests
+```
+**Startzeit:**
+**Endzeit:**
+**Dauer (min):**
+**Runden:**
+**Endergebnis:** PASS / PASS WITH CONCERNS / SHIP / NO-SHIP
+**Besonderheiten / Beobachtungen:**
+
+---

examples/html-quote-ticker/README.md

@@ -0,0 +1,73 @@
+# HTML Programmer Quotes
+
+Minimales HTML-Skelett — Struktur vorhanden, aber keine Logik.
+Zitate-Array, Timer und Buttons fehlen noch vollständig.
+
+## Aktueller Stand
+
+```
+quotes.html   HTML-Skelett: <h1> + leeres <div id="quote"> — kein JavaScript, kein CSS
+```
+
+## Demo: `/optimize --no-tests`
+
+```
+/optimize "Erstelle einen Zitate-Ticker mit 25–30 echten Zitaten von bekannten
+           Informatikern und Software-Entwicklern (Linus Torvalds, Donald Knuth,
+           Martin Fowler, Brian Kernighan, Edsger Dijkstra, Alan Kay, Grace Hopper,
+           Rob Pike u.a.). Jedes Zitat mit Autor-Angabe.
+           - Beim Laden: sofort zufälliges Zitat
+           - Automatischer Wechsel alle 60 Sekunden (setInterval)
+           - Sanfter Fade-Übergang (CSS-Transition)
+           - Anzeige: Index (3/28) und Countdown-Sekunden bis zum nächsten Zitat
+           - Button 'Next Quote' zum manuellen Weiterblättern
+           Kein Framework, kein Build-Tool — reines HTML/CSS/JS." \
+          --no-tests
+```
+
+**Was pi-coder hier zeigt:**
+- Frontend-Arbeit ohne automatische Test-Suite (`--no-tests`)
+- Vollständige Implementierung in einer einzigen HTML-Datei
+- Judge bewertet Korrektheit durch Code-Review statt durch Tests
+
+## Folge-Demo 1: `/patch` für Kleinstergänzung
+
+```
+/patch "Füge einen grünen 'Previous Quote'-Button hinzu."
+```
+
+Zeigt eine gezielte Minimaländerung ohne vollen Judge-Loop.
+
+## Folge-Demo 2: `/optimize --no-tests` für Tailwind-Redesign
+
+```
+/optimize "Ersetze das bisherige CSS durch Tailwind CSS (CDN-Einbindung via Play CDN).
+           Gestalte ein modernes, responsives Layout:
+           - Zentrierte Card mit abgerundeten Ecken und Schatten
+           - Zitat-Text groß und kursiv, Autor-Name kleiner darunter
+           - Index und Countdown noch kleiner in einer Meta-Zeile
+           - Buttons nebeneinander, farblich klar unterscheidbar (blau / grün)
+           - Auf Mobilgeräten (< 640px) volle Breite, auf Desktop max. 600px
+           Alle JavaScript-Funktionen (Timer, Fade, Buttons) bleiben unverändert." \
+          --no-tests
+```
+
+**Was pi-coder hier zusätzlich zeigt:**
+- Refactoring ohne Funktionsänderung (nur Layout)
+- Tailwind-CDN-Integration ohne Build-Schritt
+- Responsive Design via Tailwind-Breakpoints (`sm:`, `md:`)
+
+## Manueller Test
+
+```bash
+# Im Browser öffnen:
+xdg-open quotes.html
+# oder:
+firefox quotes.html
+```
+
+Prüfen:
+- Beim Laden erscheint sofort ein Zitat mit Autor
+- Countdown läuft von 60 auf 0
+- Nach 60 Sekunden erscheint automatisch ein neues Zitat mit Fade
+- „Next Quote"-Button wechselt sofort und setzt den Timer zurück

examples/html-quote-ticker/quotes.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Programmer Quotes</title>
+</head>
+<body>
+  <h1>Programmer Quotes</h1>
+  <div id="quote"><!-- TODO: quote here --></div>
+</body>
+</html>

examples/restore-all.sh

@@ -19,7 +19,7 @@ done
 
 echo "Stelle Examples-Ausgangszustand wieder her..."
 
-for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-joke-ticker; do
+for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-quote-ticker; do
   path="$EXAMPLES/$dir"
   if [ -d "$path/.git" ]; then
     rm -rf "$path/.git"