| |
|
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Dale's Detailing - Gallery</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Poppins', sans-serif; |
| | background-color: #f8f8f8; |
| | } |
| | |
| | .gallery-item { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .gallery-item:hover { |
| | transform: scale(1.02); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-100"> |
| | <div class="max-w-md mx-auto bg-white min-h-screen shadow-xl overflow-hidden relative"> |
| | |
| | <header class="bg-black text-white p-4 flex items-center justify-between sticky top-0 z-10"> |
| | <div class="flex items-center space-x-2"> |
| | <div class="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-car text-xl"></i> |
| | </div> |
| | <h1 class="text-xl font-bold">DALE'S GALLERY</h1> |
| | </div> |
| | <button class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm"> |
| | <i class="fas fa-plus mr-1"></i> Add |
| | </button> |
| | </header> |
| | |
| | |
| | <main class="pb-20 p-4"> |
| | <div class="grid grid-cols-2 gap-4"> |
| | |
| | <div class="gallery-item bg-gray-200 h-40 rounded-lg overflow-hidden relative"> |
| | <input type="file" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"> |
| | <div class="w-full h-full flex items-center justify-center"> |
| | <i class="fas fa-plus text-gray-400 text-2xl"></i> |
| | </div> |
| | </div> |
| | <div class="gallery-item bg-gray-200 h-40 rounded-lg flex items-center justify-center"> |
| | <i class="fas fa-plus text-gray-400 text-2xl"></i> |
| | </div> |
| | <div class="gallery-item bg-gray-200 h-40 rounded-lg flex items-center justify-center"> |
| | <i class="fas fa-plus text-gray-400 text-2xl"></i> |
| | </div> |
| | <div class="gallery-item bg-gray-200 h-40 rounded-lg flex items-center justify-center"> |
| | <i class="fas fa-plus text-gray-400 text-2xl"></i> |
| | </div> |
| | </div> |
| | </main> |
| | |
| | |
| | <footer class="fixed bottom-0 w-full max-w-md bg-white border-t border-gray-200 flex justify-around py-3"> |
| | <a href="index.html" class="text-center text-gray-500"> |
| | <i class="fas fa-home block text-xl"></i> |
| | <span class="text-xs mt-1">Home</span> |
| | </a> |
| | <a href="#" class="text-center text-orange-500"> |
| | <i class="fas fa-images block text-xl"></i> |
| | <span class="text-xs mt-1">Gallery</span> |
| | </a> |
| | <a href="#" class="text-center text-gray-500"> |
| | <i class="fas fa-map-marker-alt block text-xl"></i> |
| | <span class="text-xs mt-1">Locations</span> |
| | </a> |
| | <a href="#" class="text-center text-gray-500"> |
| | <i class="fas fa-user block text-xl"></i> |
| | <span class="text-xs mt-1">Profile</span> |
| | </a> |
| | </footer> |
| | </div> |
| |
|
| | <script> |
| | document.addEventListener('DOMContentLoaded', function() { |
| | |
| | const addButtons = document.querySelectorAll('.gallery-item'); |
| | const headerAddButton = document.querySelector('header button'); |
| | |
| | function addPhoto() { |
| | const newPhoto = document.createElement('div'); |
| | newPhoto.className = 'gallery-item bg-gray-200 h-40 rounded-lg overflow-hidden relative'; |
| | newPhoto.innerHTML = ` |
| | <input type="file" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"> |
| | <div class="w-full h-full flex items-center justify-center"> |
| | <i class="fas fa-plus text-gray-400 text-2xl"></i> |
| | </div> |
| | `; |
| | |
| | |
| | const galleryGrid = document.querySelector('.grid'); |
| | galleryGrid.appendChild(newPhoto); |
| | |
| | |
| | newPhoto.addEventListener('click', addPhoto); |
| | } |
| | |
| | addButtons.forEach(button => { |
| | button.addEventListener('click', addPhoto); |
| | }); |
| | |
| | headerAddButton.addEventListener('click', addPhoto); |
| | |
| | |
| | document.addEventListener('change', function(e) { |
| | if (e.target.matches('input[type="file"]')) { |
| | const file = e.target.files[0]; |
| | if (file) { |
| | const reader = new FileReader(); |
| | reader.onload = function(event) { |
| | const parent = e.target.parentElement; |
| | parent.innerHTML = ` |
| | <img src="${event.target.result}" class="w-full h-full object-cover"> |
| | <input type="file" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"> |
| | `; |
| | }; |
| | reader.readAsDataURL(file); |
| | } |
| | } |
| | }); |
| | }); |
| | </script> |
| | <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=leon325/dales" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
| |
|
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Dale's Detailing - Premium Car Care</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Poppins', sans-serif; |
| | background-color: #f8f8f8; |
| | } |
| | |
| | .service-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| | } |
| | |
| | .nav-item.active { |
| | color: #FF6B00; |
| | border-bottom: 3px solid #FF6B00; |
| | } |
| | |
| | .booking-step.active { |
| | background-color: #FF6B00; |
| | color: white; |
| | } |
| | |
| | .swiper-slide { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .swiper-slide:hover { |
| | transform: scale(1.02); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-100"> |
| | |
| | <div class="max-w-md mx-auto bg-white min-h-screen shadow-xl overflow-hidden relative"> |
| | |
| | <header class="bg-black text-white p-4 flex items-center justify-between sticky top-0 z-10"> |
| | <div class="flex items-center space-x-2"> |
| | <div class="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-car text-xl"></i> |
| | </div> |
| | <h1 class="text-xl font-bold">DALE'S</h1> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <button class="text-orange-500"> |
| | <i class="fas fa-bell text-xl"></i> |
| | </button> |
| | <button class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center"> |
| | <i class="fas fa-user text-sm"></i> |
| | </button> |
| | </div> |
| | </header> |
| | |
| | |
| | <main class="pb-20"> |
| | |
| | <section class="relative h-48 bg-black overflow-hidden"> |
| | <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div> |
| | <img src="https://images.unsplash.com/photo-1494972308805-463d61949c46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" |
| | alt="Premium Car Detailing" class="w-full h-full object-cover opacity-70"> |
| | <div class="absolute bottom-4 left-4 z-20 text-white"> |
| | <h2 class="text-2xl font-bold">Premium Detailing</h2> |
| | <p class="text-sm">Bringing back that showroom shine</p> |
| | <button class="mt-2 bg-orange-500 text-white px-4 py-2 rounded-full text-sm font-medium"> |
| | Book Now |
| | </button> |
| | </div> |
| | </section> |
| | |
| | |
| | <nav class="flex justify-around border-b border-gray-200 py-3 sticky top-16 bg-white z-10"> |
| | <a href="#" class="nav-item active px-4 py-2 text-sm font-medium">Services</a> |
| | <a href="gallery.html" class="nav-item px-4 py-2 text-sm font-medium">Gallery</a> |
| | <a href="#" class="nav-item px-4 py-2 text-sm font-medium">Locations</a> |
| | </nav> |
| | |
| | |
| | <section class="p-4"> |
| | <h3 class="text-lg font-bold mb-4">Our Services</h3> |
| | |
| | <div class="grid grid-cols-2 gap-4"> |
| | |
| | <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> |
| | <div class="h-24 bg-gray-800 flex items-center justify-center"> |
| | <i class="fas fa-spray-can text-orange-500 text-3xl"></i> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-semibold text-sm">Exterior Wash</h4> |
| | <p class="text-xs text-gray-500 mt-1">From $25</p> |
| | <button class="mt-2 text-orange-500 text-xs font-medium">View Details</button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> |
| | <div class="h-24 bg-gray-800 flex items-center justify-center"> |
| | <i class="fas fa-vacuum text-orange-500 text-3xl"></i> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-semibold text-sm">Interior Detailing</h4> |
| | <p class="text-xs text-gray-500 mt-1">From $75</p> |
| | <button class="mt-2 text-orange-500 text-xs font-medium">View Details</button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> |
| | <div class="h-24 bg-gray-800 flex items-center justify-center"> |
| | <i class="fas fa-car-battery text-orange-500 text-3xl"></i> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-semibold text-sm">Full Detailing</h4> |
| | <p class="text-xs text-gray-500 mt-1">From $150</p> |
| | <button class="mt-2 text-orange-500 text-xs font-medium">View Details</button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> |
| | <div class="h-24 bg-gray-800 flex items-center justify-center"> |
| | <i class="fas fa-wax-candle text-orange-500 text-3xl"></i> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-semibold text-sm">Ceramic Coating</h4> |
| | <p class="text-xs text-gray-500 mt-1">From $300</p> |
| | <button class="mt-2 text-orange-500 text-xs font-medium">View Details</button> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | |
| | |
| | <section class="p-4"> |
| | <h3 class="text-lg font-bold mb-4">How It Works</h3> |
| | |
| | <div class="flex justify-between items-center mb-6"> |
| | <div class="text-center"> |
| | <div class="booking-step w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2 font-bold">1</div> |
| | <p class="text-xs">Select Service</p> |
| | </div> |
| | <div class="h-1 w-10 bg-gray-200"></div> |
| | <div class="text-center"> |
| | <div class="booking-step w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2 font-bold">2</div> |
| | <p class="text-xs">Choose Time</p> |
| | </div> |
| | <div class="h-1 w-10 bg-gray-200"></div> |
| | <div class="text-center"> |
| | <div class="booking-step w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2 font-bold">3</div> |
| | <p class="text-xs">Confirm</p> |
| | </div> |
| | </div> |
| | |
| | <button class="w-full bg-orange-500 text-white py-3 rounded-full font-bold"> |
| | Get Started |
| | </button> |
| | </section> |
| | |
| | |
| | <section class="p-4 bg-gray-50"> |
| | <h3 class="text-lg font-bold mb-4">What Our Clients Say</h3> |
| | |
| | <div class="bg-white p-4 rounded-xl shadow-sm"> |
| | <div class="flex items-center mb-3"> |
| | <div class="w-10 h-10 rounded-full bg-gray-300 mr-3"></div> |
| | <div> |
| | <h4 class="font-semibold">Michael R.</h4> |
| | <div class="flex text-orange-500 text-sm"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | </div> |
| | </div> |
| | </div> |
| | <p class="text-sm text-gray-600">"Dale's Detailing transformed my 10-year-old car to look brand new. The attention to detail is unmatched!"</p> |
| | </div> |
| | |
| | <div class="flex justify-center mt-4"> |
| | <div class="w-2 h-2 rounded-full bg-orange-500 mx-1"></div> |
| | <div class="w-2 h-2 rounded-full bg-gray-300 mx-1"></div> |
| | <div class="w-2 h-2 rounded-full bg-gray-300 mx-1"></div> |
| | </div> |
| | </section> |
| | </main> |
| | |
| | |
| | <footer class="fixed bottom-0 w-full max-w-md bg-white border-t border-gray-200 flex justify-around py-3"> |
| | <a href="#" class="text-center text-orange-500"> |
| | <i class="fas fa-home block text-xl"></i> |
| | <span class="text-xs mt-1">Home</span> |
| | </a> |
| | <a href="#" class="text-center text-gray-500"> |
| | <i class="fas fa-calendar-alt block text-xl"></i> |
| | <span class="text-xs mt-1">Bookings</span> |
| | </a> |
| | <a href="#" class="text-center text-gray-500"> |
| | <i class="fas fa-map-marker-alt block text-xl"></i> |
| | <span class="text-xs mt-1">Locations</span> |
| | </a> |
| | <a href="#" class="text-center text-gray-500"> |
| | <i class="fas fa-user block text-xl"></i> |
| | <span class="text-xs mt-1">Profile</span> |
| | </a> |
| | </footer> |
| | </div> |
| |
|
| | <script> |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | |
| | const navItems = document.querySelectorAll('.nav-item'); |
| | navItems.forEach(item => { |
| | item.addEventListener('click', function(e) { |
| | e.preventDefault(); |
| | navItems.forEach(i => i.classList.remove('active')); |
| | this.classList.add('active'); |
| | }); |
| | }); |
| | |
| | |
| | const bookingSteps = document.querySelectorAll('.booking-step'); |
| | let currentStep = 0; |
| | |
| | setInterval(() => { |
| | bookingSteps.forEach(step => step.classList.remove('active')); |
| | bookingSteps[currentStep].classList.add('active'); |
| | bookingSteps[currentStep].classList.add('bg-orange-500'); |
| | bookingSteps[currentStep].classList.add('text-white'); |
| | |
| | currentStep = (currentStep + 1) % bookingSteps.length; |
| | }, 2000); |
| | |
| | |
| | const serviceCards = document.querySelectorAll('.service-card'); |
| | serviceCards.forEach(card => { |
| | card.addEventListener('mouseenter', function() { |
| | this.style.transform = 'translateY(-5px)'; |
| | this.style.boxShadow = '0 10px 20px rgba(0,0,0,0.1)'; |
| | }); |
| | |
| | card.addEventListener('mouseleave', function() { |
| | this.style.transform = ''; |
| | this.style.boxShadow = ''; |
| | }); |
| | }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
