Sélecteur de mode de conduite
Un combiné de voiture passe d’ECO à SPORT : l’aiguille monte, l’arc vire au rouge et le panneau vibre.
Réglages
Code
<label class="uvq03-drv"><input type="checkbox" role="switch"><span class="cl"><svg viewBox="0 12 100 50" aria-hidden="true"><path class="tk" d="M12 56A38 38 0 0 1 88 56" pathLength="1"/><path class="ar" d="M12 56A38 38 0 0 1 88 56" pathLength="1"/><g class="nd"><path d="M50 56L50 24"/><circle cx="50" cy="56" r="4"/></g></svg><span class="md"><b class="e">ECO</b><b class="s">SPORT</b></span></span>Mode de conduite</label>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 Interrupteurs
Voir tout : InterrupteursOù l’utiliser
Emprunté aux tableaux de bord actuels, cet interrupteur est un petit combiné sombre avec une jauge en arc et une aiguille. Éteint, il reste sur ECO avec un arc vert court ; activé, l’aiguille grimpe, l’arc s’allonge et devient rouge, SPORT apparaît sous la jauge et le panneau tremble un instant. La jauge est un SVG en ligne avec pathLength, ce qui rend le remplissage de l’arc facile à régler.
La couleur principale correspond au mode sport, la seconde au mode éco. Renommez les deux modes dans le HTML, par exemple COMFORT et TRACK, pour des modes de performance, plans d’énergie ou fonctions boost.