Digital watch alarm toggle
A watch LCD with ghost segments: the bell icon darkens when the alarm is set, and pressing it lights the backlight.
Settings
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>Daily alarm</label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toggles
See all TogglesWhere to use it
Inspired by classic resin digital watches, this switch shows a small greenish LCD with faint 88:88 ghost segments behind the time. Turning it on darkens the bell and the AL marker, the bell gives a short ring, and holding it down turns on a cyan backlight like the light button on a real watch. It works well for alarms, reminders and timers.
The main color is the backlight and the second one tints the LCD glass. Replace 07:30 in the HTML with any time, and keep a monospace font so the digits stay aligned with the ghost segments.