Linear clock

Live clock

A horizontal (desktop) or vertical (mobile) view of the local day, with night, civil twilight, daylight and a live current-time marker. Add locations with +, edit their names, remove them with x, or select a date. Clear the date to return to today in each location. Locations are shareable through repeated location URL parameters.

Run

This is a static site: no build step or npm installation is required. Open index.html in a browser, or serve this directory with any static HTTP server. Network access is needed for geocoding (OpenStreetMap Nominatim), solar events (Sunrise-Sunset.org API v1) and optional initial IP location (ipapi.co). IP location is skipped when the URL already has locations.

Code

• index.html: page structure and script loading.
• styles.css: existing responsive layout and colours.
• clock.js: pure local-day, hour-marker and solar-segment calculations.
• app.js: DOM, location/date state, API requests and timer lifecycle.
• luxon.min.js, tz.js: original bundled third-party libraries, unchanged.

The timeline represents elapsed time between local midnights, not an assumed 24-hour day. Spring DST days can have 23 hours, autumn days 25; half-hour changes are supported too. Labels use actual local times. A repeated hour appears twice; its tooltip includes the date and UTC offset. Solar timestamps are converted from UTC to the location's zone using Luxon and the browser's IANA timezone data. Keeping the browser current matters when governments change timezone rules.

The current marker is shown only on the location's current date. In automatic mode, local midnight refreshes the solar data; an explicit date stays fixed. Changing a location/date or removing a bar cancels its previous requests and clears its timer. Responses from superseded renders are ignored even if they arrive after cancellation. Geocoding is reused for unchanged locations.

Solar segments are clipped to the displayed day. Polar epoch placeholders are ignored; day_length distinguishes polar day/night, including civil twilight where available. Incomplete or inconsistent event sequences that cannot be represented safely show unavailable data rather than invented daylight. Solar accuracy and unusual polar-transition data remain limited by the external v1 API; this project does not calculate astronomical events itself.

Tests

Use Node.js 22 or newer. No test dependencies or live API calls are needed:

npm test
npm run test:coverage

Tests cover DST in Europe/Berlin, America/New_York and Australia/Lord_Howe, fractional-offset zones, skipped calendar dates, UTC conversion, solar clipping, polar cases, local midnight, date overrides, stale responses, timer cleanup, location controls, URL preservation, text-safe rendering and API failures. Integration tests execute the real application against a small DOM fixture and mocked network/clock. They do not test browser layout, CSS or actual API uptime. For visual checks, inspect desktop and mobile widths, add/remove several bars, and select Berlin's 2026-03-29 and 2026-10-25 DST dates.