# fartoos-company/fartoos-company.github.io architecture

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

- Interactive diagram: https://gitdiagram.com/fartoos-company/fartoos-company.github.io
- Repository: https://github.com/fartoos-company/fartoos-company.github.io

## Overview

Fartoos is a static company website presenting access-control products, installation locations, a product gallery, and contact information. Visitors browse the page, switch between Persian and English, and view installation points on a map loaded from JSON. The main script also handles theme, navigation, scroll reveal, and gallery behavior. The README describes the site but provides no architecture details; source excerpts are partial, so the graph includes only relationships directly shown there.

Main entry points: [`js/main.js`](https://github.com/fartoos-company/fartoos-company.github.io/blob/main/js/main.js) (Page interactions), [`index.html`](https://github.com/fartoos-company/fartoos-company.github.io/blob/main/index.html) (Company website), [`js/language.js`](https://github.com/fartoos-company/fartoos-company.github.io/blob/main/js/language.js) (Language system), [`css/style.css`](https://github.com/fartoos-company/fartoos-company.github.io/blob/main/css/style.css) (Site styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Website experience"]
  node_website["Company website<br/>[index.html]"]
  node_styles["Site styling<br/>[style.css]"]
end

subgraph group_runtime["Client runtime"]
  node_main["Page interactions<br/>[main.js]"]
  node_language["Language system<br/>[language.js]"]
end

subgraph group_content["Site content"]
  node_barriers["Barrier data<br/>[barrier-data.json]"]
end

node_visitor(("Visitor"))
node_leaflet["Leaflet map"]
node_tiles["OpenStreetMap tiles"]

node_visitor -->|"browses"| node_website
node_website -.->|"loads"| node_main
node_website -.->|"loads"| node_language
node_website -.->|"uses"| node_styles
node_main -->|"fetches"| node_barriers
node_main -->|"creates map"| node_leaflet
node_main -->|"loads tiles"| node_tiles
node_language -->|"dispatches language event"| node_main

click node_website "https://github.com/fartoos-company/fartoos-company.github.io/blob/main/index.html"
click node_styles "https://github.com/fartoos-company/fartoos-company.github.io/blob/main/css/style.css"
click node_main "https://github.com/fartoos-company/fartoos-company.github.io/blob/main/js/main.js"
click node_language "https://github.com/fartoos-company/fartoos-company.github.io/blob/main/js/language.js"
click node_barriers "https://github.com/fartoos-company/fartoos-company.github.io/blob/main/assets/data/barrier-data.json"

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_website,node_styles toneBlue
class node_main,node_language toneAmber
class node_barriers toneMint
class node_visitor,node_leaflet,node_tiles toneIndigo
```

## Components

### Website experience

- [Company website](https://github.com/fartoos-company/fartoos-company.github.io/blob/main/index.html): `index.html`
- [Site styling](https://github.com/fartoos-company/fartoos-company.github.io/blob/main/css/style.css): `css/style.css`

### Client runtime

- [Page interactions](https://github.com/fartoos-company/fartoos-company.github.io/blob/main/js/main.js): `js/main.js`
- [Language system](https://github.com/fartoos-company/fartoos-company.github.io/blob/main/js/language.js): `js/language.js`

### Site content

- [Barrier data](https://github.com/fartoos-company/fartoos-company.github.io/blob/main/assets/data/barrier-data.json): `assets/data/barrier-data.json`

### Other components

- **Visitor**
- **Leaflet map**
- **OpenStreetMap tiles**

## Connections

- Visitor → Company website: browses
- Company website → Page interactions: loads
- Company website → Language system: loads
- Company website → Site styling: uses
- Page interactions → Barrier data: fetches (evidence: `js/main.js`)
- Page interactions → Leaflet map: creates map (evidence: `js/main.js`)
- Page interactions → OpenStreetMap tiles: loads tiles (evidence: `js/main.js`)
- Language system → Page interactions: dispatches language event (evidence: `js/language.js`)