HTML + CSSToasts

Toast für neue Anmeldung

Sicherheitswarnung zu einem Zugriff von einem neuen Gerät mit zwei Antworten: Das war ich oder nicht.

Einstellungen

16px
1x

Code

<div class="uv-qlg"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="alert"><div class="hd"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7.5 3v5.5c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V6z"/><path d="M12 8.5v4M12 15.5v.01"/></svg></span><span class="tx"><b>Neue Anmeldung</b><small>Mac in Lissabon, vor 2 Minuten</small></span></div><div class="ac"><button type="button" class="ys">Das war ich</button><button type="button" class="no">Das war ich nicht</button></div><p class="ok r1">Danke, alles in Ordnung.</p><p class="ok r2">Wir haben die Sitzung beendet. Ändere dein Passwort.</p></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: Toasts

Wofür du ihn nutzen kannst

Sicherheitshinweise zum Konto müssen gleichzeitig klar und handlungsorientiert sein. Diese Warnung zeigt ein Schild, Gerät, Stadt und Zeit der neuen Anmeldung sowie zwei Buttons. Das war ich bedankt sich, färbt das Symbol grün und schließt. Das war ich nicht meldet in Rot, dass die Sitzung beendet wurde, und bittet um ein neues Passwort.

Der Toast nutzt role alert und wird sofort angesagt. Verbinde beide Buttons mit deinem Backend und formuliere einfach, damit niemand zögert. So weiß jeder sofort, was zu tun ist.