Skip to content

worm-blossom/seasonal-hours-clock

This branch is 52 commits ahead of cinnamon-bun/seasonal-hours-clock:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

bdd95fe · Aug 17, 2023

History

85 Commits
Jan 16, 2021
Aug 8, 2023
Aug 16, 2023
Apr 11, 2021
Aug 16, 2023
Aug 4, 2023
Apr 11, 2021
Aug 4, 2023
Apr 11, 2021
Aug 4, 2023

Repository files navigation

Seasonal Hours Clock

See it live

It would be nice if the 24 hours of UTC time each had a short memorable name. It would make it easier to plan chats with distant friends, since the hour-names would be synchronized around the world.

Let's choose a theme like... seasons of the year, just to be confusing. :) Squish a year into 24 hours starting with the winter solstice at UTC 00, which we'll call The Candle Hour.

This repo is a simple website that draws a 24-hour clock showing your local time, the seasonal hour name, and the UTC hour.

Outer numbers: local time, with noon at top and midnight at bottom.

Faint inner numbers: UTC time.

Colorful ring: the seasonal name of each hour. Winter is blue, spring is green, summer is yellow, autumn is orange.

The colored pie chart in the middle shows sunset times: daylight, dusk, and night. The hour hand is the sun traveling across the sky.

You can highlight certain hours by adding search parameters of the form hl=<integer> or hl=<hour name> to the url, for example https://seasonalclock.org/?hl=6&hl=rainbow to highlight sprout hour (UTC+6) and rainbow hour.

You can specify a latitude and longitude in the url that is used for displaying sun hours, by adding search parameters of the form lat=<float> and lon=<float> to the url (both have to be present), for example https://seasonalclock.org/?lat=52.31&lon=13.24.

You can specify an offset from utc in the url to override the time displayed in the outer circle, by adding a parameter offset=<float> to the url, for example https://seasonalclock.org/?offset=5. Combine this with setting latitude and longitude to create links that show local time and sun hours for arbitrary locations:

You can rotate the full display by adding a search parameter of the form rotate=<hours> to the url. By default, noon is at the top of the screen, but setting the rotation to 12 moves midnight to the top: https://seasonalclock.org/?rotate=12


seasonal-hours.ts has a complete listing of hour names.

This concept originated in Twodays Crossing, an Earthstar chat app.

This clock was created by @cinnamon-bun. We miss you.

About

A global clock with non-numerical hours created by @cinnamon-bun

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 56.4%
  • CSS 24.9%
  • HTML 18.7%