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

Revamp index.html, styles.css, and script.js for Tuning Pro website. Update branding to Dutch language, enhance navbar and sections with new color schemes, and improve button functionalities. Implement dynamic content in modals and refine form handling for better user experience.

Browse Source
This commit is contained in:
Alvin
2025-06-04 11:22:41 +02:00
parent f734a41678
commit d904d7beae
3 changed files with 255 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
js/script.js
View File

@@ -26,18 +26,18 @@ document.addEventListener('DOMContentLoaded', () => {
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.innerHTML = `
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 transform hover:scale-105 transition-all duration-300">
<h3 class="text-2xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Get Started</h3>
<p class="text-gray-600 mb-6">Choose how you'd like to get started with our services:</p>
<div class="bg-gray-800 rounded-lg p-8 max-w-md w-full mx-4 transform hover:scale-105 transition-all duration-300 border border-red-500">
<h3 class="text-2xl font-bold mb-4 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">Boek Je Tuning</h3>
<p class="text-gray-300 mb-6">Kies je gewenste dienst:</p>
<div class="space-y-4">
<button class="w-full btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300">
Start Free Trial
<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
</button>
<button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300">
Schedule Demo
<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">
Prestatie Onderdelen
</button>
<button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300">
Contact Sales
<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">
Maatwerk Pakket
</button>
</div>
<button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-colors duration-300" onclick="this.closest('.fixed').remove()">
@@ -61,18 +61,12 @@ document.addEventListener('DOMContentLoaded', () => {
modalButtons.forEach(button => {
button.addEventListener('click', () => {
const action = button.textContent.trim();
switch(action) {
case 'Start Free Trial':
window.location.href = '#contact';
break;
case 'Schedule Demo':
alert('Demo scheduling feature coming soon!');
break;
case 'Contact Sales':
window.location.href = '#contact';
break;
}
// Scroll to contact form and populate service type
const contactForm = document.querySelector('#contact form');
const messageField = contactForm.querySelector('#message');
messageField.value = `Ik ben geïnteresseerd in: ${action}`;
modal.remove();
document.querySelector('#contact').scrollIntoView({ behavior: 'smooth' });
});
});
});
@@ -84,7 +78,7 @@ document.addEventListener('DOMContentLoaded', () => {
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// Add your form submission logic here
alert('Thank you for your message! This is a demo form.');
alert('Bedankt voor je interesse! We nemen zo snel mogelijk contact met je op.');
contactForm.reset();
});
}
@@ -132,11 +126,11 @@ document.addEventListener('DOMContentLoaded', () => {
}
// Add hover effects to cards
const cards = document.querySelectorAll('.card, .bg-white.rounded-lg');
const cards = document.querySelectorAll('.card, .bg-gray-800.rounded-lg');
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-5px)';
card.style.boxShadow = '0 10px 15px -3px rgba(0,0,0,0.1)';
card.style.boxShadow = '0 10px 15px -3px rgba(0,0,0,0.3)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
@@ -144,72 +138,6 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
// Learn More button functionality
const learnMoreBtn = document.querySelector('.btn-outline-secondary');
if (learnMoreBtn) {
learnMoreBtn.addEventListener('click', () => {
// 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';
modal.innerHTML = `
<div class="bg-white rounded-lg p-8 max-w-2xl w-full mx-4 transform hover:scale-105 transition-all duration-300">
<h3 class="text-3xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">About Our Services</h3>
<div class="space-y-6">
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<div>
<h4 class="text-xl font-semibold mb-2">Lightning Fast Performance</h4>
<p class="text-gray-600">Our platform is optimized for speed and efficiency, ensuring your business operations run smoothly without any delays.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg>
</div>
<div>
<h4 class="text-xl font-semibold mb-2">Enterprise-Grade Security</h4>
<p class="text-gray-600">Your data is protected with state-of-the-art encryption and security measures, ensuring complete privacy and compliance.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
</svg>
</div>
<div>
<h4 class="text-xl font-semibold mb-2">Cloud Integration</h4>
<p class="text-gray-600">Seamlessly connect with your existing cloud infrastructure and scale your operations as needed.</p>
</div>
</div>
</div>
<div class="mt-8 flex justify-end space-x-4">
<button class="btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300" onclick="this.closest('.fixed').remove()">
Close
</button>
<button class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300" onclick="window.location.href='#contact'">
Get Started Now
</button>
</div>
</div>
`;
document.body.appendChild(modal);
// Add click event to close modal when clicking outside
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.remove();
}
});
});
}
// Navbar scroll effect
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
@@ -219,4 +147,18 @@ document.addEventListener('DOMContentLoaded', () => {
navbar.classList.remove('scrolled');
}
});
// Gallery image hover effects
const galleryItems = document.querySelectorAll('#gallery .col-md-4');
galleryItems.forEach(item => {
item.addEventListener('mouseenter', () => {
const image = item.querySelector('.aspect-w-16');
image.style.transform = 'scale(1.05)';
image.style.transition = 'transform 0.3s ease-in-out';
});
item.addEventListener('mouseleave', () => {
const image = item.querySelector('.aspect-w-16');
image.style.transform = 'scale(1)';
});
});
});