dschlueter/pi_coder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: html-joke-ticker → html-quote-ticker (Programmierer-Zitate)

Browse source 
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>
This commit is contained in:
Dieter Schlüter 2026-05-29 23:57:37 +02:00
commit 42d29354ad
6 changed files with 37 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

8
examples/README.md
View file

@ -12,7 +12,7 @@ Jedes Projekt startet bewusst unvollständig — genau der Ausgangspunkt, für d
| `go-fibonacci/` | Go | `/optimize --interactive` + `/continue` + `/shipit` | | `go-fibonacci/` | Go | `/optimize --interactive` + `/continue` + `/shipit` |
| `c-linkedlist/` | C | `/quick_check` + `/fix` + `/patch` | | `c-linkedlist/` | C | `/quick_check` + `/fix` + `/patch` |
| `bash-sysreport/` | Bash | `/coder` von Null (kein Startcode) + `/quick_check` | | `bash-sysreport/` | Bash | `/coder` von Null (kein Startcode) + `/quick_check` |
| `html-joke-ticker/` | HTML/CSS/JS | `/optimize --no-tests` + `/patch` | | `html-quote-ticker/` | HTML/CSS/JS | `/optimize --no-tests` + `/patch` + Tailwind-Redesign |
## Demo-Workflow ## Demo-Workflow
@ -22,7 +22,7 @@ Jedes Example braucht ein eigenes git-Repo, damit pi-coder commit-basierte
Features nutzen kann (Loop-Erkennung, Diff-Anzeige, `/version`): Features nutzen kann (Loop-Erkennung, Diff-Anzeige, `/version`):
```bash ```bash
for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-joke-ticker; do for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-quote-ticker; do
cd examples/$dir cd examples/$dir
git init -b main && git add -A && git commit -m "feat: initial $dir" git init -b main && git add -A && git commit -m "feat: initial $dir"
cd ../.. cd ../..
@ -64,7 +64,7 @@ und bereinigt Build-Artefakte (`target/`, `__pycache__` etc.).
| 1 | `python-calculator` | ~5–10 min | Einstieg, Test-Loop | | 1 | `python-calculator` | ~5–10 min | Einstieg, Test-Loop |
| 2 | `c-linkedlist` | ~5 min | `/quick_check` + `/fix`, kein Loop | | 2 | `c-linkedlist` | ~5 min | `/quick_check` + `/fix`, kein Loop |
| 3 | `bash-sysreport` | ~5–8 min | `/coder` von Null, kein Startcode | | 3 | `bash-sysreport` | ~5–8 min | `/coder` von Null, kein Startcode |
| 4 | `html-joke-ticker` | ~8–12 min | `/optimize --no-tests`, Frontend | | 4 | `html-quote-ticker` | ~8–12 min | `/optimize --no-tests`, Frontend |
| 5 | `rust-wordcount` | ~10–15 min | Loop + `/version` | | 5 | `rust-wordcount` | ~10–15 min | Loop + `/version` |
| 6 | `go-fibonacci` | ~15–20 min | `--interactive` + `/shipit` | | 6 | `go-fibonacci` | ~15–20 min | `--interactive` + `/shipit` |
@ -77,4 +77,4 @@ und bereinigt Build-Artefakte (`target/`, `__pycache__` etc.).
[go-fibonacci](go-fibonacci/README.md) · [go-fibonacci](go-fibonacci/README.md) ·
[c-linkedlist](c-linkedlist/README.md) · [c-linkedlist](c-linkedlist/README.md) ·
[bash-sysreport](bash-sysreport/README.md) · [bash-sysreport](bash-sysreport/README.md) ·
[html-joke-ticker](html-joke-ticker/README.md) [html-quote-ticker](html-quote-ticker/README.md)

11
examples/html-joke-ticker/jokes.html
View file

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Witze-Ticker</title>
</head>
<body>
<h1>Witze-Ticker</h1>
<div id="joke"><!-- TODO: Witz hier --></div>
</body>
</html>

4
examples/html-joke-ticker/PROTOKOLL.md → examples/html-quote-ticker/PROTOKOLL.md
View file

@ -1,11 +1,11 @@
# Demo-Protokoll: html-joke-ticker # Demo-Protokoll: html-quote-ticker
## Lauf 1 ## Lauf 1
**Datum:** **Datum:**
**Befehl:** **Befehl:**
``` ```
/optimize "Ergänze jokes.html ..." --no-tests /optimize "Erstelle einen Zitate-Ticker ..." --no-tests
``` ```
**Startzeit:** **Startzeit:**
**Endzeit:** **Endzeit:**

35
examples/html-joke-ticker/README.md → examples/html-quote-ticker/README.md
View file

@ -1,24 +1,26 @@
# HTML Witze-Ticker # HTML Programmer Quotes
Minimales HTML-Skelett — Struktur vorhanden, aber keine Logik. Minimales HTML-Skelett — Struktur vorhanden, aber keine Logik.
Die Witz-Anzeige, der Timer und die Buttons fehlen noch vollständig. Zitate-Array, Timer und Buttons fehlen noch vollständig.
## Aktueller Stand ## Aktueller Stand
``` ```
jokes.html HTML-Skelett: <h1> + leeres <div id="joke"> — kein JavaScript, kein CSS quotes.html HTML-Skelett: <h1> + leeres <div id="quote"> — kein JavaScript, kein CSS
``` ```
## Demo: `/optimize --no-tests` ## Demo: `/optimize --no-tests`
``` ```
/optimize "Ergänze jokes.html um eine vollständige Witz-Anzeige: /optimize "Erstelle einen Zitate-Ticker mit 25–30 echten Zitaten von bekannten
- JavaScript-Array mit mind. 20 englischen Originalwitzen (inline, kein externes API) Informatikern und Software-Entwicklern (Linus Torvalds, Donald Knuth,
- Beim Laden: sofort zufälliger Witz 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) - Automatischer Wechsel alle 60 Sekunden (setInterval)
- Sanfter Fade-Übergang (CSS-Transition) - Sanfter Fade-Übergang (CSS-Transition)
- Anzeige: Index (3/20) und Countdown-Sekunden bis zum nächsten Witz - Anzeige: Index (3/28) und Countdown-Sekunden bis zum nächsten Zitat
- Button 'Nächster Witz' zum manuellen Weiterblättern - Button 'Next Quote' zum manuellen Weiterblättern
Kein Framework, kein Build-Tool — reines HTML/CSS/JS." \ Kein Framework, kein Build-Tool — reines HTML/CSS/JS." \
--no-tests --no-tests
``` ```
@ -31,7 +33,7 @@ jokes.html HTML-Skelett: <h1> + leeres <div id="joke"> — kein JavaScript, ke
## Folge-Demo 1: `/patch` für Kleinstergänzung ## Folge-Demo 1: `/patch` für Kleinstergänzung
``` ```
/patch "Füge einen grünen 'Vorheriger Witz'-Button hinzu." /patch "Füge einen grünen 'Previous Quote'-Button hinzu."
``` ```
Zeigt eine gezielte Minimaländerung ohne vollen Judge-Loop. Zeigt eine gezielte Minimaländerung ohne vollen Judge-Loop.
@ -42,8 +44,9 @@ Zeigt eine gezielte Minimaländerung ohne vollen Judge-Loop.
/optimize "Ersetze das bisherige CSS durch Tailwind CSS (CDN-Einbindung via Play CDN). /optimize "Ersetze das bisherige CSS durch Tailwind CSS (CDN-Einbindung via Play CDN).
Gestalte ein modernes, responsives Layout: Gestalte ein modernes, responsives Layout:
- Zentrierte Card mit abgerundeten Ecken und Schatten - Zentrierte Card mit abgerundeten Ecken und Schatten
- Witz-Text groß und gut lesbar, Index und Countdown kleiner darunter - Zitat-Text groß und kursiv, Autor-Name kleiner darunter
- Buttons nebeneinander, farblich klar unterscheidbar (blau / grau) - 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 - Auf Mobilgeräten (< 640px) volle Breite, auf Desktop max. 600px
Alle JavaScript-Funktionen (Timer, Fade, Buttons) bleiben unverändert." \ Alle JavaScript-Funktionen (Timer, Fade, Buttons) bleiben unverändert." \
--no-tests --no-tests
@ -58,13 +61,13 @@ Zeigt eine gezielte Minimaländerung ohne vollen Judge-Loop.
```bash ```bash
# Im Browser öffnen: # Im Browser öffnen:
xdg-open jokes.html xdg-open quotes.html
# oder: # oder:
firefox jokes.html firefox quotes.html
``` ```
Prüfen: Prüfen:
- Beim Laden erscheint sofort ein Witz - Beim Laden erscheint sofort ein Zitat mit Autor
- Countdown läuft von 60 auf 0 - Countdown läuft von 60 auf 0
- Nach 60 Sekunden erscheint automatisch ein neuer Witz mit Fade - Nach 60 Sekunden erscheint automatisch ein neues Zitat mit Fade
- „Nächster Witz"-Button wechselt sofort und setzt den Timer zurück - „Next Quote"-Button wechselt sofort und setzt den Timer zurück

11
examples/html-quote-ticker/quotes.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Programmer Quotes</title>
</head>
<body>
<h1>Programmer Quotes</h1>
<div id="quote"><!-- TODO: quote here --></div>
</body>
</html>

2
examples/restore-all.sh
View file

@ -19,7 +19,7 @@ done
echo "Stelle Examples-Ausgangszustand wieder her..." echo "Stelle Examples-Ausgangszustand wieder her..."
for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-joke-ticker; do for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-quote-ticker; do
path="$EXAMPLES/$dir" path="$EXAMPLES/$dir"
if [ -d "$path/.git" ]; then if [ -d "$path/.git" ]; then
rm -rf "$path/.git" rm -rf "$path/.git"