Stempelkarte fürs Café

Eine Kraftpapier-Karte mit acht Feldern: Jeder Tipp drückt einen Tintenstempel auf, der letzte schenkt einen Kaffee.

Einstellungen

Hauptfarbe#b5452f

Zweitfarbe#ead9bd

Größe16px

Tempo1x

Text

Code

index.html

<article class="uvq07-stp"><header><div><p class="k">Treuekarte</p><h3>Tostadero Nube</h3></div><span class="lg" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 11h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1 1 1.5 1 2.5M12 3.5c0 1 1 1.5 1 2.5"/></svg></span></header><ol aria-label="Stempel"><li class="on" style="--r:-12deg"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 11h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1 1 1.5 1 2.5M12 3.5c0 1 1 1.5 1 2.5"/></svg></span></li><li class="on" style="--r:8deg"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 11h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1 1 1.5 1 2.5M12 3.5c0 1 1 1.5 1 2.5"/></svg></span></li><li class="on" style="--r:-4deg"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 11h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1 1 1.5 1 2.5M12 3.5c0 1 1 1.5 1 2.5"/></svg></span></li><li class="on" style="--r:14deg"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 11h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1 1 1.5 1 2.5M12 3.5c0 1 1 1.5 1 2.5"/></svg></span></li><li class="on" style="--r:-9deg"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 11h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1 1 1.5 1 2.5M12 3.5c0 1 1 1.5 1 2.5"/></svg></span></li><li style="--r:5deg"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 11h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1 1 1.5 1 2.5M12 3.5c0 1 1 1.5 1 2.5"/></svg></span></li><li style="--r:-15deg"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 11h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1 1 1.5 1 2.5M12 3.5c0 1 1 1.5 1 2.5"/></svg></span></li><li data-g="" style="--r:10deg"><em>Kostenlos</em><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="9" width="16" height="11" rx="1.5"/><path d="M3 9h18M12 9v11M12 9c-1.5-4-6-4-5-1.5S12 9 12 9zm0 0c1.5-4 6-4 5-1.5S12 9 12 9z"/></svg></span></li></ol><div class="ft"><p class="ct" aria-live="polite"><b>5</b> von 8 Stempeln</p><button type="button" data-a="Stempeln" data-b="Neu anfangen">Stempeln</button></div><p class="fr">Dein nächster Kaffee ist gratis</p></article>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Karten

Alle ansehen: Karten

3D-Tilt-Karte

KartenReact + Motion

Spotlight-Karte

KartenReact + Motion

Wetter- und Kalender-Widget

KartenReact + Motion

Karte mit Spotlight-Rand

KartenHTML + CSS

Karte mit Lift und Zoom

KartenHTML + CSS

Karte mit 3D-Flip

KartenHTML + CSS

Karte mit lebendigem Verlauf

KartenHTML + CSS

Karte mit verstecktem Inhalt

KartenHTML + CSS

Wofür du ihn nutzen kannst

Stempelkarten stecken noch immer im Portemonnaie, weil das Abstempeln Spaß macht. Diese behält Kraftpapier, gestrichelte Kreise und Gummistempel bei, gebaut aus geschichteten Verläufen und Tassen als Inline-SVG. Jeder Druck setzt einen Stempel mit leicht zufälligem Winkel und kurzem Stauchen, ein Zähler meldet den Fortschritt. Passt zu Cafés, Bäckereien, Fitnessstudios und Prämien in Apps.

Die Hauptfarbe ist Stempeltinte und Button, die zweite Farbe der Karton. Ändere den Namen des Cafés und den Prämientext oder nimm einfach Felder weg, wenn dein Programm kürzer ist.