# copirlo20/my-wedding architecture

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

- Interactive diagram: https://gitdiagram.com/copirlo20/my-wedding
- Repository: https://github.com/copirlo20/my-wedding

## Overview

My Wedding is a static wedding invitation and celebration site for Trọng Đạt and Dương Nhàn. Guests open the page to explore ceremony and couple information, then browse the love-story timeline and photo gallery; they can also play background music and send congratulations. The JavaScript initializes scroll effects, the gallery carousel, and lightbox behavior, and handles the audio toggle. The README documents additional sections, but the HTML was not sampled, so their exact structure and wiring cannot be confirmed.

Main entry points: [`index.html`](https://github.com/copirlo20/my-wedding/blob/main/index.html) (Wedding page), [`wp-content/themes/js/main-wedding8a54.js`](https://github.com/copirlo20/my-wedding/blob/main/wp-content/themes/js/main-wedding8a54.js) (Wedding interactions), [`wp-content/themes/js/preloader8a54.js`](https://github.com/copirlo20/my-wedding/blob/main/wp-content/themes/js/preloader8a54.js) (Preloader behavior), [`wp-content/pictures/album`](https://github.com/copirlo20/my-wedding/tree/main/wp-content/pictures/album) (Wedding photos)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Wedding experience"]
  node_page["Wedding page<br/>[index.html]"]
  node_welcome["Welcome modal<br/>[index.html]"]
  node_couple["Couple and countdown<br/>[index.html]"]
  node_event["Event details<br/>[index.html]"]
  node_timeline["Love timeline<br/>[index.html]"]
  node_wishes["Guest wishes<br/>[index.html]"]
  node_thanks["Thank-you section<br/>[index.html]"]
end

subgraph group_media["Gallery and media"]
  node_gallery["Photo gallery<br/>[index.html]"]
  node_album["Wedding photos"]
  node_qr["Gift QR images"]
  node_music["Background music"]
end

subgraph group_runtime["Browser interactions"]
  node_mainjs["Wedding interactions"]
  node_preloader["Preloader behavior<br/>[preloader8a54.js]"]
  node_aos["AOS effects<br/>[aos8a54.js]"]
  node_swiper["Swiper carousel"]
  node_fancybox["Fancybox lightbox"]
  node_jquery["jQuery<br/>[jquery.min8a54.js]"]
end

node_guest(("Guest"))

node_guest -->|"opens"| node_page
node_page -->|"presents"| node_welcome
node_page -->|"presents"| node_couple
node_page -->|"presents"| node_event
node_page -->|"presents"| node_timeline
node_page -->|"presents"| node_gallery
node_page -->|"presents"| node_wishes
node_page -->|"presents"| node_thanks
node_page -.->|"includes"| node_qr
node_gallery -.->|"shows"| node_album
node_welcome -.->|"offers playback"| node_music
node_mainjs -->|"initializes"| node_aos
node_mainjs -.->|"configures carousel"| node_swiper
node_mainjs -.->|"binds lightbox"| node_fancybox
node_mainjs -->|"uses"| node_jquery
node_preloader -->|"hides loader"| node_page

click node_page "https://github.com/copirlo20/my-wedding/blob/main/index.html"
click node_welcome "https://github.com/copirlo20/my-wedding/blob/main/index.html"
click node_couple "https://github.com/copirlo20/my-wedding/blob/main/index.html"
click node_event "https://github.com/copirlo20/my-wedding/blob/main/index.html"
click node_timeline "https://github.com/copirlo20/my-wedding/blob/main/index.html"
click node_wishes "https://github.com/copirlo20/my-wedding/blob/main/index.html"
click node_thanks "https://github.com/copirlo20/my-wedding/blob/main/index.html"
click node_gallery "https://github.com/copirlo20/my-wedding/blob/main/index.html"
click node_album "https://github.com/copirlo20/my-wedding/tree/main/wp-content/pictures/album"
click node_qr "https://github.com/copirlo20/my-wedding/tree/main/wp-content/pictures/QR"
click node_music "https://github.com/copirlo20/my-wedding/blob/main/wp-content/music/Mashup%20L%E1%BB%85%20%C4%90%C6%B0%E1%BB%9Dng%20x%20M%E1%BB%99t%20%C4%90%E1%BB%9Di%20_%20Mobuds%20ft%20Wenne.mp3"
click node_mainjs "https://github.com/copirlo20/my-wedding/blob/main/wp-content/themes/js/main-wedding8a54.js"
click node_preloader "https://github.com/copirlo20/my-wedding/blob/main/wp-content/themes/js/preloader8a54.js"
click node_aos "https://github.com/copirlo20/my-wedding/blob/main/wp-content/themes/js/aos8a54.js"
click node_jquery "https://github.com/copirlo20/my-wedding/blob/main/wp-content/themes/js/jquery.min8a54.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_page,node_welcome,node_couple,node_event,node_timeline,node_wishes,node_thanks toneBlue
class node_gallery,node_album,node_qr,node_music toneAmber
class node_mainjs,node_preloader,node_aos,node_swiper,node_fancybox,node_jquery toneMint
class node_guest toneIndigo
```

## Components

### Wedding experience

- [Wedding page](https://github.com/copirlo20/my-wedding/blob/main/index.html): `index.html`
- [Welcome modal](https://github.com/copirlo20/my-wedding/blob/main/index.html): `index.html`
- [Couple and countdown](https://github.com/copirlo20/my-wedding/blob/main/index.html): `index.html`
- [Event details](https://github.com/copirlo20/my-wedding/blob/main/index.html): `index.html`
- [Love timeline](https://github.com/copirlo20/my-wedding/blob/main/index.html): `index.html`
- [Guest wishes](https://github.com/copirlo20/my-wedding/blob/main/index.html): `index.html`
- [Thank-you section](https://github.com/copirlo20/my-wedding/blob/main/index.html): `index.html`

### Gallery and media

- [Photo gallery](https://github.com/copirlo20/my-wedding/blob/main/index.html): `index.html`
- [Wedding photos](https://github.com/copirlo20/my-wedding/tree/main/wp-content/pictures/album): `wp-content/pictures/album`
- [Gift QR images](https://github.com/copirlo20/my-wedding/tree/main/wp-content/pictures/QR): `wp-content/pictures/QR`
- [Background music](https://github.com/copirlo20/my-wedding/blob/main/wp-content/music/Mashup%20L%E1%BB%85%20%C4%90%C6%B0%E1%BB%9Dng%20x%20M%E1%BB%99t%20%C4%90%E1%BB%9Di%20_%20Mobuds%20ft%20Wenne.mp3): `wp-content/music/Mashup Lễ Đường x Một Đời _ Mobuds ft Wenne.mp3`

### Browser interactions

- [Wedding interactions](https://github.com/copirlo20/my-wedding/blob/main/wp-content/themes/js/main-wedding8a54.js): `wp-content/themes/js/main-wedding8a54.js`
- [Preloader behavior](https://github.com/copirlo20/my-wedding/blob/main/wp-content/themes/js/preloader8a54.js): `wp-content/themes/js/preloader8a54.js`
- [AOS effects](https://github.com/copirlo20/my-wedding/blob/main/wp-content/themes/js/aos8a54.js): `wp-content/themes/js/aos8a54.js`
- **Swiper carousel**
- **Fancybox lightbox**
- [jQuery](https://github.com/copirlo20/my-wedding/blob/main/wp-content/themes/js/jquery.min8a54.js): `wp-content/themes/js/jquery.min8a54.js`

### Other components

- **Guest**

## Connections

- Guest → Wedding page: opens
- Wedding page → Welcome modal: presents
- Wedding page → Couple and countdown: presents
- Wedding page → Event details: presents
- Wedding page → Love timeline: presents
- Wedding page → Photo gallery: presents
- Wedding page → Guest wishes: presents
- Wedding page → Thank-you section: presents
- Wedding page → Gift QR images: includes
- Photo gallery → Wedding photos: shows
- Welcome modal → Background music: offers playback
- Wedding interactions → AOS effects: initializes
- Wedding interactions → Swiper carousel: configures carousel
- Wedding interactions → Fancybox lightbox: binds lightbox
- Wedding interactions → jQuery: uses
- Preloader behavior → Wedding page: hides loader