Spaces:

Geotoad
/

anycoder-567141f6

Running

File size: 34,569 Bytes

<!DOCTYPE html>
<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