# heba-aboud/final-project-2320230975 architecture

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

- Interactive diagram: https://gitdiagram.com/heba-aboud/final-project-2320230975
- Repository: https://github.com/heba-aboud/final-project-2320230975

## Overview

An Arabic recipe website presents recipe listings and details, with search/filter interactions and a contact form. The sampled JavaScript shows recipe data, card rendering, modal handling, navigation highlighting, filtering, and form validation. The HTML and CSS contents were not sampled, so page-to-script wiring and page-specific capabilities are shown only where filenames or script behavior support them.

Main entry points: [`js/script.js`](https://github.com/heba-aboud/final-project-2320230975/blob/main/js/script.js) (Page interactions), [`css/style.css`](https://github.com/heba-aboud/final-project-2320230975/blob/main/css/style.css) (Site styles), [`index.html`](https://github.com/heba-aboud/final-project-2320230975/blob/main/index.html) (Home page), [`recipes.html`](https://github.com/heba-aboud/final-project-2320230975/blob/main/recipes.html) (Recipes page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site pages"]
  node_home["Home page<br/>[index.html]"]
  node_recipes_page["Recipes page<br/>[recipes.html]"]
  node_about["About page<br/>[about.html]"]
  node_contact["Contact page<br/>[contact.html]"]
end

subgraph group_runtime["Recipe experience"]
  node_runtime_js["Page interactions<br/>[script.js]"]
  node_recipe_data["Recipe catalog<br/>[script.js]"]
end

subgraph group_assets["Presentation assets"]
  node_styles["Site styles<br/>[style.css]"]
  node_images["Recipe images"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_recipes_page
node_visitor -->|"opens"| node_about
node_visitor -->|"opens"| node_contact
node_runtime_js -->|"reads"| node_recipe_data
node_runtime_js -->|"renders cards"| node_home
node_runtime_js -->|"filters recipes"| node_recipes_page
node_runtime_js -->|"finds details"| node_recipe_data
node_runtime_js -->|"uses image paths"| node_images
node_visitor -->|"searches and filters"| node_runtime_js
node_visitor -->|"opens recipe details"| node_runtime_js
node_visitor -->|"submits contact form"| node_runtime_js
node_home -->|"styled by"| node_styles
node_recipes_page -->|"styled by"| node_styles
node_about -->|"styled by"| node_styles
node_contact -->|"styled by"| node_styles

click node_home "https://github.com/heba-aboud/final-project-2320230975/blob/main/index.html"
click node_recipes_page "https://github.com/heba-aboud/final-project-2320230975/blob/main/recipes.html"
click node_about "https://github.com/heba-aboud/final-project-2320230975/blob/main/about.html"
click node_contact "https://github.com/heba-aboud/final-project-2320230975/blob/main/contact.html"
click node_runtime_js "https://github.com/heba-aboud/final-project-2320230975/blob/main/js/script.js"
click node_recipe_data "https://github.com/heba-aboud/final-project-2320230975/blob/main/js/script.js"
click node_styles "https://github.com/heba-aboud/final-project-2320230975/blob/main/css/style.css"
click node_images "https://github.com/heba-aboud/final-project-2320230975/tree/main/images"

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_home,node_recipes_page,node_about,node_contact toneBlue
class node_runtime_js,node_recipe_data toneAmber
class node_styles,node_images toneMint
class node_visitor toneIndigo
```

## Components

### Site pages

- [Home page](https://github.com/heba-aboud/final-project-2320230975/blob/main/index.html): `index.html`
- [Recipes page](https://github.com/heba-aboud/final-project-2320230975/blob/main/recipes.html): `recipes.html`
- [About page](https://github.com/heba-aboud/final-project-2320230975/blob/main/about.html): `about.html`
- [Contact page](https://github.com/heba-aboud/final-project-2320230975/blob/main/contact.html): `contact.html`

### Recipe experience

- [Page interactions](https://github.com/heba-aboud/final-project-2320230975/blob/main/js/script.js): `js/script.js`
- [Recipe catalog](https://github.com/heba-aboud/final-project-2320230975/blob/main/js/script.js): `js/script.js`

### Presentation assets

- [Site styles](https://github.com/heba-aboud/final-project-2320230975/blob/main/css/style.css): `css/style.css`
- [Recipe images](https://github.com/heba-aboud/final-project-2320230975/tree/main/images): `images`

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens
- Visitor → Recipes page: opens
- Visitor → About page: opens
- Visitor → Contact page: opens
- Page interactions → Recipe catalog: reads
- Page interactions → Home page: renders cards
- Page interactions → Recipes page: filters recipes
- Page interactions → Recipe catalog: finds details
- Page interactions → Recipe images: uses image paths
- Visitor → Page interactions: searches and filters
- Visitor → Page interactions: opens recipe details
- Visitor → Page interactions: submits contact form
- Home page → Site styles: styled by
- Recipes page → Site styles: styled by
- About page → Site styles: styled by
- Contact page → Site styles: styled by