# nugzky/visiclock architecture

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

- Interactive diagram: https://gitdiagram.com/nugzky/visiclock
- Repository: https://github.com/nugzky/visiclock

## Overview

VisiClock is a personal, browser-based daily activity planner. The main workflow is user input → schedule validation and conflict checking → persistence → updated agenda and clock views. It also supports date/category/color/notes, completion and filtering, summaries, undoable deletion, JSON backup and restore, legacy-data migration, and responsive accessible presentation. The README documents these capabilities; sampled source confirms the pure schedule logic, rendering, clock updates, and backup/restore behavior, but app.js excerpts omit parts of the event and persistence implementation.

Main entry points: [`app.js`](https://github.com/nugzky/visiclock/blob/main/app.js) (Application controller), [`style.css`](https://github.com/nugzky/visiclock/blob/main/style.css) (Responsive styles), [`index.html`](https://github.com/nugzky/visiclock/blob/main/index.html) (Page structure), [`schedule.js`](https://github.com/nugzky/visiclock/blob/main/schedule.js) (Schedule rules)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_html["Page structure<br/>[index.html]"]
  node_styles["Responsive styles<br/>[style.css]"]
  node_app["Application controller<br/>[app.js]"]
  node_form["Activity form<br/>[index.html]"]
end

subgraph group_planning["Planning and display"]
  node_schedule["Schedule rules<br/>[schedule.js]"]
  node_agenda["Daily agenda<br/>[app.js]"]
  node_summary["Progress summary<br/>[app.js]"]
  node_analog["Analog clock<br/>[app.js]"]
  node_current["Current activity<br/>[app.js]"]
  node_filter["Date and filters<br/>[app.js]"]
end

subgraph group_storage["Persistence and backup"]
  node_store[("Browser storage")]
  node_backup["JSON backup<br/>[app.js]"]
end

node_user(("Planner"))
node_browser["Browser runtime"]
node_fonts["Google Fonts"]

node_user -->|"enters activity"| node_form
node_user -->|"selects date"| node_filter
node_user -->|"requests backup"| node_backup
node_html -->|"loads script"| node_app
node_styles -->|"styles page"| node_html
node_app -->|"reads input"| node_form
node_app -->|"validates and checks"| node_schedule
node_app -->|"loads and saves"| node_store
node_app -->|"renders tasks"| node_agenda
node_app -->|"renders totals"| node_summary
node_app -->|"draws sectors and hands"| node_analog
node_app -->|"updates activity"| node_current
node_app -->|"applies selection"| node_filter
node_app -->|"exports and restores"| node_backup
node_backup -->|"commits restored data"| node_store
node_browser -->|"provides local storage"| node_store
node_browser -->|"runs JavaScript"| node_app
node_styles -.->|"loads font"| node_fonts

click node_html "https://github.com/nugzky/visiclock/blob/main/index.html"
click node_styles "https://github.com/nugzky/visiclock/blob/main/style.css"
click node_app "https://github.com/nugzky/visiclock/blob/main/app.js"
click node_schedule "https://github.com/nugzky/visiclock/blob/main/schedule.js"
click node_form "https://github.com/nugzky/visiclock/blob/main/index.html"
click node_agenda "https://github.com/nugzky/visiclock/blob/main/app.js"
click node_summary "https://github.com/nugzky/visiclock/blob/main/app.js"
click node_analog "https://github.com/nugzky/visiclock/blob/main/app.js"
click node_current "https://github.com/nugzky/visiclock/blob/main/app.js"
click node_filter "https://github.com/nugzky/visiclock/blob/main/app.js"
click node_backup "https://github.com/nugzky/visiclock/blob/main/app.js"

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_html,node_styles,node_app,node_form,node_browser toneBlue
class node_schedule,node_agenda,node_summary,node_analog,node_current,node_filter toneAmber
class node_store,node_backup toneMint
class node_user,node_fonts toneIndigo
```

## Components

### User interface

- [Page structure](https://github.com/nugzky/visiclock/blob/main/index.html): `index.html`
- [Responsive styles](https://github.com/nugzky/visiclock/blob/main/style.css): `style.css`
- [Application controller](https://github.com/nugzky/visiclock/blob/main/app.js): `app.js`
- [Activity form](https://github.com/nugzky/visiclock/blob/main/index.html): `index.html`

### Planning and display

- [Schedule rules](https://github.com/nugzky/visiclock/blob/main/schedule.js): `schedule.js`
- [Daily agenda](https://github.com/nugzky/visiclock/blob/main/app.js): `app.js`
- [Progress summary](https://github.com/nugzky/visiclock/blob/main/app.js): `app.js`
- [Analog clock](https://github.com/nugzky/visiclock/blob/main/app.js): `app.js`
- [Current activity](https://github.com/nugzky/visiclock/blob/main/app.js): `app.js`
- [Date and filters](https://github.com/nugzky/visiclock/blob/main/app.js): `app.js`

### Persistence and backup

- **Browser storage**
- [JSON backup](https://github.com/nugzky/visiclock/blob/main/app.js): `app.js`

### Other components

- **Planner**
- **Browser runtime**
- **Google Fonts**

## Connections

- Planner → Activity form: enters activity
- Planner → Date and filters: selects date
- Planner → JSON backup: requests backup
- Page structure → Application controller: loads script
- Responsive styles → Page structure: styles page
- Application controller → Activity form: reads input
- Application controller → Schedule rules: validates and checks
- Application controller → Browser storage: loads and saves
- Application controller → Daily agenda: renders tasks
- Application controller → Progress summary: renders totals
- Application controller → Analog clock: draws sectors and hands
- Application controller → Current activity: updates activity
- Application controller → Date and filters: applies selection
- Application controller → JSON backup: exports and restores
- JSON backup → Browser storage: commits restored data
- Browser runtime → Browser storage: provides local storage
- Browser runtime → Application controller: runs JavaScript
- Responsive styles → Google Fonts: loads font