Skip to content

Latest commit

 

History

History
104 lines (79 loc) · 4.13 KB

README.md

File metadata and controls

104 lines (79 loc) · 4.13 KB

web-clock

Online digital clock web app built on Bootstrap 5.3 with customizability in mind!
Inspired by online-clock by tmasri

Check it out in action! (Website)

Features

Clock Mode

Pick between 12 and 24-hour modes

Clock Display

Display the time in 7 different methods (Radix/Conversions)
Add a box/bottom border to the clock container (solid, dashed, dotted, double)
Toggle seconds progress bar below clock

Date Format and Alignment

Set 4 different date formats (or disable!)
Date position alignment (left, center, and right)

Font Customization

13 predefined font families, or system default
Set custom font from installed system fonts
Regular and Italic font styles
Light, regular, and bold font weights
5 different font sizes
Text shadow customization
Text blur/softening filter

Background Theme

Color fade mode - Automatically transitions between 6 colors
Solid color mode - Choose from 33 different colors
Background image mode - Upload and set a custom image from your device + change sizing and blurring
Text color override - Set a custom clock text color

Menu Visibility

Toggle displaying of the menu button

Importing/Exporting Settings

Download and upload generated JSON files containing all of your settings

  • On import, JSON files and settings are verified before applying

Try out my personal config!

Page Duration

Text at the bottom of the menu shows you how much time you've wasted staring at and customizing the clock...

Gallery

Preview of the page

A screenshot of the main web clock page. The time 6:19 PM and date of 7/18/2023 is shown against a white background.

Menu options pane

A screenshot of the menu options panel. The "Clock Settings" section is opened.

Customization example

A screenshot of the main web clock page with many customizations applied, such as custom font, background color, and date format.
Like this look? See Importing/Exporting Settings for the config!

How to run

Step 1: Start your favorite web server software and host index.html at the root directory

  • Info: This page can run offline since all CSS and JS is included locally. Please note that Google Analytics and OpenGraph meta info is included in index.html!

Step 2: Congratuations! You're done! :)

Credits (Open Source)

Bootstrap (Link)

  • Licensed under MIT License

Iconify (Link)

  • Licensed under MIT License

Material Design Icons by Pictogrammers (GitHub)

  • Licensed under Apache License 2.0

Luxon (GitHub)

  • Licensed under MIT License

number-to-words (GitHub)

  • Licensed under MIT License

Social Buttons for Bootstrap (GitHub)

  • Licensed under MIT License

Each license can be found in the code's respective files or website.

Credits (Fonts)

Lato (Link)

  • Licensed under SIL Open Font License

Montserrat (Link)

  • Licensed under SIL Open Font License

Open Sans (Link)

  • Licensed under SIL Open Font License

Oswald (Link)

  • Licensed under SIL Open Font License

Poppins (Link)

  • Licensed under SIL Open Font License

Roboto (Link)

  • Licensed under Apache License 2.0

Ubuntu (Link)

  • Licensed under Ubuntu Font License 1.0

Ubuntu Mono (Link)

  • Licensed under Ubuntu Font License 1.0

Each license can be found in their respective folders in /fonts