Ein Online-Adventskalender

Wir wollten eine befreundete Familie zu Weihnachten mit einer gemeinsamen Reise überraschen, aber nicht einfach einen Gutschein überreichen. Also habe ich einen Adventskalender als Website gebaut: Jeden Tag geht ein Türchen auf, hinter jedem wartet ein kleines Rätsel und ein Hinweis. Stück für Stück wird klar, was es ist. Am letzten Türchen wird das Geheimnis freigerubbelt.

Natürlich kann man alles daran individualisieren, ob man jetzt eine Geschichte mit jedem Türchen erzählen möchte, die das Jahr Revue passieren lässt, oder kleine Spiele baut. Es geht um eine nette Geste und darum, anderen eine Freude zu machen. Das Entscheidende ist hier nicht, wie der Code entstanden ist, sondern die Überlegungen, was jemand anderem Freude bereitet.

Demo-Kalender mit erfundenem Inhalt: die Übersicht am Handy, offene Türchen in Rot.

Für unseren Fall ging es um eine gemeinsame Reise mit Übernachtung, und so wollten wir im Verlauf des Kalenders Hinweise geben zur Dauer, zum Ort und dazu, was man da machen kann. Außerdem treffen wir uns schon am 19. Dezember, sodass es nur 19 Türchen gibt.

Das ist ein Beispiel dafür, was ich mit Power of Agentic Software meine.

Außerdem war mir wichtig:

• Die Kinder lesen selbst. Kurze Sätze, große Knöpfe, alles am Handy und am Tablet spielbar.
• Kein Tracking. Ich sehe nicht, wer wann was geöffnet hat. Der Fortschritt liegt nur im Browser der Familie.

Die Spiele

Acht Spielarten, über 19 Tage verteilt.

Spiel	Wie es geht
Suchbild	In einer gezeichneten Szene sind Dinge versteckt, halb verdeckt hinter anderen. Beim Wischen und Kippen verschieben sich die Ebenen leicht, wie in 3D.
Memory	Paare finden, mal mit Symbolen, mal mit Fotos.
Quiz	Zwei, drei Fragen mit Antworten zum Antippen, jede mit einer kurzen Erklärung.
Labyrinth	Eine Figur sucht den Weg zum Ziel, mal auf einer Art Landkarte, mal mit Hindernissen, die bei jedem Schritt weiterziehen.
Zoom	Ein Foto, ganz nah herangezoomt: Was ist das? Wer nicht weiterweiß, zoomt heraus.
Fotopuzzle	Ein durcheinandergeratenes Foto durch Tauschen der Teile wieder zusammensetzen.
Taschenlampe	Eine dunkle Szene, man leuchtet mit dem Finger herum und sucht, was sich darin versteckt.
Rubbellos	Am letzten Tag wird das große Geheimnis freigerubbelt.

Suchbild in 3D: Die Eier stecken halb hinter Blumen, Topf, Bank und Gras. Zwei von fünf sind gefunden.

Memory: zwei Karten aufgedeckt, kein Paar.

Labyrinth im Karten-Look: mit den Pfeilen zum Ziel.

Wie es technisch funktioniert

An sich ist das Projekt super einfach, aber wenn man das Claude mitteilt, dann wird es nicht halb gemacht, sondern 100 % korrekt. Und dann kommt dabei das hier raus:

Das Schwierigste an einem digitalen Adventskalender ist nicht das Spiel, sondern das Geheimnis. Eine normale Website schickt alles auf einmal an den Browser, und wer in den Quelltext schaut, kennt das Ende schon am 1. Dezember.

Deshalb ist der Kalender zweigeteilt:

• Die Oberfläche ist öffentlich: HTML, CSS, JavaScript und die allgemeinen Spielmodule, ohne einen einzigen Hinweis. Ein kleines Prüfskript schlägt Alarm, wenn in diesem Teil ein verräterisches Wort steht.
• Die Türchen liegen auf dem Server. Eine kleine Serverfunktion prüft den Zugangsschlüssel und das Datum (in der Zeitzone der Empfänger) und gibt genau die Türchen heraus, die schon offen sind. Das Türchen vom 12. existiert für den Browser erst am 12.
• Der Zugangsschlüssel steckt im Link, nach dem #. Dieser Teil der Adresse wird nicht an Server geschickt und landet in keinem Log. Die Seite merkt sich den Schlüssel und entfernt ihn aus der Adresszeile.
• Ein Testzugang mit eigenem Schlüssel öffnet alle Türchen und lässt mich jeden Tag simulieren. Er ist vom Familienzugang getrennt, auch beim Spielstand.
• Fotos haben zufällige Dateinamen, damit kein Dateiname das Geheimnis verrät.
• Kein Build-Schritt, keine Bibliothek: einfaches HTML und JavaScript, das man in zehn Jahren noch öffnen kann.

Gebaut habe ich das nicht von Hand. Ich habe beschrieben, was ich will, und ein KI-Agent (Claude mit Codex) hat geplant, programmiert und getestet; ich habe geprüft, durchgeklickt und Feedback gegeben. Die Anleitung, mit der man so etwas selbst einem Agenten geben kann, steht unten.

Wo hosten?

• Kein Server? Cloudflare Pages. Für so ein Projekt kostenlos, inklusive der kleinen Serverfunktionen und HTTPS. Man verbindet ein GitHub-Repository, und jede Änderung ist wenige Minuten später online.
• Mehrere Projekte, weniger Technik? eigava.de. Dort baut der eigene KI-Assistent die App, und eigava kümmert sich um Betrieb, Updates und Backups, gehostet in Deutschland.

Beispiel: Anleitung für einen KI-Agenten

Diese Datei legt man als ANLEITUNG.md in einen leeren Ordner und sagt dem Agenten: „Lies ANLEITUNG.md und setz das um.“ Platzhalter in <…> vorher ausfüllen.

# Auftrag: Digitaler Adventskalender

Baue einen Adventskalender als Website für <Empfänger, z. B. „die Familie unserer Freunde,
zwei Kinder, 7 und 9 Jahre“>. Er verrät Tag für Tag <das Geschenk>. Das Geheimnis wird erst am letzten Türchen aufgelöst.

## Rahmen

- Zeitraum: 1. Dezember bis <letzter Tag>, also <Anzahl> Türchen. Zeitzone: <Europe/Berlin>.
- Sprache: <Deutsch>. Die Kinder lesen selbst: kurze Sätze, große Schrift, große Knöpfe.
- Geräte: Handy und Tablet zuerst, Computer auch.
- Verpasste Türchen bleiben offen und lassen sich nachholen.
- Kein Tracking, keine Cookies, keine externen Schriften oder Skripte.
- Kein Build-Schritt und keine Bibliothek: einfaches HTML, CSS und JavaScript.

## Geheimhaltung (am wichtigsten)

- Alles, was im Browser landet, ist öffentlich. Dort darf kein Hinweis auf das Geheimnis
  stehen, auch nicht in Dateinamen, Kommentaren oder Bild-Metadaten.
- Die Türchen-Inhalte liegen außerhalb des öffentlichen Ordners. Eine Serverfunktion
  (Cloudflare Pages Functions) gibt ein Türchen erst ab seinem Tag heraus und prüft dabei
  einen geheimen Zugangsschlüssel (Umgebungsvariable `ADVENT_ACCESS_KEY`).
- Der Schlüssel kommt mit dem Link nach dem `#` und wird danach aus der Adresszeile
  entfernt.
- Schreib einen Test, der den öffentlichen Ordner nach verbotenen Wörtern durchsucht
  (Liste: <alles, was das Geschenk verrät>), und lass ihn bei jedem Test laufen.
- Bilder bekommen zufällige Dateinamen, Metadaten werden entfernt.

## Inhalt

Plane zuerst einen Spannungsbogen über alle Türchen und zeig ihn mir, bevor du baust:
pro Tag ein Rätsel, ein Hinweis und ein Stichwort. Reihenfolge der Hinweise: <vom Groben zum Besonderen>.
Fakten recherchierst du mit Quelle; nichts erfinden.

Spielarten (wiederverwendbare Module, Inhalte als Daten):
Suchbild, Memory, Quiz, Labyrinth, Zoom-Bild, Fotopuzzle, Taschenlampe, Rubbellos.

## Testen

- Ein Testzugang mit eigenem Schlüssel (`ADVENT_TEST_KEY`) öffnet alle Türchen und lässt
  einen Tag simulieren. Ohne diesen Schlüssel ist er abgeschaltet. Sein Spielstand ist
  getrennt vom Spielstand der Familie.
- Automatische Tests für: Datumsgrenzen (Mitternacht in der Zeitzone), falscher Schlüssel,
  Türchen aus der Zukunft, jedes Rätsel ist lösbar, die Wortliste.
- Spiel jedes Türchen einmal im Browser durch, am Handy-Format, und schick mir Screenshots.

## Veröffentlichen

- Hosting: Cloudflare Pages mit Git-Anbindung, Ausgabeordner = der öffentliche Ordner,
  kein Build-Befehl. Secrets im Pages-Projekt setzen, nie ins Repository.
- Das Repository bleibt privat, bis der Kalender vorbei ist.
- Schreib mir zum Schluss: den Link für die Familie, den Testlink, und was ich noch
  klicken muss.