Uhrzeit mit Bahnhofsuhr
Ein Zeitfeld neben einer Bahnhofsuhr: Die Zeiger federn bei jeder Änderung herum, der rote Sekundenzeiger pausiert jede Minute.
Einstellungen
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">Abfahrtszeit</label><input id="uvq06-ck-in" type="time" step="300"><div class="ch"><button type="button" data-a="0">Jetzt</button><button type="button" data-a="15">+15 min</button><button type="button" data-a="60">+1 h</button></div></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 Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
Ein natives Zeitfeld zusammen mit einer Bahnhofsuhr aus CSS: sechzig Striche, schwarze Balkenzeiger und die rote Kelle als Sekundenzeiger, der in achtundfünfzig Sekunden umläuft und oben kurz stehen bleibt. Wer eine Zeit tippt oder auf Jetzt, plus fünfzehn Minuten oder plus eine Stunde tippt, sieht die Zeiger federnd und immer auf dem kurzen Weg drehen.
Die Hauptfarbe färbt den Sekundenzeiger, die zweite Farbe Zeiger und Striche, so ist eine marineblaue oder messingfarbene Version schnell gemacht. Nutze es für Abfahrtszeiten, Abholfenster und Erinnerungen, wo ein Zifferblatt schneller lesbar ist als Ziffern.