# fatikmarbawi23-ui/birthday-web- architecture

> Architecture diagram of the GitHub repository fatikmarbawi23-ui/birthday-web-, 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/fatikmarbawi23-ui/birthday-web-
- Repository: https://github.com/fatikmarbawi23-ui/birthday-web-

## Overview

This repository implements a birthday-greeting microsite: a visitor navigates its pages, views photos and video clips, reads a scrolling greeting, and can submit a message. The JavaScript excerpts show the photo-book and password flow, clip selection, navigation and media controls, message submission, and several presentation effects. The HTML and product documentation were not sampled, so page composition and links among independently loaded scripts are not inferred; edges below are limited to relationships visible in the excerpts.

Main entry points: [`js/nav.js`](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/nav.js) (Page navigation), [`js/pesan.js`](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/pesan.js) (Message submission), [`js/video.js`](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/video.js) (Clip player), [`main.html`](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/main.html) (Greeting site)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site navigation"]
  node_site_shell["Greeting site<br/>[main.html]"]
  node_navigation["Page navigation<br/>[nav.js]"]
  node_music["Background music<br/>[nav.js]"]
  node_main_video["Main video controls<br/>[nav.js]"]
end

subgraph group_memories["Photo and video"]
  node_photo_book["Photo book and viewer<br/>[foto.js]"]
  node_photo_password["Special photo access<br/>[foto.js]"]
  node_clip_player["Clip player<br/>[video.js]"]
  node_video_assets["Video clips"]
end

subgraph group_greetings["Greetings and effects"]
  node_birthday_typing["Birthday typing<br/>[gretting.js]"]
  node_scrolling_letter["Scrolling letter<br/>[ucapan.js]"]
  node_confetti_effect["Heart confetti<br/>[confetti.js]"]
end

subgraph group_messages["Visitor messages"]
  node_message_form["Message submission<br/>[pesan.js]"]
  node_sent_confirmation["Sent confirmation<br/>[pesan.js]"]
  node_credits_roll["Credits roll<br/>[pesan.js]"]
end

node_visitor(("Visitor"))
node_web3forms["Web3Forms API"]

node_visitor -.->|"visits"| node_site_shell
node_navigation -->|"controls playback"| node_main_video
node_navigation -->|"shows pages"| node_site_shell
node_navigation -->|"pauses off-page"| node_clip_player
node_photo_book -->|"checks access"| node_photo_password
node_clip_player -->|"loads clips"| node_video_assets
node_message_form -->|"submits form"| node_web3forms
node_message_form -->|"shows on success"| node_sent_confirmation
node_sent_confirmation -->|"starts credits"| node_credits_roll

click node_site_shell "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/main.html"
click node_navigation "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/nav.js"
click node_music "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/nav.js"
click node_main_video "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/nav.js"
click node_photo_book "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/foto.js"
click node_photo_password "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/foto.js"
click node_clip_player "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/video.js"
click node_video_assets "https://github.com/fatikmarbawi23-ui/birthday-web-/tree/main/assets/videos"
click node_birthday_typing "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/gretting.js"
click node_scrolling_letter "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/ucapan.js"
click node_confetti_effect "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/confetti.js"
click node_message_form "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/pesan.js"
click node_sent_confirmation "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/pesan.js"
click node_credits_roll "https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/pesan.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_site_shell,node_navigation,node_music,node_main_video toneBlue
class node_photo_book,node_photo_password,node_clip_player,node_video_assets toneAmber
class node_birthday_typing,node_scrolling_letter,node_confetti_effect,node_web3forms toneMint
class node_message_form,node_sent_confirmation,node_credits_roll toneRose
class node_visitor toneIndigo
```

## Components

### Site navigation

- [Greeting site](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/main.html): `main.html`
- [Page navigation](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/nav.js): `js/nav.js`
- [Background music](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/nav.js): `js/nav.js`
- [Main video controls](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/nav.js): `js/nav.js`

### Photo and video

- [Photo book and viewer](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/foto.js): `js/foto.js`
- [Special photo access](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/foto.js): `js/foto.js`
- [Clip player](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/video.js): `js/video.js`
- [Video clips](https://github.com/fatikmarbawi23-ui/birthday-web-/tree/main/assets/videos): `assets/videos`

### Greetings and effects

- [Birthday typing](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/gretting.js): `js/gretting.js`
- [Scrolling letter](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/ucapan.js): `js/ucapan.js`
- [Heart confetti](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/confetti.js): `js/confetti.js`

### Visitor messages

- [Message submission](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/pesan.js): `js/pesan.js`
- [Sent confirmation](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/pesan.js): `js/pesan.js`
- [Credits roll](https://github.com/fatikmarbawi23-ui/birthday-web-/blob/main/js/pesan.js): `js/pesan.js`

### Other components

- **Visitor**
- **Web3Forms API**

## Connections

- Visitor → Greeting site: visits
- Page navigation → Main video controls: controls playback (evidence: `js/nav.js`)
- Page navigation → Greeting site: shows pages (evidence: `js/nav.js`)
- Page navigation → Clip player: pauses off-page (evidence: `js/nav.js`)
- Photo book and viewer → Special photo access: checks access (evidence: `js/foto.js`)
- Clip player → Video clips: loads clips (evidence: `js/video.js`)
- Message submission → Web3Forms API: submits form (evidence: `js/pesan.js`)
- Message submission → Sent confirmation: shows on success (evidence: `js/pesan.js`)
- Sent confirmation → Credits roll: starts credits (evidence: `js/pesan.js`)