A clock for book lovers that tells the time using quotes from literature. Support for multiple languages, themes, and more!
Based on the work of Johannes Enevoldsen (literature-clock) and Jaap Meijers (e-reader clock).
- Zen mode: remove all the distractions (link)
- Work mode: only shows quotes that are safe for work (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 themesandspecial themesand 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
- Share your favourite quotes across your social media!
- 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
fontparam! - Progress bar: why? because it is cute :) (you can disable it if you don't like cute things, no problem)
- 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
The clock can be controlled using URL parameters, these parameters will overwrite the existing configuration
zen: enable/disable Zen modework: enable/disable Work modescreensaver: enable/disable Screensaver modelocale: set the localerandom-locale: set random localetheme: set the themefont: set a custom font from Google Fonts (it will be available on the font selector input!)fade: enable/disable fade effectprogressbar: enable/disable progressbarshow-time: enable/disable the time at the top of the screenstatic: get rid of the menu and control the clock only with query parameters!
Developer settings
time: get the quotes for a particular time (link)quote: test a quote before submitting it (link) (it is no necessary to escape the quote by adding the special characters, just write the quote and the browser will add them)index: get a specific quote from the array of quotes instead of a random one
There is support for the following languages (by default, it will try to use the system language):
- English
- Spanish
- Portuguese
- French
- Italian
Want to implement a new language? Sure thing, ping me and let's talk about it!
Translations
All translations were made from the original CSV English file, sometimes the translations are not accurate (I used Google Translate, yes, I know), but it's fine, this is something that can be fixed easily, just one quote at a time. :) So far, these are the times that don't have quotes:
- 06:07
- 06:18
- 08:21
- 10:28
- 11:46
- 12:31
- 13:36
- 18:44
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
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:
- Mac OS: Mac OS X Screen Saver powered by a Web View (https://github.com/liquidx/webviewscreensaver)
- Windows: Set Webpage as Screensaver in Windows 10 (https://www.youtube.com/watch?v=UovZwUlwwEs)
- Linux: Live Webpage as a Desktop Wallpaper on KDE Desktop (https://www.youtube.com/watch?v=_v1sJhBu25o)
To run the project you need to have Python, Node and NPM installed on your system.
- Clone the project
- Install NPM dependencies
- Run
npm run generate-timesto generate all the quote files - Run
npm run devand voila! The clock will be automatically opened in your favorite browser.
I used Python to generate the JSON files (one per time if the time has quotes) with the quotes. The script goes through all the CSV files (one per locale) and puts the files in the appropriate folders. Also, the script generates an additional JSON file with statistics per locale, such as the times with fewer quotes, the author with the most quotes, etc.
To generate the times, simply run python .\scripts\generate_times.py in the root folder. By default, the script will generate all the JSON files, if you want to generate the JSON files for a particular locale you can add it as a parameter, i.e. .\scripts\generate_times.py en-US.
This project is possible thanks to the following projects:
Hi! I'm Carlos and you can find me here
