dschlueter
42d29354ad
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>
73 lines
2.6 KiB
Markdown
73 lines
2.6 KiB
Markdown
# 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
|