HTML + CSSChamps

Heure avec horloge de gare

Un champ d'heure à côté d'une horloge de quai : les aiguilles tournent avec ressort et la trotteuse rouge marque une pause chaque minute.

Réglages

16px
1x

Code

<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">Heure de départ</label><input id="uvq06-ck-in" type="time" step="300"><div class="ch"><button type="button" data-a="0">Maintenant</button><button type="button" data-a="15">+15 min</button><button type="button" data-a="60">+1 h</button></div></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Champs

Voir tout : Champs

Où l’utiliser

Un champ d'heure natif accompagné d'une horloge de gare dessinée en CSS : soixante repères, des aiguilles en barres noires et la trotteuse rouge à palette qui fait le tour en cinquante-huit secondes puis s'arrête en haut. Taper une heure, ou toucher Maintenant, plus quinze minutes ou plus une heure, fait tourner les aiguilles avec un ressort et toujours par le chemin le plus court.

La couleur principale peint la trotteuse et la secondaire les aiguilles et repères, pour une version bleu marine ou laiton en quelques secondes. Utilise-le pour des heures de départ, des créneaux de retrait et des rappels, quand un cadran se lit plus vite que des chiffres.