Toast de cambio de zona horaria
Al aterrizar, las agujas giran hasta la hora local y la esfera pasa de mañana a atardecer; puedes volver a la hora de casa.
Ajustes
Código
<div class="uvq09-tzn"><button type="button" class="fire">Aterrizar otra vez</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>Hora local actualizada</b><small class="z1">Tokio · 17:42 · 8 h más que en casa</small><small class="z2">Madrid · 9:42</small></span><button type="button" class="hm" aria-pressed="false">Hora de casa</button></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
Aterrizar en otra zona horaria es un momento que las apps de viaje pueden marcar con algo más que una línea de texto. Aquí un pequeño reloj de agujas da ocho vueltas con el minutero mientras la aguja de las horas avanza, y un degradado de atardecer aparece sobre la esfera de la mañana. Todo funciona con transiciones CSS de rotate y una curva elástica, sin script para la animación.
Los dos colores pintan el cielo del atardecer detrás de las agujas. El botón Hora de casa usa aria-pressed y cambia el subtítulo; ajusta los ángulos del CSS a ciudades reales o calcúlalos con JavaScript según la diferencia horaria.