From d6c53c19b27458811d805b25e2dd2c46edca02fe Mon Sep 17 00:00:00 2001 From: Alvin <524715@vistacollege.nl> Date: Wed, 4 Jun 2025 12:01:47 +0200 Subject: [PATCH] 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. --- assets/favicon.svg | 11 +- css/styles.css | 283 +++++++++++++++++++++++++++------------------ index.html | 213 +++++++++++++++++++++++++++++++++- js/script.js | 42 +++++-- 4 files changed, 417 insertions(+), 132 deletions(-) diff --git a/assets/favicon.svg b/assets/favicon.svg index 713446b..4f2d365 100644 --- a/assets/favicon.svg +++ b/assets/favicon.svg @@ -1,20 +1,11 @@ - - - - + - - - - - - diff --git a/css/styles.css b/css/styles.css index 8a48058..2e31784 100644 --- a/css/styles.css +++ b/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; diff --git a/index.html b/index.html index 779f72e..1f471bb 100644 --- a/index.html +++ b/index.html @@ -181,7 +181,218 @@
- +
diff --git a/js/script.js b/js/script.js index ee7e192..b5f748f 100644 --- a/js/script.js +++ b/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(); + } }); }