Toast für freigeschalteten Erfolg
Eine Medaille dreht sich mit Glanz und Funken herein, dazu die gewonnenen Erfahrungspunkte.
Einstellungen
Code
<div class="uv-qac"><button type="button" class="fire">Wiederholen</button><div class="tt" role="status"><span class="md" aria-hidden="true"><i class="sp"><b style="--a:0deg"></b><b style="--a:45deg"></b><b style="--a:90deg"></b><b style="--a:135deg"></b><b style="--a:180deg"></b><b style="--a:225deg"></b><b style="--a:270deg"></b><b style="--a:315deg"></b></i><span class="bd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.4 4.9 5.4.8-3.9 3.8.9 5.4L12 15.4l-4.8 2.5.9-5.4-3.9-3.8 5.4-.8z"/></svg></span></span><span class="tx"><small>Erfolg freigeschaltet</small><b>7 Tage in Folge</b></span><span class="xp">+50 XP</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
Gamifizierte Apps für Fitness, Sprachenlernen oder Produktivität belohnen Meilensteine mit einem kleinen Fest. Dieser Toast gleitet als violette Leiste hoch, während sich eine goldene Medaille an ihren Platz dreht, ein Lichtreflex darüberläuft, acht Funken nach außen springen und zuletzt ein +50-XP-Chip erscheint. Der Name des Erfolgs kommt aus dem Textfeld.
Die Feier läuft bei jedem Erscheinen einmal ab und bleibt bei reduzierter Bewegung still. Der Toast hat role status, Screenreader melden den Erfolg also, ohne den Fokus zu stehlen.