# nonlimit-1408/waikru2026.github.io architecture

> Architecture diagram of the GitHub repository nonlimit-1408/waikru2026.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/waikru2026.github.io
- Repository: https://github.com/nonlimit-1408/waikru2026.github.io

## Overview

This is a Wai Kru greeting-card web app: it displays a randomly paired offering image and Thai poem, then lets the user save the card as a PNG. The main runtime controller handles initial and user-triggered randomization, audio feedback, responsive scaling, and capture/download. Content is supplied as global arrays, while the page markup is represented by index.html. The source excerpts show the controller’s interactions; the README is empty, and the page markup was not sampled, so its internal structure and some asset-loading relationships are not shown.

Main entry points: [`script.js`](https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/script.js) (App controller), [`assets.js`](https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/assets.js) (Offering images), [`index.html`](https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/index.html) (Card page), [`poem.js`](https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/poem.js) (Poem collection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Card presentation"]
  node_page["Card page<br/>[index.html]"]
end

subgraph group_content["Card content"]
  node_poems["Poem collection<br/>[poem.js]"]
  node_offering_images["Offering images<br/>[assets.js]"]
  node_image_files["Offering image files"]
end

subgraph group_runtime["Runtime interactions"]
  node_controller["App controller<br/>[script.js]"]
  node_audio_file["Random sound<br/>[random.mp3]"]
  node_html2canvas["html2canvas"]
  node_browser["Browser APIs"]
end

node_user(("Visitor"))

node_user -->|"clicks controls"| node_controller
node_controller -->|"updates card"| node_page
node_controller -->|"selects poems"| node_poems
node_controller -->|"selects images"| node_offering_images
node_offering_images -.->|"references files"| node_image_files
node_controller -->|"plays sound"| node_audio_file
node_controller -->|"captures card"| node_html2canvas
node_controller -->|"downloads PNG"| node_browser
node_controller -->|"scales page"| node_browser

click node_page "https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/index.html"
click node_controller "https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/script.js"
click node_poems "https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/poem.js"
click node_offering_images "https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/assets.js"
click node_image_files "https://github.com/nonlimit-1408/waikru2026.github.io/tree/main/assets"
click node_audio_file "https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/random.mp3"

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_page toneBlue
class node_poems,node_offering_images,node_image_files toneAmber
class node_controller,node_audio_file,node_html2canvas,node_browser toneMint
class node_user toneIndigo
```

## Components

### Card presentation

- [Card page](https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/index.html): `index.html`

### Card content

- [Poem collection](https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/poem.js): `poem.js`
- [Offering images](https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/assets.js): `assets.js`
- [Offering image files](https://github.com/nonlimit-1408/waikru2026.github.io/tree/main/assets): `assets`

### Runtime interactions

- [App controller](https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/script.js): `script.js`
- [Random sound](https://github.com/nonlimit-1408/waikru2026.github.io/blob/main/random.mp3): `random.mp3`
- **html2canvas**
- **Browser APIs**

### Other components

- **Visitor**

## Connections

- Visitor → App controller: clicks controls (evidence: `script.js`)
- App controller → Card page: updates card (evidence: `script.js`)
- App controller → Poem collection: selects poems (evidence: `script.js`)
- App controller → Offering images: selects images (evidence: `script.js`)
- Offering images → Offering image files: references files
- App controller → Random sound: plays sound (evidence: `script.js`)
- App controller → html2canvas: captures card (evidence: `script.js`)
- App controller → Browser APIs: downloads PNG (evidence: `script.js`)
- App controller → Browser APIs: scales page (evidence: `script.js`)