Leer 20 minutos
Últimas 12 semanas
23 días
HTML + CSSKarten
Gewohnheits-Streak mit Heatmap
Eine Heatmap über 12 Wochen mit aktueller Serie; markiere heute als erledigt und die Flamme wächst.
Einstellungen
16px
1x
Code
<article class="uv-khs"><header><div><h3>20 Minuten lesen</h3><p>Letzte 12 Wochen</p></div><span class="fl" aria-live="polite"><span class="em" aria-hidden="true">🔥</span><b>23</b> <span>Tage</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>Heute erledigt</span></button></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.
Mehr aus Karten
Alle ansehen: KartenWofür du ihn nutzen kannst
Habit-Tracker motivieren mit sichtbarem Verlauf, und eine Heatmap zeigt Beständigkeit am klarsten. Diese Karte legt zwölf Wochen in ein Raster mit Farbintensität, umrandet den heutigen Tag und zeigt die aktuelle Serie mit Flammen-Badge. Ein Druck auf den Button füllt das heutige Feld mit kleinem Sprung und verlängert die Serie um einen Tag.
Für echte Daten setzt du pro Feld eine Stufe von 0 bis 4. Der Button hat aria-pressed, und das Serien-Badge ist eine Live-Region, die Änderung wird also vorgelesen.