# grouppowerrangers/wbdv111_midtermlabexam-826-auto-care architecture
> Architecture diagram of the GitHub repository grouppowerrangers/wbdv111_midtermlabexam-826-auto-care, 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/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care
- Repository: https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care
## Overview
826 Auto Care is a customer-facing automotive detailing and protection site. Visitors browse the landing page and service descriptions, then can open a booking form; the client-side script validates booking details, previews a confirmation, and stores selected dates in browser localStorage. The README also documents responsive presentation, customer ratings, and service showcase capabilities. The sampled booking and script excerpts are partial; no server-side booking submission or persistent business booking store is evidenced, so neither is modeled.
Main entry points: [`index.php`](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/index.php) (Home Page), [`booking.php`](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/booking.php) (Booking Form), [`service1.php`](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/service1.php) (Graphene Coating), [`service2.php`](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/service2.php) (Interior Coating)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_discovery["Site Discovery"]
node_home["Home Page
[index.php]"]
node_reviews["Customer Ratings
[index.php]"]
node_locations["Branches & Contact
[index.php]"]
end
subgraph group_services["Service Catalog"]
node_graphene["Graphene Coating
[service1.php]"]
node_interior["Interior Coating
[service2.php]"]
node_ppf["Paint Protection Film
[service3.php]"]
node_package["Package Deal
[service4.php]"]
end
subgraph group_booking["Booking Flow"]
node_booking_form["Booking Form
[booking.php]"]
node_booking_logic["Form Validation
[script.js]"]
node_date_store[("Booked Dates")]
end
subgraph group_presentation["Client Presentation"]
node_menu_gallery["Navigation & Gallery
[script.js]"]
node_website_style["Home Styling
[website.css]"]
node_service_style["Service Styling
[services.css]"]
node_booking_style["Booking Styling
[booking.css]"]
end
node_visitor(("Visitor"))
node_maps["Google Maps"]
node_social["Social Networks"]
node_visitor -->|"opens"| node_home
node_home -->|"shows"| node_reviews
node_home -->|"shows"| node_locations
node_home -->|"links to"| node_graphene
node_home -->|"links to"| node_interior
node_home -->|"links to"| node_ppf
node_home -->|"links to"| node_package
node_home -->|"booking link"| node_booking_form
node_visitor -->|"opens"| node_graphene
node_visitor -->|"opens"| node_interior
node_visitor -->|"opens"| node_ppf
node_visitor -->|"opens"| node_package
node_graphene -->|"booking link"| node_booking_form
node_interior -->|"booking link"| node_booking_form
node_ppf -->|"booking link"| node_booking_form
node_package -->|"booking link"| node_booking_form
node_visitor -->|"fills"| node_booking_form
node_booking_form -->|"loads script"| node_booking_logic
node_booking_logic -->|"reads and writes"| node_date_store
node_locations -->|"opens maps"| node_maps
node_home -->|"links to"| node_social
node_booking_form -->|"loads styles"| node_website_style
node_graphene -->|"loads styles"| node_service_style
node_interior -->|"loads styles"| node_service_style
node_ppf -->|"loads styles"| node_service_style
node_package -->|"loads styles"| node_service_style
node_booking_form -->|"loads styles"| node_booking_style
node_home -->|"loads script"| node_menu_gallery
node_graphene -->|"loads script"| node_menu_gallery
node_interior -->|"loads script"| node_menu_gallery
node_ppf -->|"loads script"| node_menu_gallery
node_package -->|"loads script"| node_menu_gallery
click node_home "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/index.php"
click node_reviews "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/index.php"
click node_locations "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/index.php"
click node_graphene "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/service1.php"
click node_interior "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/service2.php"
click node_ppf "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/service3.php"
click node_package "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/service4.php"
click node_booking_form "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/booking.php"
click node_booking_logic "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/script.js"
click node_menu_gallery "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/script.js"
click node_website_style "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/website.css"
click node_service_style "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/services.css"
click node_booking_style "https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/booking.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_reviews,node_locations toneBlue
class node_graphene,node_interior,node_ppf,node_package toneAmber
class node_booking_form,node_booking_logic,node_date_store toneMint
class node_menu_gallery,node_website_style,node_service_style,node_booking_style toneRose
class node_visitor,node_maps,node_social toneIndigo
```
## Components
### Site Discovery
- [Home Page](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/index.php): `index.php`
- [Customer Ratings](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/index.php): `index.php`
- [Branches & Contact](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/index.php): `index.php`
### Service Catalog
- [Graphene Coating](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/service1.php): `service1.php`
- [Interior Coating](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/service2.php): `service2.php`
- [Paint Protection Film](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/service3.php): `service3.php`
- [Package Deal](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/service4.php): `service4.php`
### Booking Flow
- [Booking Form](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/booking.php): `booking.php`
- [Form Validation](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/script.js): `script.js`
- **Booked Dates**
### Client Presentation
- [Navigation & Gallery](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/script.js): `script.js`
- [Home Styling](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/website.css): `website.css`
- [Service Styling](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/services.css): `services.css`
- [Booking Styling](https://github.com/grouppowerrangers/wbdv111_midtermlabexam-826-auto-care/blob/main/booking.css): `booking.css`
### Other components
- **Visitor**
- **Google Maps**
- **Social Networks**
## Connections
- Visitor → Home Page: opens
- Home Page → Customer Ratings: shows
- Home Page → Branches & Contact: shows
- Home Page → Graphene Coating: links to
- Home Page → Interior Coating: links to
- Home Page → Paint Protection Film: links to
- Home Page → Package Deal: links to
- Home Page → Booking Form: booking link
- Visitor → Graphene Coating: opens
- Visitor → Interior Coating: opens
- Visitor → Paint Protection Film: opens
- Visitor → Package Deal: opens
- Graphene Coating → Booking Form: booking link
- Interior Coating → Booking Form: booking link
- Paint Protection Film → Booking Form: booking link
- Package Deal → Booking Form: booking link
- Visitor → Booking Form: fills
- Booking Form → Form Validation: loads script
- Form Validation → Booked Dates: reads and writes
- Branches & Contact → Google Maps: opens maps
- Home Page → Social Networks: links to
- Booking Form → Home Styling: loads styles
- Graphene Coating → Service Styling: loads styles
- Interior Coating → Service Styling: loads styles
- Paint Protection Film → Service Styling: loads styles
- Package Deal → Service Styling: loads styles
- Booking Form → Booking Styling: loads styles
- Home Page → Navigation & Gallery: loads script
- Graphene Coating → Navigation & Gallery: loads script
- Interior Coating → Navigation & Gallery: loads script
- Paint Protection Film → Navigation & Gallery: loads script
- Package Deal → Navigation & Gallery: loads script