mirror of
https://github.com/Alvin-Zilverstand/challenge-11.git
synced 2026-03-06 11:06:21 +01:00
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.
This commit is contained in:
Alvin
@@ -1,20 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background Circle -->
|
||||
<circle cx="256" cy="256" r="240" fill="url(#gradient)"/>
|
||||
|
||||
<!-- Car Silhouette -->
|
||||
<path d="M384 320H128C128 320 96 304 96 272C96 240 128 224 128 224H384C384 224 416 240 416 272C416 304 384 320 384 320Z" fill="white"/>
|
||||
|
||||
<!-- Wheels -->
|
||||
<circle cx="160" cy="320" r="32" fill="#1F2937"/>
|
||||
<circle cx="352" cy="320" r="32" fill="#1F2937"/>
|
||||
|
||||
<!-- Tuning Elements -->
|
||||
<path d="M256 160L288 224H224L256 160Z" fill="white"/>
|
||||
<circle cx="256" cy="192" r="16" fill="#EF4444"/>
|
||||
|
||||
<!-- Gradient Definition -->
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#EF4444"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 986 B After Width: | Height: | Size: 824 B |
283
css/styles.css
283
css/styles.css
@@ -38,105 +38,201 @@ body {
|
||||
|
||||
/* Navbar fallback */
|
||||
.navbar {
|
||||
background: var(--gradient-primary);
|
||||
padding: 1rem 0;
|
||||
box-shadow: var(--shadow);
|
||||
background: rgba(17, 24, 39, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
.navbar.scrolled {
|
||||
background: rgba(17, 24, 39, 0.95);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
opacity: 0.8;
|
||||
color: #fff !important;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem !important;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
background: var(--gradient-primary);
|
||||
transition: width 0.3s ease;
|
||||
.nav-link:hover {
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
opacity: 1;
|
||||
color: #f472b6;
|
||||
}
|
||||
|
||||
/* Button fallback */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-primary);
|
||||
color: var(--white);
|
||||
box-shadow: var(--shadow);
|
||||
background: linear-gradient(to right, #dc2626, #ea580c);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(to right, #b91c1c, #c2410c);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
background: linear-gradient(135deg, #7c3aed, #db2777);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
border: 2px solid #4b5563;
|
||||
color: #9ca3af;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-outline-secondary:hover {
|
||||
border-color: #ef4444;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: #374151;
|
||||
border: 1px solid #4b5563;
|
||||
color: white;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: #374151;
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: #d1d5db;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.glass-nav {
|
||||
background: rgba(17, 24, 39, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.glass-nav:hover {
|
||||
background: rgba(17, 24, 39, 0.95);
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-slow {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin-slow {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin-slow {
|
||||
animation: spin-slow 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce-slow {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-bounce-slow {
|
||||
animation: bounce-slow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-collapse {
|
||||
background: rgba(17, 24, 39, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.75rem 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1f2937;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ef4444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
/* Grid fallback */
|
||||
@@ -415,41 +511,6 @@ body {
|
||||
border-top: 1px solid #374151;
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.form-control {
|
||||
background-color: #374151;
|
||||
border-color: #4b5563;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: #374151;
|
||||
border-color: #ef4444;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
background: linear-gradient(to right, #ef4444, #f97316);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(to right, #dc2626, #ea580c);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
border-color: #ef4444;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.btn-outline-secondary:hover {
|
||||
background: linear-gradient(to right, #ef4444, #f97316);
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Search Results */
|
||||
.search-result-item {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
213
index.html
213
index.html
@@ -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>
|
||||
|
||||
42
js/script.js
42
js/script.js
@@ -1,20 +1,14 @@
|
||||
// Add fade-in animation to all sections
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const pageSections = document.querySelectorAll('section');
|
||||
pageSections.forEach(section => {
|
||||
section.classList.add('fade-in');
|
||||
});
|
||||
pageSections.forEach(section => section.classList.add('fade-in'));
|
||||
|
||||
// Smooth scrolling for navigation links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -75,11 +69,39 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Form submission handling
|
||||
const contactForm = document.querySelector('form');
|
||||
if (contactForm) {
|
||||
const carSelect = contactForm.querySelector('#car');
|
||||
carSelect.addEventListener('change', (e) => {
|
||||
if (e.target.value === 'Ander model') {
|
||||
const customInput = document.createElement('input');
|
||||
customInput.type = 'text';
|
||||
customInput.className = 'form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300 mt-2';
|
||||
customInput.placeholder = 'Voer uw voertuigmodel in';
|
||||
customInput.id = 'customCar';
|
||||
|
||||
const existingCustomInput = contactForm.querySelector('#customCar');
|
||||
if (!existingCustomInput) {
|
||||
carSelect.parentNode.appendChild(customInput);
|
||||
}
|
||||
} else {
|
||||
const existingCustomInput = contactForm.querySelector('#customCar');
|
||||
if (existingCustomInput) {
|
||||
existingCustomInput.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
contactForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
// Add your form submission logic here
|
||||
alert('Bedankt voor je interesse! We nemen zo snel mogelijk contact met je op.');
|
||||
const carModel = carSelect.value === 'Ander model'
|
||||
? contactForm.querySelector('#customCar')?.value || 'Niet gespecificeerd'
|
||||
: carSelect.value;
|
||||
|
||||
alert(`Bedankt voor je interesse! We nemen zo snel mogelijk contact met je op over je ${carModel}.`);
|
||||
contactForm.reset();
|
||||
const existingCustomInput = contactForm.querySelector('#customCar');
|
||||
if (existingCustomInput) {
|
||||
existingCustomInput.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user