Préparer le voyage de 4
Checklist avec barre de progression
Quatre tâches qui remplissent une barre et un compteur à mesure qu'on les coche, sans aucun JavaScript.
Réglages
Code
<div class="uv-cpg"><ul><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Passeport</span></label></li><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Chargeur de téléphone</span></label></li><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Lunettes de soleil</span></label></li><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Réserver le taxi</span></label></li></ul><p class="hd"><span class="ti">Préparer le voyage</span><span class="ct"><span class="n"></span> <span>sur 4</span></span></p><div class="br"><i></i></div></div>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 Cases à cocher
Voir tout : Cases à cocherOù l’utiliser
Cette carte de checklist compte les tâches faites avec des compteurs CSS et remplit sa barre de progression grâce au sélecteur :has, elle n'a donc besoin d'aucun script. Chaque élément est une case native avec une coche ronde, et les tâches terminées pâlissent et sont barrées. Idéal pour les listes de valise, les étapes d'accueil, les checklists de lancement et le suivi d'habitudes.
Change le titre avec le champ de texte et remplace les quatre tâches dans le HTML. La barre utilise un dégradé entre les deux couleurs et le titre passe à la secondaire quand tout est fait.