Toast de changement de fuseau horaire
À l'atterrissage, les aiguilles filent vers l'heure locale et le cadran passe du matin au soir ; retour possible à l'heure de chez soi.
Réglages
Code
<div class="uvq09-tzn"><button type="button" class="fire">Atterrir à nouveau</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>Heure locale mise à jour</b><small class="z1">Tokyo · 17:42 · 8 h de plus qu'à la maison</small><small class="z2">Madrid · 9:42</small></span><button type="button" class="hm" aria-pressed="false">Heure de chez soi</button></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
Atterrir dans un autre fuseau horaire est un moment que les applis de voyage peuvent marquer autrement que par une ligne de texte. Ici une petite horloge à aiguilles fait faire huit tours complets à la grande aiguille pendant que la petite avance, et un dégradé de crépuscule apparaît sur le cadran du matin. Tout repose sur des transitions CSS de rotate avec une courbe à ressort.
Les deux couleurs peignent le ciel du soir derrière les aiguilles. Le bouton Heure de chez soi utilise aria-pressed et change le sous-titre ; adapte les angles du CSS à de vraies villes ou calcule-les en JavaScript selon le décalage horaire.