Hora con reloj de estación
Un campo de hora junto a un reloj de andén: las agujas giran con muelle y el segundero rojo se para cada minuto.
Ajustes
Código
<div class="uvq06-ck"><div class="fc" aria-hidden="true"><b style="--a:0deg" class="hr"></b><b style="--a:6deg"></b><b style="--a:12deg"></b><b style="--a:18deg"></b><b style="--a:24deg"></b><b style="--a:30deg" class="hr"></b><b style="--a:36deg"></b><b style="--a:42deg"></b><b style="--a:48deg"></b><b style="--a:54deg"></b><b style="--a:60deg" class="hr"></b><b style="--a:66deg"></b><b style="--a:72deg"></b><b style="--a:78deg"></b><b style="--a:84deg"></b><b style="--a:90deg" class="hr"></b><b style="--a:96deg"></b><b style="--a:102deg"></b><b style="--a:108deg"></b><b style="--a:114deg"></b><b style="--a:120deg" class="hr"></b><b style="--a:126deg"></b><b style="--a:132deg"></b><b style="--a:138deg"></b><b style="--a:144deg"></b><b style="--a:150deg" class="hr"></b><b style="--a:156deg"></b><b style="--a:162deg"></b><b style="--a:168deg"></b><b style="--a:174deg"></b><b style="--a:180deg" class="hr"></b><b style="--a:186deg"></b><b style="--a:192deg"></b><b style="--a:198deg"></b><b style="--a:204deg"></b><b style="--a:210deg" class="hr"></b><b style="--a:216deg"></b><b style="--a:222deg"></b><b style="--a:228deg"></b><b style="--a:234deg"></b><b style="--a:240deg" class="hr"></b><b style="--a:246deg"></b><b style="--a:252deg"></b><b style="--a:258deg"></b><b style="--a:264deg"></b><b style="--a:270deg" class="hr"></b><b style="--a:276deg"></b><b style="--a:282deg"></b><b style="--a:288deg"></b><b style="--a:294deg"></b><b style="--a:300deg" class="hr"></b><b style="--a:306deg"></b><b style="--a:312deg"></b><b style="--a:318deg"></b><b style="--a:324deg"></b><b style="--a:330deg" class="hr"></b><b style="--a:336deg"></b><b style="--a:342deg"></b><b style="--a:348deg"></b><b style="--a:354deg"></b><i class="h"></i><i class="m"></i><i class="s"></i><i class="ct"></i></div><div class="sd"><label for="uvq06-ck-in">Hora de salida</label><input id="uvq06-ck-in" type="time" step="300"><div class="ch"><button type="button" data-a="0">Ahora</button><button type="button" data-a="15">+15 min</button><button type="button" data-a="60">+1 h</button></div></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 Inputs
Ver todos: InputsDónde usarlo
Un campo de hora nativo acompañado de un reloj de estación de tren dibujado en CSS: sesenta marcas, agujas de barra negras y el segundero rojo con disco que recorre la esfera en cincuenta y ocho segundos y se detiene arriba. Al escribir una hora, o pulsar Ahora, más quince minutos o más una hora, las agujas giran con muelle y siempre por el camino corto.
El color principal pinta el segundero y el secundario las agujas y las marcas, así que una versión azul marino o dorada sale en segundos. Úsalo en horas de salida, franjas de recogida y recordatorios, donde ver la hora en una esfera es más rápido que leer cifras.