HTML + CSSFilter
Aktivitäts-Heatmap nach Wochentag
Ein Aktivitätsraster über zwölf Wochen, in dem du die zählenden Tage anhakst und ihre Zeilen wellenartig aufleuchten.
Einstellungen
16px
1x
Code
<fieldset class="uvq05-hm"><legend>Aktive Tage</legend><div class="gd"><label><input type="checkbox" checked><span class="d">Montag</span><span class="cs" aria-hidden="true"><i class="l0" style="--n:0"></i><i class="l3" style="--n:1"></i><i class="l0" style="--n:2"></i><i class="l1" style="--n:3"></i><i class="l3" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l3" style="--n:6"></i><i class="l2" style="--n:7"></i><i class="l1" style="--n:8"></i><i class="l2" style="--n:9"></i><i class="l0" style="--n:10"></i><i class="l2" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Dienstag</span><span class="cs" aria-hidden="true"><i class="l2" style="--n:0"></i><i class="l0" style="--n:1"></i><i class="l1" style="--n:2"></i><i class="l0" style="--n:3"></i><i class="l0" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l0" style="--n:6"></i><i class="l2" style="--n:7"></i><i class="l1" style="--n:8"></i><i class="l2" style="--n:9"></i><i class="l1" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Mittwoch</span><span class="cs" aria-hidden="true"><i class="l1" style="--n:0"></i><i class="l0" style="--n:1"></i><i class="l1" style="--n:2"></i><i class="l0" style="--n:3"></i><i class="l0" style="--n:4"></i><i class="l1" style="--n:5"></i><i class="l0" style="--n:6"></i><i class="l0" style="--n:7"></i><i class="l3" style="--n:8"></i><i class="l1" style="--n:9"></i><i class="l3" style="--n:10"></i><i class="l3" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Donnerstag</span><span class="cs" aria-hidden="true"><i class="l0" style="--n:0"></i><i class="l1" style="--n:1"></i><i class="l2" style="--n:2"></i><i class="l3" style="--n:3"></i><i class="l3" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l2" style="--n:6"></i><i class="l3" style="--n:7"></i><i class="l2" style="--n:8"></i><i class="l1" style="--n:9"></i><i class="l2" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Freitag</span><span class="cs" aria-hidden="true"><i class="l2" style="--n:0"></i><i class="l3" style="--n:1"></i><i class="l3" style="--n:2"></i><i class="l4" style="--n:3"></i><i class="l4" style="--n:4"></i><i class="l3" style="--n:5"></i><i class="l3" style="--n:6"></i><i class="l3" style="--n:7"></i><i class="l1" style="--n:8"></i><i class="l4" style="--n:9"></i><i class="l2" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox"><span class="d">Samstag</span><span class="cs" aria-hidden="true"><i class="l3" style="--n:0"></i><i class="l2" style="--n:1"></i><i class="l1" style="--n:2"></i><i class="l1" style="--n:3"></i><i class="l4" style="--n:4"></i><i class="l3" style="--n:5"></i><i class="l3" style="--n:6"></i><i class="l3" style="--n:7"></i><i class="l2" style="--n:8"></i><i class="l4" style="--n:9"></i><i class="l3" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox"><span class="d">Sonntag</span><span class="cs" aria-hidden="true"><i class="l1" style="--n:0"></i><i class="l2" style="--n:1"></i><i class="l2" style="--n:2"></i><i class="l4" style="--n:3"></i><i class="l2" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l1" style="--n:6"></i><i class="l2" style="--n:7"></i><i class="l4" style="--n:8"></i><i class="l4" style="--n:9"></i><i class="l4" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label></div><div class="ft"><button type="button" data-p="0">Werktage</button><button type="button" data-p="1">Wochenende</button><p class="ct"><span class="n"></span> <span>von 7 Tagen</span></p></div></fieldset>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 Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Analyse-Dashboards, Fitnessstudios und Buchungstools filtern oft nach Wochentag, und es hilft, die Daten beim Auswählen zu sehen. Jede Zeile ist ein Label mit Checkbox und zwölf Zellen, deren Ton von der Aktivität abhängt, beim Einschalten färbt sich die Zeile mit einer gestaffelten Welle. Zwei Vorgaben wählen Werktage oder Wochenende.
Die erste Farbe deckt niedrige und mittlere Stufen ab, die zweite markiert die vollsten Zellen, ein Paar aus Petrol und Limette liest sich gut. Speise echte Zahlen in die Stufenklassen ein und lass den Zähler neben den Vorgaben.