Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>2013 Hyundai Elantra GS Coupe Interactive Diagram</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #002c5f; | |
| --secondary-color: #e50012; | |
| --accent-color: #8a8d8f; | |
| --text-color: #333; | |
| --light-bg: #f8f9fa; | |
| --dark-bg: #343a40; | |
| --highlight: #ffc107; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--light-bg); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| padding: 1rem; | |
| text-align: center; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .header h1 { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| font-weight: 700; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .header p { | |
| font-size: 1rem; | |
| opacity: 0.9; | |
| } | |
| .anycoder-link { | |
| position: absolute; | |
| right: 1rem; | |
| top: 1rem; | |
| color: white; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| background: rgba(0, 0, 0, 0.2); | |
| padding: 0.3rem 0.6rem; | |
| border-radius: 4px; | |
| transition: all 0.3s ease; | |
| } | |
| .anycoder-link:hover { | |
| background: rgba(0, 0, 0, 0.4); | |
| transform: translateY(-2px); | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| padding: 0.8rem 1.5rem; | |
| border: none; | |
| border-radius: 50px; | |
| background-color: var(--primary-color); | |
| color: white; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn:hover { | |
| background-color: var(--secondary-color); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| .btn.active { | |
| background-color: var(--secondary-color); | |
| box-shadow: 0 0 0 2px white, 0 0 0 4px var(--secondary-color); | |
| } | |
| .car-container { | |
| position: relative; | |
| width: 100%; | |
| height: 600px; | |
| margin: 2rem 0; | |
| overflow: hidden; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| background: linear-gradient(to bottom, #f0f0f0, #d0d0d0); | |
| perspective: 1000px; | |
| } | |
| .car-image { | |
| width: 100%; | |
| height: 100%; | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDYwMCI+PHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNjAwIiB5PSI0MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM2NmY2NjYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZm9udC13ZWlnaHQ9ImJvbGQiPjEyOSBIeW5kdW5kYSBGbGFyZSAyMDEzIEVYIFNTIENvdXBlPC90ZXh0Pjwvc3ZnPg=='); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| position: relative; | |
| transition: transform 0.5s ease; | |
| } | |
| .car-image.exterior { | |
| background-image: url('https://www.hyundaiusa.com/content/dam/hyundai/us/en/vehicles/elantra/2013/exterior/2013-elantra-exterior-01.jpg'); | |
| } | |
| .car-image.engine { | |
| background-image: url('https://www.hyundaiusa.com/content/dam/hyundai/us/en/vehicles/elantra/2013/performance/2013-elantra-engine.jpg'); | |
| } | |
| .car-image.transmission { | |
| background-image: url('https://www.hyundaiusa.com/content/dam/hyundai/us/en/vehicles/elantra/2013/performance/2013-elantra-transmission.jpg'); | |
| } | |
| .car-image.suspension { | |
| background-image: url('https://www.hyundaiusa.com/content/dam/hyundai/us/en/vehicles/elantra/2013/performance/2013-elantra-suspension.jpg'); | |
| } | |
| .car-image.brakes { | |
| background-image: url('https://www.hyundaiusa.com/content/dam/hyundai/us/en/vehicles/elantra/2013/performance/2013-elantra-brakes.jpg'); | |
| } | |
| .car-image.electrical { | |
| background-image: url('https://www.hyundaiusa.com/content/dam/hyundai/us/en/vehicles/elantra/2013/interior/2013-elantra-electrical.jpg'); | |
| } | |
| .car-image.interior { | |
| background-image: url('https://www.hyundaiusa.com/content/dam/hyundai/us/en/vehicles/elantra/2013/interior/2013-elantra-interior.jpg'); | |
| } | |
| .label { | |
| position: absolute; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 5px; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
| z-index: 10; | |
| opacity: 0; | |
| transform: scale(0.8); | |
| pointer-events: none; | |
| } | |
| .label.visible { | |
| opacity: 1; | |
| transform: scale(1); | |
| pointer-events: auto; | |
| } | |
| .label:hover { | |
| background-color: var(--secondary-color); | |
| transform: scale(1.05); | |
| z-index: 20; | |
| } | |
| .label::after { | |
| content: ''; | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| margin-left: -8px; | |
| border-width: 8px; | |
| border-style: solid; | |
| border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent; | |
| } | |
| .label:hover::after { | |
| border-color: var(--secondary-color) transparent transparent transparent; | |
| } | |
| .info-panel { | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| padding: 1.5rem; | |
| margin-top: 2rem; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .info-panel h3 { | |
| color: var(--primary-color); | |
| margin-bottom: 1rem; | |
| border-bottom: 2px solid var(--accent-color); | |
| padding-bottom: 0.5rem; | |
| } | |
| .info-panel p { | |
| margin-bottom: 0.5rem; | |
| line-height: 1.8; | |
| } | |
| .system-description { | |
| margin-top: 1rem; | |
| padding: 1rem; | |
| background-color: var(--light-bg); | |
| border-radius: 5px; | |
| border-left: 4px solid var(--secondary-color); | |
| } | |
| .component-list { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .component-item { | |
| padding: 0.8rem; | |
| background-color: var(--light-bg); | |
| border-radius: 5px; | |
| border-left: 4px solid var(--primary-color); | |
| transition: all 0.3s ease; | |
| } | |
| .component-item:hover { | |
| background-color: rgba(229, 0, 18, 0.1); | |
| border-left-color: var(--secondary-color); | |
| transform: translateX(5px); | |
| } | |
| .component-item h4 { | |
| color: var(--primary-color); | |
| margin-bottom: 0.3rem; | |
| } | |
| .component-item p { | |
| font-size: 0.9rem; | |
| color: var(--accent-color); | |
| } | |
| .toggle-labels { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| background-color: var(--secondary-color); | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| z-index: 100; | |
| transition: all 0.3s ease; | |
| } | |
| .toggle-labels:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| .toggle-labels i { | |
| font-size: 1.2rem; | |
| } | |
| .search-box { | |
| width: 100%; | |
| max-width: 500px; | |
| margin: 0 auto 2rem; | |
| position: relative; | |
| } | |
| .search-box input { | |
| width: 100%; | |
| padding: 0.8rem 1.5rem; | |
| border: 2px solid var(--accent-color); | |
| border-radius: 50px; | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .search-box input:focus { | |
| outline: none; | |
| border-color: var(--secondary-color); | |
| box-shadow: 0 0 0 3px rgba(229, 0, 18, 0.1); | |
| } | |
| .search-box i { | |
| position: absolute; | |
| right: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--accent-color); | |
| } | |
| .legend { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .legend-color { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| } | |
| .legend-color.engine { | |
| background-color: #ff6b6b; | |
| } | |
| .legend-color.transmission { | |
| background-color: #4ecdc4; | |
| } | |
| .legend-color.suspension { | |
| background-color: #ffe66d; | |
| } | |
| .legend-color.brakes { | |
| background-color: #ff8b94; | |
| } | |
| .legend-color.electrical { | |
| background-color: #a5d296; | |
| } | |
| .legend-color.interior { | |
| background-color: #7fb3d5; | |
| } | |
| .legend-color.exterior { | |
| background-color: #d4a5a5; | |
| } | |
| .new-tab-btn { | |
| position: fixed; | |
| bottom: 2rem; | |
| left: 2rem; | |
| background-color: var(--primary-color); | |
| color: white; | |
| padding: 0.8rem 1.5rem; | |
| border: none; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| z-index: 100; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .new-tab-btn:hover { | |
| background-color: var(--secondary-color); | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| .new-tab-btn i { | |
| font-size: 1rem; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 1rem; | |
| } | |
| .car-container { | |
| height: 400px; | |
| } | |
| .controls { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .btn { | |
| width: 100%; | |
| max-width: 300px; | |
| } | |
| .component-list { | |
| grid-template-columns: 1fr; | |
| } | |
| .toggle-labels { | |
| bottom: 1rem; | |
| right: 1rem; | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .new-tab-btn { | |
| bottom: 1rem; | |
| left: 1rem; | |
| padding: 0.6rem 1rem; | |
| font-size: 0.9rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .header h1 { | |
| font-size: 1.5rem; | |
| } | |
| .car-container { | |
| height: 300px; | |
| } | |
| .label { | |
| font-size: 0.8rem; | |
| padding: 0.3rem 0.6rem; | |
| } | |
| .label::after { | |
| border-width: 6px; | |
| margin-left: -6px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with | |
| anycoder</a> | |
| <h1>2013 Hyundai Elantra GS Coupe</h1> | |
| <p>Interactive Component Diagram</p> | |
| </header> | |
| <div class="container"> | |
| <div class="search-box"> | |
| <input type="text" id="searchInput" placeholder="Search for components..."> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <div class="legend"> | |
| <div class="legend-item"> | |
| <div class="legend-color exterior"></div> | |
| <span>Exterior</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color engine"></div> | |
| <span>Engine</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color transmission"></div> | |
| <span>Transmission</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color suspension"></div> | |
| <span>Suspension</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color brakes"></div> | |
| <span>Brakes</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color electrical"></div> | |
| <span>Electrical</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color interior"></div> | |
| <span>Interior</span> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <button class="btn active" data-system="exterior">Exterior</button> | |
| <button class="btn" data-system="engine">Engine</button> | |
| <button class="btn" data-system="transmission">Transmission</button> | |
| <button class="btn" data-system="suspension">Suspension</button> | |
| <button class="btn" data-system="brakes">Brakes</button> | |
| <button class="btn" data-system="electrical">Electrical</button> | |
| <button class="btn" data-system="interior">Interior</button> | |
| </div> | |
| <div class="car-container"> | |
| <div class="car-image exterior" id="carImage"> | |
| <!-- Labels will be added dynamically --> | |
| </div> | |
| </div> | |
| <div class="info-panel"> | |
| <h3>System Overview</h3> | |
| <div class="system-description" id="systemDescription"> | |
| <p>Select a system from the buttons above to view its components. The 2013 Hyundai Elantra GS Coupe features a | |
| sophisticated combination of mechanical and electrical systems working together to deliver performance and | |
| comfort.</p> | |
| </div> | |
| <div class="component-list" id="componentList"> | |
| <!-- Components will be added dynamically --> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="new-tab-btn" id="newTabBtn"> | |
| <i class="fas fa-external-link-alt"></i> | |
| Open in New Tab | |
| </button> | |
| <div class="toggle-labels" id="toggleLabels"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| <script> | |
| // Car component data organized by system for 2013 Hyundai Elantra GS Coupe | |
| const carComponents = { | |
| exterior: { | |
| name: "Exterior Components", | |
| description: "The exterior system includes all visible parts of the 2013 Hyundai Elantra GS Coupe that contribute to its aerodynamics, styling, and protection.", | |
| components: [ | |
| { name: "Front Bumper", position: { x: 30, y: 45 }, description: "Absorbs impact in front collisions and houses fog lights" }, | |
| { name: "Hood", position: { x: 45, y: 25 }, description: "Protects the engine compartment and provides access for maintenance" }, | |
| { name: "Headlights", position: { x: 25, y: 35 }, description: "Provides illumination and houses turn signals" }, | |
| { name: "Grille", position: { x: 50, y: 30 }, description: "Allows airflow to the radiator and engine bay" }, | |
| { name: "Fenders", position: { x: 35, y: 40 }, description: "Covers the wheel wells and protects against road debris" }, | |
| { name: "Doors", position: { x: 60, y: 50 }, description: "Provides entry/exit and houses windows and side mirrors" }, | |
| { name: "Side Mirrors", position: { x: 20, y: 50 }, description: "Provides rear visibility for the driver" }, | |
| { name: "Windows", position: { x: 65, y: 45 }, description: "Provides visibility and protection from elements" }, | |
| { name: "Rear Bumper", position: { x: 70, y: 45 }, description: "Absorbs impact in rear collisions and houses reverse lights" }, | |
| { name: "Taillights", position: { x: 75, y: 35 }, description: "Signals braking and provides rear illumination" }, | |
| { name: "Trunk Lid", position: { x: 80, y: 25 }, description: "Provides access to cargo area" }, | |
| { name: "Wheels", position: { x: 40, y: 70 }, description: "Supports vehicle weight and provides mobility" }, | |
| { name: "Tires", position: { x: 40, y: 75 }, description: "Provides traction and absorbs road imperfections" }, | |
| { name: "Roof", position: { x: 50, y: 15 }, description: "Provides structural support and protection" }, | |
| { name: "Windshield", position: { x: 50, y: 20 }, description: "Provides forward visibility and structural support" }, | |
| { name: "Rear Spoiler", position: { x: 85, y: 15 }, description: "Improves aerodynamics and rear downforce" } | |
| ] | |
| }, | |
| engine: { | |
| name: "Engine System", | |
| description: "The engine system is the powerplant of the 2013 Hyundai Elantra GS Coupe, featuring a 1.8L Nu GDI engine producing 148 hp @ 6500 rpm.", | |
| components: [ | |
| { name: "1.8L Nu GDI Engine", position: { x: 50, y: 35 }, description: "1.8L inline-4 engine with Gasoline Direct Injection" }, | |
| { name: "Engine Block", position: { x: 50, y: 38 }, description: "Aluminum block with cast iron cylinder liners" }, | |
| { name: "Cylinder Head", position: { x: 50, y: 32 }, description: "Dual overhead camshaft (DOHC) design with 16 valves" }, | |
| { name: "Intake Manifold", position: { x: 45, y: 30 }, description: "Distributes air to the cylinders" }, | |
| { name: "Exhaust Manifold", position: { x: 55, y: 30 }, description: "Collects exhaust gases from the cylinders" }, | |
| { name: "Fuel Injectors", position: { x: 50, y: 34 }, description: "Direct injection system for improved efficiency" }, | |
| { name: "Spark Plugs", position: { x: 50, y: 33 }, description: "Ignites the air-fuel mixture in each cylinder" }, | |
| { name: "Oil Pan", position: { x: 50, y: 42 }, description: "Stores engine oil and houses the oil pump" }, | |
| { name: "Oil Pump", position: { x: 50, y: 43 }, description: "Circulates oil throughout the engine" }, | |
| { name: "Water Pump", position: { x: 55, y: 38 }, description: "Circulates coolant through the engine" }, | |
| { name: "Radiator", position: { x: 60, y: 30 }, description: "Cools engine coolant using airflow" }, | |
| { name: "Engine Mounts", position: { x: 45, y: 45 }, description: "Secures engine to the chassis and absorbs vibrations" }, | |
| { name: "Serpentine Belt", position: { x: 55, y: 40 }, description: "Drives engine accessories (alternator, power steering, etc.)" }, | |
| { name: "Alternator", position: { x: 60, y: 40 }, description: "Generates electrical power and charges the battery" }, | |
| { name: "Timing Chain", position: { x: 50, y: 36 }, description: "Synchronizes camshaft and crankshaft rotation" } | |
| ] | |
| }, | |
| transmission: { | |
| name: "Transmission System", | |
| description: "The transmission system transfers power from the engine to the wheels, featuring either a 6-speed manual or 6-speed automatic transmission.", | |
| components: [ | |
| { name: "6-Speed Manual Transmission", position: { x: 55, y: 45 }, description: "Close-ratio gearbox for performance driving" }, | |
| { name: "6-Speed Automatic Transmission", position: { x: 55, y: 45 }, description: "Electronically controlled with manual shift mode" }, | |
| { name: "Clutch Assembly", position: { x: 53, y: 45 }, description: "Engages and disengages engine power to the transmission" }, | |
| { name: "Flywheel", position: { x: 52, y: 45 }, description: "Smooths engine power delivery and provides clutch surface" }, | |
| { name: "Transmission Case", position: { x: 55, y: 47 }, description: "Houses gears, shafts, and transmission fluid" }, | |
| { name: "Gear Set", position: { x: 55, y: 46 }, description: "Multiple gear ratios for different speed ranges" }, | |
| { name: "Synchronizers", position: { x: 55, y: 46 }, description: "Allows smooth gear engagement" }, | |
| { name: "Shift Linkage", position: { x: 55, y: 44 }, description: "Connects shift lever to transmission" }, | |
| { name: "Driveshaft", position: { x: 60, y: 50 }, description: "Transfers power from transmission to differential" }, | |
| { name: "Differential", position: { x: 65, y: 55 }, description: "Allows wheels to rotate at different speeds" }, | |
| { name: "Axle Shafts", position: { x: 65, y: 60 }, description: "Transfers power from differential to wheels" }, | |
| { name: "CV Joints", position: { x: 65, y: 62 }, description: "Allows power transfer at varying angles" }, | |
| { name: "Transmission Mounts", position: { x: 55, y: 50 }, description: "Secures transmission to the chassis" }, | |
| { name: "Transmission Fluid", position: { x: 55, y: 48 }, description: "Lubricates and cools transmission components" } | |
| ] | |
| }, | |
| suspension: { | |
| name: "Suspension System", | |
| description: "The suspension system provides ride comfort and handling stability with a MacPherson strut front suspension and torsion beam rear suspension.", | |
| components: [ | |
| { name: "Front Struts", position: { x: 35, y: 55 }, description: "Combines shock absorber and spring in one unit" }, | |
| { name: "Rear Shock Absorbers", position: { x: 70, y: 55 }, description: "Dampens suspension movement" }, | |
| { name: "Coil Springs", position: { x: 35, y: 58 }, description: "Supports vehicle weight and absorbs road impacts" }, | |
| { name: "Control Arms", position: { x: 35, y: 60 }, description: "Connects suspension to the chassis" }, | |
| { name: "Sway Bars", position: { x: 50, y: 60 }, description: "Reduces body roll during cornering" }, | |
| { name: "Bushings", position: { x: 35, y: 62 }, description: "Absorbs vibrations between suspension components" }, | |
| { name: "Ball Joints", position: { x: 35, y: 65 }, description: "Allows pivoting movement in the suspension" }, | |
| { name: "Tie Rods", position: { x: 35, y: 68 }, description: "Connects steering system to wheels" }, | |
| { name: "Wheel Bearings", position: { x: 40, y: 70 }, description: "Allows wheels to rotate smoothly" }, | |
| { name: "Subframe", position: { x: 50, y: 65 }, description: "Structural component that supports suspension" }, | |
| { name: "Strut Mounts", position: { x: 35, y: 52 }, description: "Connects struts to the chassis" }, | |
| { name: "Lower Control Arms", position: { x: 35, y: 63 }, description: "Supports the wheel assembly" }, | |
| { name: "Upper Control Arms", position: { x: 35, y: 57 }, description: "Provides additional suspension support" }, | |
| { name: "Suspension Bushings", position: { x: 35, y: 61 }, description: "Reduces noise and vibration transfer" }, | |
| { name: "Wheel Hubs", position: { x: 40, y: 72 }, description: "Mounting point for wheels and bearings" } | |
| ] | |
| }, | |
| brakes: { | |
| name: "Brake System", | |
| description: "The brake system provides stopping power with front ventilated disc brakes and rear solid disc brakes.", | |
| components: [ | |
| { name: "Brake Pedal", position: { x: 20, y: 65 }, description: "Driver interface for brake activation" }, | |
| { name: "Brake Booster", position: { x: 25, y: 55 }, description: "Amplifies brake pedal force" }, | |
| { name: "Master Cylinder", position: { x: 25, y: 50 }, description: "Converts pedal force to hydraulic pressure" }, | |
| { name: "Brake Lines", position: { x: 30, y: 55 }, description: "Transfers hydraulic fluid to brake components" }, | |
| { name: "Front Brake Calipers", position: { x: 35, y: 65 }, description: "Houses brake pads and pistons" }, | |
| { name: "Rear Brake Calipers", position: { x: 70, y: 65 }, description: "Houses brake pads and pistons" }, | |
| { name: "Brake Rotors", position: { x: 35, y: 68 }, description: "Provides friction surface for brake pads" }, | |
| { name: "Brake Pads", position: { x: 35, y: 67 }, description: "Friction material that contacts the rotors" }, | |
| { name: "Parking Brake", position: { x: 75, y: 60 }, description: "Mechanical brake system for parking" }, | |
| { name: "ABS Module", position: { x: 30, y: 50 }, description: "Prevents wheel lockup during hard braking" }, | |
| { name: "Brake Fluid Reservoir", position: { x: 25, y: 45 }, description: "Stores hydraulic fluid for the brake system" }, | |
| { name: "Brake Hoses", position: { x: 30, y: 60 }, description: "Flexible connections between brake lines and calipers" }, | |
| { name: "Wheel Speed Sensors", position: { x: 35, y: 70 }, description: "Monitors wheel speed for ABS system" }, | |
| { name: "Brake Proportioning Valve", position: { x: 30, y: 52 }, description: "Balances brake pressure between front and rear" }, | |
| { name: "Emergency Brake Cable", position: { x: 75, y: 62 }, description: "Mechanical cable for parking brake" } | |
| ] | |
| }, | |
| electrical: { | |
| name: "Electrical System", | |
| description: "The electrical system powers all electronic components and manages vehicle systems through computer control.", | |
| components: [ | |
| { name: "Battery", position: { x: 25, y: 45 }, description: "12-volt lead-acid battery providing electrical power" }, | |
| { name: "Starter Motor", position: { x: 50, y: 48 }, description: "Engages flywheel to start the engine" }, | |
| { name: "ECU (Engine Control Unit)", position: { x: 50, y: 35 }, description: "Manages engine performance and emissions" }, | |
| { name: "Fusible Links", position: { x: 20, y: 40 }, description: "Protects wiring from electrical overload" }, | |
| { name: "Fuse Box", position: { x: 20, y: 42 }, description: "Houses fuses for electrical circuits" }, | |
| { name: "Relay Box", position: { x: 20, y: 44 }, description: "Contains relays for high-current components" }, | |
| { name: "Wiring Harness", position: { x: 50, y: 40 }, description: "Organized bundle of electrical wires" }, | |
| { name: "Ignition System", position: { x: 50, y: 33 }, description: "Controls spark timing and delivery" }, | |
| { name: "Sensors (Various)", position: { x: 50, y: 38 }, description: "Monitors engine and vehicle parameters" }, | |
| { name: "Lighting System", position: { x: 50, y: 25 }, description: "Exterior and interior lighting components" }, | |
| { name: "Instrument Cluster", position: { x: 50, y: 20 }, description: "Displays vehicle information to the driver" }, | |
| { name: "Power Windows", position: { x: 60, y: 45 }, description: "Electric window regulators" }, | |
| { name: "Power Door Locks", position: { x: 60, y: 48 }, description: "Electric door locking mechanism" }, | |
| { name: "Audio System", position: { x: 50, y: 22 }, description: "Entertainment and information system" }, | |
| { name: "Climate Control", position: { x: 50, y: 23 }, description: "HVAC system for cabin comfort" }, | |
| { name: "OBD-II Port", position: { x: 30, y: 48 }, description: "Diagnostic interface for vehicle systems" } | |
| ] | |
| }, | |
| interior: { | |
| name: "Interior Components", | |
| description: "The interior system includes all components that provide comfort, convenience, and control for the driver and passengers.", | |
| components: [ | |
| { name: "Dashboard", position: { x: 50, y: 20 }, description: "Houses instruments and controls" }, | |
| { name: "Steering Wheel", position: { x: 50, y: 25 }, description: "Driver interface for steering and controls" }, | |
| { name: "Seats", position: { x: 50, y: 40 }, description: "Driver and passenger seating" }, | |
| { name: "Center Console", position: { x: 50, y: 45 }, description: "Houses controls and storage" }, | |
| { name: "Gear Shift", position: { x: 50, y: 48 }, description: "Transmission control interface" }, | |
| { name: "Pedals", position: { x: 50, y: 65 }, description: "Accelerator, brake, and clutch pedals" }, | |
| { name: "Instrument Cluster", position: { x: 50, y: 20 }, description: "Displays speed, RPM, and vehicle status" }, | |
| { name: "HVAC Controls", position: { x: 50, y: 22 }, description: "Climate control system interface" }, | |
| { name: "Audio System", position: { x: 50, y: 23 }, description: "Entertainment and information display" }, | |
| { name: "Door Panels", position: { x: 60, y: 45 }, description: "Interior door trim and controls" }, | |
| { name: "Headliner", position: { x: 50, y: 10 }, description: "Interior roof covering" }, | |
| { name: "Carpeting", position: { x: 50, y: 60 }, description: "Floor covering material" }, | |
| { name: "Sunroof", position: { x: 50, y: 15 }, description: "Optional opening roof panel" }, | |
| { name: "Cup Holders", position: { x: 50, y: 47 }, description: "Beverage holders in center console" }, | |
| { name: "Glovebox", position: { x: 60, y: 30 }, description: "Storage compartment in dashboard" }, | |
| { name: "Rear View Mirror", position: { x: 50, y: 20 }, description: "Provides rear visibility" }, | |
| { name: "Seat Belts", position: { x: 50, y: 40 }, description: "Safety restraint system" }, | |
| { name: "Airbags", position: { x: 50, y: 25 }, description: "Passive safety system" } | |
| ] | |
| } | |
| }; | |
| // DOM elements | |
| const carImage = document.getElementById('carImage'); | |
| const systemDescription = document.getElementById('systemDescription'); | |
| const componentList = document.getElementById('componentList'); | |
| const toggleLabelsBtn = document.getElementById('toggleLabels'); | |
| const searchInput = document.getElementById('searchInput'); | |
| const systemButtons = document.querySelectorAll('.controls .btn'); | |
| const newTabBtn = document.getElementById('newTabBtn'); | |
| // State | |
| let currentSystem = 'exterior'; | |
| let labelsVisible = false; | |
| let activeLabels = []; | |
| // Initialize the application | |
| function init() { | |
| // Set up event listeners | |
| systemButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| currentSystem = button.dataset.system; | |
| updateSystemView(); | |
| systemButtons.forEach(btn => btn.classList.remove('active')); | |
| button.classList.add('active'); | |
| }); | |
| }); | |
| toggleLabelsBtn.addEventListener('click', toggleLabelsVisibility); | |
| searchInput.addEventListener('input', handleSearch); | |
| newTabBtn.addEventListener('click', openInNewTab); | |
| // Initialize with exterior view | |
| updateSystemView(); | |
| } | |
| // Open in new tab functionality | |
| function openInNewTab() { | |
| // Get the current URL | |
| const currentUrl = window.location.href; | |
| // Open in new tab | |
| window.open(currentUrl, '_blank'); | |
| // Alternative approach if the above doesn't work in some browsers | |
| // const newWindow = window.open('', '_blank'); | |
| // newWindow.document.write(document.documentElement.outerHTML); | |
| // newWindow.document.close(); | |
| } | |
| // Update the view based on selected system | |
| function updateSystemView() { | |
| // Update car image class | |
| carImage.className = `car-image ${currentSystem}`; | |
| // Update system description | |
| const systemData = carComponents[currentSystem]; | |
| systemDescription.innerHTML = ` | |
| <h4>${systemData.name}</h4> | |
| <p>${systemData.description}</p> | |
| `; | |
| // Update component list | |
| componentList.innerHTML = systemData.components.map(component => ` | |
| <div class="component-item" data-component="${component.name}"> | |
| <h4>${component.name}</h4> | |
| <p>${component.description}</p> | |
| </div> | |
| `).join(''); | |
| // Add click handlers to component items | |
| document.querySelectorAll('.component-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| const componentName = item.dataset.component; | |
| highlightComponent(componentName); | |
| }); | |
| }); | |
| // Create labels | |
| createLabels(systemData.components); | |
| // If labels are visible, show them | |
| if (labelsVisible) { | |
| showLabels(); | |
| } | |
| } | |
| // Create label elements for components | |
| function createLabels(components) { | |
| // Clear existing labels | |
| document.querySelectorAll('.label').forEach(label => label.remove()); | |
| // Create new labels | |
| components.forEach(component => { | |
| const label = document.createElement('div'); | |
| label.className = 'label'; | |
| label.textContent = component.name; | |
| label.style.left = `${component.position.x}%`; | |
| label.style.top = `${component.position.y}%`; | |
| // Add click event to show component info | |
| label.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| highlightComponent(component.name); | |
| }); | |
| carImage.appendChild(label); | |
| }); | |
| } | |
| // Toggle labels visibility | |
| function toggleLabelsVisibility() { | |
| labelsVisible = !labelsVisible; | |
| if (labelsVisible) { | |
| showLabels(); | |
| toggleLabelsBtn.innerHTML = '<i class="fas fa-eye-slash"></i>'; | |
| } else { | |
| hideLabels(); | |
| toggleLabelsBtn.innerHTML = '<i class="fas fa-eye"></i>'; | |
| } | |
| } | |
| // Show all labels | |
| function showLabels() { | |
| document.querySelectorAll('.label').forEach(label => { | |
| label.classList.add('visible'); | |
| }); | |
| } | |
| // Hide all labels | |
| function hideLabels() { | |
| document.querySelectorAll('.label').forEach(label => { | |
| label.classList.remove('visible'); | |
| }); | |
| } | |
| // Highlight a specific component | |
| function highlightComponent(componentName) { | |
| // Find the component in the current system | |
| const component = carComponents[currentSystem].components.find(c => c.name === componentName); | |
| if (!component) return; | |
| // Highlight the label | |
| document.querySelectorAll('.label').forEach(label => { | |
| if (label.textContent === componentName) { | |
| label.classList.add('visible'); | |
| label.style.backgroundColor = 'var(--secondary-color)'; | |
| label.style.zIndex = '30'; | |
| // Remove highlight after 3 seconds | |
| setTimeout(() => { | |
| label.style.backgroundColor = ''; | |
| label.style.zIndex = ''; | |
| }, 3000); | |
| } | |
| }); | |
| // Scroll to the component in the list | |
| const componentItem = document.querySelector(`.component-item[data-component="${componentName}"]`); | |
| if (componentItem) { | |
| componentItem.scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| componentItem.style.backgroundColor = 'rgba(229, 0, 18, 0.2)'; | |
| // Remove highlight after 3 seconds | |
| setTimeout(() => { | |
| componentItem.style.backgroundColor = ''; | |
| }, 3000); | |
| } | |
| } | |
| // Handle search functionality | |
| function handleSearch() { | |
| const searchTerm = searchInput.value.toLowerCase(); | |
| if (searchTerm === '') { | |
| // Show all components | |
| document.querySelectorAll('.component-item').forEach(item => { | |
| item.style.display = 'block'; | |
| }); | |
| return; | |
| } | |
| // Filter components | |
| document.querySelectorAll('.component-item').forEach |