From 8561c1a09272f3b242dc935a4afc7508a4afb56d Mon Sep 17 00:00:00 2001 From: dschlueter Date: Fri, 29 May 2026 22:00:26 +0200 Subject: [PATCH] docs: html-joke-ticker um Tailwind-Redesign-Demo erweitern MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit /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 --- examples/html-joke-ticker/README.md | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) 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