Digitaluhr-Weckerschalter
Ein Uhren-LCD mit Geistersegmenten: Die Glocke wird beim Aktivieren dunkel, und beim Drücken leuchtet die Hintergrundbeleuchtung.
Einstellungen
Code
<label class="uvq03-lcd"><input type="checkbox" role="switch"><span class="cs"><span class="bt"></span><span class="sc"><span class="dg"><b class="gs">88:88</b><b class="d">07:30</b></span><span class="ic"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0-6 6v4l-2 3h16l-2-3V9a6 6 0 0 0-6-6zm-2.2 15a2.2 2.2 0 0 0 4.4 0z"/></svg><b>AL</b></span></span></span>Täglicher Wecker</label>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 Schalter
Alle ansehen: SchalterWofür du ihn nutzen kannst
Angelehnt an klassische Digitaluhren aus Kunstharz zeigt dieser Schalter ein kleines grünliches LCD, hinter der Uhrzeit schimmern die Segmente 88:88. Beim Einschalten erscheinen Glocke und AL-Anzeige, die Glocke klingelt kurz, und solange du drückst, geht eine türkise Beleuchtung an wie beim Lichtknopf einer echten Uhr. Gut für Wecker, Erinnerungen und Timer.
Die Hauptfarbe ist die Beleuchtung, die zweite tönt das Displayglas. Ersetze 07:30 im HTML durch eine beliebige Uhrzeit und bleib bei einer Monospace-Schrift, damit die Ziffern über den Geistersegmenten liegen.