# ait0xin/world-time-clock architecture

> Architecture diagram of the GitHub repository ait0xin/world-time-clock, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ait0xin/world-time-clock
- Repository: https://github.com/ait0xin/world-time-clock

## Overview

This is a single-page world-time watch, implemented in `index.html`. The user selects a home city or changes it with the pusher or keyboard; the watch updates its city and hour rings, day/night band, and home-time hands. Its clock synchronizes against three independent time sources, accepting a source only when another agrees, and reports the winner in the document title. The README also documents dark-backdrop and home-city persistence, plus a fixed-time query option. Source excerpts were unavailable, so the diagram reflects documented behavior rather than inspected call sites.

Main entry points: [`index.html`](https://github.com/ait0xin/world-time-clock/blob/main/index.html) (Atomic Time Sync)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_watch["Watch Display"]
  node_watch_display["Watch Display<br/>[index.html]"]
  node_city_ring["City Ring<br/>[index.html]"]
  node_hour_ring["24-Hour Ring<br/>[index.html]"]
  node_day_night["Day/Night Band<br/>[index.html]"]
  node_home_hands["Home-Time Hands<br/>[index.html]"]
  node_title_readout["Document Title<br/>[index.html]"]
end

subgraph group_interaction["Controls &amp; State"]
  node_controls["City &amp; Backdrop Controls<br/>[index.html]"]
  node_state_persistence["Preference Persistence<br/>[index.html]"]
end

subgraph group_timing["Time Synchronization"]
  node_clock_sync["Atomic Time Sync<br/>[index.html]"]
  node_fixed_time["Fixed-Time Query<br/>[index.html]"]
end

node_user(("User"))
node_local_storage[("localStorage")]
node_cookie[("Cookie")]
node_worldtimeapi["worldtimeapi.org"]
node_timeapi["timeapi.io"]
node_serving_origin["Serving Origin Date"]

node_user -->|"clicks or presses"| node_controls
node_controls -->|"selects home city"| node_city_ring
node_controls -->|"toggles backdrop"| node_watch_display
node_controls -->|"saves preferences"| node_state_persistence
node_state_persistence -->|"reads and writes"| node_local_storage
node_state_persistence -->|"writes backdrop"| node_cookie
node_clock_sync -->|"queries time"| node_worldtimeapi
node_clock_sync -->|"queries time"| node_timeapi
node_clock_sync -->|"requests Date header"| node_serving_origin
node_worldtimeapi -->|"returns time"| node_clock_sync
node_timeapi -->|"returns time"| node_clock_sync
node_serving_origin -->|"returns Date header"| node_clock_sync
node_fixed_time -.->|"overrides instant"| node_clock_sync
node_clock_sync -->|"supplies current time"| node_city_ring
node_clock_sync -->|"supplies current time"| node_hour_ring
node_clock_sync -->|"supplies home time"| node_day_night
node_clock_sync -->|"supplies home time"| node_home_hands
node_clock_sync -->|"reports sync result"| node_title_readout

click node_watch_display "https://github.com/ait0xin/world-time-clock/blob/main/index.html"
click node_city_ring "https://github.com/ait0xin/world-time-clock/blob/main/index.html"
click node_hour_ring "https://github.com/ait0xin/world-time-clock/blob/main/index.html"
click node_day_night "https://github.com/ait0xin/world-time-clock/blob/main/index.html"
click node_home_hands "https://github.com/ait0xin/world-time-clock/blob/main/index.html"
click node_controls "https://github.com/ait0xin/world-time-clock/blob/main/index.html"
click node_state_persistence "https://github.com/ait0xin/world-time-clock/blob/main/index.html"
click node_clock_sync "https://github.com/ait0xin/world-time-clock/blob/main/index.html"
click node_title_readout "https://github.com/ait0xin/world-time-clock/blob/main/index.html"
click node_fixed_time "https://github.com/ait0xin/world-time-clock/blob/main/index.html"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_watch_display,node_city_ring,node_hour_ring,node_day_night,node_home_hands,node_title_readout,node_user toneBlue
class node_controls,node_state_persistence,node_local_storage,node_cookie toneAmber
class node_clock_sync,node_fixed_time,node_worldtimeapi,node_timeapi toneMint
class node_serving_origin toneIndigo
```

## Components

### Watch Display

- [Watch Display](https://github.com/ait0xin/world-time-clock/blob/main/index.html): `index.html`
- [City Ring](https://github.com/ait0xin/world-time-clock/blob/main/index.html): `index.html`
- [24-Hour Ring](https://github.com/ait0xin/world-time-clock/blob/main/index.html): `index.html`
- [Day/Night Band](https://github.com/ait0xin/world-time-clock/blob/main/index.html): `index.html`
- [Home-Time Hands](https://github.com/ait0xin/world-time-clock/blob/main/index.html): `index.html`
- [Document Title](https://github.com/ait0xin/world-time-clock/blob/main/index.html): `index.html`

### Controls & State

- [City & Backdrop Controls](https://github.com/ait0xin/world-time-clock/blob/main/index.html): `index.html`
- [Preference Persistence](https://github.com/ait0xin/world-time-clock/blob/main/index.html): `index.html`

### Time Synchronization

- [Atomic Time Sync](https://github.com/ait0xin/world-time-clock/blob/main/index.html): `index.html`
- [Fixed-Time Query](https://github.com/ait0xin/world-time-clock/blob/main/index.html): `index.html`

### Other components

- **User**
- **localStorage**
- **Cookie**
- **worldtimeapi.org**
- **timeapi.io**
- **Serving Origin Date**

## Connections

- User → City & Backdrop Controls: clicks or presses
- City & Backdrop Controls → City Ring: selects home city
- City & Backdrop Controls → Watch Display: toggles backdrop
- City & Backdrop Controls → Preference Persistence: saves preferences
- Preference Persistence → localStorage: reads and writes
- Preference Persistence → Cookie: writes backdrop
- Atomic Time Sync → worldtimeapi.org: queries time
- Atomic Time Sync → timeapi.io: queries time
- Atomic Time Sync → Serving Origin Date: requests Date header
- worldtimeapi.org → Atomic Time Sync: returns time
- timeapi.io → Atomic Time Sync: returns time
- Serving Origin Date → Atomic Time Sync: returns Date header
- Fixed-Time Query → Atomic Time Sync: overrides instant
- Atomic Time Sync → City Ring: supplies current time
- Atomic Time Sync → 24-Hour Ring: supplies current time
- Atomic Time Sync → Day/Night Band: supplies home time
- Atomic Time Sync → Home-Time Hands: supplies home time
- Atomic Time Sync → Document Title: reports sync result