Clock Widget

A minimal, configurable web clock widget with animated visuals and emoji themes. Drop the files into any static site or open index.html to run locally. The project focuses on clarity, small size, and easy customization.

Features

• Animated clock visuals (see animations.js).
• Multiple controls and configurable settings (controls.js, settings.js).
• Emoji support and small decorative customizations (emoji.js).
• Clean, modular JavaScript split across files: clock.js, constants.js, etc.
• Works as a standalone page or can be embedded in other sites.

Usage

• To run locally, open index.html or serve the folder with a static server.
• Customize visual settings in styles/main.css.
• Edit defaults and behavior in settings.js and constants.js.
• Use controls.js to wire up or change UI controls.

If you want to embed the clock on another site, copy the required HTML and the scripts/ and styles/ folders, then include the widget markup in your page.

Files of interest

• index.html — demo/entry page for the widget.
• styles/main.css — primary styles for layout and appearance.
• scripts/clock.js — main clock logic and rendering.
• scripts/animations.js — animation helpers and effects.
• scripts/controls.js — user controls and event wiring.
• scripts/settings.js — runtime settings and preferences.
• scripts/constants.js — central constants and configuration values.
• scripts/emoji.js — optional emoji decorations.

Customization tips

• Styles: edit styles/main.css to change colors, fonts, or layout.
• Behavior: edit scripts/settings.js to change default modes, timezone adjustments, or emoji toggles.
• Extend: add new animations in scripts/animations.js and call them from scripts/clock.js.

Credits

Inspired By: https://www.relaxingclock.com