# gunal-k/tripinn_demo architecture

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

- Interactive diagram: https://gitdiagram.com/gunal-k/tripinn_demo
- Repository: https://github.com/gunal-k/tripinn_demo

## Overview

Tripinn Holidays is a lightweight travel website for discovering fixed group tours and enquiring about bookings. The documented customer flow is to browse tours, inspect package details, and continue to the Tripinn team through WhatsApp. The sampled JavaScript shows itinerary data rendered into a modal and a booking link created from the selected trip. The README also describes contact and responsive-site capabilities; the implementation excerpts are partial, so those branches are represented only where documented.

Main entry points: [`script.js`](https://github.com/gunal-k/tripinn_demo/blob/main/script.js) (Itinerary details), [`index.html`](https://github.com/gunal-k/tripinn_demo/blob/main/index.html) (Tour catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Tour discovery"]
  node_tour_catalog["Tour catalog<br/>[index.html]"]
  node_tour_interactions["Tour interactions<br/>[script.js]"]
  node_itinerary_content["Itinerary details<br/>[script.js]"]
end

subgraph group_experience["Website experience"]
  node_website_ui["Website UI<br/>[style.css]"]
end

subgraph group_enquiry["Booking enquiry"]
  node_booking_link["WhatsApp booking link<br/>[script.js]"]
end

node_traveler(("Traveler"))
node_whatsapp{{"WhatsApp"}}
node_tripinn_team(("Tripinn team"))

node_traveler -->|"browses tours"| node_tour_catalog
node_tour_catalog -.->|"selects tour"| node_tour_interactions
node_tour_interactions -->|"opens itinerary"| node_itinerary_content
node_traveler -->|"views details"| node_itinerary_content
node_itinerary_content -->|"sets booking URL"| node_booking_link
node_traveler -->|"books or enquires"| node_whatsapp
node_whatsapp -->|"delivers enquiry"| node_tripinn_team

click node_tour_catalog "https://github.com/gunal-k/tripinn_demo/blob/main/index.html"
click node_tour_interactions "https://github.com/gunal-k/tripinn_demo/blob/main/script.js"
click node_itinerary_content "https://github.com/gunal-k/tripinn_demo/blob/main/script.js"
click node_website_ui "https://github.com/gunal-k/tripinn_demo/blob/main/style.css"
click node_booking_link "https://github.com/gunal-k/tripinn_demo/blob/main/script.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_tour_catalog,node_tour_interactions,node_itinerary_content toneBlue
class node_website_ui toneAmber
class node_booking_link toneMint
class node_traveler,node_whatsapp,node_tripinn_team toneIndigo
```

## Components

### Tour discovery

- [Tour catalog](https://github.com/gunal-k/tripinn_demo/blob/main/index.html): `index.html`
- [Tour interactions](https://github.com/gunal-k/tripinn_demo/blob/main/script.js): `script.js`
- [Itinerary details](https://github.com/gunal-k/tripinn_demo/blob/main/script.js): `script.js`

### Website experience

- [Website UI](https://github.com/gunal-k/tripinn_demo/blob/main/style.css): `style.css`

### Booking enquiry

- [WhatsApp booking link](https://github.com/gunal-k/tripinn_demo/blob/main/script.js): `script.js`

### Other components

- **Traveler**
- **WhatsApp**
- **Tripinn team**

## Connections

- Traveler → Tour catalog: browses tours (evidence: `README.md`)
- Tour catalog → Tour interactions: selects tour
- Tour interactions → Itinerary details: opens itinerary (evidence: `script.js`)
- Traveler → Itinerary details: views details (evidence: `README.md`)
- Itinerary details → WhatsApp booking link: sets booking URL (evidence: `script.js`)
- Traveler → WhatsApp: books or enquires (evidence: `README.md`)
- WhatsApp → Tripinn team: delivers enquiry (evidence: `README.md`)