Skip to content

Latest commit

 

History

History
100 lines (66 loc) · 4.33 KB

README.md

File metadata and controls

100 lines (66 loc) · 4.33 KB
Raw

Word O’Clock

Features

  • Zen mode: remove all the distractions (link)
  • Screensaver mode: make the quotes dance around the screen! (link)
  • Languages: supports English, Spanish, Portuguese, French, and Italian (by default, it will try to use the system language)
    • Random language: see a quote in a different language each minute, isn't that cool? (link)
  • Themes: the clock has colour themes and special themes and each theme has light and dark variants, of course
    • Random colour theme: see a different colour theme each minute, isn't that even cooler? (link)
  • Fade effect
  • Font personalization: if you don't like the default font of a theme, that's perfectly fine, we won't judge you, so you can change it for another using the font param!
  • Responsive: no matter how long a quote is, it will always look good on desktop and mobile 😎
  • Static mode: get rid of all the javascript event listener an control the clock only with query parameters
  • All the settings are saved in the browser's local storage and they are updated in the URL without refreshing the page, thanks to History API

Settings

The clock can be controlled using URL parameters, these parameters will overwrite the existing configuration

  • zen: enable/disable Zen mode
  • screensaver: enable/disable Screensaver mode
  • locale: set the locale
  • theme: set the theme
  • font: set a custom font from Google Fonts (it will be available on the font selector input!)
  • fade: enable/disable fade effect
  • show-time: enable/disable the time at the top of the screen
  • static: get rid of the menu and control the clock only with query parameters!

Developer settings

  • time: get the quotes for a particular time (link)

Languages

There is support for 15 languages (by default, it will try to use the system language).

Want to implement a new language? Sure thing, ping me and let's talk about it!

Contribute

If you want to help you can:

  • Raise an issue to add a new quote or a new variant for a specific time
  • Raise an issue reporting a bug related to a quote (i.e. a typo)
  • Contact me and share your thoughts about a quote, the project, or anything you want :D
  • Show me your love in the form of coffees, cafecitos
  • Be my Patreon

Screensaver

If you want to use this clock as a screensaver there are several ways to address this, although, it depends on the OS. I'm currently using the Mac OS solution and it worked like a charm. You can find more information here:

Themes

Some nice themes, locale and font combinations!

Photo

https://clockception.netlify.app/?theme=photo-system

Fuzzy Fuzzy + Solid
image image

Development

Web

To run the project you need Node and NPM installed on your system.

  1. Clone the project
  2. Install NPM dependencies
  3. Run npm run dev and voila! The clock will be automatically opened in your favorite browser.

Technology stack

This project is possible thanks to the following projects:

Credits

Contact

Hi! I'm Carlos and you can find me here