HTML Watch recreation of a fruit smartwatch, WITH burn in prevention.
This is a recreation of a certain companies' smart watch but with some fun additions.
New! Go to andiohn.github.io/fruit-html-watch to use!
The new configuration app here can be installed on your device and it works better this way too. It's a Progressive Web App.
- Liquid Glass background
- Can use any image URL as the background by passing in a url flag, along with tile, cover and center modes
- A second image can be chosen too, to help with burn in prevention. Just pass the same flags but with a 2 at the end.
- Can use any colour as a background instead of an image, turned on with a URL flag too
- Date can be turned on with a URL flag too
- Hours of automatic reload are added with a flag.
URL Flags
| Flag | Value | Description | Default |
|---|---|---|---|
| ?bg_img= | [URL] | Full URL of a background image (e.g., .jpg, .png). | None |
| ?bg_mode= | tile, center, cover | How the background image is displayed. | center |
| ?bg_img2= | [URL] | Full URL of a second background image (e.g., .jpg, .png). | None |
| ?bg_mode2= | tile, center, cover | How the second background image is displayed. | center |
| ?bg= | [HEX or Color Name] | Sets the color of the translucent "Liquid Glass" clock face. | #000000 (Black) |
| ?date= | show or hide | Toggles the visibility of the date and day of the week. | hide |
| ?reload_h= | # of Hours | Set the interval of an automagic reload, without cache | 12 hours |
| ?clock_bg_img= | [URL] | Set unblurred clock background | None (try https://gifroz.vercel.app) |
| ?clock_bg_mode= | tile, center, cover | How the clock background image is displayed. | center |
| ?blur= | # of blur | Amount of clock background blur, good with gif backgrounds... | 15 |
EXAMPLES(Presets):
| Descriptions | Link |
|---|---|
| MULTI - Using 2 randoms (on each load!) from https://picsum.photos/ date on, 1 hour reload, cover image | Preset 1 |
| MULTI - Example 1 and Grey Linen, date on, reload 2 hour, cover image | Preset 2 |
| 1 Hour Reload Random image from imageipsum.com, 1920x1080,cover,date on | Preset 3 |
| Stupid 1 Hour RANDOM gif bg from Onyx-Nostalgia/gifroz,center,date off | Preset 4 |
| MULTI - Example 1 and Grey Linen, gif clock background, date on, reload 2 hour, cover image | Preset 5 |
| Awesome Mac OS default wallpaper, date on, cover image | Preset 6 |
| iPad iOS 13 Image background, date on, center image | Preset 7 |
| Mac OS Sequoia (Large) background, date on, cover image | Preset 8 |
| Classic Mac OS Grey Linen background, date off | Preset 9 |
| iPhone Background, date on, tile image | Preset 10 |
