/web-clock-compatibility

Online clock web app on steroids, built with compatibility in mind!

Primary LanguageJavaScript

forthebadge forthebadge

forthebadge

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

  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

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!

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