Toast für Zeitzonenwechsel
Nach der Landung drehen sich die Zeiger auf Ortszeit und das Zifferblatt wechselt von Morgen zu Abend; die Heimatzeit lässt sich zurückholen.
Einstellungen
Code
<div class="uvq09-tzn"><button type="button" class="fire">Erneut landen</button><div class="tt" role="status"><span class="clk" aria-hidden="true"><i class="hh"></i><i class="mm"></i><i class="ct"></i></span><span class="tx"><b>Ortszeit aktualisiert</b><small class="z1">Tokio · 17:42 · 8 Std. vor zu Hause</small><small class="z2">Madrid · 9:42</small></span><button type="button" class="hm" aria-pressed="false">Heimatzeit</button></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
Die Landung in einer anderen Zeitzone ist ein Moment, den Reise-Apps mit mehr als einer Textzeile markieren können. Hier dreht eine kleine Analoguhr den Minutenzeiger acht volle Runden, während der Stundenzeiger vorrückt, und ein Abendverlauf blendet sich über das morgendliche Zifferblatt. Alles läuft über CSS-Übergänge mit rotate und federnder Kurve, ganz ohne Skript für die Animation.
Die beiden Farben malen den Abendhimmel hinter den Zeigern. Der Schalter Heimatzeit nutzt aria-pressed und tauscht den Untertitel; passe die Winkel im CSS an echte Städte an oder setze sie per JavaScript mit der Zeitverschiebung.