# kaito1011/project architecture

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

- Interactive diagram: https://gitdiagram.com/kaito1011/project
- Repository: https://github.com/kaito1011/project

## Overview

Project Lablab is a small personal, interactive website. A visitor can use its music, memory, navigation, and message-reveal interactions; the response flow presents a selected answer and attempts to save it to Firebase. The source excerpt shows these behaviors in one client script, but does not show how the HTML pages are connected or which page loads the script, so those relationships are omitted.

Main entry points: [`script.js`](https://github.com/kaito1011/project/blob/main/script.js) (Response Flow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Website Pages"]
  node_home["Home Page<br/>[index.html]"]
  node_letter["Letter Page<br/>[letter.html]"]
  node_letters["Letters Page<br/>[letters.html]"]
end

subgraph group_interactions["Visitor Interactions"]
  node_music["Music Controls<br/>[script.js]"]
  node_petals["Falling Petals<br/>[script.js]"]
  node_menu["Menu Toggle<br/>[script.js]"]
  node_memories["Memory Cards<br/>[script.js]"]
  node_star["Star Reveal<br/>[script.js]"]
  node_responses["Response Flow<br/>[script.js]"]
  node_response_reset["Response Reset<br/>[script.js]"]
  node_back_top["Back To Top<br/>[script.js]"]
end

subgraph group_persistence["Response Persistence"]
  node_firebase[("Firebase Firestore")]
end

node_visitor(("Visitor"))

node_visitor -->|"toggles"| node_music
node_visitor -->|"toggles"| node_menu
node_visitor -->|"selects"| node_memories
node_visitor -->|"reveals"| node_star
node_visitor -->|"submits"| node_responses
node_visitor -->|"resets"| node_response_reset
node_visitor -->|"returns"| node_back_top
node_responses -->|"writes answer"| node_firebase

click node_home "https://github.com/kaito1011/project/blob/main/index.html"
click node_letter "https://github.com/kaito1011/project/blob/main/letter.html"
click node_letters "https://github.com/kaito1011/project/blob/main/letters.html"
click node_music "https://github.com/kaito1011/project/blob/main/script.js"
click node_petals "https://github.com/kaito1011/project/blob/main/script.js"
click node_menu "https://github.com/kaito1011/project/blob/main/script.js"
click node_memories "https://github.com/kaito1011/project/blob/main/script.js"
click node_star "https://github.com/kaito1011/project/blob/main/script.js"
click node_responses "https://github.com/kaito1011/project/blob/main/script.js"
click node_response_reset "https://github.com/kaito1011/project/blob/main/script.js"
click node_back_top "https://github.com/kaito1011/project/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_home,node_letter,node_letters toneBlue
class node_music,node_petals,node_menu,node_memories,node_star,node_responses,node_response_reset,node_back_top toneAmber
class node_firebase toneMint
class node_visitor toneIndigo
```

## Components

### Website Pages

- [Home Page](https://github.com/kaito1011/project/blob/main/index.html): `index.html`
- [Letter Page](https://github.com/kaito1011/project/blob/main/letter.html): `letter.html`
- [Letters Page](https://github.com/kaito1011/project/blob/main/letters.html): `letters.html`

### Visitor Interactions

- [Music Controls](https://github.com/kaito1011/project/blob/main/script.js): `script.js`
- [Falling Petals](https://github.com/kaito1011/project/blob/main/script.js): `script.js`
- [Menu Toggle](https://github.com/kaito1011/project/blob/main/script.js): `script.js`
- [Memory Cards](https://github.com/kaito1011/project/blob/main/script.js): `script.js`
- [Star Reveal](https://github.com/kaito1011/project/blob/main/script.js): `script.js`
- [Response Flow](https://github.com/kaito1011/project/blob/main/script.js): `script.js`
- [Response Reset](https://github.com/kaito1011/project/blob/main/script.js): `script.js`
- [Back To Top](https://github.com/kaito1011/project/blob/main/script.js): `script.js`

### Response Persistence

- **Firebase Firestore**

### Other components

- **Visitor**

## Connections

- Visitor → Music Controls: toggles (evidence: `script.js`)
- Visitor → Menu Toggle: toggles (evidence: `script.js`)
- Visitor → Memory Cards: selects (evidence: `script.js`)
- Visitor → Star Reveal: reveals (evidence: `script.js`)
- Visitor → Response Flow: submits (evidence: `script.js`)
- Visitor → Response Reset: resets (evidence: `script.js`)
- Visitor → Back To Top: returns (evidence: `script.js`)
- Response Flow → Firebase Firestore: writes answer (evidence: `script.js`)