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:
parent
b248a1d1ae
commit
42d29354ad
6 changed files with 37 additions and 34 deletions
|
|
@ -1,70 +0,0 @@
|
|||
# HTML Witze-Ticker
|
||||
|
||||
Minimales HTML-Skelett — Struktur vorhanden, aber keine Logik.
|
||||
Die Witz-Anzeige, der Timer und die Buttons fehlen noch vollständig.
|
||||
|
||||
## Aktueller Stand
|
||||
|
||||
```
|
||||
jokes.html HTML-Skelett: <h1> + leeres <div id="joke"> — kein JavaScript, kein CSS
|
||||
```
|
||||
|
||||
## Demo: `/optimize --no-tests`
|
||||
|
||||
```
|
||||
/optimize "Ergänze jokes.html um eine vollständige Witz-Anzeige:
|
||||
- JavaScript-Array mit mind. 20 englischen Originalwitzen (inline, kein externes API)
|
||||
- Beim Laden: sofort zufälliger Witz
|
||||
- Automatischer Wechsel alle 60 Sekunden (setInterval)
|
||||
- Sanfter Fade-Übergang (CSS-Transition)
|
||||
- Anzeige: Index (3/20) und Countdown-Sekunden bis zum nächsten Witz
|
||||
- Button 'Nächster Witz' 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 'Vorheriger Witz'-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
|
||||
- Witz-Text groß und gut lesbar, Index und Countdown kleiner darunter
|
||||
- Buttons nebeneinander, farblich klar unterscheidbar (blau / grau)
|
||||
- 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 jokes.html
|
||||
# oder:
|
||||
firefox jokes.html
|
||||
```
|
||||
|
||||
Prüfen:
|
||||
- Beim Laden erscheint sofort ein Witz
|
||||
- Countdown läuft von 60 auf 0
|
||||
- Nach 60 Sekunden erscheint automatisch ein neuer Witz mit Fade
|
||||
- „Nächster Witz"-Button wechselt sofort und setzt den Timer zurück
|
||||
Loading…
Add table
Add a link
Reference in a new issue