dschlueter 8f410ec8e7 docs: /patch-Befehl um grüne Button-Farbe ergänzen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-05-29 23:05:02 +02:00

2.3 KiB

Raw Blame History

HTML Witze-Ticker

Vollständige Witz-Anzeige in einer einzigen HTML-Datei (reines HTML/CSS/JS).

Aktueller Stand

jokes.html   25 Witze inline, Fade-Transition, 60s-Autotimer, Index + Countdown, "Nächster Witz"-Button

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

# 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

2.3 KiB Raw Blame History