Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Harmonie Esthétique - Esthéticienne & Madéro-Thérapeute</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> | |
| .hero { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?ixlib=rb-4.0.3'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease, visibility 0.3s ease; | |
| } | |
| #calendar { | |
| max-height: 500px; | |
| overflow-y: auto; | |
| } | |
| .time-slot { | |
| transition: all 0.2s ease; | |
| } | |
| .time-slot:hover:not(.booked) { | |
| background-color: #f0fdf4; | |
| } | |
| .booked { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-spa text-2xl text-pink-500 mr-2"></i> | |
| <h1 class="text-xl font-bold text-gray-800">Harmonie Esthétique</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#services" class="text-gray-600 hover:text-pink-500 transition">Services</a> | |
| <a href="#about" class="text-gray-600 hover:text-pink-500 transition">À propos</a> | |
| <a href="#testimonials" class="text-gray-600 hover:text-pink-500 transition">Témoignages</a> | |
| <a href="#contact" class="text-gray-600 hover:text-pink-500 transition">Contact</a> | |
| </nav> | |
| <button class="md:hidden text-gray-600" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-white py-2 px-4 shadow-md" id="mobile-menu"> | |
| <a href="#services" class="block py-2 text-gray-600 hover:text-pink-500 transition">Services</a> | |
| <a href="#about" class="block py-2 text-gray-600 hover:text-pink-500 transition">À propos</a> | |
| <a href="#testimonials" class="block py-2 text-gray-600 hover:text-pink-500 transition">Témoignages</a> | |
| <a href="#contact" class="block py-2 text-gray-600 hover:text-pink-500 transition">Contact</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Bienvenue chez Harmonie Esthétique</h1> | |
| <p class="text-xl md:text-2xl mb-8">Détente, bien-être et beauté naturelle</p> | |
| <button id="book-now-btn" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> | |
| Prendre rendez-vous | |
| </button> | |
| </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 mb-12 text-gray-800">Nos Services</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Massage Californien --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300"> | |
| <div class="h-48 bg-pink-100 flex items-center justify-center"> | |
| <i class="fas fa-hands text-5xl text-pink-500"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Massage Californien</h3> | |
| <p class="text-gray-600 mb-4">Un massage relaxant et enveloppant pour libérer les tensions et retrouver l'harmonie.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-pink-500">70€</span> | |
| <span class="text-sm bg-pink-100 text-pink-700 px-2 py-1 rounded">4 séances: 200€</span> | |
| </div> | |
| <button class="book-service-btn mt-4 w-full bg-pink-500 hover:bg-pink-600 text-white py-2 px-4 rounded transition" data-service="Massage Californien">Réserver</button> | |
| </div> | |
| </div> | |
| <!-- Madéro-Thérapie Corps --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300"> | |
| <div class="h-48 bg-amber-100 flex items-center justify-center"> | |
| <i class="fas fa-leaf text-5xl text-amber-500"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Madéro-Thérapie Corps</h3> | |
| <p class="text-gray-600 mb-4">Technique ancestrale utilisant des outils en bois pour stimuler la circulation et éliminer les toxines.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-amber-500">70€ par zone</span> | |
| <span class="text-sm bg-amber-100 text-amber-700 px-2 py-1 rounded">4 séances: 200€</span> | |
| </div> | |
| <button class="book-service-btn mt-4 w-full bg-amber-500 hover:bg-amber-600 text-white py-2 px-4 rounded transition" data-service="Madéro-Thérapie Corps">Réserver</button> | |
| </div> | |
| </div> | |
| <!-- Madéro-Thérapie Visage --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-smile text-5xl text-purple-500"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Madéro-Thérapie Visage</h3> | |
| <p class="text-gray-600 mb-4">Lissage des traits, stimulation du collagène et éclat naturel pour votre visage.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-purple-500">50€</span> | |
| </div> | |
| <button class="book-service-btn mt-4 w-full bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded transition" data-service="Madéro-Thérapie Visage">Réserver</button> | |
| </div> | |
| </div> | |
| <!-- Hydra Facial --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300"> | |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-water text-5xl text-blue-500"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Hydra Facial</h3> | |
| <p class="text-gray-600 mb-4">Soin hydratant intense pour un teint éclatant et une peau repulpée.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-500">70€</span> | |
| <span class="text-sm bg-blue-100 text-blue-700 px-2 py-1 rounded">4 séances: 200€</span> | |
| </div> | |
| <button class="book-service-btn mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition" data-service="Hydra Facial">Réserver</button> | |
| </div> | |
| </div> | |
| <!-- Massage Crânien --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300"> | |
| <div class="h-48 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-head-side-virus text-5xl text-green-500"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Massage Crânien</h3> | |
| <p class="text-gray-600 mb-4">Détente profonde, soulagement des maux de tête et amélioration de la concentration.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-500">70€</span> | |
| <span class="text-sm bg-green-100 text-green-700 px-2 py-1 rounded">4 séances: 200€</span> | |
| </div> | |
| <button class="book-service-btn mt-4 w-full bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition" data-service="Massage Crânien">Réserver</button> | |
| </div> | |
| </div> | |
| <!-- Autres Services --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300"> | |
| <div class="h-48 bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-heart text-5xl text-indigo-500"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Autres Services</h3> | |
| <ul class="text-gray-600 mb-4 space-y-2"> | |
| <li>• Soin du visage</li> | |
| <li>• Plant alimentaire</li> | |
| <li>• Naturopathie</li> | |
| <li>• Lipocavitation</li> | |
| <li>• Radio fréquence du visage</li> | |
| </ul> | |
| <button class="book-service-btn mt-4 w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-4 rounded transition" data-service="Autres Services">Réserver</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3" alt="Esthéticienne" class="rounded-lg shadow-lg w-full h-auto"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">À propos de moi</h2> | |
| <p class="text-gray-600 mb-4">Diplômée en esthétique et passionnée par les techniques naturelles de bien-être, j'ai à cœur d'accompagner mes clients vers une meilleure version d'eux-mêmes.</p> | |
| <p class="text-gray-600 mb-4">Formée à la madéro-thérapie et aux massages relaxants, je combine savoir-faire traditionnel et approche moderne pour des résultats visibles et durables.</p> | |
| <p class="text-gray-600">Mon espace est conçu pour vous offrir une parenthèse de sérénité où chaque soin est personnalisé selon vos besoins et vos attentes.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Témoignages</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-pink-200 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-pink-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sophie D.</h4> | |
| <div class="flex text-amber-400"> | |
| <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-gray-600 italic">"Le massage californien est tout simplement divin. Je ressors à chaque fois comme neuve, détendue et apaisée. Un vrai moment de bonheur!"</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Marie L.</h4> | |
| <div class="flex text-amber-400"> | |
| <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-gray-600 italic">"La madéro-thérapie a changé ma vie! Après 4 séances, ma cellulite a considérablement diminué et ma peau est beaucoup plus ferme. Je recommande vivement!"</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-200 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Claire T.</h4> | |
| <div class="flex text-amber-400"> | |
| <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-gray-600 italic">"L'Hydra Facial est mon soin préféré. Ma peau est éclatante et hydratée pendant des jours. Le cadre est très agréable et l'accueil toujours chaleureux."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Contact</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Informations</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-pink-500 mt-1 mr-3"></i> | |
| <p class="text-gray-600">123 Rue du Bien-être, 75000 Paris</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt text-pink-500 mr-3"></i> | |
| <p class="text-gray-600">01 23 45 67 89</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope text-pink-500 mr-3"></i> | |
| <p class="text-gray-600">contact@harmonie-esthetique.com</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock text-pink-500 mr-3"></i> | |
| <p class="text-gray-600"> | |
| <span class="font-medium">Lundi-Vendredi:</span> 9h-19h<br> | |
| <span class="font-medium">Samedi:</span> 9h-15h | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Suivez-nous</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-pink-500 text-white flex items-center justify-center hover:bg-pink-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-blue-400 text-white flex items-center justify-center hover:bg-blue-500 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Envoyez un message</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 mb-2">Nom</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block text-gray-700 mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-500"></textarea> | |
| </div> | |
| <button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded transition">Envoyer</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 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-4 md:mb-0"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-spa text-2xl text-pink-500 mr-2"></i> | |
| <h2 class="text-xl font-bold">Harmonie Esthétique</h2> | |
| </div> | |
| <p class="text-gray-400 mt-2">Bien-être et beauté naturelle</p> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-gray-400">© 2023 Harmonie Esthétique. Tous droits réservés.</p> | |
| <div class="mt-2"> | |
| <a href="#" class="text-gray-400 hover:text-white mr-4 transition">Mentions légales</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Booking Modal --> | |
| <div id="booking-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl mx-4 overflow-hidden animate-fadeIn"> | |
| <div class="flex justify-between items-center border-b px-6 py-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Prendre rendez-vous</h3> | |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="steps flex justify-between mb-8 relative"> | |
| <div class="step flex-1 text-center relative z-10"> | |
| <div class="w-10 h-10 mx-auto rounded-full bg-pink-500 text-white flex items-center justify-center mb-2">1</div> | |
| <p class="text-sm font-medium text-pink-500">Choisir un service</p> | |
| </div> | |
| <div class="step flex-1 text-center relative z-10"> | |
| <div class="w-10 h-10 mx-auto rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">2</div> | |
| <p class="text-sm font-medium text-gray-500">Sélectionner une date</p> | |
| </div> | |
| <div class="step flex-1 text-center relative z-10"> | |
| <div class="w-10 h-10 mx-auto rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">3</div> | |
| <p class="text-sm font-medium text-gray-500">Confirmer</p> | |
| </div> | |
| <div class="absolute top-5 left-0 right-0 h-1 bg-gray-200 mx-16"> | |
| <div class="h-full bg-pink-500 w-1/3" id="progress-bar"></div> | |
| </div> | |
| </div> | |
| <!-- Step 1: Choose Service --> | |
| <div id="step-1" class="step-content"> | |
| <h4 class="text-lg font-semibold mb-4">Sélectionnez votre service</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="border rounded-lg p-4 hover:border-pink-300 cursor-pointer transition service-option" data-service="Massage Californien" data-price="70"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h5 class="font-bold">Massage Californien</h5> | |
| <p class="text-sm text-gray-600">70€ (4 séances: 200€)</p> | |
| </div> | |
| <i class="fas fa-hands text-pink-500 mt-1"></i> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:border-amber-300 cursor-pointer transition service-option" data-service="Madéro-Thérapie Corps" data-price="70"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h5 class="font-bold">Madéro-Thérapie Corps</h5> | |
| <p class="text-sm text-gray-600">70€ par zone (4 séances: 200€)</p> | |
| </div> | |
| <i class="fas fa-leaf text-amber-500 mt-1"></i> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:border-purple-300 cursor-pointer transition service-option" data-service="Madéro-Thérapie Visage" data-price="50"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h5 class="font-bold">Madéro-Thérapie Visage</h5> | |
| <p class="text-sm text-gray-600">50€</p> | |
| </div> | |
| <i class="fas fa-smile text-purple-500 mt-1"></i> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:border-blue-300 cursor-pointer transition service-option" data-service="Hydra Facial" data-price="70"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h5 class="font-bold">Hydra Facial</h5> | |
| <p class="text-sm text-gray-600">70€ (4 séances: 200€)</p> | |
| </div> | |
| <i class="fas fa-water text-blue-500 mt-1"></i> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:border-green-300 cursor-pointer transition service-option" data-service="Massage Crânien" data-price="70"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h5 class="font-bold">Massage Crânien</h5> | |
| <p class="text-sm text-gray-600">70€ (4 séances: 200€)</p> | |
| </div> | |
| <i class="fas fa-head-side-virus text-green-500 mt-1"></i> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:border-indigo-300 cursor-pointer transition service-option" data-service="Autres Services" data-price="0"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h5 class="font-bold">Autres Services</h5> | |
| <p class="text-sm text-gray-600">Soin du visage, Plant alimentaire, etc.</p> | |
| </div> | |
| <i class="fas fa-heart text-indigo-500 mt-1"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end"> | |
| <button id="next-to-step-2" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded transition disabled:opacity-50" disabled> | |
| Suivant <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 2: Choose Date & Time --> | |
| <div id="step-2" class="step-content hidden"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/2"> | |
| <h4 class="text-lg font-semibold mb-4">Sélectionnez une date</h4> | |
| <div id="calendar" class="border rounded-lg p-4"> | |
| <!-- Calendar will be generated by JavaScript --> | |
| <div class="text-center py-8"> | |
| <i class="fas fa-spinner fa-spin text-2xl text-pink-500"></i> | |
| <p class="mt-2 text-gray-600">Chargement du calendrier...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h4 class="text-lg font-semibold mb-4">Horaires disponibles</h4> | |
| <div id="time-slots" class="border rounded-lg p-4"> | |
| <p class="text-gray-500 italic">Veuillez sélectionner une date pour voir les disponibilités</p> | |
| </div> | |
| <div class="mt-6 bg-gray-50 p-4 rounded-lg"> | |
| <h5 class="font-semibold mb-2">Votre sélection</h5> | |
| <p id="selected-service" class="text-gray-600">Aucun service sélectionné</p> | |
| <p id="selected-date" class="text-gray-600 mt-1">Aucune date sélectionnée</p> | |
| <p id="selected-time" class="text-gray-600 mt-1">Aucun horaire sélectionné</p> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <button id="back-to-step-1" class="text-pink-500 hover:text-pink-700 font-bold py-2 px-4 rounded transition"> | |
| <i class="fas fa-arrow-left mr-2"></i> Retour | |
| </button> | |
| <button id="next-to-step-3" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded transition disabled:opacity-50" disabled> | |
| Suivant <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3: Confirm Booking --> | |
| <div id="step-3" class="step-content hidden"> | |
| <h4 class="text-lg font-semibold mb-6">Confirmez votre rendez-vous</h4> | |
| <div class="bg-gray-50 p-6 rounded-lg mb-6"> | |
| <h5 class="font-bold text-lg mb-4">Récapitulatif</h5> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-gray-600 font-medium">Service:</p> | |
| <p id="confirm-service" class="font-semibold">-</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600 font-medium">Date:</p> | |
| <p id="confirm-date" class="font-semibold">-</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600 font-medium">Horaire:</p> | |
| <p id="confirm-time" class="font-semibold">-</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600 font-medium">Prix:</p> | |
| <p id="confirm-price" class="font-semibold">-</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h5 class="font-bold text-lg mb-4">Vos informations</h5> | |
| <form id="booking-form"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label for="client-name" class="block text-gray-700 mb-2">Nom complet*</label> | |
| <input type="text" id="client-name" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-500" required> | |
| </div> | |
| <div> | |
| <label for="client-email" class="block text-gray-700 mb-2">Email*</label> | |
| <input type="email" id="client-email" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-500" required> | |
| </div> | |
| <div> | |
| <label for="client-phone" class="block text-gray-700 mb-2">Téléphone*</label> | |
| <input type="tel" id="client-phone" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-500" required> | |
| </div> | |
| <div> | |
| <label for="client-notes" class="block text-gray-700 mb-2">Notes (optionnel)</label> | |
| <input type="text" id="client-notes" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-500"> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <button id="back-to-step-2" class="text-pink-500 hover:text-pink-700 font-bold py-2 px-4 rounded transition"> | |
| <i class="fas fa-arrow-left mr-2"></i> Retour | |
| </button> | |
| <button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded transition"> | |
| Confirmer la réservation | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Modal --> | |
| <div id="success-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6 text-center animate-fadeIn"> | |
| <div class="w-16 h-16 mx-auto rounded-full bg-green-100 text-green-500 flex items-center justify-center mb-4"> | |
| <i class="fas fa-check text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Réservation confirmée!</h3> | |
| <p class="text-gray-600 mb-6">Votre rendez-vous a bien été enregistré. Vous allez recevoir un email de confirmation avec tous les détails.</p> | |
| <button id="close-success-modal" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded transition"> | |
| Fermer | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Booking modal | |
| const bookingModal = document.getElementById('booking-modal'); | |
| const bookNowBtn = document.getElementById('book-now-btn'); | |
| const closeModalBtn = document.getElementById('close-modal'); | |
| const closeSuccessModalBtn = document.getElementById('close-success-modal'); | |
| const successModal = document.getElementById('success-modal'); | |
| // Open booking modal | |
| bookNowBtn.addEventListener('click', function() { | |
| bookingModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| // Close modals | |
| function closeModals() { | |
| bookingModal.classList.add('hidden'); | |
| successModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| closeModalBtn.addEventListener('click', closeModals); | |
| closeSuccessModalBtn.addEventListener('click', closeModals); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', function(event) { | |
| if (event.target === bookingModal) { | |
| closeModals(); | |
| } | |
| if (event.target === successModal) { | |
| closeModals(); | |
| } | |
| }); | |
| // Booking steps functionality | |
| let currentStep = 1; | |
| let selectedService = null; | |
| let selectedDate = null; | |
| let selectedTime = null; | |
| // Step 1: Select service | |
| const serviceOptions = document.querySelectorAll('.service-option'); | |
| const nextToStep2Btn = document.getElementById('next-to-step-2'); | |
| serviceOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Remove active class from all options | |
| serviceOptions.forEach(opt => { | |
| opt.classList.remove('border-pink-300', 'border-amber-300', 'border-purple-300', | |
| 'border-blue-300', 'border-green-300', 'border-indigo-300'); | |
| opt.classList.add('border-transparent'); | |
| }); | |
| // Add active class to selected option | |
| const service = this.getAttribute('data-service'); | |
| let borderColor = 'border-pink-300'; | |
| if (service === 'Madéro-Thérapie Corps') borderColor = 'border-amber-300'; | |
| else if (service === 'Madéro-Thérapie Visage') borderColor = 'border-purple-300'; | |
| else if (service === 'Hydra Facial') borderColor = 'border-blue-300'; | |
| else if (service === 'Massage Crânien') borderColor = 'border-green-300'; | |
| else if (service === 'Autres Services') borderColor = 'border-indigo-300'; | |
| this.classList.remove('border-transparent'); | |
| this.classList.add(borderColor); | |
| selectedService = { | |
| name: service, | |
| price: this.getAttribute('data-price') | |
| }; | |
| // Update selected service display | |
| document.getElementById('selected-service').textContent = service; | |
| document.getElementById('confirm-service').textContent = service; | |
| document.getElementById('confirm-price').textContent = selectedService.price + '€'; | |
| // Enable next button | |
| nextToStep2Btn.disabled = false; | |
| }); | |
| }); | |
| // Book service buttons from service cards | |
| const bookServiceBtns = document.querySelectorAll('.book-service-btn'); | |
| bookServiceBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const service = this.getAttribute('data-service'); | |
| let price = '70'; | |
| if (service === 'Madéro-Thérapie Visage') price = '50'; | |
| else if (service === 'Autres Services') price = '0'; | |
| selectedService = { | |
| name: service, | |
| price: price | |
| }; | |
| // Update selected service display | |
| document.getElementById('selected-service').textContent = service; | |
| document.getElementById('confirm-service').textContent = service; | |
| document.getElementById('confirm-price').textContent = price + '€'; | |
| // Enable next button | |
| nextToStep2Btn.disabled = false; | |
| // Open modal | |
| bookingModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| // Highlight the corresponding service option | |
| serviceOptions.forEach(option => { | |
| if (option.getAttribute('data-service') === service) { | |
| option.click(); // Simulate click to highlight | |
| } | |
| }); | |
| }); | |
| }); | |
| // Next to step 2 | |
| nextToStep2Btn.addEventListener('click', function() { | |
| document.getElementById('step-1').classList.add('hidden'); | |
| document.getElementById('step-2').classList.remove('hidden'); | |
| updateStep(2); | |
| // Generate calendar (simplified version) | |
| generateCalendar(); | |
| }); | |
| // Back to step 1 | |
| document.getElementById('back-to-step-1').addEventListener('click', function() { | |
| document.getElementById('step-2').classList.add('hidden'); | |
| document.getElementById('step-1').classList.remove('hidden'); | |
| updateStep(1); | |
| }); | |
| // Next to step 3 | |
| document.getElementById('next-to-step-3').addEventListener('click', function() { | |
| document.getElementById('step-2').classList.add('hidden'); | |
| document.getElementById('step-3').classList.remove('hidden'); | |
| updateStep(3); | |
| }); | |
| // Back to step 2 | |
| document.getElementById('back-to-step-2').addEventListener('click', function() { | |
| document.getElementById('step-3').classList.add('hidden'); | |
| document.getElementById('step-2').classList.remove('hidden'); | |
| updateStep(2); | |
| }); | |
| // Update step UI | |
| function updateStep(step) { | |
| currentStep = step; | |
| const steps = document.querySelectorAll('.step'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| steps.forEach((s, index) => { | |
| const number = s.querySelector('div'); | |
| const text = s.querySelector('p'); | |
| if (index + 1 <= step) { | |
| number.classList.remove('bg-gray-200', 'text-gray-600'); | |
| number.classList.add('bg-pink-500', 'text-white'); | |
| text.classList.remove('text-gray-500'); | |
| text.classList.add('text-pink-500'); | |
| } else { | |
| number.classList.remove('bg-pink-500', 'text-white'); | |
| number.classList.add('bg-gray-200', 'text-gray-600'); | |
| text.classList.remove('text-pink-500'); | |
| text.classList.add('text-gray-500'); | |
| } | |
| }); | |
| // Update progress bar | |
| progressBar.style.width = `${(step - 1) * 50}%`; | |
| } | |
| // Generate calendar (simplified version) | |
| function generateCalendar() { | |
| const calendar = document.getElementById('calendar'); | |
| calendar.innerHTML = ''; | |
| // Create header | |
| const header = document.createElement('div'); | |
| header.className = 'flex justify-between items-center mb-4'; | |
| const prevMonth = document.createElement('button'); | |
| prevMonth.innerHTML = '<i class="fas fa-chevron-left"></i>'; | |
| prevMonth.className = 'text-gray-500 hover:text-pink-500'; | |
| prevMonth.addEventListener('click', function() { | |
| // In a real app, this would load the previous month | |
| alert('Chargement du mois précédent'); | |
| }); | |
| const monthYear = document.createElement('h5'); | |
| monthYear.className = 'font-bold'; | |
| monthYear.textContent = 'Juillet 2023'; // Current month | |
| const nextMonth = document.createElement('button'); | |
| nextMonth.innerHTML = '<i class="fas fa-chevron-right"></i>'; | |
| nextMonth.className = 'text-gray-500 hover:text-pink-500'; | |
| nextMonth.addEventListener('click', function() { | |
| // In a real app, this would load the next month | |
| alert('Chargement du mois suivant'); | |
| }); | |
| header.appendChild(prevMonth); | |
| header.appendChild(monthYear); | |
| header.appendChild(nextMonth); | |
| calendar.appendChild(header); | |
| // Create weekdays header | |
| const weekdays = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']; | |
| const weekdaysRow = document.createElement('div'); | |
| weekdaysRow.className = 'grid grid-cols-7 gap-1 mb-2'; | |
| weekdays.forEach(day => { | |
| const dayElement = document.createElement('div'); | |
| dayElement.className = 'text-center text-sm font-medium text-gray-500'; | |
| dayElement.textContent = day; | |
| weekdaysRow.appendChild(dayElement); | |
| }); | |
| calendar.appendChild(weekdaysRow); | |
| // Create days grid | |
| const daysGrid = document.createElement('div'); | |
| daysGrid.className = 'grid grid-cols-7 gap-1'; | |
| // Add empty cells for days not in the month (simplified) | |
| for (let i = 0; i < 5; i++) { | |
| const emptyCell = document.createElement('div'); | |
| emptyCell.className = 'h-10'; | |
| daysGrid.appendChild(emptyCell); | |
| } | |
| // Add days (1-31) | |
| for (let day = 1; day <= 31; day++) { | |
| const dayCell = document.createElement('button'); | |
| dayCell.className = 'h-10 rounded-full flex items-center justify-center hover:bg-gray-100 transition'; | |
| // Mark weekends differently | |
| if (day % 7 === 0 || day % 7 === 6) { | |
| dayCell.classList.add('text-pink-500'); | |
| } | |
| // Mark today | |
| if (day === new Date().getDate()) { | |
| dayCell.classList.add('bg-pink-100', 'font-bold'); | |
| } | |
| // Randomly mark some days as unavailable | |
| const isAvailable = Math.random() > 0.3; | |
| if (!isAvailable) { | |
| dayCell.classList.add('text-gray-300', 'line-through'); | |
| dayCell.disabled = true; | |
| } | |
| dayCell.textContent = day; | |
| dayCell.addEventListener('click', function() { | |
| // Remove selected class from all days | |
| document.querySelectorAll('#calendar button').forEach(btn => { | |
| btn.classList.remove('bg-pink-500', 'text-white'); | |
| }); | |
| // Add selected class to clicked day | |
| this.classList.add('bg-pink-500', 'text-white'); | |
| // Set selected date | |
| selectedDate = `${day}/07/2023`; | |
| document.getElementById('selected-date').textContent = selectedDate; | |
| document.getElementById('confirm-date').textContent = selectedDate; | |
| // Generate time slots for selected date | |
| generateTimeSlots(); | |
| // Enable next button if time is selected | |
| document.getElementById('next-to-step-3').disabled = !selectedTime; | |
| }); | |
| daysGrid.appendChild(dayCell); | |
| } | |
| calendar.appendChild(daysGrid); | |
| } | |
| // Generate time slots (simplified) | |
| function generateTimeSlots() { | |
| const timeSlotsContainer = document.getElementById('time-slots'); | |
| timeSlotsContainer.innerHTML = ''; | |
| const morningSlots = ['09:00', '10:00', '11:00', '12:00']; | |
| const afternoonSlots = ['14:00', '15:00', '16:00', '17:00', '18:00']; | |
| // Create morning section | |
| const morningTitle = document.createElement('h5'); | |
| morningTitle.className = 'font-medium text-gray-700 mb-2'; | |
| morningTitle.textContent = 'Matin'; | |
| timeSlotsContainer.appendChild(morningTitle); | |
| const morningGrid = document.createElement('div'); | |
| morningGrid.className = 'grid grid-cols-2 gap-2 mb-4'; | |
| morningSlots.forEach(time => { | |
| const slot = createTimeSlot(time); | |
| morningGrid.appendChild(slot); | |
| }); | |
| timeSlotsContainer.appendChild(morningGrid); | |
| // Create afternoon section | |
| const afternoonTitle = document.createElement('h5'); | |
| afternoonTitle.className = 'font-medium text-gray-700 mb-2'; | |
| afternoonTitle.textContent = 'Après-midi'; | |
| timeSlotsContainer.appendChild(afternoonTitle); | |
| const afternoonGrid = document.createElement('div'); | |
| afternoonGrid.className = 'grid grid-cols-2 gap-2'; | |
| afternoonSlots.forEach(time => { | |
| const slot = createTimeSlot(time); | |
| afternoonGrid.appendChild(slot); | |
| }); | |
| timeSlotsContainer.appendChild(afternoonGrid); | |
| } | |
| function createTimeSlot(time) { | |
| const slot = document.createElement('button'); | |
| slot.className = 'time-slot py-2 px-3 rounded border text-sm'; | |
| // Randomly mark some slots as booked | |
| const isBooked = Math.random() > 0.7; | |
| if (isBooked) { | |
| slot.classList.add('booked', 'bg-gray-100', 'text-gray-400', 'border-gray-200'); | |
| slot.textContent = `${time} (Complet)`; | |
| slot.disabled = true; | |
| } else { | |
| slot.classList.add('bg-white', 'border-gray-300', 'hover:border-pink-300'); | |
| slot.textContent = time; | |
| slot.addEventListener('click', function() { | |
| // Remove selected class from all slots | |
| document.querySelectorAll('.time-slot').forEach(s => { | |
| s.classList.remove('bg-pink-500', 'text-white', 'border-pink-500'); | |
| }); | |
| // Add selected class to clicked slot | |
| this.classList.add('bg-pink-500', 'text-white', 'border-pink-500'); | |
| // Set selected time | |
| selectedTime = time; | |
| document.getElementById('selected-time').textContent = time; | |
| document.getElementById('confirm-time').textContent = time; | |
| // Enable next button | |
| document.getElementById('next-to-step-3').disabled = false; | |
| }); | |
| } | |
| return slot; | |
| } | |
| // Handle form submission | |
| document.getElementById('booking-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // In a real app, this would send data to a server | |
| console.log('Booking submitted:', { | |
| service: selectedService, | |
| date: selectedDate, | |
| time: selectedTime, | |
| client: { | |
| name: document.getElementById('client-name').value, | |
| email: document.getElementById('client-email').value, | |
| phone: document.getElementById('client-phone').value, | |
| notes: document.getElementById('client-notes').value | |
| } | |
| }); | |
| // Show success modal | |
| bookingModal.classList.add('hidden'); | |
| successModal.classList.remove('hidden'); | |
| // Reset form for next booking | |
| setTimeout(() => { | |
| closeModals(); | |
| resetBookingForm(); | |
| }, 3000); | |
| }); | |
| // Reset booking form | |
| function resetBookingForm() { | |
| selectedService = null; | |
| selectedDate = null; | |
| selectedTime = null; | |
| // Reset step 1 | |
| serviceOptions.forEach(opt => { | |
| opt.classList.remove('border-pink-300', 'border-amber-300', 'border-purple-300', | |
| 'border-blue-300', 'border-green-300', 'border-indigo-300'); | |
| opt.classList.add('border-transparent'); | |
| }); | |
| document.getElementById('next-to-step-2').disabled = true; | |
| // Reset step 2 | |
| document.getElementById('selected-service').textContent = 'Aucun service sélectionné'; | |
| document.getElementById('selected-date').textContent = 'Aucune date sélectionnée'; | |
| document.getElementById('selected-time').textContent = 'Aucun horaire sélectionné'; | |
| document.getElementById('next-to-step-3').disabled = true; | |
| // Reset step 3 | |
| document.getElementById('confirm-service').textContent = '-'; | |
| document.getElementById('confirm-date').textContent = '-'; | |
| document.getElementById('confirm-time').textContent = '-'; | |
| document.getElementById('confirm-price').textContent = '-'; | |
| document.getElementById('booking-form').reset(); | |
| // Go back to step 1 | |
| document.getElementById('step-2').classList.add('hidden'); | |
| document.getElementById('step-3').classList.add('hidden'); | |
| document.getElementById('step-1').classList.remove('hidden'); | |
| updateStep(1); | |
| } | |
| </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=willdevops/harmonie-sethetique" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |