# Changan Digital Owner Manuals Platform
### پلتفرم راهنمای دیجیتال و تعاملی خودروهای چانگان
### 长安汽车数字化车主手册与驾驶指南平台

A complete, high-fidelity offline web platform supporting official Changan digital vehicle manuals in **English**, **Persian (فارسی)** with **Fluent RTL**, and the **Original Chinese (中文)**. Features an interactive Multi-Vehicle Portal, First-Time Visitor Language Onboarding Modal, Vehicle Scoped Search Engine, and comprehensive technical guides with all local diagrams and switch panels.

---

## 🌟 Key Features

### 1. 🚗 Multi-Vehicle Home Portal (`index.html`)
- **Vehicle Catalog Grid**:
  - Showcases Changan models with high-resolution vehicle photography.
  - **Car names placed directly under their photos** with edition and trim details.
  - **Large Action Buttons** (`.btn-car-select` with 16px font and 16px 24px padding) for easy selection on desktop and mobile.
  - Active Model: **Changan CS55 PLUS (4th Generation / CAOM725311)** with 286 technical topics, interactive switchboards, and 34 dashboard warning lamps (featuring authentic exterior photography).
  - Upcoming Model: **Changan X5 PLUS 2026** (Next-Gen Intelligent Cockpit & Sport Styling).
- **Direct Redirection to Vehicle Guidebook**:
  - Selecting any vehicle redirects directly to its dedicated manual (`manual.html?car=cs55plus`).
  - The manual includes a prominent **"← All Models" / "← مدل‌های خودرو"** back button to return to the car selection portal anytime.

### 2. 🌐 First-Time Visitor Language Selection Modal
- Automatically detects first-time visitors (`!localStorage.getItem('changan_user_lang_selected')`).
- Displays a central modal with a blurred backdrop:
  - **Question strictly in English**: `"Please select your language"`
  - 3 large, accessible interactive options:
    - 🇬🇧 **English** (UK/US)
    - 🇮🇷 **Persian** (فارسی)
    - 🇨🇳 **Chinese** (中文 简体)
  - Instantly saves preference, applies text translations, switches layout direction (`dir="rtl"` for Persian), and closes smoothly.
  - Language can still be changed anytime from the header dropdown menu.

### 3. 🔍 Scoped Search Engine
- The search engine is strictly scoped to the active vehicle model:
  - Header search input placeholder dynamically identifies the vehicle:
    - *EN*: `Search CS55 PLUS manual (e.g., adaptive cruise, start engine, fuses, TPMS)...`
    - *FA*: `جستجو در راهنمای CS55 پلاس (مانند: کروز کنترل، استارت، فیوزها، باد تایر)...`
    - *ZH*: `搜索 CS55 PLUS 手册（如：自适应巡航、启动发动机、保险丝、胎压）...`
  - Real-time search modal displays a vehicle scope indicator badge:
    `🚗 Searching inside CS55 PLUS Manual (286 topics)`
  - Results are filtered exclusively to the selected car's documentation.

### 4. 🖼️ Fixed Image Background & Contrast
- Fixed the welcome hero banner image (`assets/images/ui/63d14fc3-1cb8-407a-95ff-4d9392e8894d.png`):
  - Previously, the white "CS55" lettering was on a transparent background and became invisible on white cards.
  - Now composited on a dark automotive gradient banner (`#0e1620` to `#172d3a`) with a subtle teal accent border.
  - The white `"CS55"`, red `"S"`, and red `"PLUS"` badge are crisp, vivid, and 100% visible across any light, dark, or transparent backdrop.
  - `.welcome-car-img` in CSS is also styled with a dark gradient container, rounded corners, and elevation shadow.

### 5. 🇮🇷 Native Persian Localization with Fluent RTL (`dir="rtl"`)
- Full automotive Persian engineering translation for all 13 sections/plates, 286 topics, and 92 interactive switch buttons/warning lamps.
- Embedded Google Font **Vazirmatn** (`wght@300;400;500;600;700;800`).
- Mirrored navigation sidebar, breadcrumbs, accordion arrows, callouts (`border-right`), and pagination.
- Zero external translation APIs used; translated natively using Gemini.

---

## 🚀 How to Run

Run the platform using a local HTTP server:

```bash
# In the project directory:
python3 -m http.server 8080
```

Open your browser to:
👉 **[http://localhost:8080/](http://localhost:8080/)**

- **Home Portal**: `http://localhost:8080/index.html`
- **CS55 PLUS Guidebook**: `http://localhost:8080/manual.html?car=cs55plus`
- **Direct Persian Link**: `http://localhost:8080/index.html?lang=fa`

---

## 📁 Project Architecture

```
CS55Plus Manual/
├── index.html                   # Multi-Vehicle Home Portal & First-Visit Language Modal
├── manual.html                  # Interactive Vehicle Guidebook (scoped search & back button)
├── assets/
│   ├── css/
│   │   ├── home.css             # Dedicated Home Portal stylesheet (catalog grid, modal, RTL)
│   │   ├── style.css            # Guidebook stylesheet (sidebar, breadcrumbs, alert callouts)
│   │   ├── htmlCustom.css       # Cleaned original manual typography styles
│   │   └── app.css              # Reset & layout foundations
│   ├── js/
│   │   ├── home.js              # Home portal router, vehicle catalog, first-visit language modal
│   │   └── app.js               # Guidebook engine, scoped search, trilingual toggle, lightbox
│   └── images/
│       ├── ui/                  # Vehicle card photos, icons, plates, warning lamp indicators
│       └── topics/              # 394 technical diagrams, wiring, mechanical illustrations
├── data/
│   ├── manual_fa.json           # Persian manual (286 topics + welcome + 13 plates)
│   ├── manual_en.json           # English manual (286 topics + welcome + 13 plates)
│   ├── manual_zh.json           # Chinese manual (286 topics + welcome + 13 plates)
│   ├── plates_fa.json           # Persian category hierarchy & navigation structure
│   ├── plates_en.json           # English category hierarchy & navigation structure
│   ├── quickentry_fa.json       # Persian interactive switch cards (92 buttons & indicators)
│   ├── quickentry_en.json       # English interactive switch cards (92 buttons & indicators)
│   ├── welcome_fa.json          # Persian welcome hero section & safety disclaimer
│   ├── welcome_en.json          # English welcome hero section & safety disclaimer
│   ├── search_index_fa.json     # Persian full-text search index
│   └── search_index.json        # English full-text search index
└── README.md                    # Project documentation
```