Toast bei Ankunft am Ort
Eine Mini-Karte lässt die Stecknadel mit Federn und Radarwelle fallen, sobald sie erkennt, dass du am Ziel angekommen bist.
Einstellungen
Code
<div class="uvq09-geo"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="status"><span class="mp" aria-hidden="true"><i class="pk"></i><i class="rv"></i><i class="rd"></i><i class="rd"></i><i class="pn"><svg viewBox="0 0 24 30"><path class="pb" d="M12 29s-9-9.3-9-16a9 9 0 0 1 18 0c0 6.7-9 16-9 16z"/><circle class="pc" cx="12" cy="13" r="3.6"/></svg></i></span><span class="tx"><b>Du bist im Büro angekommen</b><small>Calle de Alcalá 120 · 8:57</small><button type="button" class="ci"><span class="a">Kommen erfassen</span><span class="b" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Kommen erfasst</span></button></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 Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Standortbasierte Apps bestätigen die Ankunft oft mit einer schlichten Textzeile. Diese zeichnet aus überlagerten CSS-Verläufen eine winzige Karte mit Straßen, Park und Fluss, lässt eine Stecknadel fallen, die sich beim Landen staucht, und sendet Radarringe aus. Die Karte folgt dem hellen oder dunklen Theme. Nützlich für Zeiterfassung, Check-ins, Lieferfahrer und Smart-Home-Routinen.
Die Hauptfarbe gilt für Nadel und Radar, die zweite für Park und bestätigten Button. Ändere Adresse und Uhrzeit und verbinde den Button mit deiner eigenen Stempeluhr; die Beschriftung wechselt nach dem Erfolg mit einer kurzen Bewegung.