HTML + CSSFiltres
Niveau de piment
Cinq piments s'allument du jaune au rouge foncé pour indiquer combien de piquant tu supportes.
Réglages
16px
1x
Code
<fieldset class="uvq05-ch"><legend>Piquant maximum</legend><div class="row"><label style="--h:#f7c548"><input type="radio" name="uvq05-ch" aria-label="Doux"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#f59e0b"><input type="radio" name="uvq05-ch" aria-label="Moyen"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#f06b1f"><input type="radio" name="uvq05-ch" aria-label="Épicé" checked><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:var(--c1)"><input type="radio" name="uvq05-ch" aria-label="Très piquant"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#a3121f"><input type="radio" name="uvq05-ch" aria-label="Brûlant"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label></div><div class="bar" aria-hidden="true"><i></i></div><p class="lv" aria-hidden="true"><span>Doux</span><span>Moyen</span><span>Épicé</span><span>Très piquant</span><span>Brûlant</span></p></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
Un filtre façon notation pour les cartes de restaurant et la livraison de repas, où l'échelle est le piquant et non les étoiles. Chaque piment est un SVG en ligne dont la couleur vient d'une variable CSS, le groupe radio remplit tous les piments jusqu'au choix, et une barre en dégradé et un mot confirment le niveau. Au maximum, ils rougeoient.
La couleur principale règle le piment le plus fort et la seconde le début de la barre, du vert doux au rouge vif. Renomme les niveaux selon ta cuisine ou reprends le principe avec d'autres icônes pour le sucre ou le degré d'alcool.