# anoops-zeta/valentines2026 architecture

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

- Interactive diagram: https://gitdiagram.com/anoops-zeta/valentines2026
- Repository: https://github.com/anoops-zeta/valentines2026

## Overview

This is a browser-based, swipeable Valentine’s quiz experience. The main flow is: the user starts the experience, the script obtains question data, builds the quiz, presents cards for answering, validates responses, and transitions to an outro with sharing. The sampled script is a large single-file implementation, so several responsibilities below share its path. The README is empty and source excerpts are partial; links for unsampled details are omitted.

Main entry points: [`script.js`](https://github.com/anoops-zeta/valentines2026/blob/main/script.js) (Experience controller), [`assets`](https://github.com/anoops-zeta/valentines2026/tree/main/assets) (JSON assets), [`index.html`](https://github.com/anoops-zeta/valentines2026/blob/main/index.html) (Page template), [`assets/test.json`](https://github.com/anoops-zeta/valentines2026/blob/main/assets/test.json) (Test data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Quiz experience"]
  node_page["Page template<br/>[index.html]"]
  node_app["Experience controller<br/>[script.js]"]
  node_intro["Intro and start<br/>[script.js]"]
  node_cards["Question cards<br/>[script.js]"]
  node_validation["Answer validation<br/>[script.js]"]
  node_outro["Outro and share<br/>[script.js]"]
end

subgraph group_content["Question content"]
  node_questions["Question builder<br/>[script.js]"]
  node_jsondata["JSON assets"]
  node_testdata["Test data<br/>[test.json]"]
  node_heartdata["Heart data<br/>[heart.json]"]
  node_letterdata["Letter data<br/>[letter.json]"]
end

subgraph group_integrations["Browser integrations"]
  node_payzapp["PayZapp bridge"]
  node_gsap["GSAP"]
  node_browser["Browser APIs"]
end

node_user(("User"))

node_user -->|"uses"| node_page
node_page -->|"loads"| node_app
node_app -->|"initializes"| node_intro
node_user -->|"starts"| node_intro
node_app -.->|"fetches data"| node_payzapp
node_app -->|"builds questions"| node_questions
node_questions -.->|"reads data"| node_jsondata
node_jsondata -->|"includes"| node_testdata
node_jsondata -->|"includes"| node_heartdata
node_jsondata -->|"includes"| node_letterdata
node_app -->|"updates"| node_cards
node_user -->|"answers"| node_cards
node_cards -->|"checks answer"| node_validation
node_validation -->|"transitions"| node_outro
node_app -->|"animates with"| node_gsap
node_app -->|"uses"| node_browser
node_outro -->|"shares"| node_user

click node_page "https://github.com/anoops-zeta/valentines2026/blob/main/index.html"
click node_app "https://github.com/anoops-zeta/valentines2026/blob/main/script.js"
click node_intro "https://github.com/anoops-zeta/valentines2026/blob/main/script.js"
click node_cards "https://github.com/anoops-zeta/valentines2026/blob/main/script.js"
click node_validation "https://github.com/anoops-zeta/valentines2026/blob/main/script.js"
click node_outro "https://github.com/anoops-zeta/valentines2026/blob/main/script.js"
click node_questions "https://github.com/anoops-zeta/valentines2026/blob/main/script.js"
click node_jsondata "https://github.com/anoops-zeta/valentines2026/tree/main/assets"
click node_testdata "https://github.com/anoops-zeta/valentines2026/blob/main/assets/test.json"
click node_heartdata "https://github.com/anoops-zeta/valentines2026/blob/main/assets/heart.json"
click node_letterdata "https://github.com/anoops-zeta/valentines2026/blob/main/assets/letter.json"

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_app,node_intro,node_cards,node_validation,node_outro,node_user toneBlue
class node_questions,node_jsondata,node_testdata,node_heartdata,node_letterdata toneAmber
class node_payzapp,node_gsap,node_browser toneMint
```

## Components

### Quiz experience

- [Page template](https://github.com/anoops-zeta/valentines2026/blob/main/index.html): `index.html`
- [Experience controller](https://github.com/anoops-zeta/valentines2026/blob/main/script.js): `script.js`
- [Intro and start](https://github.com/anoops-zeta/valentines2026/blob/main/script.js): `script.js`
- [Question cards](https://github.com/anoops-zeta/valentines2026/blob/main/script.js): `script.js`
- [Answer validation](https://github.com/anoops-zeta/valentines2026/blob/main/script.js): `script.js`
- [Outro and share](https://github.com/anoops-zeta/valentines2026/blob/main/script.js): `script.js`

### Question content

- [Question builder](https://github.com/anoops-zeta/valentines2026/blob/main/script.js): `script.js`
- [JSON assets](https://github.com/anoops-zeta/valentines2026/tree/main/assets): `assets`
- [Test data](https://github.com/anoops-zeta/valentines2026/blob/main/assets/test.json): `assets/test.json`
- [Heart data](https://github.com/anoops-zeta/valentines2026/blob/main/assets/heart.json): `assets/heart.json`
- [Letter data](https://github.com/anoops-zeta/valentines2026/blob/main/assets/letter.json): `assets/letter.json`

### Browser integrations

- **PayZapp bridge**
- **GSAP**
- **Browser APIs**

### Other components

- **User**

## Connections

- User → Page template: uses
- Page template → Experience controller: loads
- Experience controller → Intro and start: initializes
- User → Intro and start: starts
- Experience controller → PayZapp bridge: fetches data
- Experience controller → Question builder: builds questions
- Question builder → JSON assets: reads data
- JSON assets → Test data: includes
- JSON assets → Heart data: includes
- JSON assets → Letter data: includes
- Experience controller → Question cards: updates
- User → Question cards: answers
- Question cards → Answer validation: checks answer
- Answer validation → Outro and share: transitions
- Experience controller → GSAP: animates with
- Experience controller → Browser APIs: uses
- Outro and share → User: shares