Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Curlperfection - Book Your Perfect Hair Appointment</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: #faf7f2; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #f5e6d8 0%, #e8c4c4 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .booking-form { | |
| box-shadow: 0 5px 30px rgba(0,0,0,0.08); | |
| } | |
| .time-slot:hover { | |
| background-color: #e8c4c4; | |
| color: white; | |
| } | |
| .selected-time { | |
| background-color: #d4a59a; | |
| color: white; | |
| } | |
| .stylist-card:hover img { | |
| transform: scale(1.05); | |
| } | |
| .scroll-hidden::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-scissors text-2xl text-amber-900 mr-2"></i> | |
| <h1 class="text-2xl font-bold text-amber-900">Curlperfection</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-amber-900 hover:text-amber-700 font-medium">Home</a> | |
| <a href="#services" class="text-amber-900 hover:text-amber-700 font-medium">Services</a> | |
| <a href="#stylists" class="text-amber-900 hover:text-amber-700 font-medium">Stylists</a> | |
| <a href="#booking" class="text-amber-900 hover:text-amber-700 font-medium">Book Now</a> | |
| <a href="#contact" class="text-amber-900 hover:text-amber-700 font-medium">Contact</a> | |
| </nav> | |
| <button class="md:hidden text-amber-900"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient py-16 md:py-24"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-amber-900 mb-4">Perfect Curls, Perfect You</h2> | |
| <p class="text-lg text-amber-800 mb-8">At Curlperfection, we specialize in bringing out the natural beauty of your curls with our expert stylists and premium products.</p> | |
| <a href="#booking" class="bg-amber-800 hover:bg-amber-700 text-white font-medium py-3 px-8 rounded-full transition duration-300 inline-block">Book Now</a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Beautiful curly hair" class="rounded-lg shadow-xl w-full max-w-md"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">Our Services</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-spa text-2xl text-amber-800"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-amber-900 mb-2">Curl Definition</h3> | |
| <p class="text-gray-600 mb-4">Enhance your natural curl pattern with our specialized techniques and products.</p> | |
| <p class="text-amber-800 font-medium">From $75</p> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-cut text-2xl text-amber-800"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-amber-900 mb-2">Curly Haircut</h3> | |
| <p class="text-gray-600 mb-4">Precision dry cutting to maintain your curl shape and remove damaged ends.</p> | |
| <p class="text-amber-800 font-medium">From $65</p> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-paint-brush text-2xl text-amber-800"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-amber-900 mb-2">Color & Highlights</h3> | |
| <p class="text-gray-600 mb-4">Curl-friendly coloring techniques that won't compromise your hair health.</p> | |
| <p class="text-amber-800 font-medium">From $90</p> | |
| </div> | |
| <!-- Service Card 4 --> | |
| <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-magic text-2xl text-amber-800"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-amber-900 mb-2">Deep Conditioning</h3> | |
| <p class="text-gray-600 mb-4">Intensive moisture treatment to revive dry, damaged curls.</p> | |
| <p class="text-amber-800 font-medium">From $45</p> | |
| </div> | |
| <!-- Service Card 5 --> | |
| <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-child text-2xl text-amber-800"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-amber-900 mb-2">Kids Curly Care</h3> | |
| <p class="text-gray-600 mb-4">Gentle treatments and cuts designed specifically for young curls.</p> | |
| <p class="text-amber-800 font-medium">From $55</p> | |
| </div> | |
| <!-- Service Card 6 --> | |
| <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-star text-2xl text-amber-800"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-amber-900 mb-2">Special Occasion</h3> | |
| <p class="text-gray-600 mb-4">Styled curls for weddings, proms, and other special events.</p> | |
| <p class="text-amber-800 font-medium">From $85</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stylists Section --> | |
| <section id="stylists" class="py-16 bg-amber-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">Meet Our Stylists</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Stylist 1 --> | |
| <div class="stylist-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Stylist Maria" class="w-full h-full object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-1">Maria Rodriguez</h3> | |
| <p class="text-amber-700 font-medium mb-3">Curl Specialist</p> | |
| <p class="text-gray-600 mb-4">With 10 years of experience, Maria specializes in curly haircuts and curl definition treatments.</p> | |
| <div class="flex space-x-2"> | |
| <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Dry Cutting</span> | |
| <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">DevaCut</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stylist 2 --> | |
| <div class="stylist-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Stylist Jamal" class="w-full h-full object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-1">Jamal Williams</h3> | |
| <p class="text-amber-700 font-medium mb-3">Color Expert</p> | |
| <p class="text-gray-600 mb-4">Jamal is our curl color specialist, creating beautiful dimensional color that enhances your natural texture.</p> | |
| <div class="flex space-x-2"> | |
| <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Balayage</span> | |
| <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Color Correction</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stylist 3 --> | |
| <div class="stylist-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Stylist Sophia" class="w-full h-full object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-1">Sophia Chen</h3> | |
| <p class="text-amber-700 font-medium mb-3">Texture Specialist</p> | |
| <p class="text-gray-600 mb-4">Sophia focuses on curl education and healthy hair practices to help you maintain your curls at home.</p> | |
| <div class="flex space-x-2"> | |
| <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Education</span> | |
| <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Treatments</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Booking Section --> | |
| <section id="booking" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">Book Your Appointment</h2> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl booking-form overflow-hidden"> | |
| <div class="md:flex"> | |
| <!-- Booking Steps --> | |
| <div class="md:w-1/3 bg-amber-50 p-6"> | |
| <div class="flex items-center mb-8"> | |
| <div class="w-8 h-8 rounded-full bg-amber-800 text-white flex items-center justify-center font-bold mr-3">1</div> | |
| <h3 class="font-medium text-amber-900">Service Selection</h3> | |
| </div> | |
| <div class="flex items-center mb-8"> | |
| <div class="w-8 h-8 rounded-full bg-amber-200 text-amber-900 flex items-center justify-center font-bold mr-3">2</div> | |
| <h3 class="font-medium text-gray-500">Stylist & Date</h3> | |
| </div> | |
| <div class="flex items-center mb-8"> | |
| <div class="w-8 h-8 rounded-full bg-amber-200 text-amber-900 flex items-center justify-center font-bold mr-3">3</div> | |
| <h3 class="font-medium text-gray-500">Time Selection</h3> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-amber-200 text-amber-900 flex items-center justify-center font-bold mr-3">4</div> | |
| <h3 class="font-medium text-gray-500">Your Details</h3> | |
| </div> | |
| </div> | |
| <!-- Booking Form --> | |
| <div class="md:w-2/3 p-6"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-6">Select Your Service</h3> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Service Category</label> | |
| <select id="serviceCategory" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> | |
| <option value="">Select a category</option> | |
| <option value="cuts">Haircuts</option> | |
| <option value="color">Color Services</option> | |
| <option value="treatments">Treatments</option> | |
| <option value="styling">Styling</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Specific Service</label> | |
| <select id="specificService" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" disabled> | |
| <option value="">Select a category first</option> | |
| </select> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button id="nextStep1" class="bg-amber-800 hover:bg-amber-700 text-white font-medium py-2 px-6 rounded-full transition duration-300">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-amber-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">What Our Clients Say</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-500 mr-2"> | |
| <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> | |
| <p class="text-gray-600 mb-4">"Maria transformed my unruly curls into defined, bouncy ringlets. For the first time, I love my natural hair!"</p> | |
| <div class="flex items-center"> | |
| <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Client" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium text-amber-900">Sarah J.</h4> | |
| <p class="text-sm text-gray-500">Regular Client</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-500 mr-2"> | |
| <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> | |
| <p class="text-gray-600 mb-4">"Jamal's color work is magic! He gave me the perfect caramel highlights that blend seamlessly with my curls."</p> | |
| <div class="flex items-center"> | |
| <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Client" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium text-amber-900">Michael T.</h4> | |
| <p class="text-sm text-gray-500">New Client</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-500 mr-2"> | |
| <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> | |
| <p class="text-gray-600 mb-4">"Sophia taught me how to care for my daughter's curls. Now her hair is healthy and we avoid the tears at wash time!"</p> | |
| <div class="flex items-center"> | |
| <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Client" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium text-amber-900">Lisa P.</h4> | |
| <p class="text-sm text-gray-500">Parent</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-amber-50 rounded-xl overflow-hidden shadow-md"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8"> | |
| <h2 class="text-2xl font-bold text-amber-900 mb-6">Contact Us</h2> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-map-marker-alt text-amber-800 mr-3"></i> | |
| <p class="text-gray-700">123 Curly Street, Hairville, HV 12345</p> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-phone-alt text-amber-800 mr-3"></i> | |
| <p class="text-gray-700">(555) 123-4567</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope text-amber-800 mr-3"></i> | |
| <p class="text-gray-700">hello@curlperfection.com</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-amber-800 hover:bg-amber-700 text-white rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-amber-800 hover:bg-amber-700 text-white rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-amber-800 hover:bg-amber-700 text-white rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8 bg-white"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-6">Send Us a Message</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <input type="text" placeholder="Your Name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <input type="email" placeholder="Your Email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <textarea placeholder="Your Message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"></textarea> | |
| </div> | |
| <button type="submit" class="bg-amber-800 hover:bg-amber-700 text-white font-medium py-2 px-6 rounded-full transition duration-300 w-full">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-amber-900 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-scissors text-2xl text-amber-200 mr-2"></i> | |
| <h2 class="text-2xl font-bold text-amber-200">Curlperfection</h2> | |
| </div> | |
| <p class="text-amber-200 mt-2">Specializing in curly hair care since 2015</p> | |
| </div> | |
| <div class="flex flex-col items-center md:items-end"> | |
| <p class="text-amber-200 mb-2">© 2023 Curlperfection. All rights reserved.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-amber-200 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-amber-200 hover:text-white">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Booking Modal (hidden by default) --> | |
| <div id="bookingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto scroll-hidden"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-amber-900">Complete Your Booking</h3> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Step 2: Stylist & Date --> | |
| <div id="step2" class="hidden"> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Select Stylist</label> | |
| <select id="stylistSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> | |
| <option value="">Any available stylist</option> | |
| <option value="maria">Maria Rodriguez</option> | |
| <option value="jamal">Jamal Williams</option> | |
| <option value="sophia">Sophia Chen</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Select Date</label> | |
| <input type="date" id="bookingDate" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="backStep1" class="text-amber-800 hover:text-amber-700 font-medium py-2 px-6 rounded-full transition duration-300 border border-amber-800">Back</button> | |
| <button id="nextStep2" class="bg-amber-800 hover:bg-amber-700 text-white font-medium py-2 px-6 rounded-full transition duration-300">Next</button> | |
| </div> | |
| </div> | |
| <!-- Step 3: Time Selection --> | |
| <div id="step3" class="hidden"> | |
| <h4 class="text-lg font-medium text-gray-700 mb-4">Available Time Slots</h4> | |
| <div class="grid grid-cols-3 sm:grid-cols-4 gap-3 mb-6"> | |
| <!-- Time slots will be generated by JavaScript --> | |
| <div class="time-slot text-center py-2 px-3 border border-gray-300 rounded-lg cursor-pointer transition duration-300">9:00 AM</div> | |
| <div class="time-slot text-center py-2 px-3 border border-gray-300 rounded-lg cursor-pointer transition duration-300">10:30 AM</div> | |
| <div class="time-slot text-center py-2 px-3 border border-gray-300 rounded-lg cursor-pointer transition duration-300">12:00 PM</div> | |
| <div class="time-slot text-center py-2 px-3 border border-gray-300 rounded-lg cursor-pointer transition duration-300">1:30 PM</div> | |
| <div class="time-slot text-center py-2 px-3 border border-gray-300 rounded-lg cursor-pointer transition duration-300">3:00 PM</div> | |
| <div class="time-slot text-center py-2 px-3 border border-gray-300 rounded-lg cursor-pointer transition duration-300">4:30 PM</div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="backStep2" class="text-amber-800 hover:text-amber-700 font-medium py-2 px-6 rounded-full transition duration-300 border border-amber-800">Back</button> | |
| <button id="nextStep3" class="bg-amber-800 hover:bg-amber-700 text-white font-medium py-2 px-6 rounded-full transition duration-300">Next</button> | |
| </div> | |
| </div> | |
| <!-- Step 4: Client Details --> | |
| <div id="step4" class="hidden"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 font-medium mb-2">Full Name</label> | |
| <input type="text" id="clientName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="clientEmail" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 font-medium mb-2">Phone Number</label> | |
| <input type="tel" id="clientPhone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Special Requests (Optional)</label> | |
| <textarea id="specialRequests" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"></textarea> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="backStep3" class="text-amber-800 hover:text-amber-700 font-medium py-2 px-6 rounded-full transition duration-300 border border-amber-800">Back</button> | |
| <button id="confirmBooking" class="bg-amber-800 hover:bg-amber-700 text-white font-medium py-2 px-6 rounded-full transition duration-300">Confirm Booking</button> | |
| </div> | |
| </div> | |
| <!-- Confirmation --> | |
| <div id="confirmation" class="hidden text-center py-8"> | |
| <div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-check text-3xl text-amber-800"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-amber-900 mb-3">Booking Confirmed!</h3> | |
| <p class="text-gray-600 mb-6">Thank you for booking with Curlperfection. We've sent the details to your email.</p> | |
| <button id="closeConfirmation" class="bg-amber-800 hover:bg-amber-700 text-white font-medium py-2 px-6 rounded-full transition duration-300">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Service data | |
| const services = { | |
| cuts: [ | |
| { name: "Curly Haircut", price: 65, duration: 60 }, | |
| { name: "Kids Curly Cut", price: 55, duration: 45 }, | |
| { name: "Bang Trim", price: 15, duration: 15 }, | |
| { name: "DevaCut", price: 85, duration: 90 } | |
| ], | |
| color: [ | |
| { name: "Full Color", price: 90, duration: 120 }, | |
| { name: "Root Touch Up", price: 65, duration: 90 }, | |
| { name: "Balayage", price: 120, duration: 150 }, | |
| { name: "Highlights", price: 100, duration: 120 } | |
| ], | |
| treatments: [ | |
| { name: "Deep Conditioning", price: 45, duration: 30 }, | |
| { name: "Protein Treatment", price: 55, duration: 45 }, | |
| { name: "Scalp Treatment", price: 40, duration: 30 } | |
| ], | |
| styling: [ | |
| { name: "Curl Definition", price: 75, duration: 60 }, | |
| { name: "Blowout", price: 60, duration: 45 }, | |
| { name: "Special Occasion", price: 85, duration: 90 }, | |
| { name: "Bridal Styling", price: 120, duration: 120 } | |
| ] | |
| }; | |
| // DOM Elements | |
| const serviceCategory = document.getElementById('serviceCategory'); | |
| const specificService = document.getElementById('specificService'); | |
| const nextStep1 = document.getElementById('nextStep1'); | |
| const bookingModal = document.getElementById('bookingModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const step2 = document.getElementById('step2'); | |
| const step3 = document.getElementById('step3'); | |
| const step4 = document.getElementById('step4'); | |
| const confirmation = document.getElementById('confirmation'); | |
| const backStep1 = document.getElementById('backStep1'); | |
| const nextStep2 = document.getElementById('nextStep2'); | |
| const backStep2 = document.getElementById('backStep2'); | |
| const nextStep3 = document.getElementById('nextStep3'); | |
| const backStep3 = document.getElementById('backStep3'); | |
| const confirmBooking = document.getElementById('confirmBooking'); | |
| const closeConfirmation = document.getElementById('closeConfirmation'); | |
| const timeSlots = document.querySelectorAll('.time-slot'); | |
| // Current booking data | |
| let bookingData = { | |
| service: null, | |
| stylist: null, | |
| date: null, | |
| time: null, | |
| client: { | |
| name: '', | |
| email: '', | |
| phone: '', | |
| requests: '' | |
| } | |
| }; | |
| // Event Listeners | |
| serviceCategory.addEventListener('change', function() { | |
| const category = this.value; | |
| specificService.disabled = !category; | |
| if (category) { | |
| specificService.innerHTML = '<option value="">Select a service</option>'; | |
| services[category].forEach(service => { | |
| const option = document.createElement('option'); | |
| option.value = service.name.toLowerCase().replace(/\s+/g, '-'); | |
| option.textContent = `${service.name} (${service.duration} min) - $${service.price}`; | |
| specificService.appendChild(option); | |
| }); | |
| } else { | |
| specificService.innerHTML = '<option value="">Select a category first</option>'; | |
| } | |
| }); | |
| nextStep1.addEventListener('click', function() { | |
| if (specificService.value) { | |
| bookingData.service = specificService.options[specificService.selectedIndex].text; | |
| openBookingModal(); | |
| showStep(2); | |
| } else { | |
| alert('Please select a service'); | |
| } | |
| }); | |
| closeModal.addEventListener('click', closeBookingModal); | |
| closeConfirmation.addEventListener('click', closeBookingModal); | |
| nextStep2.addEventListener('click', function() { | |
| const stylistSelect = document.getElementById('stylistSelect'); | |
| const bookingDate = document.getElementById('bookingDate'); | |
| if (!bookingDate.value) { | |
| alert('Please select a date'); | |
| return; | |
| } | |
| bookingData.stylist = stylistSelect.value ? stylistSelect.options[stylistSelect.selectedIndex].text : 'Any available stylist'; | |
| bookingData.date = bookingDate.value; | |
| showStep(3); | |
| }); | |
| nextStep3.addEventListener('click', function() { | |
| const selectedTime = document.querySelector('.time-slot.selected-time'); | |
| if (!selectedTime) { | |
| alert('Please select a time slot'); | |
| return; | |
| } | |
| bookingData.time = selectedTime.textContent; | |
| showStep(4); | |
| }); | |
| confirmBooking.addEventListener('click', function() { | |
| bookingData.client.name = document.getElementById('clientName').value; | |
| bookingData.client.email = document.getElementById('clientEmail').value; | |
| bookingData.client.phone = document.getElementById('clientPhone').value; | |
| bookingData.client.requests = document.getElementById('specialRequests').value; | |
| if (!bookingData.client.name || !bookingData.client.email || !bookingData.client.phone) { | |
| alert('Please fill in all required fields'); | |
| return; | |
| } | |
| // In a real app, you would send this data to your backend | |
| console.log('Booking confirmed:', bookingData); | |
| showConfirmation(); | |
| }); | |
| backStep1.addEventListener('click', function() { | |
| showStep(1); | |
| closeBookingModal(); | |
| }); | |
| backStep2.addEventListener('click', function() { | |
| showStep(2); | |
| }); | |
| backStep3.addEventListener('click', function() { | |
| showStep(3); | |
| }); | |
| timeSlots.forEach(slot => { | |
| slot.addEventListener('click', function() { | |
| document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected-time')); | |
| this.classList.add('selected-time'); | |
| }); | |
| }); | |
| // Functions | |
| function openBookingModal() { | |
| bookingModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeBookingModal() { | |
| bookingModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| function showStep(stepNumber) { | |
| // Hide all steps | |
| [step2, step3, step4, confirmation].forEach(step => step.classList.add('hidden')); | |
| // Show the requested step | |
| if (stepNumber === 2) step2.classList.remove('hidden'); | |
| if (stepNumber === 3) step3.classList.remove('hidden'); | |
| if (stepNumber === 4) step4.classList.remove('hidden'); | |
| } | |
| function showConfirmation() { | |
| // Hide all steps | |
| [step2, step3, step4].forEach(step => step.classList.add('hidden')); | |
| // Show confirmation | |
| confirmation.classList.remove('hidden'); | |
| } | |
| // Initialize date picker with tomorrow as minimum date | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const today = new Date(); | |
| const tomorrow = new Date(today); | |
| tomorrow.setDate(tomorrow.getDate() + 1); | |
| const dd = String(tomorrow.getDate()).padStart(2, '0'); | |
| const mm = String(tomorrow.getMonth() + 1).padStart(2, '0'); | |
| const yyyy = tomorrow.getFullYear(); | |
| document.getElementById('bookingDate').min = `${yyyy}-${mm}-${dd}`; | |
| }); | |
| </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=WhinkCoder1991/client-jobs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |