# nonlimit-1408/mentalhelp.github.io architecture

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

- Interactive diagram: https://gitdiagram.com/nonlimit-1408/mentalhelp.github.io
- Repository: https://github.com/nonlimit-1408/mentalhelp.github.io

## Overview

MentalHelp+ is a bilingual browser-based encouragement and diary-art experience. Users choose a mood, receive a randomized quote and advice, select an artwork pattern, upload and crop a photo, then view and save a composed diary image before reaching a thank-you page. The graph also includes the About page, shared settings, and audio runtime. Evidence is limited to the supplied source excerpts and index; unsampled page implementations are represented only where the tree identifies them, so uncertain connections are omitted.

Main entry points: [`page-2/script.js`](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-2/script.js) (Quote and Advice Draw), [`page-3/script.js`](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-3/script.js) (Choose Pattern), [`page-4/script.js`](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-4/script.js) (Upload and Crop Photo), [`page-1/script.js`](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-1/script.js) (Choose Mood)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_journey["Encouragement Journey"]
  node_mood["Choose Mood<br/>[script.js]"]
  node_draw["Quote and Advice Draw<br/>[script.js]"]
  node_finish["Thank-you Page<br/>[script.js]"]
end

subgraph group_art["Diary Artwork"]
  node_patterns["Choose Pattern<br/>[script.js]"]
  node_photo["Upload and Crop Photo<br/>[script.js]"]
  node_composition["Compose Diary Artwork<br/>[script.js]"]
end

subgraph group_shared["Shared Experience"]
  node_about["About Page<br/>[script.js]"]
  node_settings["Settings Controls<br/>[settings.js]"]
  node_audio["Audio Manager<br/>[sound.js]"]
  node_audio_bridge["Audio Bridge<br/>[sound-bridge.js]"]
  node_language["Page Translations<br/>[lang.js]"]
  node_translation_pages["Other Page Translations<br/>[lang.js]"]
  node_translation_art["Artwork Page Translations<br/>[lang.js]"]
  node_translation_crop["Crop Page Translations<br/>[lang.js]"]
  node_translation_finish["Finish Page Translations<br/>[lang.js]"]
  node_translation_about["About Translations<br/>[lang.js]"]
end

subgraph group_content["Content and Assets"]
  node_quote_pool["Quote and Advice Content<br/>[database.js]"]
  node_sound_assets["Music and Effects"]
end

node_visitor(("Visitor"))

node_visitor -->|"chooses mood"| node_mood
node_mood -->|"navigates to"| node_draw
node_mood -->|"stores mood"| node_draw
node_draw -->|"draws messages"| node_quote_pool
node_draw -->|"navigates to"| node_patterns
node_visitor -->|"selects pattern"| node_patterns
node_patterns -->|"navigates to"| node_photo
node_patterns -->|"stores selection"| node_photo
node_visitor -->|"uploads photo"| node_photo
node_photo -->|"navigates to"| node_composition
node_photo -->|"stores cropped image"| node_composition
node_composition -->|"navigates to"| node_finish
node_visitor -->|"saves image"| node_composition
node_visitor -.->|"opens About"| node_about
node_visitor -.->|"adjusts settings"| node_settings
node_settings -->|"updates volume"| node_audio
node_audio -->|"loads audio"| node_sound_assets
node_draw -->|"requests sound"| node_audio_bridge
node_patterns -->|"requests sound"| node_audio_bridge
node_language -.->|"translates interface"| node_mood
node_translation_pages -.->|"translates interface"| node_draw
node_translation_art -->|"translates interface"| node_patterns
node_translation_crop -.->|"translates interface"| node_photo
node_translation_finish -.->|"translates interface"| node_finish
node_translation_about -.->|"translates interface"| node_about

click node_mood "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-1/script.js"
click node_draw "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-2/script.js"
click node_quote_pool "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-2/database.js"
click node_patterns "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-3/script.js"
click node_photo "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-4/script.js"
click node_composition "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-5/script.js"
click node_finish "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-6/script.js"
click node_about "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-aboutUs/script.js"
click node_settings "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/settings.js"
click node_audio "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/sound.js"
click node_audio_bridge "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/sound-bridge.js"
click node_sound_assets "https://github.com/nonlimit-1408/mentalhelp.github.io/tree/main/sound"
click node_language "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-1/lang.js"
click node_translation_pages "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-2/lang.js"
click node_translation_art "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-3/lang.js"
click node_translation_crop "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-4/lang.js"
click node_translation_finish "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-6/lang.js"
click node_translation_about "https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-aboutUs/lang.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_mood,node_draw,node_finish toneBlue
class node_patterns,node_photo,node_composition toneAmber
class node_about,node_settings,node_audio,node_audio_bridge,node_language,node_translation_pages,node_translation_art,node_translation_crop,node_translation_finish,node_translation_about toneMint
class node_quote_pool,node_sound_assets toneRose
class node_visitor toneIndigo
```

## Components

### Encouragement Journey

- [Choose Mood](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-1/script.js): `page-1/script.js`
- [Quote and Advice Draw](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-2/script.js): `page-2/script.js`
- [Thank-you Page](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-6/script.js): `page-6/script.js`

### Diary Artwork

- [Choose Pattern](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-3/script.js): `page-3/script.js`
- [Upload and Crop Photo](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-4/script.js): `page-4/script.js`
- [Compose Diary Artwork](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-5/script.js): `page-5/script.js`

### Shared Experience

- [About Page](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-aboutUs/script.js): `page-aboutUs/script.js`
- [Settings Controls](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/settings.js): `settings.js`
- [Audio Manager](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/sound.js): `sound.js`
- [Audio Bridge](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/sound-bridge.js): `sound-bridge.js`
- [Page Translations](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-1/lang.js): `page-1/lang.js`
- [Other Page Translations](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-2/lang.js): `page-2/lang.js`
- [Artwork Page Translations](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-3/lang.js): `page-3/lang.js`
- [Crop Page Translations](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-4/lang.js): `page-4/lang.js`
- [Finish Page Translations](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-6/lang.js): `page-6/lang.js`
- [About Translations](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-aboutUs/lang.js): `page-aboutUs/lang.js`

### Content and Assets

- [Quote and Advice Content](https://github.com/nonlimit-1408/mentalhelp.github.io/blob/main/page-2/database.js): `page-2/database.js`
- [Music and Effects](https://github.com/nonlimit-1408/mentalhelp.github.io/tree/main/sound): `sound`

### Other components

- **Visitor**

## Connections

- Visitor → Choose Mood: chooses mood (evidence: `page-1/script.js`)
- Choose Mood → Quote and Advice Draw: navigates to (evidence: `page-1/script.js`)
- Choose Mood → Quote and Advice Draw: stores mood (evidence: `page-1/script.js`)
- Quote and Advice Draw → Quote and Advice Content: draws messages (evidence: `page-2/script.js`)
- Quote and Advice Draw → Choose Pattern: navigates to (evidence: `page-3/script.js`)
- Visitor → Choose Pattern: selects pattern (evidence: `page-3/script.js`)
- Choose Pattern → Upload and Crop Photo: navigates to (evidence: `page-3/script.js`)
- Choose Pattern → Upload and Crop Photo: stores selection (evidence: `page-3/script.js`)
- Visitor → Upload and Crop Photo: uploads photo (evidence: `page-4/script.js`)
- Upload and Crop Photo → Compose Diary Artwork: navigates to (evidence: `page-4/script.js`)
- Upload and Crop Photo → Compose Diary Artwork: stores cropped image (evidence: `page-4/script.js`)
- Compose Diary Artwork → Thank-you Page: navigates to (evidence: `page-5/script.js`)
- Visitor → Compose Diary Artwork: saves image (evidence: `page-5/script.js`)
- Visitor → About Page: opens About
- Visitor → Settings Controls: adjusts settings
- Settings Controls → Audio Manager: updates volume (evidence: `settings.js`)
- Audio Manager → Music and Effects: loads audio (evidence: `sound.js`)
- Quote and Advice Draw → Audio Bridge: requests sound (evidence: `page-2/script.js`)
- Choose Pattern → Audio Bridge: requests sound (evidence: `page-3/script.js`)
- Page Translations → Choose Mood: translates interface
- Other Page Translations → Quote and Advice Draw: translates interface
- Artwork Page Translations → Choose Pattern: translates interface (evidence: `page-3/script.js`)
- Crop Page Translations → Upload and Crop Photo: translates interface
- Finish Page Translations → Thank-you Page: translates interface
- About Translations → About Page: translates interface