108 lines
6.5 KiB
Markdown
108 lines
6.5 KiB
Markdown
# 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
|
|
```
|