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.

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:

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

Open your browser to: 👉 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

6.5 KiB Raw Permalink Blame History