Pastillas de la semana
HTML + CSSCases à cocher

Pilulier semaine en cases à cocher

Une plaquette de sept jours : cocher un jour écrase l'alvéole, fait sortir le comprimé et laisse l'aluminium déchiré.

Réglages

16px
1x

Code

<fieldset class="uvq02-bls"><legend>Comprimés de la semaine</legend><div class="cd"><label><input type="checkbox" aria-label="Lundi"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">LUN</span></label><label><input type="checkbox" aria-label="Mardi"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">MAR</span></label><label><input type="checkbox" aria-label="Mercredi"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">MER</span></label><label><input type="checkbox" aria-label="Jeudi"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">JEU</span></label><label><input type="checkbox" aria-label="Vendredi"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">VEN</span></label><label><input type="checkbox" aria-label="Samedi"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">SAM</span></label><label><input type="checkbox" aria-label="Dimanche"><span class="cv" aria-hidden="true"><i></i></span><span class="dy" aria-hidden="true">DIM</span></label></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 Cases à cocher

Voir tout : Cases à cocher

Où l’utiliser

Ce groupe de sept cases à cocher prend la forme d'une plaquette de médicaments argentée avec une alvéole par jour. Cocher un jour écrase son alvéole, fait sortir la gélule bicolore, déchire l'aluminium et change la couleur du jour. Chaque alvéole est une vraie case avec le nom complet du jour pour les lecteurs d'écran. Elle convient aux rappels de traitement, applis santé et suivis de routine.

La couleur principale est une moitié de la gélule et la mise en avant du jour, la secondaire l'autre moitié. Change la légende pour des vitamines ou des compléments et place-la dans une vue de la semaine où l'on voit d'un coup d'œil ce qui reste.