mirror of
https://github.com/Alvin-Zilverstand/challenge-11.git
synced 2026-03-06 11:06:21 +01:00
Implement car search functionality in index.html and enhance dropdown behavior in script.js. Added a search input for vehicle models, allowing users to filter options dynamically. Improved dropdown styling and interaction, including closing behavior and handling double-click selections.
This commit is contained in:
Alvin
665
index.html
665
index.html
@@ -185,337 +185,340 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="car" class="form-label text-gray-300">Voertuig</label>
|
<label for="car" class="form-label text-gray-300">Voertuig</label>
|
||||||
<select class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="car" name="car" required>
|
<div class="relative">
|
||||||
<option value="" disabled selected>Selecteer uw voertuigmodel</option>
|
<input type="text" id="carSearch" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300 mb-2" placeholder="Zoek je voertuigmodel...">
|
||||||
<optgroup label="BMW">
|
<select class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="car" name="car" required>
|
||||||
<option value="BMW M2">BMW M2</option>
|
<option value="" disabled selected>Selecteer uw voertuigmodel</option>
|
||||||
<option value="BMW M3">BMW M3</option>
|
<optgroup label="BMW">
|
||||||
<option value="BMW M4">BMW M4</option>
|
<option value="BMW M2">BMW M2</option>
|
||||||
<option value="BMW M5">BMW M5</option>
|
<option value="BMW M3">BMW M3</option>
|
||||||
<option value="BMW M8">BMW M8</option>
|
<option value="BMW M4">BMW M4</option>
|
||||||
<option value="BMW 1 Serie M">BMW 1 Serie M</option>
|
<option value="BMW M5">BMW M5</option>
|
||||||
<option value="BMW 2 Serie M">BMW 2 Serie M</option>
|
<option value="BMW M8">BMW M8</option>
|
||||||
<option value="BMW 3 Serie M">BMW 3 Serie M</option>
|
<option value="BMW 1 Serie M">BMW 1 Serie M</option>
|
||||||
<option value="BMW 4 Serie M">BMW 4 Serie M</option>
|
<option value="BMW 2 Serie M">BMW 2 Serie M</option>
|
||||||
<option value="BMW 5 Serie M">BMW 5 Serie M</option>
|
<option value="BMW 3 Serie M">BMW 3 Serie M</option>
|
||||||
<option value="BMW X3 M">BMW X3 M</option>
|
<option value="BMW 4 Serie M">BMW 4 Serie M</option>
|
||||||
<option value="BMW X4 M">BMW X4 M</option>
|
<option value="BMW 5 Serie M">BMW 5 Serie M</option>
|
||||||
<option value="BMW X5 M">BMW X5 M</option>
|
<option value="BMW X3 M">BMW X3 M</option>
|
||||||
<option value="BMW X6 M">BMW X6 M</option>
|
<option value="BMW X4 M">BMW X4 M</option>
|
||||||
<option value="BMW 118i">BMW 118i</option>
|
<option value="BMW X5 M">BMW X5 M</option>
|
||||||
<option value="BMW 120i">BMW 120i</option>
|
<option value="BMW X6 M">BMW X6 M</option>
|
||||||
<option value="BMW 125i">BMW 125i</option>
|
<option value="BMW 118i">BMW 118i</option>
|
||||||
<option value="BMW 320i">BMW 320i</option>
|
<option value="BMW 120i">BMW 120i</option>
|
||||||
<option value="BMW 330i">BMW 330i</option>
|
<option value="BMW 125i">BMW 125i</option>
|
||||||
<option value="BMW 420i">BMW 420i</option>
|
<option value="BMW 320i">BMW 320i</option>
|
||||||
<option value="BMW 430i">BMW 430i</option>
|
<option value="BMW 330i">BMW 330i</option>
|
||||||
</optgroup>
|
<option value="BMW 420i">BMW 420i</option>
|
||||||
<optgroup label="Audi">
|
<option value="BMW 430i">BMW 430i</option>
|
||||||
<option value="Audi RS3">Audi RS3</option>
|
</optgroup>
|
||||||
<option value="Audi RS4">Audi RS4</option>
|
<optgroup label="Audi">
|
||||||
<option value="Audi RS5">Audi RS5</option>
|
<option value="Audi RS3">Audi RS3</option>
|
||||||
<option value="Audi RS6">Audi RS6</option>
|
<option value="Audi RS4">Audi RS4</option>
|
||||||
<option value="Audi RS7">Audi RS7</option>
|
<option value="Audi RS5">Audi RS5</option>
|
||||||
<option value="Audi RS Q3">Audi RS Q3</option>
|
<option value="Audi RS6">Audi RS6</option>
|
||||||
<option value="Audi RS Q8">Audi RS Q8</option>
|
<option value="Audi RS7">Audi RS7</option>
|
||||||
<option value="Audi S3">Audi S3</option>
|
<option value="Audi RS Q3">Audi RS Q3</option>
|
||||||
<option value="Audi S4">Audi S4</option>
|
<option value="Audi RS Q8">Audi RS Q8</option>
|
||||||
<option value="Audi S5">Audi S5</option>
|
<option value="Audi S3">Audi S3</option>
|
||||||
<option value="Audi S6">Audi S6</option>
|
<option value="Audi S4">Audi S4</option>
|
||||||
<option value="Audi S7">Audi S7</option>
|
<option value="Audi S5">Audi S5</option>
|
||||||
<option value="Audi S8">Audi S8</option>
|
<option value="Audi S6">Audi S6</option>
|
||||||
<option value="Audi SQ5">Audi SQ5</option>
|
<option value="Audi S7">Audi S7</option>
|
||||||
<option value="Audi SQ7">Audi SQ7</option>
|
<option value="Audi S8">Audi S8</option>
|
||||||
<option value="Audi SQ8">Audi SQ8</option>
|
<option value="Audi SQ5">Audi SQ5</option>
|
||||||
<option value="Audi A3">Audi A3</option>
|
<option value="Audi SQ7">Audi SQ7</option>
|
||||||
<option value="Audi A4">Audi A4</option>
|
<option value="Audi SQ8">Audi SQ8</option>
|
||||||
<option value="Audi A5">Audi A5</option>
|
<option value="Audi A3">Audi A3</option>
|
||||||
<option value="Audi A6">Audi A6</option>
|
<option value="Audi A4">Audi A4</option>
|
||||||
<option value="Audi Q3">Audi Q3</option>
|
<option value="Audi A5">Audi A5</option>
|
||||||
<option value="Audi Q5">Audi Q5</option>
|
<option value="Audi A6">Audi A6</option>
|
||||||
</optgroup>
|
<option value="Audi Q3">Audi Q3</option>
|
||||||
<optgroup label="Mercedes-AMG">
|
<option value="Audi Q5">Audi Q5</option>
|
||||||
<option value="Mercedes-AMG A35">Mercedes-AMG A35</option>
|
</optgroup>
|
||||||
<option value="Mercedes-AMG A45">Mercedes-AMG A45</option>
|
<optgroup label="Mercedes-AMG">
|
||||||
<option value="Mercedes-AMG CLA35">Mercedes-AMG CLA35</option>
|
<option value="Mercedes-AMG A35">Mercedes-AMG A35</option>
|
||||||
<option value="Mercedes-AMG CLA45">Mercedes-AMG CLA45</option>
|
<option value="Mercedes-AMG A45">Mercedes-AMG A45</option>
|
||||||
<option value="Mercedes-AMG C43">Mercedes-AMG C43</option>
|
<option value="Mercedes-AMG CLA35">Mercedes-AMG CLA35</option>
|
||||||
<option value="Mercedes-AMG C63">Mercedes-AMG C63</option>
|
<option value="Mercedes-AMG CLA45">Mercedes-AMG CLA45</option>
|
||||||
<option value="Mercedes-AMG E53">Mercedes-AMG E53</option>
|
<option value="Mercedes-AMG C43">Mercedes-AMG C43</option>
|
||||||
<option value="Mercedes-AMG E63">Mercedes-AMG E63</option>
|
<option value="Mercedes-AMG C63">Mercedes-AMG C63</option>
|
||||||
<option value="Mercedes-AMG G63">Mercedes-AMG G63</option>
|
<option value="Mercedes-AMG E53">Mercedes-AMG E53</option>
|
||||||
<option value="Mercedes-AMG GT">Mercedes-AMG GT</option>
|
<option value="Mercedes-AMG E63">Mercedes-AMG E63</option>
|
||||||
<option value="Mercedes-AMG GT63">Mercedes-AMG GT63</option>
|
<option value="Mercedes-AMG G63">Mercedes-AMG G63</option>
|
||||||
<option value="Mercedes-AMG GLE63">Mercedes-AMG GLE63</option>
|
<option value="Mercedes-AMG GT">Mercedes-AMG GT</option>
|
||||||
<option value="Mercedes-AMG GLS63">Mercedes-AMG GLS63</option>
|
<option value="Mercedes-AMG GT63">Mercedes-AMG GT63</option>
|
||||||
</optgroup>
|
<option value="Mercedes-AMG GLE63">Mercedes-AMG GLE63</option>
|
||||||
<optgroup label="Volkswagen">
|
<option value="Mercedes-AMG GLS63">Mercedes-AMG GLS63</option>
|
||||||
<option value="Volkswagen Golf R">Volkswagen Golf R</option>
|
</optgroup>
|
||||||
<option value="Volkswagen Golf GTI">Volkswagen Golf GTI</option>
|
<optgroup label="Volkswagen">
|
||||||
<option value="Volkswagen Golf GTD">Volkswagen Golf GTD</option>
|
<option value="Volkswagen Golf R">Volkswagen Golf R</option>
|
||||||
<option value="Volkswagen Polo GTI">Volkswagen Polo GTI</option>
|
<option value="Volkswagen Golf GTI">Volkswagen Golf GTI</option>
|
||||||
<option value="Volkswagen Arteon R">Volkswagen Arteon R</option>
|
<option value="Volkswagen Golf GTD">Volkswagen Golf GTD</option>
|
||||||
<option value="Volkswagen Tiguan R">Volkswagen Tiguan R</option>
|
<option value="Volkswagen Polo GTI">Volkswagen Polo GTI</option>
|
||||||
<option value="Volkswagen T-Roc R">Volkswagen T-Roc R</option>
|
<option value="Volkswagen Arteon R">Volkswagen Arteon R</option>
|
||||||
<option value="Volkswagen T-Cross">Volkswagen T-Cross</option>
|
<option value="Volkswagen Tiguan R">Volkswagen Tiguan R</option>
|
||||||
<option value="Volkswagen Passat R-Line">Volkswagen Passat R-Line</option>
|
<option value="Volkswagen T-Roc R">Volkswagen T-Roc R</option>
|
||||||
<option value="Volkswagen Golf">Volkswagen Golf</option>
|
<option value="Volkswagen T-Cross">Volkswagen T-Cross</option>
|
||||||
<option value="Volkswagen Polo">Volkswagen Polo</option>
|
<option value="Volkswagen Passat R-Line">Volkswagen Passat R-Line</option>
|
||||||
<option value="Volkswagen T-Roc">Volkswagen T-Roc</option>
|
<option value="Volkswagen Golf">Volkswagen Golf</option>
|
||||||
<option value="Volkswagen Tiguan">Volkswagen Tiguan</option>
|
<option value="Volkswagen Polo">Volkswagen Polo</option>
|
||||||
<option value="Volkswagen Phaeton">Volkswagen Phaeton</option>
|
<option value="Volkswagen T-Roc">Volkswagen T-Roc</option>
|
||||||
<option value="Volkswagen Passat">Volkswagen Passat</option>
|
<option value="Volkswagen Tiguan">Volkswagen Tiguan</option>
|
||||||
<option value="Volkswagen Arteon">Volkswagen Arteon</option>
|
<option value="Volkswagen Phaeton">Volkswagen Phaeton</option>
|
||||||
<option value="Volkswagen ID.3">Volkswagen ID.3</option>
|
<option value="Volkswagen Passat">Volkswagen Passat</option>
|
||||||
<option value="Volkswagen ID.4">Volkswagen ID.4</option>
|
<option value="Volkswagen Arteon">Volkswagen Arteon</option>
|
||||||
<option value="Volkswagen ID.5">Volkswagen ID.5</option>
|
<option value="Volkswagen ID.3">Volkswagen ID.3</option>
|
||||||
<option value="Volkswagen ID.Buzz">Volkswagen ID.Buzz</option>
|
<option value="Volkswagen ID.4">Volkswagen ID.4</option>
|
||||||
<option value="Volkswagen Touareg">Volkswagen Touareg</option>
|
<option value="Volkswagen ID.5">Volkswagen ID.5</option>
|
||||||
<option value="Volkswagen Taos">Volkswagen Taos</option>
|
<option value="Volkswagen ID.Buzz">Volkswagen ID.Buzz</option>
|
||||||
<option value="Volkswagen Atlas">Volkswagen Atlas</option>
|
<option value="Volkswagen Touareg">Volkswagen Touareg</option>
|
||||||
<option value="Volkswagen Jetta">Volkswagen Jetta</option>
|
<option value="Volkswagen Taos">Volkswagen Taos</option>
|
||||||
<option value="Volkswagen Scirocco">Volkswagen Scirocco</option>
|
<option value="Volkswagen Atlas">Volkswagen Atlas</option>
|
||||||
<option value="Volkswagen Beetle">Volkswagen Beetle</option>
|
<option value="Volkswagen Jetta">Volkswagen Jetta</option>
|
||||||
<option value="Volkswagen Up!">Volkswagen Up!</option>
|
<option value="Volkswagen Scirocco">Volkswagen Scirocco</option>
|
||||||
<option value="Volkswagen Sharan">Volkswagen Sharan</option>
|
<option value="Volkswagen Beetle">Volkswagen Beetle</option>
|
||||||
<option value="Volkswagen Touran">Volkswagen Touran</option>
|
<option value="Volkswagen Up!">Volkswagen Up!</option>
|
||||||
<option value="Volkswagen Caddy">Volkswagen Caddy</option>
|
<option value="Volkswagen Sharan">Volkswagen Sharan</option>
|
||||||
<option value="Volkswagen Transporter">Volkswagen Transporter</option>
|
<option value="Volkswagen Touran">Volkswagen Touran</option>
|
||||||
<option value="Volkswagen Amarok">Volkswagen Amarok</option>
|
<option value="Volkswagen Caddy">Volkswagen Caddy</option>
|
||||||
</optgroup>
|
<option value="Volkswagen Transporter">Volkswagen Transporter</option>
|
||||||
<optgroup label="Porsche">
|
<option value="Volkswagen Amarok">Volkswagen Amarok</option>
|
||||||
<option value="Porsche 911">Porsche 911</option>
|
</optgroup>
|
||||||
<option value="Porsche 911 GT3">Porsche 911 GT3</option>
|
<optgroup label="Porsche">
|
||||||
<option value="Porsche 911 Turbo">Porsche 911 Turbo</option>
|
<option value="Porsche 911">Porsche 911</option>
|
||||||
<option value="Porsche 718 Cayman">Porsche 718 Cayman</option>
|
<option value="Porsche 911 GT3">Porsche 911 GT3</option>
|
||||||
<option value="Porsche 718 Boxster">Porsche 718 Boxster</option>
|
<option value="Porsche 911 Turbo">Porsche 911 Turbo</option>
|
||||||
<option value="Porsche Taycan">Porsche Taycan</option>
|
<option value="Porsche 718 Cayman">Porsche 718 Cayman</option>
|
||||||
<option value="Porsche Panamera">Porsche Panamera</option>
|
<option value="Porsche 718 Boxster">Porsche 718 Boxster</option>
|
||||||
<option value="Porsche Macan">Porsche Macan</option>
|
<option value="Porsche Taycan">Porsche Taycan</option>
|
||||||
<option value="Porsche Cayenne">Porsche Cayenne</option>
|
<option value="Porsche Panamera">Porsche Panamera</option>
|
||||||
</optgroup>
|
<option value="Porsche Macan">Porsche Macan</option>
|
||||||
<optgroup label="Audi Sport">
|
<option value="Porsche Cayenne">Porsche Cayenne</option>
|
||||||
<option value="Audi Sport Quattro">Audi Sport Quattro</option>
|
</optgroup>
|
||||||
<option value="Audi Sport RS e-tron GT">Audi Sport RS e-tron GT</option>
|
<optgroup label="Audi Sport">
|
||||||
<option value="Audi Sport R8">Audi Sport R8</option>
|
<option value="Audi Sport Quattro">Audi Sport Quattro</option>
|
||||||
<option value="Audi Sport TT RS">Audi Sport TT RS</option>
|
<option value="Audi Sport RS e-tron GT">Audi Sport RS e-tron GT</option>
|
||||||
</optgroup>
|
<option value="Audi Sport R8">Audi Sport R8</option>
|
||||||
<optgroup label="Alfa Romeo">
|
<option value="Audi Sport TT RS">Audi Sport TT RS</option>
|
||||||
<option value="Alfa Romeo Giulia Quadrifoglio">Alfa Romeo Giulia Quadrifoglio</option>
|
</optgroup>
|
||||||
<option value="Alfa Romeo Stelvio Quadrifoglio">Alfa Romeo Stelvio Quadrifoglio</option>
|
<optgroup label="Alfa Romeo">
|
||||||
<option value="Alfa Romeo 4C">Alfa Romeo 4C</option>
|
<option value="Alfa Romeo Giulia Quadrifoglio">Alfa Romeo Giulia Quadrifoglio</option>
|
||||||
<option value="Alfa Romeo Giulia">Alfa Romeo Giulia</option>
|
<option value="Alfa Romeo Stelvio Quadrifoglio">Alfa Romeo Stelvio Quadrifoglio</option>
|
||||||
<option value="Alfa Romeo Stelvio">Alfa Romeo Stelvio</option>
|
<option value="Alfa Romeo 4C">Alfa Romeo 4C</option>
|
||||||
<option value="Alfa Romeo Tonale">Alfa Romeo Tonale</option>
|
<option value="Alfa Romeo Giulia">Alfa Romeo Giulia</option>
|
||||||
</optgroup>
|
<option value="Alfa Romeo Stelvio">Alfa Romeo Stelvio</option>
|
||||||
<optgroup label="Jaguar">
|
<option value="Alfa Romeo Tonale">Alfa Romeo Tonale</option>
|
||||||
<option value="Jaguar F-Type">Jaguar F-Type</option>
|
</optgroup>
|
||||||
<option value="Jaguar F-Pace SVR">Jaguar F-Pace SVR</option>
|
<optgroup label="Jaguar">
|
||||||
<option value="Jaguar XE SV Project 8">Jaguar XE SV Project 8</option>
|
<option value="Jaguar F-Type">Jaguar F-Type</option>
|
||||||
<option value="Jaguar XE">Jaguar XE</option>
|
<option value="Jaguar F-Pace SVR">Jaguar F-Pace SVR</option>
|
||||||
<option value="Jaguar XF">Jaguar XF</option>
|
<option value="Jaguar XE SV Project 8">Jaguar XE SV Project 8</option>
|
||||||
<option value="Jaguar E-Pace">Jaguar E-Pace</option>
|
<option value="Jaguar XE">Jaguar XE</option>
|
||||||
</optgroup>
|
<option value="Jaguar XF">Jaguar XF</option>
|
||||||
<optgroup label="Land Rover">
|
<option value="Jaguar E-Pace">Jaguar E-Pace</option>
|
||||||
<option value="Land Rover Range Rover Sport SVR">Land Rover Range Rover Sport SVR</option>
|
</optgroup>
|
||||||
<option value="Land Rover Defender V8">Land Rover Defender V8</option>
|
<optgroup label="Land Rover">
|
||||||
<option value="Land Rover Discovery SVX">Land Rover Discovery SVX</option>
|
<option value="Land Rover Range Rover Sport SVR">Land Rover Range Rover Sport SVR</option>
|
||||||
<option value="Land Rover Discovery Sport">Land Rover Discovery Sport</option>
|
<option value="Land Rover Defender V8">Land Rover Defender V8</option>
|
||||||
<option value="Land Rover Evoque">Land Rover Evoque</option>
|
<option value="Land Rover Discovery SVX">Land Rover Discovery SVX</option>
|
||||||
</optgroup>
|
<option value="Land Rover Discovery Sport">Land Rover Discovery Sport</option>
|
||||||
<optgroup label="Maserati">
|
<option value="Land Rover Evoque">Land Rover Evoque</option>
|
||||||
<option value="Maserati MC20">Maserati MC20</option>
|
</optgroup>
|
||||||
<option value="Maserati Levante Trofeo">Maserati Levante Trofeo</option>
|
<optgroup label="Maserati">
|
||||||
<option value="Maserati Ghibli Trofeo">Maserati Ghibli Trofeo</option>
|
<option value="Maserati MC20">Maserati MC20</option>
|
||||||
<option value="Maserati Ghibli">Maserati Ghibli</option>
|
<option value="Maserati Levante Trofeo">Maserati Levante Trofeo</option>
|
||||||
<option value="Maserati Levante">Maserati Levante</option>
|
<option value="Maserati Ghibli Trofeo">Maserati Ghibli Trofeo</option>
|
||||||
</optgroup>
|
<option value="Maserati Ghibli">Maserati Ghibli</option>
|
||||||
<optgroup label="Bentley">
|
<option value="Maserati Levante">Maserati Levante</option>
|
||||||
<option value="Bentley Continental GT">Bentley Continental GT</option>
|
</optgroup>
|
||||||
<option value="Bentley Flying Spur">Bentley Flying Spur</option>
|
<optgroup label="Bentley">
|
||||||
<option value="Bentley Bentayga">Bentley Bentayga</option>
|
<option value="Bentley Continental GT">Bentley Continental GT</option>
|
||||||
</optgroup>
|
<option value="Bentley Flying Spur">Bentley Flying Spur</option>
|
||||||
<optgroup label="Aston Martin">
|
<option value="Bentley Bentayga">Bentley Bentayga</option>
|
||||||
<option value="Aston Martin Vantage">Aston Martin Vantage</option>
|
</optgroup>
|
||||||
<option value="Aston Martin DB11">Aston Martin DB11</option>
|
<optgroup label="Aston Martin">
|
||||||
<option value="Aston Martin DBS">Aston Martin DBS</option>
|
<option value="Aston Martin Vantage">Aston Martin Vantage</option>
|
||||||
</optgroup>
|
<option value="Aston Martin DB11">Aston Martin DB11</option>
|
||||||
<optgroup label="Ferrari">
|
<option value="Aston Martin DBS">Aston Martin DBS</option>
|
||||||
<option value="Ferrari F8 Tributo">Ferrari F8 Tributo</option>
|
</optgroup>
|
||||||
<option value="Ferrari SF90 Stradale">Ferrari SF90 Stradale</option>
|
<optgroup label="Ferrari">
|
||||||
<option value="Ferrari 296 GTB">Ferrari 296 GTB</option>
|
<option value="Ferrari F8 Tributo">Ferrari F8 Tributo</option>
|
||||||
</optgroup>
|
<option value="Ferrari SF90 Stradale">Ferrari SF90 Stradale</option>
|
||||||
<optgroup label="Lamborghini">
|
<option value="Ferrari 296 GTB">Ferrari 296 GTB</option>
|
||||||
<option value="Lamborghini Huracán">Lamborghini Huracán</option>
|
</optgroup>
|
||||||
<option value="Lamborghini Aventador">Lamborghini Aventador</option>
|
<optgroup label="Lamborghini">
|
||||||
<option value="Lamborghini Urus">Lamborghini Urus</option>
|
<option value="Lamborghini Huracán">Lamborghini Huracán</option>
|
||||||
</optgroup>
|
<option value="Lamborghini Aventador">Lamborghini Aventador</option>
|
||||||
<optgroup label="McLaren">
|
<option value="Lamborghini Urus">Lamborghini Urus</option>
|
||||||
<option value="McLaren 720S">McLaren 720S</option>
|
</optgroup>
|
||||||
<option value="McLaren 765LT">McLaren 765LT</option>
|
<optgroup label="McLaren">
|
||||||
<option value="McLaren Artura">McLaren Artura</option>
|
<option value="McLaren 720S">McLaren 720S</option>
|
||||||
</optgroup>
|
<option value="McLaren 765LT">McLaren 765LT</option>
|
||||||
<optgroup label="Toyota">
|
<option value="McLaren Artura">McLaren Artura</option>
|
||||||
<option value="Toyota GR Yaris">Toyota GR Yaris</option>
|
</optgroup>
|
||||||
<option value="Toyota GR Corolla">Toyota GR Corolla</option>
|
<optgroup label="Toyota">
|
||||||
<option value="Toyota GR86">Toyota GR86</option>
|
<option value="Toyota GR Yaris">Toyota GR Yaris</option>
|
||||||
<option value="Toyota Supra">Toyota Supra</option>
|
<option value="Toyota GR Corolla">Toyota GR Corolla</option>
|
||||||
<option value="Toyota Yaris">Toyota Yaris</option>
|
<option value="Toyota GR86">Toyota GR86</option>
|
||||||
<option value="Toyota Corolla">Toyota Corolla</option>
|
<option value="Toyota Supra">Toyota Supra</option>
|
||||||
</optgroup>
|
<option value="Toyota Yaris">Toyota Yaris</option>
|
||||||
<optgroup label="Honda">
|
<option value="Toyota Corolla">Toyota Corolla</option>
|
||||||
<option value="Honda Civic Type R">Honda Civic Type R</option>
|
</optgroup>
|
||||||
<option value="Honda Civic">Honda Civic</option>
|
<optgroup label="Honda">
|
||||||
<option value="Honda Jazz">Honda Jazz</option>
|
<option value="Honda Civic Type R">Honda Civic Type R</option>
|
||||||
<option value="Honda HR-V">Honda HR-V</option>
|
<option value="Honda Civic">Honda Civic</option>
|
||||||
</optgroup>
|
<option value="Honda Jazz">Honda Jazz</option>
|
||||||
<optgroup label="Ford">
|
<option value="Honda HR-V">Honda HR-V</option>
|
||||||
<option value="Ford Focus ST">Ford Focus ST</option>
|
</optgroup>
|
||||||
<option value="Ford Focus RS">Ford Focus RS</option>
|
<optgroup label="Ford">
|
||||||
<option value="Ford Fiesta ST">Ford Fiesta ST</option>
|
<option value="Ford Focus ST">Ford Focus ST</option>
|
||||||
<option value="Ford Mustang">Ford Mustang</option>
|
<option value="Ford Focus RS">Ford Focus RS</option>
|
||||||
<option value="Ford Focus">Ford Focus</option>
|
<option value="Ford Fiesta ST">Ford Fiesta ST</option>
|
||||||
<option value="Ford Fiesta">Ford Fiesta</option>
|
<option value="Ford Mustang">Ford Mustang</option>
|
||||||
</optgroup>
|
<option value="Ford Focus">Ford Focus</option>
|
||||||
<optgroup label="Renault">
|
<option value="Ford Fiesta">Ford Fiesta</option>
|
||||||
<option value="Renault Megane RS">Renault Megane RS</option>
|
</optgroup>
|
||||||
<option value="Renault Clio RS">Renault Clio RS</option>
|
<optgroup label="Renault">
|
||||||
<option value="Renault Megane">Renault Megane</option>
|
<option value="Renault Megane RS">Renault Megane RS</option>
|
||||||
<option value="Renault Clio">Renault Clio</option>
|
<option value="Renault Clio RS">Renault Clio RS</option>
|
||||||
<option value="Renault Captur">Renault Captur</option>
|
<option value="Renault Megane">Renault Megane</option>
|
||||||
</optgroup>
|
<option value="Renault Clio">Renault Clio</option>
|
||||||
<optgroup label="Peugeot">
|
<option value="Renault Captur">Renault Captur</option>
|
||||||
<option value="Peugeot 308 GTI">Peugeot 308 GTI</option>
|
</optgroup>
|
||||||
<option value="Peugeot 208 GTI">Peugeot 208 GTI</option>
|
<optgroup label="Peugeot">
|
||||||
<option value="Peugeot 308">Peugeot 308</option>
|
<option value="Peugeot 308 GTI">Peugeot 308 GTI</option>
|
||||||
<option value="Peugeot 208">Peugeot 208</option>
|
<option value="Peugeot 208 GTI">Peugeot 208 GTI</option>
|
||||||
<option value="Peugeot 3008">Peugeot 3008</option>
|
<option value="Peugeot 308">Peugeot 308</option>
|
||||||
</optgroup>
|
<option value="Peugeot 208">Peugeot 208</option>
|
||||||
<optgroup label="Opel">
|
<option value="Peugeot 3008">Peugeot 3008</option>
|
||||||
<option value="Opel Astra GSi">Opel Astra GSi</option>
|
</optgroup>
|
||||||
<option value="Opel Corsa OPC">Opel Corsa OPC</option>
|
<optgroup label="Opel">
|
||||||
<option value="Opel Astra">Opel Astra</option>
|
<option value="Opel Astra GSi">Opel Astra GSi</option>
|
||||||
<option value="Opel Corsa">Opel Corsa</option>
|
<option value="Opel Corsa OPC">Opel Corsa OPC</option>
|
||||||
<option value="Opel Mokka">Opel Mokka</option>
|
<option value="Opel Astra">Opel Astra</option>
|
||||||
</optgroup>
|
<option value="Opel Corsa">Opel Corsa</option>
|
||||||
<optgroup label="Seat">
|
<option value="Opel Mokka">Opel Mokka</option>
|
||||||
<option value="Seat Leon Cupra">Seat Leon Cupra</option>
|
</optgroup>
|
||||||
<option value="Seat Ibiza Cupra">Seat Ibiza Cupra</option>
|
<optgroup label="Seat">
|
||||||
<option value="Seat Leon">Seat Leon</option>
|
<option value="Seat Leon Cupra">Seat Leon Cupra</option>
|
||||||
<option value="Seat Ibiza">Seat Ibiza</option>
|
<option value="Seat Ibiza Cupra">Seat Ibiza Cupra</option>
|
||||||
<option value="Seat Arona">Seat Arona</option>
|
<option value="Seat Leon">Seat Leon</option>
|
||||||
</optgroup>
|
<option value="Seat Ibiza">Seat Ibiza</option>
|
||||||
<optgroup label="Skoda">
|
<option value="Seat Arona">Seat Arona</option>
|
||||||
<option value="Skoda Octavia RS">Skoda Octavia RS</option>
|
</optgroup>
|
||||||
<option value="Skoda Kodiaq RS">Skoda Kodiaq RS</option>
|
<optgroup label="Skoda">
|
||||||
<option value="Skoda Octavia">Skoda Octavia</option>
|
<option value="Skoda Octavia RS">Skoda Octavia RS</option>
|
||||||
<option value="Skoda Kodiaq">Skoda Kodiaq</option>
|
<option value="Skoda Kodiaq RS">Skoda Kodiaq RS</option>
|
||||||
<option value="Skoda Karoq">Skoda Karoq</option>
|
<option value="Skoda Octavia">Skoda Octavia</option>
|
||||||
</optgroup>
|
<option value="Skoda Kodiaq">Skoda Kodiaq</option>
|
||||||
<optgroup label="Mazda">
|
<option value="Skoda Karoq">Skoda Karoq</option>
|
||||||
<option value="Mazda MX-5">Mazda MX-5</option>
|
</optgroup>
|
||||||
<option value="Mazda MX-30">Mazda MX-30</option>
|
<optgroup label="Mazda">
|
||||||
<option value="Mazda 3">Mazda 3</option>
|
<option value="Mazda MX-5">Mazda MX-5</option>
|
||||||
<option value="Mazda 6">Mazda 6</option>
|
<option value="Mazda MX-30">Mazda MX-30</option>
|
||||||
<option value="Mazda CX-3">Mazda CX-3</option>
|
<option value="Mazda 3">Mazda 3</option>
|
||||||
<option value="Mazda CX-5">Mazda CX-5</option>
|
<option value="Mazda 6">Mazda 6</option>
|
||||||
<option value="Mazda CX-30">Mazda CX-30</option>
|
<option value="Mazda CX-3">Mazda CX-3</option>
|
||||||
<option value="Mazda CX-60">Mazda CX-60</option>
|
<option value="Mazda CX-5">Mazda CX-5</option>
|
||||||
</optgroup>
|
<option value="Mazda CX-30">Mazda CX-30</option>
|
||||||
<optgroup label="Suzuki">
|
<option value="Mazda CX-60">Mazda CX-60</option>
|
||||||
<option value="Suzuki Swift Sport">Suzuki Swift Sport</option>
|
</optgroup>
|
||||||
<option value="Suzuki Swift">Suzuki Swift</option>
|
<optgroup label="Suzuki">
|
||||||
<option value="Suzuki Jimny">Suzuki Jimny</option>
|
<option value="Suzuki Swift Sport">Suzuki Swift Sport</option>
|
||||||
<option value="Suzuki Vitara">Suzuki Vitara</option>
|
<option value="Suzuki Swift">Suzuki Swift</option>
|
||||||
<option value="Suzuki S-Cross">Suzuki S-Cross</option>
|
<option value="Suzuki Jimny">Suzuki Jimny</option>
|
||||||
<option value="Suzuki Across">Suzuki Across</option>
|
<option value="Suzuki Vitara">Suzuki Vitara</option>
|
||||||
</optgroup>
|
<option value="Suzuki S-Cross">Suzuki S-Cross</option>
|
||||||
<optgroup label="Mitsubishi">
|
<option value="Suzuki Across">Suzuki Across</option>
|
||||||
<option value="Mitsubishi Lancer Evolution">Mitsubishi Lancer Evolution</option>
|
</optgroup>
|
||||||
<option value="Mitsubishi Eclipse Cross">Mitsubishi Eclipse Cross</option>
|
<optgroup label="Mitsubishi">
|
||||||
<option value="Mitsubishi ASX">Mitsubishi ASX</option>
|
<option value="Mitsubishi Lancer Evolution">Mitsubishi Lancer Evolution</option>
|
||||||
<option value="Mitsubishi Outlander">Mitsubishi Outlander</option>
|
<option value="Mitsubishi Eclipse Cross">Mitsubishi Eclipse Cross</option>
|
||||||
<option value="Mitsubishi Space Star">Mitsubishi Space Star</option>
|
<option value="Mitsubishi ASX">Mitsubishi ASX</option>
|
||||||
</optgroup>
|
<option value="Mitsubishi Outlander">Mitsubishi Outlander</option>
|
||||||
<optgroup label="Subaru">
|
<option value="Mitsubishi Space Star">Mitsubishi Space Star</option>
|
||||||
<option value="Subaru WRX STI">Subaru WRX STI</option>
|
</optgroup>
|
||||||
<option value="Subaru WRX">Subaru WRX</option>
|
<optgroup label="Subaru">
|
||||||
<option value="Subaru BRZ">Subaru BRZ</option>
|
<option value="Subaru WRX STI">Subaru WRX STI</option>
|
||||||
<option value="Subaru Impreza">Subaru Impreza</option>
|
<option value="Subaru WRX">Subaru WRX</option>
|
||||||
<option value="Subaru Legacy">Subaru Legacy</option>
|
<option value="Subaru BRZ">Subaru BRZ</option>
|
||||||
<option value="Subaru Outback">Subaru Outback</option>
|
<option value="Subaru Impreza">Subaru Impreza</option>
|
||||||
<option value="Subaru Forester">Subaru Forester</option>
|
<option value="Subaru Legacy">Subaru Legacy</option>
|
||||||
<option value="Subaru XV">Subaru XV</option>
|
<option value="Subaru Outback">Subaru Outback</option>
|
||||||
</optgroup>
|
<option value="Subaru Forester">Subaru Forester</option>
|
||||||
<optgroup label="Lexus">
|
<option value="Subaru XV">Subaru XV</option>
|
||||||
<option value="Lexus LC">Lexus LC</option>
|
</optgroup>
|
||||||
<option value="Lexus RC F">Lexus RC F</option>
|
<optgroup label="Lexus">
|
||||||
<option value="Lexus IS">Lexus IS</option>
|
<option value="Lexus LC">Lexus LC</option>
|
||||||
<option value="Lexus ES">Lexus ES</option>
|
<option value="Lexus RC F">Lexus RC F</option>
|
||||||
<option value="Lexus GS">Lexus GS</option>
|
<option value="Lexus IS">Lexus IS</option>
|
||||||
<option value="Lexus LS">Lexus LS</option>
|
<option value="Lexus ES">Lexus ES</option>
|
||||||
<option value="Lexus NX">Lexus NX</option>
|
<option value="Lexus GS">Lexus GS</option>
|
||||||
<option value="Lexus RX">Lexus RX</option>
|
<option value="Lexus LS">Lexus LS</option>
|
||||||
<option value="Lexus UX">Lexus UX</option>
|
<option value="Lexus NX">Lexus NX</option>
|
||||||
</optgroup>
|
<option value="Lexus RX">Lexus RX</option>
|
||||||
<optgroup label="Infiniti">
|
<option value="Lexus UX">Lexus UX</option>
|
||||||
<option value="Infiniti Q50">Infiniti Q50</option>
|
</optgroup>
|
||||||
<option value="Infiniti Q60">Infiniti Q60</option>
|
<optgroup label="Infiniti">
|
||||||
<option value="Infiniti Q70">Infiniti Q70</option>
|
<option value="Infiniti Q50">Infiniti Q50</option>
|
||||||
<option value="Infiniti QX50">Infiniti QX50</option>
|
<option value="Infiniti Q60">Infiniti Q60</option>
|
||||||
<option value="Infiniti QX60">Infiniti QX60</option>
|
<option value="Infiniti Q70">Infiniti Q70</option>
|
||||||
<option value="Infiniti QX80">Infiniti QX80</option>
|
<option value="Infiniti QX50">Infiniti QX50</option>
|
||||||
</optgroup>
|
<option value="Infiniti QX60">Infiniti QX60</option>
|
||||||
<optgroup label="Genesis">
|
<option value="Infiniti QX80">Infiniti QX80</option>
|
||||||
<option value="Genesis G70">Genesis G70</option>
|
</optgroup>
|
||||||
<option value="Genesis G80">Genesis G80</option>
|
<optgroup label="Genesis">
|
||||||
<option value="Genesis G90">Genesis G90</option>
|
<option value="Genesis G70">Genesis G70</option>
|
||||||
<option value="Genesis GV70">Genesis GV70</option>
|
<option value="Genesis G80">Genesis G80</option>
|
||||||
<option value="Genesis GV80">Genesis GV80</option>
|
<option value="Genesis G90">Genesis G90</option>
|
||||||
</optgroup>
|
<option value="Genesis GV70">Genesis GV70</option>
|
||||||
<optgroup label="Kia">
|
<option value="Genesis GV80">Genesis GV80</option>
|
||||||
<option value="Kia Stinger">Kia Stinger</option>
|
</optgroup>
|
||||||
<option value="Kia Ceed">Kia Ceed</option>
|
<optgroup label="Kia">
|
||||||
<option value="Kia ProCeed">Kia ProCeed</option>
|
<option value="Kia Stinger">Kia Stinger</option>
|
||||||
<option value="Kia Rio">Kia Rio</option>
|
<option value="Kia Ceed">Kia Ceed</option>
|
||||||
<option value="Kia Picanto">Kia Picanto</option>
|
<option value="Kia ProCeed">Kia ProCeed</option>
|
||||||
<option value="Kia Sportage">Kia Sportage</option>
|
<option value="Kia Rio">Kia Rio</option>
|
||||||
<option value="Kia Sorento">Kia Sorento</option>
|
<option value="Kia Picanto">Kia Picanto</option>
|
||||||
<option value="Kia EV6">Kia EV6</option>
|
<option value="Kia Sportage">Kia Sportage</option>
|
||||||
<option value="Kia Niro">Kia Niro</option>
|
<option value="Kia Sorento">Kia Sorento</option>
|
||||||
</optgroup>
|
<option value="Kia EV6">Kia EV6</option>
|
||||||
<optgroup label="Hyundai">
|
<option value="Kia Niro">Kia Niro</option>
|
||||||
<option value="Hyundai i20 N">Hyundai i20 N</option>
|
</optgroup>
|
||||||
<option value="Hyundai i30 N">Hyundai i30 N</option>
|
<optgroup label="Hyundai">
|
||||||
<option value="Hyundai Kona N">Hyundai Kona N</option>
|
<option value="Hyundai i20 N">Hyundai i20 N</option>
|
||||||
<option value="Hyundai i20">Hyundai i20</option>
|
<option value="Hyundai i30 N">Hyundai i30 N</option>
|
||||||
<option value="Hyundai i30">Hyundai i30</option>
|
<option value="Hyundai Kona N">Hyundai Kona N</option>
|
||||||
<option value="Hyundai Kona">Hyundai Kona</option>
|
<option value="Hyundai i20">Hyundai i20</option>
|
||||||
<option value="Hyundai Tucson">Hyundai Tucson</option>
|
<option value="Hyundai i30">Hyundai i30</option>
|
||||||
<option value="Hyundai Santa Fe">Hyundai Santa Fe</option>
|
<option value="Hyundai Kona">Hyundai Kona</option>
|
||||||
<option value="Hyundai IONIQ 5">Hyundai IONIQ 5</option>
|
<option value="Hyundai Tucson">Hyundai Tucson</option>
|
||||||
<option value="Hyundai IONIQ 6">Hyundai IONIQ 6</option>
|
<option value="Hyundai Santa Fe">Hyundai Santa Fe</option>
|
||||||
</optgroup>
|
<option value="Hyundai IONIQ 5">Hyundai IONIQ 5</option>
|
||||||
<optgroup label="Dacia">
|
<option value="Hyundai IONIQ 6">Hyundai IONIQ 6</option>
|
||||||
<option value="Dacia Sandero">Dacia Sandero</option>
|
</optgroup>
|
||||||
<option value="Dacia Logan">Dacia Logan</option>
|
<optgroup label="Dacia">
|
||||||
<option value="Dacia Duster">Dacia Duster</option>
|
<option value="Dacia Sandero">Dacia Sandero</option>
|
||||||
<option value="Dacia Spring">Dacia Spring</option>
|
<option value="Dacia Logan">Dacia Logan</option>
|
||||||
<option value="Dacia Jogger">Dacia Jogger</option>
|
<option value="Dacia Duster">Dacia Duster</option>
|
||||||
</optgroup>
|
<option value="Dacia Spring">Dacia Spring</option>
|
||||||
<optgroup label="Lancia">
|
<option value="Dacia Jogger">Dacia Jogger</option>
|
||||||
<option value="Lancia Delta HF">Lancia Delta HF</option>
|
</optgroup>
|
||||||
<option value="Lancia Ypsilon">Lancia Ypsilon</option>
|
<optgroup label="Lancia">
|
||||||
</optgroup>
|
<option value="Lancia Delta HF">Lancia Delta HF</option>
|
||||||
<optgroup label="Abarth">
|
<option value="Lancia Ypsilon">Lancia Ypsilon</option>
|
||||||
<option value="Abarth 595">Abarth 595</option>
|
</optgroup>
|
||||||
<option value="Abarth 695">Abarth 695</option>
|
<optgroup label="Abarth">
|
||||||
<option value="Abarth 124 Spider">Abarth 124 Spider</option>
|
<option value="Abarth 595">Abarth 595</option>
|
||||||
</optgroup>
|
<option value="Abarth 695">Abarth 695</option>
|
||||||
<optgroup label="Andere">
|
<option value="Abarth 124 Spider">Abarth 124 Spider</option>
|
||||||
<option value="Ander model">Ander model</option>
|
</optgroup>
|
||||||
</optgroup>
|
<optgroup label="Andere">
|
||||||
</select>
|
<option value="Ander model">Ander model</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="message" class="form-label text-gray-300">Bericht</label>
|
<label for="message" class="form-label text-gray-300">Bericht</label>
|
||||||
|
|||||||
134
js/script.js
134
js/script.js
@@ -3,6 +3,124 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
const pageSections = document.querySelectorAll('section');
|
const pageSections = document.querySelectorAll('section');
|
||||||
pageSections.forEach(section => section.classList.add('fade-in'));
|
pageSections.forEach(section => section.classList.add('fade-in'));
|
||||||
|
|
||||||
|
// Car search functionality
|
||||||
|
const carSearch = document.getElementById('carSearch');
|
||||||
|
const carSelect = document.getElementById('car');
|
||||||
|
|
||||||
|
if (carSearch && carSelect) {
|
||||||
|
// Set initial dropdown style
|
||||||
|
carSelect.size = 10;
|
||||||
|
carSelect.style.position = 'absolute';
|
||||||
|
carSelect.style.width = '100%';
|
||||||
|
carSelect.style.zIndex = '1000';
|
||||||
|
carSelect.style.backgroundColor = '#374151';
|
||||||
|
carSelect.style.border = '1px solid #4B5563';
|
||||||
|
carSelect.style.borderRadius = '0.375rem';
|
||||||
|
carSelect.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
|
||||||
|
carSelect.style.maxHeight = '300px';
|
||||||
|
carSelect.style.overflowY = 'auto';
|
||||||
|
|
||||||
|
// Function to close dropdown
|
||||||
|
const closeDropdown = () => {
|
||||||
|
carSelect.size = 1;
|
||||||
|
carSelect.style.position = 'static';
|
||||||
|
carSelect.style.width = 'auto';
|
||||||
|
carSelect.style.zIndex = 'auto';
|
||||||
|
carSelect.style.backgroundColor = '';
|
||||||
|
carSelect.style.border = '';
|
||||||
|
carSelect.style.borderRadius = '';
|
||||||
|
carSelect.style.boxShadow = '';
|
||||||
|
carSelect.style.maxHeight = '';
|
||||||
|
carSelect.style.overflowY = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
carSearch.addEventListener('input', (e) => {
|
||||||
|
const searchTerm = e.target.value.toLowerCase().trim();
|
||||||
|
const options = carSelect.querySelectorAll('option');
|
||||||
|
const optgroups = carSelect.querySelectorAll('optgroup');
|
||||||
|
|
||||||
|
// First hide all options and optgroups
|
||||||
|
options.forEach(option => {
|
||||||
|
if (option.value !== '') { // Don't hide the placeholder
|
||||||
|
option.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
optgroups.forEach(group => {
|
||||||
|
group.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
// If search is empty, show all options
|
||||||
|
if (searchTerm === '') {
|
||||||
|
options.forEach(option => {
|
||||||
|
option.style.display = '';
|
||||||
|
});
|
||||||
|
optgroups.forEach(group => {
|
||||||
|
group.style.display = '';
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show matching options and their parent optgroups
|
||||||
|
let hasMatches = false;
|
||||||
|
options.forEach(option => {
|
||||||
|
if (option.value !== '') {
|
||||||
|
const optionText = option.text.toLowerCase();
|
||||||
|
if (optionText.includes(searchTerm)) {
|
||||||
|
option.style.display = '';
|
||||||
|
hasMatches = true;
|
||||||
|
// Show the parent optgroup
|
||||||
|
const parentGroup = option.closest('optgroup');
|
||||||
|
if (parentGroup) {
|
||||||
|
parentGroup.style.display = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// If no matches found, show the "Ander model" option
|
||||||
|
if (!hasMatches) {
|
||||||
|
const otherModelOption = carSelect.querySelector('option[value="Ander model"]');
|
||||||
|
if (otherModelOption) {
|
||||||
|
otherModelOption.style.display = '';
|
||||||
|
const parentGroup = otherModelOption.closest('optgroup');
|
||||||
|
if (parentGroup) {
|
||||||
|
parentGroup.style.display = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle option selection
|
||||||
|
carSelect.addEventListener('change', () => {
|
||||||
|
carSearch.value = '';
|
||||||
|
const options = carSelect.querySelectorAll('option');
|
||||||
|
const optgroups = carSelect.querySelectorAll('optgroup');
|
||||||
|
options.forEach(option => {
|
||||||
|
option.style.display = '';
|
||||||
|
});
|
||||||
|
optgroups.forEach(group => {
|
||||||
|
group.style.display = '';
|
||||||
|
});
|
||||||
|
closeDropdown();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle double-click on options
|
||||||
|
carSelect.addEventListener('dblclick', (e) => {
|
||||||
|
if (e.target.tagName === 'OPTION' && e.target.value !== '') {
|
||||||
|
carSelect.value = e.target.value;
|
||||||
|
carSearch.value = e.target.text;
|
||||||
|
closeDropdown();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close the dropdown when clicking outside
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (!carSearch.contains(e.target) && !carSelect.contains(e.target)) {
|
||||||
|
closeDropdown();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Smooth scrolling for navigation links
|
// Smooth scrolling for navigation links
|
||||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
anchor.addEventListener('click', function (e) {
|
anchor.addEventListener('click', function (e) {
|
||||||
@@ -13,11 +131,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Get Started button functionality
|
// Get Started button functionality
|
||||||
const getStartedButtons = document.querySelectorAll('.btn-primary');
|
const getStartedButtons = document.querySelectorAll('.btn-primary:not([type="submit"])');
|
||||||
getStartedButtons.forEach(button => {
|
getStartedButtons.forEach(button => {
|
||||||
button.addEventListener('click', (e) => {
|
button.addEventListener('click', (e) => {
|
||||||
// Prevent modal from opening if this is the form submit button
|
|
||||||
if (button.type === 'submit' || button.closest('form')) return;
|
|
||||||
// Create and show modal
|
// Create and show modal
|
||||||
const modal = document.createElement('div');
|
const modal = document.createElement('div');
|
||||||
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in';
|
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in';
|
||||||
@@ -29,10 +145,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
<button class="w-full btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
|
<button class="w-full btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
|
||||||
ECU Tuning
|
ECU Tuning
|
||||||
</button>
|
</button>
|
||||||
<button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-red-600 hover:to-orange-600 hover:text-white transition-all duration-300">
|
<button class="w-full btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
|
||||||
Prestatie Onderdelen
|
Prestatie Onderdelen
|
||||||
</button>
|
</button>
|
||||||
<button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-red-600 hover:to-orange-600 hover:text-white transition-all duration-300">
|
<button class="w-full btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
|
||||||
Maatwerk Pakket
|
Maatwerk Pakket
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -45,6 +161,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
`;
|
`;
|
||||||
document.body.appendChild(modal);
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
|
// DEBUG: Log modal HTML
|
||||||
|
console.log('Modal created. innerHTML:', modal.innerHTML);
|
||||||
|
|
||||||
// Add click event to close modal when clicking outside
|
// Add click event to close modal when clicking outside
|
||||||
modal.addEventListener('click', (e) => {
|
modal.addEventListener('click', (e) => {
|
||||||
if (e.target === modal) {
|
if (e.target === modal) {
|
||||||
@@ -53,10 +172,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Add click events to modal buttons
|
// Add click events to modal buttons
|
||||||
const modalButtons = modal.querySelectorAll('button:not(:last-child)');
|
const modalButtons = modal.querySelectorAll('.space-y-4 > button');
|
||||||
|
// DEBUG: Log number of modal buttons found
|
||||||
|
console.log('Modal buttons found:', modalButtons.length);
|
||||||
modalButtons.forEach(modalBtn => {
|
modalButtons.forEach(modalBtn => {
|
||||||
modalBtn.addEventListener('click', () => {
|
modalBtn.addEventListener('click', () => {
|
||||||
const action = modalBtn.textContent.trim();
|
const action = modalBtn.textContent.trim();
|
||||||
|
console.log('Modal button clicked:', action); // DEBUG
|
||||||
// Scroll to contact form and populate service type
|
// Scroll to contact form and populate service type
|
||||||
const contactForm = document.querySelector('#contact form, #contactForm');
|
const contactForm = document.querySelector('#contact form, #contactForm');
|
||||||
const messageField = contactForm.querySelector('#message');
|
const messageField = contactForm.querySelector('#message');
|
||||||
|
|||||||
Reference in New Issue
Block a user