Carte de fidélité à tampons

Une carte kraft de café avec huit cases : chaque appui pose un tampon encreur et le dernier offre un café.

Réglages

Couleur principale#b5452f

Couleur secondaire#ead9bd

Taille16px

Vitesse1x

Texte

Code

index.html

<article class="uvq07-stp"><header><div><p class="k">Carte de fidélité</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="Tampons"><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>Gratuit</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> tampons sur 8</p><button type="button" data-a="Tamponner" data-b="Recommencer">Tamponner</button></div><p class="fr">Ton prochain café est offert</p></article>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Cartes

Voir tout : Cartes

Carte inclinable 3D

CartesReact + Motion

Carte à halo lumineux

CartesReact + Motion

Widget météo et agenda

CartesReact + Motion

Carte à bordure lumineuse

CartesHTML + CSS

Carte qui se soulève

CartesHTML + CSS

Carte qui se retourne

CartesHTML + CSS

Carte au dégradé animé

CartesHTML + CSS

Carte à contenu révélé

CartesHTML + CSS

Où l’utiliser

Les cartes à tampons restent dans les portefeuilles parce que les tamponner fait plaisir. Celle-ci garde le papier kraft, les cercles en pointillés et les tampons en caoutchouc, construits avec des dégradés superposés et des tasses en SVG. Chaque appui pose un tampon avec un angle différent et un léger écrasement, et un compteur annonce la progression. Pour cafés, boulangeries, salles de sport et récompenses d'appli.

La couleur principale est l'encre du tampon et le bouton, la seconde le carton. Change le nom de l'enseigne et la récompense, ou retire des cases pour un programme plus court.