A clock that tells the time using quotes from literature. Support for multiple languages, themes, and more!
https://literatureclock.netlify.app/
Based on the work of Johannes Enevoldsen (literature-clock) and Jaap Meijers (e-reader clock).
- Zen mode: remove all the distractions (perfect for screensaver usage) (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
color themesandspecial themesand each theme has light and dark variants, of course- Random color theme: see a different color theme each minute, isn't that even cooler? (link)
- Font personalization: if you don't like the default font of a theme, that's perfectly fine, we won't judge you, you can change it for another one!
- Progress bar: at the bottom of the page there is a
progress bar, so you can know when a quote is about to change - Responsive: no matter how long is a quote, it will always look good on desktop and mobile 😎
- Accessibility: All the quote elements have
aria-labels - 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: activate Zen modework: activate Work modescreensaver: activate Screensaver modelocale: set the localetheme: set the themetime: get the quotes for a particular time (link)quote: test a quote before submitting it (link). You don't need to escape the quote by adding the special characters, just write the quote and the browser will add themindex: get a specific quote from the array of quotes instead of a random one (for testing purposes)
All translations were made from the original CSV English file, sometimes the translation it's not accurate (I used Google Translate, yes, I know), and the time is not highlighted properly, but it's fine, this is something that can be fixed easily, just one quote at a time. Plus, I marked all the bad quotes with an asterisk so at some point all of them will be fixed.
In any case, 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)
- Create a fork of the project and fix the quotes (in the CSV files) marked with an asterisk, if you don't know how to create a fork, you can always download the CSV file (it's just a text file), update it locally and then send it back to me
- 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)
At the moment, the clock has seven color themes and four special themes, we expect to update or add more themes in the future! Here you can find some examples:
Base
| Light | Dark |
|---|---|
 |
|
Pink
| Light | Dark |
|---|---|
 |
 |
Orange
| Light | Dark |
|---|---|
 |
 |
Elegant
| Light | Dark |
|---|---|
 |
 |
Festive
| Light | Dark |
|---|---|
 |
 |
| Light | Dark |
|---|---|
 |
 |
Terminal
| Light | Dark |
|---|---|
 |
 |
To run the project you need to have Node and NPM installed on your system. Then, clone the project, install the dependencies, execute npm run dev and 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.
Hi! I'm Carlos and you can find me here
