|
|
| <!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> |
