Preise – Platinum Perfekt KFZ

3D Auto Konfigurator
projekt/
│
├── index.html
└── models/
├── porsche.glb
└── skyline.glb
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>Auto Konfigurator</title>
  <style>
    body {
      background: #111;
      color: #fff;
      text-align: center;
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    img {
      width: 700px;
      max-width: 90%;
      margin-top: 20px;
      transition: filter 0.3s ease, transform 0.3s ease;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .controls {
      margin-top: 12px;
    }

    button {
      padding: 10px 16px;
      margin: 6px;
      border: none;
      cursor: pointer;
      font-size: 16px;
      border-radius: 8px;
      color: #111;
    }

    button[data-color="red"]   { background: #e74c3c; }
    button[data-color="blue"]  { background: #3498db; }
    button[data-color="black"] { background: #2d2d2d; color: #fff; }
  </style>
</head>
<body>
  <h1>Auto Konfigurator</h1>

  <select id="carSelect" aria-label="Fahrzeug wählen">
    <option value="porsche">Porsche GT3 RS</option>
    <option value="skyline">Nissan Skyline</option>
    <option value="other">Anderes Fahrzeug</option>
  </select>

  <img
    id="car"
    src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1200"
    alt="Fahrzeug"
  >

  <div class="controls" id="colorControls">
    <button data-color="red">Rot</button>
    <button data-color="blue">Blau</button>
    <button data-color="black">Schwarz</button>
  </div>

  <script>
    const car = document.getElementById('car');
    const select = document.getElementById('carSelect');
    const controls = document.getElementById('colorControls');

    // Bildquellen pro Modell
    const images = {
      porsche: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1200',
      skyline: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1200',
      other: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1200'
    };

    // Nur diese Modelle erlauben Lackwechsel
    const paintable = new Set(['porsche', 'skyline']);

    // Farbfilter für die Buttons (CSS filter-Werte)
    const colorFilters = {
      red:    'hue-rotate(0deg) saturate(1.1) brightness(1)',
      blue:   'hue-rotate(200deg) saturate(1.05) brightness(1)',
      black:  'brightness(0.18) contrast(1.05)'
    };

    // Setze Bild beim Laden
    function updateImageForSelection() {
      const model = select.value;
      car.src = images[model] || images.other;
      // Beim Modellwechsel Farbe zurücksetzen, außer wenn Modell erlaubend ist -> Standard (keine Filter)
      car.style.filter = '';
      // Steuere Sichtbarkeit/Verfügbarkeit der Farb-Buttons:
      if (paintable.has(model)) {
        controls.querySelectorAll('button').forEach(b => b.disabled = false);
        controls.style.opacity = '1';
      } else {
        controls.querySelectorAll('button').forEach(b => b.disabled = true);
        controls.style.opacity = '0.5';
      }
    }

    // Farbänderung anwenden — wirkt nur, wenn aktuelles Modell lackierbar ist
    function applyColor(colorKey) {
      const model = select.value;
      if (!paintable.has(model)) return;
      const filter = colorFilters[colorKey] || '';
      car.style.filter = filter;
    }

    // Event-Listener
    select.addEventListener('change', updateImageForSelection);

    controls.addEventListener('click', (e) => {
      const btn = e.target.closest('button[data-color]');
      if (!btn) return;
      const color = btn.getAttribute('data-color');
      applyColor(color);
    });

    // Initialisierung
    updateImageForSelection();
  </script>
</body>
</html>