diff --git a/examples/html-joke-ticker/README.md b/examples/html-joke-ticker/README.md index b84ee53..d8f5246 100644 --- a/examples/html-joke-ticker/README.md +++ b/examples/html-joke-ticker/README.md @@ -28,7 +28,7 @@ jokes.html HTML-Skelett:

+ leeres
— kein JavaScript, ke - Vollständige Implementierung in einer einzigen HTML-Datei - Judge bewertet Korrektheit durch Code-Review statt durch Tests -## Folge-Demo: `/patch` für Kleinstergänzung +## Folge-Demo 1: `/patch` für Kleinstergänzung ``` /patch "Füge einen 'Vorheriger Witz'-Button hinzu." @@ -36,6 +36,24 @@ jokes.html HTML-Skelett:

+ leeres
— kein JavaScript, ke 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