# jardeu/relogio architecture

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

- Interactive diagram: https://gitdiagram.com/jardeu/relogio
- Repository: https://github.com/jardeu/relogio

## Overview

Relogio é um relógio de navegador com mostradores analógico e digital e alternância de tema noturno. O JavaScript atualiza os mostradores a cada segundo usando a hora local e reage às alterações dos controles para alternar classes no documento; o CSS fornece a apresentação. O HTML fornece os elementos acessados pelo script. A árvore e os trechos confirmam esses comportamentos, mas não detalham a estrutura interna do HTML nem as regras específicas de estilo.

Main entry points: [`index.html`](https://github.com/jardeu/relogio/blob/main/index.html) (Documento e controles), [`script.js`](https://github.com/jardeu/relogio/blob/main/script.js) (Lógica do relógio), [`style.css`](https://github.com/jardeu/relogio/blob/main/style.css) (Estilos e temas)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Interface do relógio"]
  node_html["Documento e controles<br/>[index.html]"]
  node_css["Estilos e temas<br/>[style.css]"]
end

subgraph group_runtime["Atualização e modos"]
  node_clock["Lógica do relógio<br/>[script.js]"]
end

node_user(("Usuário"))
node_time(("Relógio do sistema"))

node_user -->|"altera controles"| node_html
node_html -->|"fornece elementos"| node_clock
node_clock -->|"lê hora local"| node_time
node_clock -->|"atualiza mostradores"| node_html
node_clock -->|"alterna classes"| node_html
node_css -->|"estiliza documento"| node_html

click node_html "https://github.com/jardeu/relogio/blob/main/index.html"
click node_css "https://github.com/jardeu/relogio/blob/main/style.css"
click node_clock "https://github.com/jardeu/relogio/blob/main/script.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_css toneBlue
class node_clock toneAmber
class node_user,node_time toneIndigo
```

## Components

### Interface do relógio

- [Documento e controles](https://github.com/jardeu/relogio/blob/main/index.html): `index.html`
- [Estilos e temas](https://github.com/jardeu/relogio/blob/main/style.css): `style.css`

### Atualização e modos

- [Lógica do relógio](https://github.com/jardeu/relogio/blob/main/script.js): `script.js`

### Other components

- **Usuário**
- **Relógio do sistema**

## Connections

- Usuário → Documento e controles: altera controles
- Documento e controles → Lógica do relógio: fornece elementos
- Lógica do relógio → Relógio do sistema: lê hora local
- Lógica do relógio → Documento e controles: atualiza mostradores
- Lógica do relógio → Documento e controles: alterna classes
- Estilos e temas → Documento e controles: estiliza documento