Toast de but avec la ola
Sur un but, le score monte d'un point et la tribune fait la ola d'un bout à l'autre ; un bouton la relance.
Réglages
Code
<div class="uvq09-gol"><button type="button" class="fire">Marquer encore</button><div class="tt" role="status"><span class="std" aria-hidden="true"><i class="lt l1"></i><i class="lt l2"></i><i class="fa" style="--c:0;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:1;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:2;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:3;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:4;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:5;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:6;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:7;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:8;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:9;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:10;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:11;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:12;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:13;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:14;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:15;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:0;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:1;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:2;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:3;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:4;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:5;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:6;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:7;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:8;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:9;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:10;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:11;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:12;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:13;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:14;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:15;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:0;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:1;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:2;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:3;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:4;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:5;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:6;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:7;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:8;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:9;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:10;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:11;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:12;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:13;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:14;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:15;--k1:var(--c2);--k2:var(--c2)"></i></span><div class="sc"><span class="sr">Espagne 2, France 1</span><span class="tm" aria-hidden="true"><i class="fl es"></i>ESP</span><span class="nm h" aria-hidden="true"><span class="rl"><b>1</b><b>2</b></span></span><span class="sp" aria-hidden="true">–</span><span class="nm" aria-hidden="true"><span class="rl"><b>1</b></span></span><span class="tm" aria-hidden="true">FRA<i class="fl fr"></i></span></div><div class="ft"><span class="tx"><b>But de l'Espagne</b><small>78e minute · passe décisive d'Olga</small></span><button type="button" class="wv">Lancer la ola</button></div></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 résultats annoncent des buts toute la journée, et ce toast leur donne une ambiance de stade. Une petite tribune de 48 supporters en CSS se tient sous deux projecteurs, et chaque colonne se lève avec un léger retard pour que la vague la parcoure. Le score à domicile roule vers le nouveau chiffre avec un rebond. Pour les applis sportives et les directs.
Les deux couleurs sont celles de l'équipe à domicile : elles peignent le drapeau, les maillots du public et les écharpes levées pendant la vague. Le vrai score est dans une ligne masquée pour les lecteurs d'écran ; remplace équipes, minute et passe décisive par les données de ton match.