Días con actividad

de 7 días

HTML + CSSFiltres

Carte de chaleur par jour

Une grille d'activité sur douze semaines où tu coches les jours qui comptent et leurs lignes s'allument en vague.

Réglages

16px
1x

Code

<fieldset class="uvq05-hm"><legend>Jours d'activité</legend><div class="gd"><label><input type="checkbox" checked><span class="d">Lundi</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">Mardi</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">Mercredi</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">Jeudi</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">Vendredi</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">Samedi</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">Dimanche</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">Semaine</button><button type="button" data-p="1">Week-end</button><p class="ct"><span class="n"></span> <span>sur 7 jours</span></p></div></fieldset>

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 Filtres

Voir tout : Filtres

Où l’utiliser

Les tableaux de bord, les salles de sport et les outils de réservation filtrent souvent par jour de la semaine, et voir les données pendant le choix aide. Chaque ligne est un libellé avec case et douze cellules dont la teinte dépend de l'activité, et activer un jour colore sa ligne en vague décalée. Deux raccourcis cochent la semaine ou le week-end.

La première couleur couvre les niveaux bas et moyens, la seconde marque les cellules les plus chargées, et un duo bleu canard et citron vert se lit bien. Injecte de vrais chiffres dans les classes de niveau et garde le compteur près des raccourcis.