— 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 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