Toast mit Regen pro Minute
Warnt vor Regen mit einem Balkendiagramm Minute für Minute, das beim Erscheinen wächst, und einer Erinnerung zum Einschalten.
Einstellungen
Code
<div class="uvq09-rdr"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="status"><div class="hd"><span class="ic" 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="M7 15.5a4.5 4.5 0 0 1-.4-9A6 6 0 0 1 18 8a3.8 3.8 0 0 1-.5 7.5z"/></svg><i></i><i></i><i></i></span><span class="tx"><b>Regen in 15 Minuten</b><small>Mäßig von 18:15 bis 18:40</small></span><button type="button" class="bl" aria-pressed="false" aria-label="Benachrichtige mich, wenn es anfängt"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg></button></div><div class="ch" aria-hidden="true"><i class="z" style="--h:4%;--i:0"></i><i class="z" style="--h:4%;--i:1"></i><i class="z" style="--h:4%;--i:2"></i><i class="z" style="--h:4%;--i:3"></i><i class="z" style="--h:4%;--i:4"></i><i class="z" style="--h:4%;--i:5"></i><i style="--h:12%;--i:6"></i><i style="--h:24%;--i:7"></i><i style="--h:40%;--i:8"></i><i style="--h:58%;--i:9"></i><i style="--h:74%;--i:10"></i><i style="--h:88%;--i:11"></i><i style="--h:95%;--i:12"></i><i style="--h:84%;--i:13"></i><i style="--h:66%;--i:14"></i><i style="--h:52%;--i:15"></i><i style="--h:44%;--i:16"></i><i style="--h:36%;--i:17"></i><i style="--h:26%;--i:18"></i><i style="--h:18%;--i:19"></i><i style="--h:11%;--i:20"></i><i style="--h:6%;--i:21"></i><i class="z" style="--h:4%;--i:22"></i><i class="z" style="--h:4%;--i:23"></i></div><div class="ax" aria-hidden="true"><span>Jetzt</span><span>30 min</span><span>60 min</span></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.
Mehr aus Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Wetter-Apps haben das Regendiagramm für die nächste Stunde bekannt gemacht, und es erklärt eine Vorhersage schneller als Worte. Dieser Toast kombiniert eine Wolke mit fallenden Tropfen, eine kurze Zusammenfassung und 24 Balken, die über gestaffelte CSS-Übergänge nacheinander wachsen. Eine Glocke mit aria-pressed lässt Leute eine Erinnerung anfordern. Gut für Wetterdienste, Events im Freien und Lieferplanung.
Die Hauptfarbe füllt Balken und Symbol, die zweite markiert die Minuten ohne Regen. Ersetze das Datenarray durch echte Werte aus deiner API und passe die Achsenbeschriftung an, wenn du einen anderen Zeitraum zeigst.