AutoExplorer 🚗

An interactive vehicle systems explorer with engineering blueprint aesthetics. Select any vehicle, then dive into its systems: engine, drivetrain, electrical, brakes, cooling, and body/safety — with hover inspections and detailed part specs.

Features

• 4 vehicles: Toyota Camry, Ford F-150, Jeep Wrangler, Chevrolet Corvette
• 6 systems per vehicle: Engine & Powertrain, Drivetrain & Steering, Electrical System, Braking & Wheels, Cooling & Lubrication, Body/Interior/Safety
• Canvas blueprint rendering: Each system triggers a unique visual overlay on the vehicle silhouette
• Interactive hotspots: Click glowing dots to jump to parts
• Hover-to-inspect: Hover component list items to see a summary panel
• Click for full spec: Opens a modal with function, how it works, common issues, and maintenance interval
• Animated green-on-black aesthetic inspired by engineering schematics
• System color coding: Each tab switches the accent color of the entire UI

Project structure

auto-explorer/
├── index.html          # Main HTML shell
├── css/
│   └── style.css       # All styling + system color themes
├── js/
│   ├── renderer.js     # Canvas blueprint drawing engine
│   └── app.js          # Application logic & interactions
└── data/
    ├── vehicles.js     # Vehicle metadata & hotspot positions
    └── parts.js        # Parts database (all systems, all descriptions)

Extending the project

Add a new vehicle

In data/vehicles.js, add a new key to VEHICLES with systemHotspots for each of the 6 systems. Add a new <option> in index.html. Add a draw function in renderer.js and route it in Renderer.render().

Add parts to a system

In data/parts.js, add a new object to the relevant system's groups[].parts array with: id, name, sub, icon, desc, function, how, issues[], interval.

Add a new system tab

1. Add a button in index.html with data-system="yoursystem"
2. Add a color in css/style.css under /* System color accents */
3. Add the system data in data/parts.js under SYSTEMS
4. Add hotspot positions for each vehicle in data/vehicles.js

Tech stack

• Pure HTML/CSS/JS — zero dependencies, zero build tools
• Google Fonts (Orbitron, Rajdhani, Share Tech Mono) — loaded via CDN
• HTML5 Canvas for vehicle blueprint rendering
• 100% free to build and host