Tageszeit-Filter mit Himmel
Wähle Morgen, Mittag, Nachmittag oder Nacht, und der Himmel wechselt die Farbe, während Sonne oder Mond wandern.
Einstellungen
Code
<fieldset class="uv-fdy"><legend>Um wie viel Uhr?</legend><div class="sky" aria-hidden="true"><i class="orb"></i><i class="hz"></i></div><div class="op"><label><input type="radio" name="uv-fdy"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 17h16M7.5 17a4.5 4.5 0 0 1 9 0M12 6.5V9M5.6 10.3l1.6 1.4M18.4 10.3l-1.6 1.4"/></svg>Morgen</span></label><label><input type="radio" name="uv-fdy"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.5V5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg>Mittag</span></label><label><input type="radio" name="uv-fdy" checked><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 15h16M8 15a4 4 0 0 1 8 0M7 19h10M12 5v3"/></svg>Nachmittag</span></label><label><input type="radio" name="uv-fdy"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10z"/></svg>Nacht</span></label></div></fieldset>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 Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Buchungen für Restaurants, Touren, Kurse und Lieferungen fragen oft nach dem Wann, nicht nur nach dem Tag. Dieser Filter macht daraus eine kleine Szene: Der Himmel über den vier Optionen wechselt von Morgenrosa über kräftiges Blau und Abendorange bis zur Nacht, während die Sonne ihren Bogen zieht und nachts zum Mond mit Sternen wird.
Die Farben animieren über registrierte CSS-Eigenschaften, die Szene reagiert per :has auf die Radiobuttons, ganz ohne Skript. Die Hauptfarbe markiert die aktive Option und passt zu hellen und dunklen Seiten.