Logro desbloqueadoRacha de 7 días+50 XP
HTML + CSSNotifications
Toast de succès débloqué
Une médaille arrive en tournant avec un reflet et des étincelles, avec les points d'expérience gagnés.
Réglages
16px
1x
Code
<div class="uv-qac"><button type="button" class="fire">Rejouer</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>Succès débloqué</small><b>Série de 7 jours</b></span><span class="xp">+50 XP</span></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Notifications
Voir tout : NotificationsOù l’utiliser
Les applis gamifiées de sport, de langues ou de productivité récompensent les étapes avec un moment de fête. Ce toast monte dans une barre violette pendant qu'une médaille dorée tourne jusqu'à sa place, qu'un reflet la traverse, que huit étincelles jaillissent et qu'une étiquette +50 XP apparaît en dernier. Le nom du succès vient du champ de texte.
La célébration joue une fois à chaque apparition et reste immobile avec le mouvement réduit. Le toast a le rôle status pour être annoncé sans voler le focus.