# kakashi159shinobi-blip/skyhigh architecture

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

- Interactive diagram: https://gitdiagram.com/kakashi159shinobi-blip/skyhigh
- Repository: https://github.com/kakashi159shinobi-blip/skyhigh

## Overview

SkyHigh is a client-side rooftop restaurant website. Visitors browse restaurant content and menu categories, open gallery images, submit reservation details for local validation and a confirmation summary, and subscribe to a newsletter for a toast response. The sampled JavaScript shows these interactions but not the HTML or image contents, so those connections are limited to the files and behavior supported by the tree and excerpts.

Main entry points: [`index.html`](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/index.html) (Restaurant Page), [`script.js`](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js) (Reservation Validation), [`images`](https://github.com/kakashi159shinobi-blip/skyhigh/tree/main/images) (Restaurant Images), [`style.css`](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/style.css) (Page Styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Restaurant Site"]
  node_page["Restaurant Page<br/>[index.html]"]
  node_assets["Restaurant Images"]
  node_styles["Page Styling<br/>[style.css]"]
end

subgraph group_interactions["Visitor Interactions"]
  node_navigation["Navigation<br/>[script.js]"]
  node_menu["Menu Filtering<br/>[script.js]"]
  node_gallery["Gallery Lightbox<br/>[script.js]"]
  node_reservation["Reservation Validation<br/>[script.js]"]
  node_newsletter["Newsletter Handling<br/>[script.js]"]
end

subgraph group_feedback["User Feedback"]
  node_summary["Reservation Summary<br/>[index.html]"]
  node_toast["Toast Notifications<br/>[script.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"browses"| node_page
node_page -->|"styled by"| node_styles
node_page -->|"displays"| node_assets
node_visitor -->|"uses"| node_navigation
node_visitor -->|"selects category"| node_menu
node_visitor -->|"opens image"| node_gallery
node_visitor -->|"submits details"| node_reservation
node_reservation -->|"populates"| node_summary
node_visitor -->|"submits email"| node_newsletter
node_newsletter -->|"shows message"| node_toast

click node_page "https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/index.html"
click node_assets "https://github.com/kakashi159shinobi-blip/skyhigh/tree/main/images"
click node_styles "https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/style.css"
click node_navigation "https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js"
click node_menu "https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js"
click node_gallery "https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js"
click node_reservation "https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js"
click node_newsletter "https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js"
click node_summary "https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/index.html"
click node_toast "https://github.com/kakashi159shinobi-blip/skyhigh/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_page,node_assets,node_styles toneBlue
class node_navigation,node_menu,node_gallery,node_reservation,node_newsletter toneAmber
class node_summary,node_toast toneMint
class node_visitor toneIndigo
```

## Components

### Restaurant Site

- [Restaurant Page](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/index.html): `index.html`
- [Restaurant Images](https://github.com/kakashi159shinobi-blip/skyhigh/tree/main/images): `images`
- [Page Styling](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/style.css): `style.css`

### Visitor Interactions

- [Navigation](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js): `script.js`
- [Menu Filtering](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js): `script.js`
- [Gallery Lightbox](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js): `script.js`
- [Reservation Validation](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js): `script.js`
- [Newsletter Handling](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js): `script.js`

### User Feedback

- [Reservation Summary](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/index.html): `index.html`
- [Toast Notifications](https://github.com/kakashi159shinobi-blip/skyhigh/blob/main/script.js): `script.js`

### Other components

- **Visitor**

## Connections

- Visitor → Restaurant Page: browses
- Restaurant Page → Page Styling: styled by
- Restaurant Page → Restaurant Images: displays
- Visitor → Navigation: uses
- Visitor → Menu Filtering: selects category
- Visitor → Gallery Lightbox: opens image
- Visitor → Reservation Validation: submits details
- Reservation Validation → Reservation Summary: populates
- Visitor → Newsletter Handling: submits email
- Newsletter Handling → Toast Notifications: shows message