Leer 20 minutos
Últimas 12 semanas
23 días
HTML + CSSCartes
Série d'habitudes avec carte de chaleur
Une carte de chaleur sur 12 semaines avec la série en cours ; coche aujourd'hui et la flamme grandit.
Réglages
16px
1x
Code
<article class="uv-khs"><header><div><h3>Lire 20 minutes</h3><p>12 dernières semaines</p></div><span class="fl" aria-live="polite"><span class="em" aria-hidden="true">🔥</span><b>23</b> <span>jours</span></span></header><div class="hm"><i data-l="0"></i><i data-l="3"></i><i data-l="1"></i><i data-l="0"></i><i data-l="2"></i><i data-l="1"></i><i data-l="0"></i><i data-l="4"></i><i data-l="1"></i><i data-l="0"></i><i data-l="0"></i><i data-l="0"></i><i data-l="2"></i><i data-l="3"></i><i data-l="0"></i><i data-l="0"></i><i data-l="2"></i><i data-l="2"></i><i data-l="0"></i><i data-l="0"></i><i data-l="0"></i><i data-l="4"></i><i data-l="2"></i><i data-l="3"></i><i data-l="1"></i><i data-l="1"></i><i data-l="1"></i><i data-l="0"></i><i data-l="0"></i><i data-l="1"></i><i data-l="0"></i><i data-l="0"></i><i data-l="2"></i><i data-l="0"></i><i data-l="2"></i><i data-l="0"></i><i data-l="4"></i><i data-l="0"></i><i data-l="1"></i><i data-l="3"></i><i data-l="0"></i><i data-l="4"></i><i data-l="0"></i><i data-l="0"></i><i data-l="0"></i><i data-l="1"></i><i data-l="0"></i><i data-l="2"></i><i data-l="0"></i><i data-l="1"></i><i data-l="1"></i><i data-l="4"></i><i data-l="2"></i><i data-l="2"></i><i data-l="1"></i><i data-l="4"></i><i data-l="2"></i><i data-l="2"></i><i data-l="1"></i><i data-l="2"></i><i data-l="3"></i><i data-l="1"></i><i data-l="2"></i><i data-l="2"></i><i data-l="1"></i><i data-l="3"></i><i data-l="2"></i><i data-l="2"></i><i data-l="4"></i><i data-l="1"></i><i data-l="2"></i><i data-l="2"></i><i data-l="2"></i><i data-l="1"></i><i data-l="2"></i><i data-l="3"></i><i data-l="4"></i><i data-l="1"></i><i data-l="2"></i><i data-l="4"></i><i data-l="3"></i><i data-l="1"></i><i data-l="2"></i><i data-l="0" class="td"></i></div><button type="button" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Fait aujourd’hui</span></button></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.
Plus dans Cartes
Voir tout : CartesOù l’utiliser
Les applis d'habitudes motivent avec un historique visible, et une carte de chaleur montre la régularité le plus clairement. Cette carte place douze semaines de jours dans une grille nuancée par intensité, entoure aujourd'hui et affiche la série en cours avec une flamme. Le bouton remplit la case du jour d'un petit bond et ajoute un jour à la série.
Pour de vraies données, donne un niveau de 0 à 4 à chaque case. Le bouton a aria-pressed et le badge est une région live, le changement est donc annoncé.