alvin/challenge-11
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/challenge-11.git synced 2026-03-06 21:29:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enhance vehicle selection in index.html by replacing text input with a dropdown menu featuring various car models from multiple brands. Update script.js to dynamically add a custom input field for 'Other model' selection. Revise styles.css for improved button and form control designs, including new animations and responsive adjustments.

Browse Source
This commit is contained in:
Alvin
2025-06-04 12:01:47 +02:00
parent 50fd74ec57
commit d6c53c19b2
4 changed files with 417 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
index.html
View File

@@ -181,7 +181,218 @@
</div>
<div class="mb-3">
<label for="car" class="form-label text-gray-300">Voertuig</label>
<input type="text" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="car" placeholder="Uw voertuigmodel">
<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">
<option value="" disabled selected>Selecteer uw voertuigmodel</option>
<optgroup label="BMW">
<option value="BMW M2">BMW M2</option>
<option value="BMW M3">BMW M3</option>
<option value="BMW M4">BMW M4</option>
<option value="BMW M5">BMW M5</option>
<option value="BMW M8">BMW M8</option>
<option value="BMW 1 Serie M">BMW 1 Serie M</option>
<option value="BMW 2 Serie M">BMW 2 Serie M</option>
<option value="BMW 3 Serie M">BMW 3 Serie M</option>
<option value="BMW 4 Serie M">BMW 4 Serie M</option>
<option value="BMW 5 Serie M">BMW 5 Serie M</option>
<option value="BMW X3 M">BMW X3 M</option>
<option value="BMW X4 M">BMW X4 M</option>
<option value="BMW X5 M">BMW X5 M</option>
<option value="BMW X6 M">BMW X6 M</option>
<option value="BMW 118i">BMW 118i</option>
<option value="BMW 120i">BMW 120i</option>
<option value="BMW 125i">BMW 125i</option>
<option value="BMW 320i">BMW 320i</option>
<option value="BMW 330i">BMW 330i</option>
<option value="BMW 420i">BMW 420i</option>
<option value="BMW 430i">BMW 430i</option>
</optgroup>
<optgroup label="Audi">
<option value="Audi RS3">Audi RS3</option>
<option value="Audi RS4">Audi RS4</option>
<option value="Audi RS5">Audi RS5</option>
<option value="Audi RS6">Audi RS6</option>
<option value="Audi RS7">Audi RS7</option>
<option value="Audi RS Q3">Audi RS Q3</option>
<option value="Audi RS Q8">Audi RS Q8</option>
<option value="Audi S3">Audi S3</option>
<option value="Audi S4">Audi S4</option>
<option value="Audi S5">Audi S5</option>
<option value="Audi S6">Audi S6</option>
<option value="Audi S7">Audi S7</option>
<option value="Audi S8">Audi S8</option>
<option value="Audi SQ5">Audi SQ5</option>
<option value="Audi SQ7">Audi SQ7</option>
<option value="Audi SQ8">Audi SQ8</option>
<option value="Audi A3">Audi A3</option>
<option value="Audi A4">Audi A4</option>
<option value="Audi A5">Audi A5</option>
<option value="Audi A6">Audi A6</option>
<option value="Audi Q3">Audi Q3</option>
<option value="Audi Q5">Audi Q5</option>
</optgroup>
<optgroup label="Mercedes-AMG">
<option value="Mercedes-AMG A35">Mercedes-AMG A35</option>
<option value="Mercedes-AMG A45">Mercedes-AMG A45</option>
<option value="Mercedes-AMG CLA35">Mercedes-AMG CLA35</option>
<option value="Mercedes-AMG CLA45">Mercedes-AMG CLA45</option>
<option value="Mercedes-AMG C43">Mercedes-AMG C43</option>
<option value="Mercedes-AMG C63">Mercedes-AMG C63</option>
<option value="Mercedes-AMG E53">Mercedes-AMG E53</option>
<option value="Mercedes-AMG E63">Mercedes-AMG E63</option>
<option value="Mercedes-AMG G63">Mercedes-AMG G63</option>
<option value="Mercedes-AMG GT">Mercedes-AMG GT</option>
<option value="Mercedes-AMG GT63">Mercedes-AMG GT63</option>
<option value="Mercedes-AMG GLE63">Mercedes-AMG GLE63</option>
<option value="Mercedes-AMG GLS63">Mercedes-AMG GLS63</option>
</optgroup>
<optgroup label="Volkswagen">
<option value="Volkswagen Golf R">Volkswagen Golf R</option>
<option value="Volkswagen Golf GTI">Volkswagen Golf GTI</option>
<option value="Volkswagen Golf GTD">Volkswagen Golf GTD</option>
<option value="Volkswagen Polo GTI">Volkswagen Polo GTI</option>
<option value="Volkswagen Arteon R">Volkswagen Arteon R</option>
<option value="Volkswagen Tiguan R">Volkswagen Tiguan R</option>
<option value="Volkswagen T-Roc R">Volkswagen T-Roc R</option>
<option value="Volkswagen T-Cross">Volkswagen T-Cross</option>
<option value="Volkswagen Passat R-Line">Volkswagen Passat R-Line</option>
<option value="Volkswagen Golf">Volkswagen Golf</option>
<option value="Volkswagen Polo">Volkswagen Polo</option>
<option value="Volkswagen T-Roc">Volkswagen T-Roc</option>
<option value="Volkswagen Tiguan">Volkswagen Tiguan</option>
</optgroup>
<optgroup label="Porsche">
<option value="Porsche 911">Porsche 911</option>
<option value="Porsche 911 GT3">Porsche 911 GT3</option>
<option value="Porsche 911 Turbo">Porsche 911 Turbo</option>
<option value="Porsche 718 Cayman">Porsche 718 Cayman</option>
<option value="Porsche 718 Boxster">Porsche 718 Boxster</option>
<option value="Porsche Taycan">Porsche Taycan</option>
<option value="Porsche Panamera">Porsche Panamera</option>
<option value="Porsche Macan">Porsche Macan</option>
<option value="Porsche Cayenne">Porsche Cayenne</option>
</optgroup>
<optgroup label="Audi Sport">
<option value="Audi Sport Quattro">Audi Sport Quattro</option>
<option value="Audi Sport RS e-tron GT">Audi Sport RS e-tron GT</option>
<option value="Audi Sport R8">Audi Sport R8</option>
<option value="Audi Sport TT RS">Audi Sport TT RS</option>
</optgroup>
<optgroup label="Alfa Romeo">
<option value="Alfa Romeo Giulia Quadrifoglio">Alfa Romeo Giulia Quadrifoglio</option>
<option value="Alfa Romeo Stelvio Quadrifoglio">Alfa Romeo Stelvio Quadrifoglio</option>
<option value="Alfa Romeo 4C">Alfa Romeo 4C</option>
<option value="Alfa Romeo Giulia">Alfa Romeo Giulia</option>
<option value="Alfa Romeo Stelvio">Alfa Romeo Stelvio</option>
<option value="Alfa Romeo Tonale">Alfa Romeo Tonale</option>
</optgroup>
<optgroup label="Jaguar">
<option value="Jaguar F-Type">Jaguar F-Type</option>
<option value="Jaguar F-Pace SVR">Jaguar F-Pace SVR</option>
<option value="Jaguar XE SV Project 8">Jaguar XE SV Project 8</option>
<option value="Jaguar XE">Jaguar XE</option>
<option value="Jaguar XF">Jaguar XF</option>
<option value="Jaguar E-Pace">Jaguar E-Pace</option>
</optgroup>
<optgroup label="Land Rover">
<option value="Land Rover Range Rover Sport SVR">Land Rover Range Rover Sport SVR</option>
<option value="Land Rover Defender V8">Land Rover Defender V8</option>
<option value="Land Rover Discovery SVX">Land Rover Discovery SVX</option>
<option value="Land Rover Discovery Sport">Land Rover Discovery Sport</option>
<option value="Land Rover Evoque">Land Rover Evoque</option>
</optgroup>
<optgroup label="Maserati">
<option value="Maserati MC20">Maserati MC20</option>
<option value="Maserati Levante Trofeo">Maserati Levante Trofeo</option>
<option value="Maserati Ghibli Trofeo">Maserati Ghibli Trofeo</option>
<option value="Maserati Ghibli">Maserati Ghibli</option>
<option value="Maserati Levante">Maserati Levante</option>
</optgroup>
<optgroup label="Bentley">
<option value="Bentley Continental GT">Bentley Continental GT</option>
<option value="Bentley Flying Spur">Bentley Flying Spur</option>
<option value="Bentley Bentayga">Bentley Bentayga</option>
</optgroup>
<optgroup label="Aston Martin">
<option value="Aston Martin Vantage">Aston Martin Vantage</option>
<option value="Aston Martin DB11">Aston Martin DB11</option>
<option value="Aston Martin DBS">Aston Martin DBS</option>
</optgroup>
<optgroup label="Ferrari">
<option value="Ferrari F8 Tributo">Ferrari F8 Tributo</option>
<option value="Ferrari SF90 Stradale">Ferrari SF90 Stradale</option>
<option value="Ferrari 296 GTB">Ferrari 296 GTB</option>
</optgroup>
<optgroup label="Lamborghini">
<option value="Lamborghini Huracán">Lamborghini Huracán</option>
<option value="Lamborghini Aventador">Lamborghini Aventador</option>
<option value="Lamborghini Urus">Lamborghini Urus</option>
</optgroup>
<optgroup label="McLaren">
<option value="McLaren 720S">McLaren 720S</option>
<option value="McLaren 765LT">McLaren 765LT</option>
<option value="McLaren Artura">McLaren Artura</option>
</optgroup>
<optgroup label="Toyota">
<option value="Toyota GR Yaris">Toyota GR Yaris</option>
<option value="Toyota GR Corolla">Toyota GR Corolla</option>
<option value="Toyota GR86">Toyota GR86</option>
<option value="Toyota Supra">Toyota Supra</option>
<option value="Toyota Yaris">Toyota Yaris</option>
<option value="Toyota Corolla">Toyota Corolla</option>
</optgroup>
<optgroup label="Honda">
<option value="Honda Civic Type R">Honda Civic Type R</option>
<option value="Honda Civic">Honda Civic</option>
<option value="Honda Jazz">Honda Jazz</option>
<option value="Honda HR-V">Honda HR-V</option>
</optgroup>
<optgroup label="Ford">
<option value="Ford Focus ST">Ford Focus ST</option>
<option value="Ford Focus RS">Ford Focus RS</option>
<option value="Ford Fiesta ST">Ford Fiesta ST</option>
<option value="Ford Mustang">Ford Mustang</option>
<option value="Ford Focus">Ford Focus</option>
<option value="Ford Fiesta">Ford Fiesta</option>
</optgroup>
<optgroup label="Renault">
<option value="Renault Megane RS">Renault Megane RS</option>
<option value="Renault Clio RS">Renault Clio RS</option>
<option value="Renault Megane">Renault Megane</option>
<option value="Renault Clio">Renault Clio</option>
<option value="Renault Captur">Renault Captur</option>
</optgroup>
<optgroup label="Peugeot">
<option value="Peugeot 308 GTI">Peugeot 308 GTI</option>
<option value="Peugeot 208 GTI">Peugeot 208 GTI</option>
<option value="Peugeot 308">Peugeot 308</option>
<option value="Peugeot 208">Peugeot 208</option>
<option value="Peugeot 3008">Peugeot 3008</option>
</optgroup>
<optgroup label="Opel">
<option value="Opel Astra GSi">Opel Astra GSi</option>
<option value="Opel Corsa OPC">Opel Corsa OPC</option>
<option value="Opel Astra">Opel Astra</option>
<option value="Opel Corsa">Opel Corsa</option>
<option value="Opel Mokka">Opel Mokka</option>
</optgroup>
<optgroup label="Seat">
<option value="Seat Leon Cupra">Seat Leon Cupra</option>
<option value="Seat Ibiza Cupra">Seat Ibiza Cupra</option>
<option value="Seat Leon">Seat Leon</option>
<option value="Seat Ibiza">Seat Ibiza</option>
<option value="Seat Arona">Seat Arona</option>
</optgroup>
<optgroup label="Skoda">
<option value="Skoda Octavia RS">Skoda Octavia RS</option>
<option value="Skoda Kodiaq RS">Skoda Kodiaq RS</option>
<option value="Skoda Octavia">Skoda Octavia</option>
<option value="Skoda Kodiaq">Skoda Kodiaq</option>
<option value="Skoda Karoq">Skoda Karoq</option>
</optgroup>
<optgroup label="Andere">
<option value="Ander model">Ander model</option>
</optgroup>
</select>
</div>
<div class="mb-3">
<label for="message" class="form-label text-gray-300">Bericht</label>