dschlueter/pi_coder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
pi_coder/examples/html-quote-ticker
History
Exact
dschlueter 42d29354ad feat: html-joke-ticker → html-quote-ticker (Programmierer-Zitate) 
Witze durch 25–30 echte Programmierer-Zitate ersetzt (Linus Torvalds,
Donald Knuth, Brian Kernighan u.a.). Verzeichnis, Datei und alle
Referenzen umbenannt. Demo-Befehle auf Zitate-Konzept angepasst.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-29 23:57:37 +02:00
..
PROTOKOLL.md feat: html-joke-ticker → html-quote-ticker (Programmierer-Zitate) 2026-05-29 23:57:37 +02:00
quotes.html feat: html-joke-ticker → html-quote-ticker (Programmierer-Zitate) 2026-05-29 23:57:37 +02:00
README.md feat: html-joke-ticker → html-quote-ticker (Programmierer-Zitate) 2026-05-29 23:57:37 +02:00

README.md

HTML Programmer Quotes

Minimales HTML-Skelett — Struktur vorhanden, aber keine Logik. Zitate-Array, Timer und Buttons fehlen noch vollständig.

Aktueller Stand

quotes.html   HTML-Skelett: <h1> + leeres <div id="quote"> — kein JavaScript, kein CSS

Demo: /optimize --no-tests

/optimize "Erstelle einen Zitate-Ticker mit 25–30 echten Zitaten von bekannten
           Informatikern und Software-Entwicklern (Linus Torvalds, Donald Knuth,
           Martin Fowler, Brian Kernighan, Edsger Dijkstra, Alan Kay, Grace Hopper,
           Rob Pike u.a.). Jedes Zitat mit Autor-Angabe.
           - Beim Laden: sofort zufälliges Zitat
           - Automatischer Wechsel alle 60 Sekunden (setInterval)
           - Sanfter Fade-Übergang (CSS-Transition)
           - Anzeige: Index (3/28) und Countdown-Sekunden bis zum nächsten Zitat
           - Button 'Next Quote' 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 'Previous Quote'-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
           - Zitat-Text groß und kursiv, Autor-Name kleiner darunter
           - Index und Countdown noch kleiner in einer Meta-Zeile
           - Buttons nebeneinander, farblich klar unterscheidbar (blau / grün)
           - 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 quotes.html
# oder:
firefox quotes.html

Prüfen:

  • Beim Laden erscheint sofort ein Zitat mit Autor
  • Countdown läuft von 60 auf 0
  • Nach 60 Sekunden erscheint automatisch ein neues Zitat mit Fade
  • „Next Quote"-Button wechselt sofort und setzt den Timer zurück