Voyants du tableau de bord
Des voyants de voiture qui s’allument en ambre ou en rouge et expliquent l’alerte sur un petit écran à lignes.
Réglages
Code
<div class="uvq08-car" role="group" aria-label="Alertes du véhicule"><div class="wl"><span class="wr" style="--w:var(--c1)"><button type="button" aria-label="Pression des pneus" aria-describedby="uvq08-car-0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 19C4.9 17.4 4 15.3 4 13s.9-4.4 2.5-6M17.5 19c1.6-1.6 2.5-3.7 2.5-6s-.9-4.4-2.5-6M6.5 19h11M12 8.5V13"/><circle cx="12" cy="16" r=".6"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-0"><span class="cd">TPMS</span><span class="ms">Pression basse à l’arrière gauche</span></span></span><span class="wr" style="--w:var(--c2)"><button type="button" aria-label="Huile moteur" aria-describedby="uvq08-car-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h5l2-2h3l6-1.5-4 6.5H6a2 2 0 0 1-2-2zM11 8V6.5M9.5 6.5h3"/><path d="M20 14c.6.9.9 1.5.9 1.9a.9.9 0 0 1-1.8 0c0-.4.3-1 .9-1.9z"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-1"><span class="cd">OIL</span><span class="ms">Niveau d’huile bas</span></span></span><span class="wr pk" style="--w:var(--c1)"><button type="button" aria-label="Carburant" aria-describedby="uvq08-car-2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="9" height="16" rx="1.5"/><path d="M5 10h9M14 8l3 2v7a1.5 1.5 0 0 0 3 0V9l-2.5-2.5"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-2"><span class="cd">FUEL</span><span class="ms">Réserve : 48 km restants</span></span></span><span class="wr" style="--w:var(--c2)"><button type="button" aria-label="Ceinture" aria-describedby="uvq08-car-3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="4.8" r="2"/><path d="M8 21v-6l-2-4 3-3.5h4l2 4.5h3M8.5 8.5L15.5 18"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-3"><span class="cd">BELT</span><span class="ms">Attache ta ceinture</span></span></span></div><div class="od" aria-hidden="true"><span>ODO</span><b>048213</b><span>km</span></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 Info-bulles
Voir tout : Info-bullesOù l’utiliser
Un combiné d’instruments sombre avec quatre voyants pour la pression des pneus, l’huile, le carburant et la ceinture. Au survol ou au focus, l’un d’eux s’allume en vacillant avec un halo coloré, pendant qu’un écran à chasse fixe s’ouvre depuis une fine ligne, comme un afficheur qui se réveille, avec une étiquette de code et le message. Elle convient aux applis auto, outils de flotte, tableaux IoT et états d’appareils.
La couleur principale sert aux avertissements, la secondaire aux alertes critiques. Attribue à chaque icône son niveau avec une variable CSS et garde des messages courts en majuscules pour qu’ils ressemblent aux vrais.