Online Web Clock (Compatibility version)

An online digital clock web app built with Bootstrap 4.6.2, focused on browser compatibility!
Note: This is designed to be compatible with ancient browsers. For modern browsers, check out the main repository!

Website: View it in your browser!

Table of Contents

• How to Run
• Features
• Gallery
• Acknowledgements (OSS)
• Acknowledgements (Fonts)

How to Run

1. Serve index.html at the root directory with your favorite web server.

Note: If you're interested in learning about the changes implemented for backwards compatibility, please read compatibility-changes.txt.

Features

Clock Mode

• Pick between 12 or 24-hour clock 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 Italicized font styles
• Light, regular, and bold font weights
• 5 different font sizes
• Text shadow customization

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
• Text color override - Set a custom clock text color

Menu Visibility

• Toggle displaying of the menu button

Importing/Exporting Settings

• Import and export generated JSON files containing all of your settings
  • Imported JSON files and settings are verified before applying.

Try out my personal config!

Using an AMOLED screen? Use this AMOLED preset to prevent burn-in!

Page Duration

• Page duration indicator on the menu shows time spent staring at and customizing the clock...

Gallery

Preview of the page

Menu options pane

Customization example

Like this look? See Importing/Exporting Settings for the config!

Acknowledgements (OSS)

• Bootstrap (Link): Licensed under MIT License

• core-js (GitHub): 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

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

Acknowledgements (Fonts)

• Dancing Script (Link): Licensed under SIL Open Font License 1.1

• Merriweather (Link): Licensed under SIL Open Font License 1.1

• Nanum Brush Script (Link): Licensed under SIL Open Font License 1.1

• Lato (Link): Licensed under SIL Open Font License 1.1

• Montserrat (Link): Licensed under SIL Open Font License 1.1

• Open Sans (Link): Licensed under SIL Open Font License 1.1

• Oswald (Link): Licensed under SIL Open Font License 1.1

• Pangolin (Link): Licensed under SIL Open Font License 1.1

• Poppins (Link): Licensed under SIL Open Font License 1.1

• Roboto (Link): Licensed under Apache License 2.0

• Tektur (Link): Licensed under SIL Open Font License 1.1

• 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