diff --git a/index.html b/index.html
index 7686a54..6c25892 100644
--- a/index.html
+++ b/index.html
@@ -185,337 +185,340 @@
-
+
+
+
+
diff --git a/js/script.js b/js/script.js
index 1a816a9..b847340 100644
--- a/js/script.js
+++ b/js/script.js
@@ -3,6 +3,124 @@ document.addEventListener('DOMContentLoaded', () => {
const pageSections = document.querySelectorAll('section');
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
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
@@ -13,11 +131,9 @@ document.addEventListener('DOMContentLoaded', () => {
});
// Get Started button functionality
- const getStartedButtons = document.querySelectorAll('.btn-primary');
+ const getStartedButtons = document.querySelectorAll('.btn-primary:not([type="submit"])');
getStartedButtons.forEach(button => {
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
const modal = document.createElement('div');
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', () => {
-
@@ -45,6 +161,9 @@ document.addEventListener('DOMContentLoaded', () => {
`;
document.body.appendChild(modal);
+ // DEBUG: Log modal HTML
+ console.log('Modal created. innerHTML:', modal.innerHTML);
+
// Add click event to close modal when clicking outside
modal.addEventListener('click', (e) => {
if (e.target === modal) {
@@ -53,10 +172,13 @@ document.addEventListener('DOMContentLoaded', () => {
});
// 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 => {
modalBtn.addEventListener('click', () => {
const action = modalBtn.textContent.trim();
+ console.log('Modal button clicked:', action); // DEBUG
// Scroll to contact form and populate service type
const contactForm = document.querySelector('#contact form, #contactForm');
const messageField = contactForm.querySelector('#message');