Práctica de pianoÚltimas 12 semanas
Aktivitäts-Heatmap mit Tooltip
Ein Raster aus zwölf Übungswochen: Hovern oder Pfeiltasten genügen, und ein Tooltip zeigt Minuten und Datum.
Einstellungen
Code
<div class="uvq08-hm"><p class="hd"><b>Klavierüben</b><span>Letzte 12 Wochen</span></p><div class="gd show" role="group" aria-label="Klavierüben"><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v2" data-m="34" aria-label="34 min" tabindex="-1"></button><button type="button" class="v2" data-m="31" aria-label="31 min" tabindex="-1"></button><button type="button" class="v1" data-m="6" aria-label="6 min" tabindex="-1"></button><button type="button" class="v3" data-m="53" aria-label="53 min" tabindex="-1"></button><button type="button" class="v4" data-m="69" aria-label="69 min" tabindex="-1"></button><button type="button" class="v2" data-m="37" aria-label="37 min" tabindex="-1"></button><button type="button" class="v1" data-m="16" aria-label="16 min" tabindex="-1"></button><button type="button" class="v2" data-m="21" aria-label="21 min" tabindex="-1"></button><button type="button" class="v3" data-m="49" aria-label="49 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="55" aria-label="55 min" tabindex="-1"></button><button type="button" class="v4" data-m="63" aria-label="63 min" tabindex="-1"></button><button type="button" class="v4" data-m="61" aria-label="61 min" tabindex="-1"></button><button type="button" class="v2" data-m="25" aria-label="25 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v1" data-m="8" aria-label="8 min" tabindex="-1"></button><button type="button" class="v3" data-m="46" aria-label="46 min" tabindex="-1"></button><button type="button" class="v1" data-m="19" aria-label="19 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v1" data-m="16" aria-label="16 min" tabindex="-1"></button><button type="button" class="v3" data-m="55" aria-label="55 min" tabindex="-1"></button><button type="button" class="v3" data-m="44" aria-label="44 min" tabindex="-1"></button><button type="button" class="v3" data-m="45" aria-label="45 min" tabindex="-1"></button><button type="button" class="v3" data-m="51" aria-label="51 min" tabindex="-1"></button><button type="button" class="v3" data-m="51" aria-label="51 min" tabindex="-1"></button><button type="button" class="v1" data-m="7" aria-label="7 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="40" aria-label="40 min" tabindex="-1"></button><button type="button" class="v4" data-m="75" aria-label="75 min" tabindex="-1"></button><button type="button" class="v1" data-m="18" aria-label="18 min" tabindex="-1"></button><button type="button" class="v1" data-m="16" aria-label="16 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="49" aria-label="49 min" tabindex="-1"></button><button type="button" class="v2" data-m="36" aria-label="36 min" tabindex="-1"></button><button type="button" class="v4" data-m="70" aria-label="70 min" tabindex="-1"></button><button type="button" class="v1" data-m="9" aria-label="9 min" tabindex="-1"></button><button type="button" class="v2" data-m="22" aria-label="22 min" tabindex="-1"></button><button type="button" class="v2" data-m="22" aria-label="22 min" tabindex="-1"></button><button type="button" class="v3" data-m="53" aria-label="53 min" tabindex="-1"></button><button type="button" class="v3" data-m="50" aria-label="50 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v4" data-m="69" aria-label="69 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="58" aria-label="58 min" tabindex="-1"></button><button type="button" class="v2" data-m="33" aria-label="33 min" tabindex="-1"></button><button type="button" class="v3" data-m="45" aria-label="45 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v3" data-m="57" aria-label="57 min" tabindex="-1"></button><button type="button" class="v3" data-m="52" aria-label="52 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="54" aria-label="54 min" tabindex="-1"></button><button type="button" class="v3" data-m="44" aria-label="44 min" tabindex="-1"></button><button type="button" class="v4" data-m="62" aria-label="62 min" tabindex="-1"></button><button type="button" class="v3" data-m="51" aria-label="51 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="53" aria-label="53 min" tabindex="-1"></button><button type="button" class="v1" data-m="10" aria-label="10 min" tabindex="-1"></button><button type="button" class="v2" data-m="32" aria-label="32 min" tabindex="-1"></button><button type="button" class="v2" data-m="34" aria-label="34 min" tabindex="-1"></button><button type="button" class="v2" data-m="37" aria-label="37 min" tabindex="-1"></button><button type="button" class="v3" data-m="58" aria-label="58 min" tabindex="-1"></button><button type="button" class="v3" data-m="50" aria-label="50 min" tabindex="-1"></button><button type="button" class="v1" data-m="14" aria-label="14 min" tabindex="-1"></button><button type="button" class="v3" data-m="43" aria-label="43 min" tabindex="-1"></button><button type="button" class="v2" data-m="31" aria-label="31 min" tabindex="-1"></button><button type="button" class="v3" data-m="46" aria-label="46 min" tabindex="-1"></button><button type="button" class="v4" data-m="63" aria-label="63 min" tabindex="-1"></button><button type="button" class="v2" data-m="38" aria-label="38 min" tabindex="-1"></button><button type="button" class="v3" data-m="49" aria-label="49 min" tabindex="-1"></button><button type="button" class="v2" data-m="25" aria-label="25 min" tabindex="-1"></button><button type="button" class="v2" data-m="33" aria-label="33 min" tabindex="-1"></button><button type="button" class="v2" data-m="37" aria-label="37 min" tabindex="-1"></button><button type="button" class="v3" data-m="44" aria-label="44 min" tabindex="-1"></button><button type="button" class="v4" data-m="73" aria-label="73 min" tabindex="-1"></button><button type="button" class="v3 on" data-m="48" aria-label="48 min" tabindex="0"></button><span class="tt" aria-hidden="true"><b>48 min</b><span>So., 25. Okt.</span></span></div><p class="lg" aria-hidden="true"><span>Weniger</span><i class="v0"></i><i class="v1"></i><i class="v2"></i><i class="v3"></i><i class="v4"></i><span>Mehr</span></p></div>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 Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Ein Raster aus zwölf Wochen mal sieben Tagen in fünf Bernsteintönen, wie ein Beitragsdiagramm für das Klavierüben. Ein einziger Tooltip gleitet zur berührten oder fokussierten Zelle und zeigt Minuten und ein Datum im Format der Seitensprache. Das Raster hat nur einen Tab-Stopp, die Pfeiltasten bewegen sich in zwei Richtungen, Pos1 und Ende springen innerhalb der Zeile.
Die Hauptfarbe bestimmt die fünf Stufen der Skala. Ersetze die erzeugten Daten durch eigene Minuten, Schritte, Commits oder Verkäufe und ändere das Startdatum im Skript, damit die Beschriftungen zu echten Tagen passen.