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>
This commit is contained in:
Dieter Schlüter 2026-05-29 23:57:37 +02:00
commit 42d29354ad
6 changed files with 37 additions and 34 deletions

View file

@ -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 2530 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