dschlueter
8561c1a092
/optimize --no-tests für Tailwind Play CDN + responsives Card-Layout als zweite Folge-Demo nach dem /patch-Schritt. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
70 lines
2.4 KiB
Markdown
70 lines
2.4 KiB
Markdown
# 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 deutschen Witzen (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 '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
|