Toast de carton de l'arbitre
Le sifflet retentit et le carton jaune sort de la poche au-dessus de la pelouse ; touché, il se retourne et montre le joueur.
Réglages
Code
<div class="uvq09-ref"><button type="button" class="fire">Afficher à nouveau</button><div class="tt" role="status"><span class="ws" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 12.5a5 5 0 0 0 9.6 1.9l7.4-1.6V9.2H9.8"/><path d="M9.8 9.2V6.8h4.5v2.4"/><circle cx="8.5" cy="12.5" r="1.4"/></svg><i></i><i></i><i></i></span><button type="button" class="cd" aria-pressed="false" aria-label="Voir le joueur averti"><span class="fc fr"></span><span class="fc bk"><b>8</b><small>Pedri</small></span></button><span class="tx"><b>Carton jaune</b><small>54e minute · faute tactique</small><small class="dt">Pedri, numéro 8. Encore un et il est expulsé</small></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 de match affichent les avertissements comme une ligne de plus, alors qu'un carton brandi au-dessus de la pelouse se comprend tout de suite. Ce toast pose une pelouse tondue en bandes sous un sifflet aux ondes clignotantes, puis le carton jaune monte d'en bas et reste penché. Le carton est un vrai bouton : un appui le retourne en 3D et montre le numéro et le nom.
La couleur principale est le carton, donc en rouge il sert pour une expulsion, et la secondaire est la pelouse. Le retournement utilise aria-pressed et ajoute une ligne dans la zone de statut ; remplace joueur, minute et motif par tes données en direct.