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
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.
Plus dans Filtres
Voir tout : FiltresOù 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.