España 2, Francia 1
Gol de EspañaMinuto 78 · asistencia de Olga
HTML + CSSToasts

Tor-Toast mit La Ola

Fällt ein Tor, springt der Spielstand um eins hoch und die Tribüne macht La Ola; ein Button lässt das Publikum sie wiederholen.

Einstellungen

16px
1x

Code

<div class="uvq09-gol"><button type="button" class="fire">Noch ein Tor</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">Spanien 2, Frankreich 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>Tor für Spanien</b><small>Minute 78 · Vorlage von Olga</small></span><button type="button" class="wv">La Ola starten</button></div></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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Toasts

Alle ansehen: Toasts

Wofür du ihn nutzen kannst

Liveticker-Apps melden den ganzen Tag Tore, und dieser Toast bringt Stadionstimmung hinein. Eine kleine Tribüne mit 48 Fans aus CSS liegt unter zwei Flutlichtern, und jede Spalte erhebt sich etwas später, sodass die Welle von einem Ende zum anderen läuft. Der Heimstand rollt mit federndem Sprung auf die neue Zahl. Passend für Sport-Apps, Fantasy-Ligen und Liveblogs.

Die beiden Farben gehören dem Heimteam: Sie färben Flagge, Trikots im Publikum und die Schals, die bei der Welle hochgehen. Der echte Spielstand steht in einer versteckten Zeile für Screenreader; tausche Teams, Minute und Vorlage gegen die Daten deines Spiels.