# ekelly0628/ericakartistry_site architecture

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

- Interactive diagram: https://gitdiagram.com/ekelly0628/ericakartistry_site
- Repository: https://github.com/ekelly0628/ericakartistry_site

## Overview

This is a small beauty-services website: visitors explore service information and a gallery, then submit a session booking and reach a confirmation page. The sampled script implements service selection, booking submission through EmailJS, and a gallery lightbox. The README describes the Astral visual template; HTML files were not sampled, so page contents and script inclusion are inferred only from filenames and the available JavaScript.

Main entry points: [`script.js`](https://github.com/ekelly0628/ericakartistry_site/blob/main/script.js) (Booking form handler), [`index.html`](https://github.com/ekelly0628/ericakartistry_site/blob/main/index.html) (Main site), [`assets/css/main.css`](https://github.com/ekelly0628/ericakartistry_site/blob/main/assets/css/main.css) (Site styling), [`beautytips.html`](https://github.com/ekelly0628/ericakartistry_site/blob/main/beautytips.html) (Beauty tips)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Website pages"]
  node_home["Main site<br/>[index.html]"]
  node_tips["Beauty tips<br/>[beautytips.html]"]
  node_site_styles["Site styling<br/>[main.css]"]
end

subgraph group_booking["Booking flow"]
  node_confirmation["Booking confirmation"]
  node_booking_form["Booking form handler<br/>[script.js]"]
  node_emailjs{{"EmailJS"}}
end

subgraph group_interaction["Page interactions"]
  node_service_picker["Service selection<br/>[script.js]"]
  node_gallery["Gallery lightbox<br/>[script.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"browses"| node_home
node_visitor -->|"reads"| node_tips
node_visitor -->|"submits form"| node_booking_form
node_booking_form -->|"sends booking"| node_emailjs
node_emailjs -->|"reports result"| node_booking_form
node_booking_form -->|"redirects on success"| node_confirmation
node_visitor -->|"chooses service"| node_service_picker
node_visitor -->|"opens image"| node_gallery
node_site_styles -->|"styles page"| node_home

click node_home "https://github.com/ekelly0628/ericakartistry_site/blob/main/index.html"
click node_tips "https://github.com/ekelly0628/ericakartistry_site/blob/main/beautytips.html"
click node_confirmation "https://github.com/ekelly0628/ericakartistry_site/blob/main/confirmbookingPage.html"
click node_booking_form "https://github.com/ekelly0628/ericakartistry_site/blob/main/script.js"
click node_service_picker "https://github.com/ekelly0628/ericakartistry_site/blob/main/script.js"
click node_gallery "https://github.com/ekelly0628/ericakartistry_site/blob/main/script.js"
click node_site_styles "https://github.com/ekelly0628/ericakartistry_site/blob/main/assets/css/main.css"

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_tips,node_site_styles toneBlue
class node_confirmation,node_booking_form,node_emailjs toneAmber
class node_service_picker,node_gallery toneMint
class node_visitor toneIndigo
```

## Components

### Website pages

- [Main site](https://github.com/ekelly0628/ericakartistry_site/blob/main/index.html): `index.html`
- [Beauty tips](https://github.com/ekelly0628/ericakartistry_site/blob/main/beautytips.html): `beautytips.html`
- [Site styling](https://github.com/ekelly0628/ericakartistry_site/blob/main/assets/css/main.css): `assets/css/main.css`

### Booking flow

- [Booking confirmation](https://github.com/ekelly0628/ericakartistry_site/blob/main/confirmbookingPage.html): `confirmbookingPage.html`
- [Booking form handler](https://github.com/ekelly0628/ericakartistry_site/blob/main/script.js): `script.js`
- **EmailJS**

### Page interactions

- [Service selection](https://github.com/ekelly0628/ericakartistry_site/blob/main/script.js): `script.js`
- [Gallery lightbox](https://github.com/ekelly0628/ericakartistry_site/blob/main/script.js): `script.js`

### Other components

- **Visitor**

## Connections

- Visitor → Main site: browses
- Visitor → Beauty tips: reads
- Visitor → Booking form handler: submits form
- Booking form handler → EmailJS: sends booking
- EmailJS → Booking form handler: reports result
- Booking form handler → Booking confirmation: redirects on success
- Visitor → Service selection: chooses service
- Visitor → Gallery lightbox: opens image
- Site styling → Main site: styles page