# mohammedadamdev/marriageinvitation architecture

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

- Interactive diagram: https://gitdiagram.com/mohammedadamdev/marriageinvitation
- Repository: https://github.com/mohammedadamdev/marriageinvitation

## Overview

#### Purpose and delivery model
A static, browser-only wedding invitation template. It presents event content, supports in-browser editing, persists edits locally, and can be deployed as static files. Primary entry point: `index.html`; styling and responsive/print presentation: `styles.css`; client behavior: `script.js`.

#### Invitation presentation shell
`index.html` defines the public invitation page: hero content, ceremony/reception details, gallery placeholders, RSVP/contact affordances, navigation, and the editing UI. It references bundled media under `assets/`, including `assets/videos/hero-video-BkP1eoiB.mp4` and `assets/audio/wedding-background-music.mp3`.

#### Configuration and content precedence
Default invitation data is maintained in `config.js`, with `config-template.json` serving as a portable configuration shape/template. On page initialization, client logic applies configured content to the DOM and uses browser-local persisted edits when present. This establishes a static-default versus per-browser customization boundary: local changes are not shared with other visitors or deployments.

#### Browser-side editing and persistence
`script.js` owns the administrative interaction flow: open/close the edit panel (including keyboard shortcut), collect edits, update rendered invitation fields, and save state to `localStorage`. It also supports configuration download for manual backup. No server API, authentication, or shared database exists; browser storage is the sole persistence runtime.

#### Sharing and QR workflow
`qr-generator.html` is a separate static entry point for producing a shareable QR-code experience around the hosted invitation URL. The invitation itself is intended to be distributed by link, messaging channels, or a printed QR code. External map/contact destinations are content-level browser links rather than backend integrations.

#### Static hosting and local serving
The site runs in any modern browser and needs only static-file hosting. `vercel.json` provides Vercel deployment configuration; `DEPLOYMENT.md` documents deployment concerns. For local preview, `serve.py` can serve the repository through Python, avoiding browser file-origin restrictions where applicable. Other hosting services are optional deployment targets, not application dependencies.

#### Asset and visual customization boundary
Visual system, responsiveness, and print behavior are centralized in `styles.css`; content structure remains in `index.html`. Media is repository-hosted under `assets/images`, `assets/audio`, and `assets/videos`. `tools/optimize_images.py` is an offline asset-preparation utility, separate from the page runtime.

Main entry points: [`index.html`](https://github.com/mohammedadamdev/marriageinvitation/blob/main/index.html) (Invitation page), [`script.js`](https://github.com/mohammedadamdev/marriageinvitation/blob/main/script.js) (Client behavior), [`qr-generator.html`](https://github.com/mohammedadamdev/marriageinvitation/blob/main/qr-generator.html) (QR generator), [`config.js`](https://github.com/mohammedadamdev/marriageinvitation/blob/main/config.js) (Default invitation data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_invitation["Invitation runtime"]
  node_index["Invitation page<br/>HTML entry point<br/>[index.html]"]
  node_script["Client behavior<br/>browser script<br/>[script.js]"]
  node_config["Default invitation data<br/>JavaScript config<br/>[config.js]"]
  node_config_template["Config template<br/>JSON template"]
  node_styles["Visual system<br/>CSS<br/>[styles.css]"]
  node_local_storage[("Browser local storage<br/>browser persistence")]
end

subgraph group_distribution["Sharing &amp; hosting"]
  node_qr_page["QR generator<br/>HTML entry point<br/>[qr-generator.html]"]
  node_static_host{{"Static hosting<br/>deployment runtime"}}
  node_vercel["Vercel deployment config<br/>[vercel.json]"]
  node_deployment_docs["Deployment guide<br/>documentation<br/>[DEPLOYMENT.md]"]
  node_local_server["Local preview server<br/>Python server<br/>[serve.py]"]
end

subgraph group_assets["Media &amp; preparation"]
  node_hero_video["Hero video<br/>media asset"]
  node_music["Background music<br/>audio asset"]
  node_image_assets["Image assets<br/>media directory"]
  node_image_optimizer["Image optimizer<br/>offline Python utility<br/>[optimize_images.py]"]
end

node_static_host -->|"serves"| node_index
node_vercel -->|"configures"| node_static_host
node_deployment_docs -.->|"documents deployment"| node_static_host
node_local_server -->|"serves locally"| node_index
node_index -->|"loads"| node_script
node_index -->|"uses"| node_styles
node_index -->|"embeds"| node_hero_video
node_index -->|"plays"| node_music
node_index -->|"renders"| node_image_assets
node_script -->|"applies defaults"| node_config
node_script -->|"reads and saves edits"| node_local_storage
node_script -->|"updates invitation fields"| node_index
node_config_template -.->|"defines portable shape"| node_config
node_image_optimizer -->|"prepares"| node_image_assets
node_qr_page -->|"encodes hosted URL"| node_index
node_qr_page -->|"hosted with"| node_static_host

click node_index "https://github.com/mohammedadamdev/marriageinvitation/blob/main/index.html"
click node_script "https://github.com/mohammedadamdev/marriageinvitation/blob/main/script.js"
click node_config "https://github.com/mohammedadamdev/marriageinvitation/blob/main/config.js"
click node_config_template "https://github.com/mohammedadamdev/marriageinvitation/blob/main/config-template.json"
click node_styles "https://github.com/mohammedadamdev/marriageinvitation/blob/main/styles.css"
click node_hero_video "https://github.com/mohammedadamdev/marriageinvitation/blob/main/assets/videos/hero-video-BkP1eoiB.mp4"
click node_music "https://github.com/mohammedadamdev/marriageinvitation/blob/main/assets/audio/wedding-background-music.mp3"
click node_image_assets "https://github.com/mohammedadamdev/marriageinvitation/tree/main/assets/images"
click node_image_optimizer "https://github.com/mohammedadamdev/marriageinvitation/blob/main/tools/optimize_images.py"
click node_qr_page "https://github.com/mohammedadamdev/marriageinvitation/blob/main/qr-generator.html"
click node_vercel "https://github.com/mohammedadamdev/marriageinvitation/blob/main/vercel.json"
click node_deployment_docs "https://github.com/mohammedadamdev/marriageinvitation/blob/main/DEPLOYMENT.md"
click node_local_server "https://github.com/mohammedadamdev/marriageinvitation/blob/main/serve.py"

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_index,node_script,node_config,node_config_template,node_styles,node_local_storage toneBlue
class node_qr_page,node_static_host,node_vercel,node_deployment_docs,node_local_server toneAmber
class node_hero_video,node_music,node_image_assets,node_image_optimizer toneMint
```

## Components

### Invitation runtime

Browser-only public invitation and local editing.

- [Invitation page](https://github.com/mohammedadamdev/marriageinvitation/blob/main/index.html): HTML entry point · Public invitation structure and editing UI. · `index.html`
- [Client behavior](https://github.com/mohammedadamdev/marriageinvitation/blob/main/script.js): browser script · Applies content, manages editing, and saves local changes. · `script.js`
- [Default invitation data](https://github.com/mohammedadamdev/marriageinvitation/blob/main/config.js): JavaScript config · Static content defaults applied at initialization. · `config.js`
- [Config template](https://github.com/mohammedadamdev/marriageinvitation/blob/main/config-template.json): JSON template · Portable configuration shape for manual use. · `config-template.json`
- [Visual system](https://github.com/mohammedadamdev/marriageinvitation/blob/main/styles.css): CSS · Responsive and print presentation. · `styles.css`
- **Browser local storage**: browser persistence · Per-browser edits; not shared or server-backed.

### Sharing & hosting

Static delivery and QR sharing.

- [QR generator](https://github.com/mohammedadamdev/marriageinvitation/blob/main/qr-generator.html): HTML entry point · Creates a QR sharing experience for the hosted invitation URL. · `qr-generator.html`
- **Static hosting**: deployment runtime · Serves static files to browsers.
- [Vercel deployment config](https://github.com/mohammedadamdev/marriageinvitation/blob/main/vercel.json): deployment config · `vercel.json`
- [Deployment guide](https://github.com/mohammedadamdev/marriageinvitation/blob/main/DEPLOYMENT.md): documentation · `DEPLOYMENT.md`
- [Local preview server](https://github.com/mohammedadamdev/marriageinvitation/blob/main/serve.py): Python server · Avoids browser file-origin restrictions during preview. · `serve.py`

### Media & preparation

Repository-hosted media and offline optimization.

- [Hero video](https://github.com/mohammedadamdev/marriageinvitation/blob/main/assets/videos/hero-video-BkP1eoiB.mp4): media asset · `assets/videos/hero-video-BkP1eoiB.mp4`
- [Background music](https://github.com/mohammedadamdev/marriageinvitation/blob/main/assets/audio/wedding-background-music.mp3): audio asset · `assets/audio/wedding-background-music.mp3`
- [Image assets](https://github.com/mohammedadamdev/marriageinvitation/tree/main/assets/images): media directory · Gallery and invitation imagery. · `assets/images`
- [Image optimizer](https://github.com/mohammedadamdev/marriageinvitation/blob/main/tools/optimize_images.py): offline Python utility · Prepares image assets outside the page runtime. · `tools/optimize_images.py`

## Connections

- Static hosting → Invitation page: serves
- Vercel deployment config → Static hosting: configures
- Deployment guide → Static hosting: documents deployment
- Local preview server → Invitation page: serves locally
- Invitation page → Client behavior: loads
- Invitation page → Visual system: uses
- Invitation page → Hero video: embeds
- Invitation page → Background music: plays
- Invitation page → Image assets: renders
- Client behavior → Default invitation data: applies defaults
- Client behavior → Browser local storage: reads and saves edits
- Client behavior → Invitation page: updates invitation fields
- Config template → Default invitation data: defines portable shape
- Image optimizer → Image assets: prepares
- QR generator → Invitation page: encodes hosted URL
- QR generator → Static hosting: hosted with