# shruti202x/creativesites architecture

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

- Interactive diagram: https://gitdiagram.com/shruti202x/creativesites
- Repository: https://github.com/shruti202x/creativesites

## Overview

CreativeSites is a small data-driven gallery for browsing creative websites and their preview images. On startup, its JavaScript fetches the site catalog, selects the first entry, and updates the page; users can navigate images, choose another site at random, and toggle site information using buttons, keyboard shortcuts, or swipes. The source excerpt shows the controller and its DOM interactions, but not the HTML, catalog contents, or styling, so those components and relationships are represented only where the available evidence supports them.

Main entry points: [`script.js`](https://github.com/shruti202x/creativesites/blob/main/script.js) (Gallery controller), [`index.html`](https://github.com/shruti202x/creativesites/blob/main/index.html) (Gallery page), [`db.json`](https://github.com/shruti202x/creativesites/blob/main/db.json) (Site catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_gallery["Gallery"]
  node_controller["Gallery controller<br/>[script.js]"]
  node_page["Gallery page<br/>[index.html]"]
end

subgraph group_content["Gallery content"]
  node_catalog["Site catalog<br/>[db.json]"]
end

node_visitor(("Visitor"))

node_visitor -->|"uses controls"| node_page
node_controller -->|"loads"| node_catalog
node_controller -->|"updates display"| node_page

click node_controller "https://github.com/shruti202x/creativesites/blob/main/script.js"
click node_page "https://github.com/shruti202x/creativesites/blob/main/index.html"
click node_catalog "https://github.com/shruti202x/creativesites/blob/main/db.json"

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_controller,node_page toneBlue
class node_catalog toneAmber
class node_visitor toneIndigo
```

## Components

### Gallery

- [Gallery controller](https://github.com/shruti202x/creativesites/blob/main/script.js): `script.js`
- [Gallery page](https://github.com/shruti202x/creativesites/blob/main/index.html): `index.html`

### Gallery content

- [Site catalog](https://github.com/shruti202x/creativesites/blob/main/db.json): `db.json`

### Other components

- **Visitor**

## Connections

- Visitor → Gallery page: uses controls
- Gallery controller → Site catalog: loads (evidence: `script.js`)
- Gallery controller → Gallery page: updates display (evidence: `script.js`)