Warnleuchten im Armaturenbrett
Auto-Warnsymbole, die gelb oder rot aufleuchten und die Meldung auf einem kleinen Display mit Scanlines erklären.
Einstellungen
Code
<div class="uvq08-car" role="group" aria-label="Fahrzeugwarnungen"><div class="wl"><span class="wr" style="--w:var(--c1)"><button type="button" aria-label="Reifendruck" 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">Niedriger Druck hinten links</span></span></span><span class="wr" style="--w:var(--c2)"><button type="button" aria-label="Motoröl" 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">Ölstand niedrig</span></span></span><span class="wr pk" style="--w:var(--c1)"><button type="button" aria-label="Kraftstoff" 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">Reserve: noch 48 km</span></span></span><span class="wr" style="--w:var(--c2)"><button type="button" aria-label="Gurt" 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">Bitte anschnallen</span></span></span></div><div class="od" aria-hidden="true"><span>ODO</span><b>048213</b><span>km</span></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Ein dunkles Kombiinstrument mit vier Warnleuchten für Reifendruck, Öl, Kraftstoff und Gurt. Beim Hovern oder Fokussieren flackert eine davon farbig auf, während sich ein Monospace-Display aus einer dünnen Linie öffnet, wie ein Fahrzeugbildschirm beim Aufwachen, mit Code-Etikett und Meldung. Passt zu Auto-Apps, Flottentools, IoT-Dashboards und Gerätestatus-Panels.
Die Hauptfarbe dient für Warnungen, die Zweitfarbe für kritische Meldungen. Gib jedem Symbol seine Stufe per CSS-Variable und halte die Texte kurz und in Großbuchstaben, damit sie wie im echten Auto wirken.