Toast mit Parkuhr
Die Nadel einer verchromten Parkuhr sinkt in den roten Bereich; mit einer halben Stunde mehr federt sie zurück Richtung Grün.
Einstellungen
Code
<div class="uvq09-prk"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="status"><span class="mt" aria-hidden="true"><span class="dl"><i class="nd"></i></span><b>P</b></span><span class="tx"><b>Deine Parkzeit läuft gleich ab</b><small><span class="n">10</span> Min. übrig · Blaue Zone</small></span><button type="button" class="ad">+30 min</button></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 Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Park-Apps warnen vor ablaufender Zeit meist mit nüchternem Text, dabei versteht jeder eine Parkuhrnadel im roten Bereich. Dieser Toast zeichnet einen verchromten Parkuhrkopf mit gewölbtem Fenster, einen grün-gelb-roten Bogen aus einem konischen Verlauf und eine Nadel, die sich mit federnder Kurve dreht. Jeder Druck auf den Button schiebt sie zurück und aktualisiert die Minuten.
Die Hauptfarbe gilt für das P-Schild und den Button, die zweite für den roten Bereich und die Warnung bei wenig Zeit. Ordne Minuten und Winkel in der kleinen Funktion set zu, begrenze die Höchstdauer, und der Button deaktiviert sich, sobald die Uhr voll ist.