Zettel

Ein Zettel, den du aufs Display klebst.

Du schreibst eine Notiz auf einen Zettel. „Aufs Display kleben" rendert den Zettel in Display-Auflösung als Bild; das setzt du als Sperr- oder Homebildschirm-Hintergrund. So ist die Notiz sichtbar, ohne die App zu öffnen.

Was es ist

• Eine einzelne HTML-Datei, kein Build, keine Abhängigkeiten.
• PWA: installierbar auf dem Homebildschirm, läuft offline.
• Speicherung: localStorage im Browser (ein Gerät, kein Sync).

Was es nicht ist

• Kein echtes Homebildschirm-Widget. Das können nur native Apps.
• Das Setzen als Hintergrund bleibt ein manueller Schritt (Web darf den Wallpaper nicht ändern).

Nutzung

1. Seite öffnen (GitHub Pages) und „Zum Home-Bildschirm" hinzufügen.
2. Text schreiben, Farbe wählen.
3. „Aufs Display kleben" legt das Bild in die Zwischenablage; der Kurzbefehl „Zettel" (siehe die Anleitung in der App) setzt es als Sperrbildschirm. Alternativ „Teilen / sichern" → „Bild sichern" → Einstellungen → Hintergrundbild.
4. „Zettel ausblenden" legt nur das eigene Hintergrundfoto in die Zwischenablage – ohne Zettel; der Zettel verschwindet auch in der App, Text und Einstellungen bleiben. Der Knopf wird zu „Zettel einblenden", das lädt das Zettelbild wieder hoch (ein weiteres „Aufs Display kleben" ist dann nicht nötig). Ein Tipp auf die leere Fläche zeigt den Zettel nur zum Bearbeiten, ohne etwas hochzuladen. Ohne hinterlegtes Foto gibt es nur einen Hinweis.

Unten steht immer eine Zustandszeile: „Sperrbildschirm zeigt diesen Zettel", „Sperrbildschirm: noch der alte Zettel", „Bild fertig · wartet auf den Kurzbefehl" oder „Sperrbildschirm: nur dein Foto". Darunter ein Knopf für den nächsten Schritt — und solange der Kurzbefehl aussteht, an seiner Stelle die Ansage „Jetzt bist du dran" (App schließen, Icon antippen; ein Tipp darauf erklärt es ausführlich). Die App behauptet nie, dass ein Bild angekommen ist: Sie weiß nur, was sie übertragen hat. Passt der Text auch in kleinster Schrift nicht auf den Zettel, warnt sie („Zu viel Text") und überträgt nicht — das Bild würde sonst abschneiden.

Variante 2: reiner Kurzbefehl (empfohlen)

Der Kurzbefehl ist die App. Vom Home-Bildschirm-Icon oder per Siri gestartet, fragt er nach dem Text, holt das fertige Bild vom Render-Server, setzt es als Hintergrund und sperrt das Gerät. Keine Web-App, kein Fensterwechsel.

Render-Server auf Vercel einrichten (einmalig, kostenlos)

1. https://vercel.com → „Sign Up" → „Continue with GitHub".

2. „Add New… → Project" → dieses Repository Zettel importieren → „Deploy". Keine Einstellungen nötig, vercel.json und package.json liegen bei.

3. Nach ca. einer Minute steht die Adresse. Für dieses Projekt: https://zettel-beta.vercel.app. Test im Browser:

   https://zettel-beta.vercel.app/api/zettel?text=Milch%20kaufen&color=gelb&device=iphone
   

   Es muss ein PNG mit gelbem Zettel erscheinen.

Parameter: text (Pflicht), color (gelb, rosa, gruen, blau), device (iphone = Hochformat 1179×2556, sonst iPad-Quadrat 2360×2360), font (caveat, patrick, kalam, marker, indie, shadows, gloria), fastener (tape, tape2, thumbtack, pushpin, pin, pin2, clip, magnet, photo; deutsch auch klebestreifen, ecken, reisszwecke, pinnadel, nadel, nadeln, klammer, bildmagnet), fcolor (Farbe der Befestigung: rot, blau, gruen, gelb, silber, schwarz; Standard: Streifen und Klammer silber, Nadeln rot), fpos (Plätze mehrerer Befestigungen derselben Sorte: x,y[,farbe] in Prozent der Zettelbreite, mit Semikolon getrennt, z. B. fpos=25,10;75,60; ohne Angabe eine am Standardplatz wie bisher. Die Plätze werden auf die Regel der Art gezwungen: Nadeln und Magnete überall, Klebestreifen nur waagerecht an Ober- oder Unterkante, Büroklammer nur an der Oberkante, Eckstreifen fest), fvier (1: beim Eckstreifen vier statt zwei), fpattern (Muster: streifen, punkte, karo; Klammer nur Streifen/Punkte), fdesign (Motiv auf dem Magneten: smiley, herz, stern, pfote, blume, sonne, eigene Bild-Motive aus lib/motifs.js wie zwinker; beim Bildmagneten fuchs, eule, panda, hase, lola, lolacomic, brunocomic, melody, melodycomic; Muster und Motiv schließen sich aus, bei beiden gilt das Motiv), paper (, , ), (Stiftfarbe: , , , ), (Papierstruktur: , ), (obere Kante: , ), (Schriftgröße 60–140 %), (, , , , : jede Zeile bekommt eine Nummer bzw. ein Zeichen), (/: erste Zeile als Überschrift, unterstrichen und ohne Listenmarkierung; auf liniertem und kariertem Papier belegt sie eine Linienzeile und ragt nach oben darüber hinaus, damit der Rest auf den Linien bleibt), (, , : Größe der Überschrift, 1 = wie der übrige Text), ( = Standard, : PNG mit Alphakanal, nur Zettel und Schatten – zum Überlagern über ein vorhandenes Hintergrundbild), optional / in Pixeln. Bei quadratischem Bild wird das Tablet-Layout gewählt, sonst das Hochformat-Layout.

Beispiel: …/api/zettel?device=iphone&color=gelb&font=kalam&fastener=pin&text=…

Hinweis für Vercel: vercel.json packt fonts/** und node_modules/harfbuzzjs/** mit ein; ohne Letzteres fehlt satori zur Laufzeit die Datei hb.wasm.

Kurzbefehl „Zettel" anlegen

#	Aktion	Einstellung
1	Nach Eingabe fragen	Typ Text, Frage „Was soll auf den Zettel?"
2	URL codieren	Eingabe: „Bereitgestellte Eingabe" aus Aktion 1
3	Inhalt der URL abrufen	URL: https://zettel-beta.vercel.app/api/zettel?device=iphone&color=gelb&text= + Variable „Codierte URL" (iPad: device=ipad)
4	Hintergrundbild-Foto festlegen	Bild: „Inhalt der URL"; Sperrbildschirm anhaken; „Vorschau anzeigen" aus
5	Bildschirm sperren	–

Dann: Kurzbefehl-Details (ⓘ) → „Zum Home-Bildschirm". Ab jetzt: Icon tippen → Text eingeben oder diktieren → fertig. Oder „Hey Siri, Zettel".

In Aktion 4 nur Sperrbildschirm anhaken.

Beim ersten Lauf legt iOS einen neuen Sperrbildschirm an – ohne Widgets, Home-Hälfte einfarbig. Einmal nachbessern: Sperrbildschirm lange drücken → Anpassen → Widgets einrichten, Home-Bildschirm → Foto → eigenes Hintergrundfoto. Diesen Sperrbildschirm aktiv lassen und nicht löschen: der Kurzbefehl überschreibt danach nur noch das Foto darin, Widgets und Home-Bildschirm bleiben erhalten. Wird er gelöscht, entsteht beim nächsten Lauf wieder ein leerer.

Zettel auf das vorhandene Hintergrundbild kleben

iOS gibt das gesetzte Hintergrundbild an keine App und an keinen Kurzbefehl heraus. Der Zettel lässt sich deshalb nur auf ein Foto legen, das man selbst benennt. Zwei Wege:

• Web-App: „Eigenes Hintergrundfoto" wählen. Gespeichert wird ein auf Displaygröße zugeschnittener JPEG-Abzug (nicht das Original), getrennt vom übrigen Zustand; der Zettel wird darauf gezeichnet. „Aufs Display kleben" liefert dann Foto samt Zettel in einem Bild, „Zettel ausblenden" nur das Foto.
• Kurzbefehl: &bg=transparent an die URL hängen – der Server liefert ein PNG mit Alphakanal, nur Zettel und Schatten. Im Kurzbefehl zwischen Aktion 3 und 4 das eigene Foto laden (z. B. „Neuestes Foto aus Album" oder eine feste Datei) und mit der Aktion Bild überlagern (englisch Overlay Image) den Zettel darüberlegen; das Ergebnis geht an „Hintergrundbild-Foto festlegen".

Hinweis: Der Text wird bei jedem Aufruf als URL an Vercel geschickt und kann dort in Logs auftauchen.

Dateien

Datei	Zweck
index.html	Web-App (UI, Speicherung, Canvas-Rendering im Browser)
manifest.webmanifest	PWA-Manifest
sw.js	Service Worker für Offline-Betrieb und Selbst-Aktualisierung
icon-*.png	App-Icons
api/zettel.js	Vercel-Funktion: Zettel als PNG per URL
lib/render.js	Serverseitiges Rendering (satori + resvg), gleiche Layout-Logik wie die Web-App
lib/fasteners.js	Befestigungen: Zeichnung, Farben, Muster, Motive – gemeinsame Datei für App und Server
lib/motifs.js	Eigene Magnet-Motive als Bild (Data-URI): runde Motive (JPEG) und Bildmagnete (WebP, freigestellt)
lib/motifs/*.png	Bildmagnete als PNG für den Server (resvg kann kein WebP)
lib/prep_motif.mjs, lib/prep_photo.mjs	Vorbereitung neuer Motive bzw. Bildmagnete aus Vorlagen
tests/app_*.mjs, tests/srv_*.mjs	Prüfskripte: App im Browser (Playwright) und Server-Renderer; Aufruf steht im Kopf jeder Datei
docs/UEBERGABE.md	Arbeitsstand, Erkenntnisse zu iOS, Prüfwege, offene Punkte
fonts/Caveat-500.ttf	Handschrift für den Server (SIL Open Font License, siehe fonts/OFL-Caveat.txt)
vercel.json	Vercel-Konfiguration (Schrift wird mitgepackt)