willdevops commited on
Commit
7a23597
·
verified ·
1 Parent(s): bc3d560

Crée moi un site pour une Esthéticienne / Madero thérapeute qui propose les services suivant : Massage californien 70€ et 200€ pour 4 séance, Madero thérapie corps 70€ par zone du corps et 200€ pour 4 séance, Madero thérapie visage 50€, Soin du visage, Hydra facial 70€ et 200€ pour 4 séance, Plant alimentaire, naturopathie, Lipocavitation, Radio fréquence du visage, Massage crânien 70€ 200€ pour 4 séance On doit pouvoir prendre un rendez vous via un bouton qui propose directement les service puis choisir l'horaires et avoir les horaires non disponible affiché - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1015 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Harmonie Sethetique
3
- emoji: 📚
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: harmonie-sethetique
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1015 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Harmonie Esthétique - Esthéticienne & Madéro-Thérapeute</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero {
11
+ 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');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+
16
+ .service-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
19
+ }
20
+
21
+ .modal {
22
+ transition: opacity 0.3s ease, visibility 0.3s ease;
23
+ }
24
+
25
+ #calendar {
26
+ max-height: 500px;
27
+ overflow-y: auto;
28
+ }
29
+
30
+ .time-slot {
31
+ transition: all 0.2s ease;
32
+ }
33
+
34
+ .time-slot:hover:not(.booked) {
35
+ background-color: #f0fdf4;
36
+ }
37
+
38
+ .booked {
39
+ opacity: 0.5;
40
+ cursor: not-allowed;
41
+ }
42
+
43
+ @keyframes fadeIn {
44
+ from { opacity: 0; }
45
+ to { opacity: 1; }
46
+ }
47
+
48
+ .animate-fadeIn {
49
+ animation: fadeIn 0.5s ease-out;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="font-sans bg-gray-50">
54
+ <!-- Header -->
55
+ <header class="bg-white shadow-sm sticky top-0 z-50">
56
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
57
+ <div class="flex items-center">
58
+ <i class="fas fa-spa text-2xl text-pink-500 mr-2"></i>
59
+ <h1 class="text-xl font-bold text-gray-800">Harmonie Esthétique</h1>
60
+ </div>
61
+ <nav class="hidden md:flex space-x-8">
62
+ <a href="#services" class="text-gray-600 hover:text-pink-500 transition">Services</a>
63
+ <a href="#about" class="text-gray-600 hover:text-pink-500 transition">À propos</a>
64
+ <a href="#testimonials" class="text-gray-600 hover:text-pink-500 transition">Témoignages</a>
65
+ <a href="#contact" class="text-gray-600 hover:text-pink-500 transition">Contact</a>
66
+ </nav>
67
+ <button class="md:hidden text-gray-600" id="mobile-menu-button">
68
+ <i class="fas fa-bars text-2xl"></i>
69
+ </button>
70
+ </div>
71
+
72
+ <!-- Mobile menu -->
73
+ <div class="md:hidden hidden bg-white py-2 px-4 shadow-md" id="mobile-menu">
74
+ <a href="#services" class="block py-2 text-gray-600 hover:text-pink-500 transition">Services</a>
75
+ <a href="#about" class="block py-2 text-gray-600 hover:text-pink-500 transition">À propos</a>
76
+ <a href="#testimonials" class="block py-2 text-gray-600 hover:text-pink-500 transition">Témoignages</a>
77
+ <a href="#contact" class="block py-2 text-gray-600 hover:text-pink-500 transition">Contact</a>
78
+ </div>
79
+ </header>
80
+
81
+ <!-- Hero Section -->
82
+ <section class="hero text-white py-20 md:py-32">
83
+ <div class="container mx-auto px-4 text-center">
84
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Bienvenue chez Harmonie Esthétique</h1>
85
+ <p class="text-xl md:text-2xl mb-8">Détente, bien-être et beauté naturelle</p>
86
+ <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">
87
+ Prendre rendez-vous
88
+ </button>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- Services Section -->
93
+ <section id="services" class="py-16 bg-white">
94
+ <div class="container mx-auto px-4">
95
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Nos Services</h2>
96
+
97
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
98
+ <!-- Massage Californien -->
99
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300">
100
+ <div class="h-48 bg-pink-100 flex items-center justify-center">
101
+ <i class="fas fa-hands text-5xl text-pink-500"></i>
102
+ </div>
103
+ <div class="p-6">
104
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Massage Californien</h3>
105
+ <p class="text-gray-600 mb-4">Un massage relaxant et enveloppant pour libérer les tensions et retrouver l'harmonie.</p>
106
+ <div class="flex justify-between items-center">
107
+ <span class="font-bold text-pink-500">70€</span>
108
+ <span class="text-sm bg-pink-100 text-pink-700 px-2 py-1 rounded">4 séances: 200€</span>
109
+ </div>
110
+ <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>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Madéro-Thérapie Corps -->
115
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300">
116
+ <div class="h-48 bg-amber-100 flex items-center justify-center">
117
+ <i class="fas fa-leaf text-5xl text-amber-500"></i>
118
+ </div>
119
+ <div class="p-6">
120
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Madéro-Thérapie Corps</h3>
121
+ <p class="text-gray-600 mb-4">Technique ancestrale utilisant des outils en bois pour stimuler la circulation et éliminer les toxines.</p>
122
+ <div class="flex justify-between items-center">
123
+ <span class="font-bold text-amber-500">70€ par zone</span>
124
+ <span class="text-sm bg-amber-100 text-amber-700 px-2 py-1 rounded">4 séances: 200€</span>
125
+ </div>
126
+ <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>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Madéro-Thérapie Visage -->
131
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300">
132
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
133
+ <i class="fas fa-smile text-5xl text-purple-500"></i>
134
+ </div>
135
+ <div class="p-6">
136
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Madéro-Thérapie Visage</h3>
137
+ <p class="text-gray-600 mb-4">Lissage des traits, stimulation du collagène et éclat naturel pour votre visage.</p>
138
+ <div class="flex justify-between items-center">
139
+ <span class="font-bold text-purple-500">50€</span>
140
+ </div>
141
+ <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>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Hydra Facial -->
146
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300">
147
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
148
+ <i class="fas fa-water text-5xl text-blue-500"></i>
149
+ </div>
150
+ <div class="p-6">
151
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Hydra Facial</h3>
152
+ <p class="text-gray-600 mb-4">Soin hydratant intense pour un teint éclatant et une peau repulpée.</p>
153
+ <div class="flex justify-between items-center">
154
+ <span class="font-bold text-blue-500">70€</span>
155
+ <span class="text-sm bg-blue-100 text-blue-700 px-2 py-1 rounded">4 séances: 200€</span>
156
+ </div>
157
+ <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>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Massage Crânien -->
162
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300">
163
+ <div class="h-48 bg-green-100 flex items-center justify-center">
164
+ <i class="fas fa-head-side-virus text-5xl text-green-500"></i>
165
+ </div>
166
+ <div class="p-6">
167
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Massage Crânien</h3>
168
+ <p class="text-gray-600 mb-4">Détente profonde, soulagement des maux de tête et amélioration de la concentration.</p>
169
+ <div class="flex justify-between items-center">
170
+ <span class="font-bold text-green-500">70€</span>
171
+ <span class="text-sm bg-green-100 text-green-700 px-2 py-1 rounded">4 séances: 200€</span>
172
+ </div>
173
+ <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>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Autres Services -->
178
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 transition duration-300">
179
+ <div class="h-48 bg-indigo-100 flex items-center justify-center">
180
+ <i class="fas fa-heart text-5xl text-indigo-500"></i>
181
+ </div>
182
+ <div class="p-6">
183
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Autres Services</h3>
184
+ <ul class="text-gray-600 mb-4 space-y-2">
185
+ <li>• Soin du visage</li>
186
+ <li>• Plant alimentaire</li>
187
+ <li>• Naturopathie</li>
188
+ <li>• Lipocavitation</li>
189
+ <li>• Radio fréquence du visage</li>
190
+ </ul>
191
+ <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>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- About Section -->
199
+ <section id="about" class="py-16 bg-gray-50">
200
+ <div class="container mx-auto px-4">
201
+ <div class="flex flex-col md:flex-row items-center">
202
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
203
+ <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">
204
+ </div>
205
+ <div class="md:w-1/2">
206
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">À propos de moi</h2>
207
+ <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>
208
+ <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>
209
+ <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>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Testimonials Section -->
216
+ <section id="testimonials" class="py-16 bg-white">
217
+ <div class="container mx-auto px-4">
218
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Témoignages</h2>
219
+
220
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
221
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
222
+ <div class="flex items-center mb-4">
223
+ <div class="w-12 h-12 rounded-full bg-pink-200 flex items-center justify-center mr-4">
224
+ <i class="fas fa-user text-pink-500"></i>
225
+ </div>
226
+ <div>
227
+ <h4 class="font-bold">Sophie D.</h4>
228
+ <div class="flex text-amber-400">
229
+ <i class="fas fa-star"></i>
230
+ <i class="fas fa-star"></i>
231
+ <i class="fas fa-star"></i>
232
+ <i class="fas fa-star"></i>
233
+ <i class="fas fa-star"></i>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ <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>
238
+ </div>
239
+
240
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
241
+ <div class="flex items-center mb-4">
242
+ <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4">
243
+ <i class="fas fa-user text-blue-500"></i>
244
+ </div>
245
+ <div>
246
+ <h4 class="font-bold">Marie L.</h4>
247
+ <div class="flex text-amber-400">
248
+ <i class="fas fa-star"></i>
249
+ <i class="fas fa-star"></i>
250
+ <i class="fas fa-star"></i>
251
+ <i class="fas fa-star"></i>
252
+ <i class="fas fa-star"></i>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ <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>
257
+ </div>
258
+
259
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
260
+ <div class="flex items-center mb-4">
261
+ <div class="w-12 h-12 rounded-full bg-green-200 flex items-center justify-center mr-4">
262
+ <i class="fas fa-user text-green-500"></i>
263
+ </div>
264
+ <div>
265
+ <h4 class="font-bold">Claire T.</h4>
266
+ <div class="flex text-amber-400">
267
+ <i class="fas fa-star"></i>
268
+ <i class="fas fa-star"></i>
269
+ <i class="fas fa-star"></i>
270
+ <i class="fas fa-star"></i>
271
+ <i class="fas fa-star"></i>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ <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>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </section>
280
+
281
+ <!-- Contact Section -->
282
+ <section id="contact" class="py-16 bg-gray-50">
283
+ <div class="container mx-auto px-4">
284
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Contact</h2>
285
+
286
+ <div class="flex flex-col md:flex-row">
287
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
288
+ <div class="bg-white p-6 rounded-lg shadow-sm">
289
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Informations</h3>
290
+ <div class="space-y-4">
291
+ <div class="flex items-start">
292
+ <i class="fas fa-map-marker-alt text-pink-500 mt-1 mr-3"></i>
293
+ <p class="text-gray-600">123 Rue du Bien-être, 75000 Paris</p>
294
+ </div>
295
+ <div class="flex items-center">
296
+ <i class="fas fa-phone-alt text-pink-500 mr-3"></i>
297
+ <p class="text-gray-600">01 23 45 67 89</p>
298
+ </div>
299
+ <div class="flex items-center">
300
+ <i class="fas fa-envelope text-pink-500 mr-3"></i>
301
+ <p class="text-gray-600">contact@harmonie-esthetique.com</p>
302
+ </div>
303
+ <div class="flex items-center">
304
+ <i class="fas fa-clock text-pink-500 mr-3"></i>
305
+ <p class="text-gray-600">
306
+ <span class="font-medium">Lundi-Vendredi:</span> 9h-19h<br>
307
+ <span class="font-medium">Samedi:</span> 9h-15h
308
+ </p>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="mt-6 bg-white p-6 rounded-lg shadow-sm">
314
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Suivez-nous</h3>
315
+ <div class="flex space-x-4">
316
+ <a href="#" class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center hover:bg-blue-600 transition">
317
+ <i class="fab fa-facebook-f"></i>
318
+ </a>
319
+ <a href="#" class="w-10 h-10 rounded-full bg-pink-500 text-white flex items-center justify-center hover:bg-pink-600 transition">
320
+ <i class="fab fa-instagram"></i>
321
+ </a>
322
+ <a href="#" class="w-10 h-10 rounded-full bg-blue-400 text-white flex items-center justify-center hover:bg-blue-500 transition">
323
+ <i class="fab fa-twitter"></i>
324
+ </a>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="md:w-1/2">
330
+ <div class="bg-white p-6 rounded-lg shadow-sm">
331
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Envoyez un message</h3>
332
+ <form>
333
+ <div class="mb-4">
334
+ <label for="name" class="block text-gray-700 mb-2">Nom</label>
335
+ <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">
336
+ </div>
337
+ <div class="mb-4">
338
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
339
+ <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">
340
+ </div>
341
+ <div class="mb-4">
342
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
343
+ <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>
344
+ </div>
345
+ <button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded transition">Envoyer</button>
346
+ </form>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </section>
352
+
353
+ <!-- Footer -->
354
+ <footer class="bg-gray-800 text-white py-8">
355
+ <div class="container mx-auto px-4">
356
+ <div class="flex flex-col md:flex-row justify-between items-center">
357
+ <div class="mb-4 md:mb-0">
358
+ <div class="flex items-center">
359
+ <i class="fas fa-spa text-2xl text-pink-500 mr-2"></i>
360
+ <h2 class="text-xl font-bold">Harmonie Esthétique</h2>
361
+ </div>
362
+ <p class="text-gray-400 mt-2">Bien-être et beauté naturelle</p>
363
+ </div>
364
+ <div class="text-center md:text-right">
365
+ <p class="text-gray-400">© 2023 Harmonie Esthétique. Tous droits réservés.</p>
366
+ <div class="mt-2">
367
+ <a href="#" class="text-gray-400 hover:text-white mr-4 transition">Mentions légales</a>
368
+ <a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </footer>
374
+
375
+ <!-- Booking Modal -->
376
+ <div id="booking-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
377
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl mx-4 overflow-hidden animate-fadeIn">
378
+ <div class="flex justify-between items-center border-b px-6 py-4">
379
+ <h3 class="text-xl font-bold text-gray-800">Prendre rendez-vous</h3>
380
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
381
+ <i class="fas fa-times"></i>
382
+ </button>
383
+ </div>
384
+
385
+ <div class="p-6">
386
+ <div class="steps flex justify-between mb-8 relative">
387
+ <div class="step flex-1 text-center relative z-10">
388
+ <div class="w-10 h-10 mx-auto rounded-full bg-pink-500 text-white flex items-center justify-center mb-2">1</div>
389
+ <p class="text-sm font-medium text-pink-500">Choisir un service</p>
390
+ </div>
391
+ <div class="step flex-1 text-center relative z-10">
392
+ <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>
393
+ <p class="text-sm font-medium text-gray-500">Sélectionner une date</p>
394
+ </div>
395
+ <div class="step flex-1 text-center relative z-10">
396
+ <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>
397
+ <p class="text-sm font-medium text-gray-500">Confirmer</p>
398
+ </div>
399
+ <div class="absolute top-5 left-0 right-0 h-1 bg-gray-200 mx-16">
400
+ <div class="h-full bg-pink-500 w-1/3" id="progress-bar"></div>
401
+ </div>
402
+ </div>
403
+
404
+ <!-- Step 1: Choose Service -->
405
+ <div id="step-1" class="step-content">
406
+ <h4 class="text-lg font-semibold mb-4">Sélectionnez votre service</h4>
407
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
408
+ <div class="border rounded-lg p-4 hover:border-pink-300 cursor-pointer transition service-option" data-service="Massage Californien" data-price="70">
409
+ <div class="flex justify-between items-start">
410
+ <div>
411
+ <h5 class="font-bold">Massage Californien</h5>
412
+ <p class="text-sm text-gray-600">70€ (4 séances: 200€)</p>
413
+ </div>
414
+ <i class="fas fa-hands text-pink-500 mt-1"></i>
415
+ </div>
416
+ </div>
417
+ <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">
418
+ <div class="flex justify-between items-start">
419
+ <div>
420
+ <h5 class="font-bold">Madéro-Thérapie Corps</h5>
421
+ <p class="text-sm text-gray-600">70€ par zone (4 séances: 200€)</p>
422
+ </div>
423
+ <i class="fas fa-leaf text-amber-500 mt-1"></i>
424
+ </div>
425
+ </div>
426
+ <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">
427
+ <div class="flex justify-between items-start">
428
+ <div>
429
+ <h5 class="font-bold">Madéro-Thérapie Visage</h5>
430
+ <p class="text-sm text-gray-600">50€</p>
431
+ </div>
432
+ <i class="fas fa-smile text-purple-500 mt-1"></i>
433
+ </div>
434
+ </div>
435
+ <div class="border rounded-lg p-4 hover:border-blue-300 cursor-pointer transition service-option" data-service="Hydra Facial" data-price="70">
436
+ <div class="flex justify-between items-start">
437
+ <div>
438
+ <h5 class="font-bold">Hydra Facial</h5>
439
+ <p class="text-sm text-gray-600">70€ (4 séances: 200€)</p>
440
+ </div>
441
+ <i class="fas fa-water text-blue-500 mt-1"></i>
442
+ </div>
443
+ </div>
444
+ <div class="border rounded-lg p-4 hover:border-green-300 cursor-pointer transition service-option" data-service="Massage Crânien" data-price="70">
445
+ <div class="flex justify-between items-start">
446
+ <div>
447
+ <h5 class="font-bold">Massage Crânien</h5>
448
+ <p class="text-sm text-gray-600">70€ (4 séances: 200€)</p>
449
+ </div>
450
+ <i class="fas fa-head-side-virus text-green-500 mt-1"></i>
451
+ </div>
452
+ </div>
453
+ <div class="border rounded-lg p-4 hover:border-indigo-300 cursor-pointer transition service-option" data-service="Autres Services" data-price="0">
454
+ <div class="flex justify-between items-start">
455
+ <div>
456
+ <h5 class="font-bold">Autres Services</h5>
457
+ <p class="text-sm text-gray-600">Soin du visage, Plant alimentaire, etc.</p>
458
+ </div>
459
+ <i class="fas fa-heart text-indigo-500 mt-1"></i>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="mt-6 flex justify-end">
465
+ <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>
466
+ Suivant <i class="fas fa-arrow-right ml-2"></i>
467
+ </button>
468
+ </div>
469
+ </div>
470
+
471
+ <!-- Step 2: Choose Date & Time -->
472
+ <div id="step-2" class="step-content hidden">
473
+ <div class="flex flex-col md:flex-row gap-6">
474
+ <div class="md:w-1/2">
475
+ <h4 class="text-lg font-semibold mb-4">Sélectionnez une date</h4>
476
+ <div id="calendar" class="border rounded-lg p-4">
477
+ <!-- Calendar will be generated by JavaScript -->
478
+ <div class="text-center py-8">
479
+ <i class="fas fa-spinner fa-spin text-2xl text-pink-500"></i>
480
+ <p class="mt-2 text-gray-600">Chargement du calendrier...</p>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="md:w-1/2">
486
+ <h4 class="text-lg font-semibold mb-4">Horaires disponibles</h4>
487
+ <div id="time-slots" class="border rounded-lg p-4">
488
+ <p class="text-gray-500 italic">Veuillez sélectionner une date pour voir les disponibilités</p>
489
+ </div>
490
+
491
+ <div class="mt-6 bg-gray-50 p-4 rounded-lg">
492
+ <h5 class="font-semibold mb-2">Votre sélection</h5>
493
+ <p id="selected-service" class="text-gray-600">Aucun service sélectionné</p>
494
+ <p id="selected-date" class="text-gray-600 mt-1">Aucune date sélectionnée</p>
495
+ <p id="selected-time" class="text-gray-600 mt-1">Aucun horaire sélectionné</p>
496
+ </div>
497
+
498
+ <div class="mt-6 flex justify-between">
499
+ <button id="back-to-step-1" class="text-pink-500 hover:text-pink-700 font-bold py-2 px-4 rounded transition">
500
+ <i class="fas fa-arrow-left mr-2"></i> Retour
501
+ </button>
502
+ <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>
503
+ Suivant <i class="fas fa-arrow-right ml-2"></i>
504
+ </button>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <!-- Step 3: Confirm Booking -->
511
+ <div id="step-3" class="step-content hidden">
512
+ <h4 class="text-lg font-semibold mb-6">Confirmez votre rendez-vous</h4>
513
+
514
+ <div class="bg-gray-50 p-6 rounded-lg mb-6">
515
+ <h5 class="font-bold text-lg mb-4">Récapitulatif</h5>
516
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
517
+ <div>
518
+ <p class="text-gray-600 font-medium">Service:</p>
519
+ <p id="confirm-service" class="font-semibold">-</p>
520
+ </div>
521
+ <div>
522
+ <p class="text-gray-600 font-medium">Date:</p>
523
+ <p id="confirm-date" class="font-semibold">-</p>
524
+ </div>
525
+ <div>
526
+ <p class="text-gray-600 font-medium">Horaire:</p>
527
+ <p id="confirm-time" class="font-semibold">-</p>
528
+ </div>
529
+ <div>
530
+ <p class="text-gray-600 font-medium">Prix:</p>
531
+ <p id="confirm-price" class="font-semibold">-</p>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <h5 class="font-bold text-lg mb-4">Vos informations</h5>
537
+ <form id="booking-form">
538
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
539
+ <div>
540
+ <label for="client-name" class="block text-gray-700 mb-2">Nom complet*</label>
541
+ <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>
542
+ </div>
543
+ <div>
544
+ <label for="client-email" class="block text-gray-700 mb-2">Email*</label>
545
+ <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>
546
+ </div>
547
+ <div>
548
+ <label for="client-phone" class="block text-gray-700 mb-2">Téléphone*</label>
549
+ <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>
550
+ </div>
551
+ <div>
552
+ <label for="client-notes" class="block text-gray-700 mb-2">Notes (optionnel)</label>
553
+ <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">
554
+ </div>
555
+ </div>
556
+
557
+ <div class="mt-6 flex justify-between">
558
+ <button id="back-to-step-2" class="text-pink-500 hover:text-pink-700 font-bold py-2 px-4 rounded transition">
559
+ <i class="fas fa-arrow-left mr-2"></i> Retour
560
+ </button>
561
+ <button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded transition">
562
+ Confirmer la réservation
563
+ </button>
564
+ </div>
565
+ </form>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </div>
570
+
571
+ <!-- Success Modal -->
572
+ <div id="success-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
573
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6 text-center animate-fadeIn">
574
+ <div class="w-16 h-16 mx-auto rounded-full bg-green-100 text-green-500 flex items-center justify-center mb-4">
575
+ <i class="fas fa-check text-2xl"></i>
576
+ </div>
577
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Réservation confirmée!</h3>
578
+ <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>
579
+ <button id="close-success-modal" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded transition">
580
+ Fermer
581
+ </button>
582
+ </div>
583
+ </div>
584
+
585
+ <script>
586
+ // Mobile menu toggle
587
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
588
+ const menu = document.getElementById('mobile-menu');
589
+ menu.classList.toggle('hidden');
590
+ });
591
+
592
+ // Booking modal
593
+ const bookingModal = document.getElementById('booking-modal');
594
+ const bookNowBtn = document.getElementById('book-now-btn');
595
+ const closeModalBtn = document.getElementById('close-modal');
596
+ const closeSuccessModalBtn = document.getElementById('close-success-modal');
597
+ const successModal = document.getElementById('success-modal');
598
+
599
+ // Open booking modal
600
+ bookNowBtn.addEventListener('click', function() {
601
+ bookingModal.classList.remove('hidden');
602
+ document.body.style.overflow = 'hidden';
603
+ });
604
+
605
+ // Close modals
606
+ function closeModals() {
607
+ bookingModal.classList.add('hidden');
608
+ successModal.classList.add('hidden');
609
+ document.body.style.overflow = 'auto';
610
+ }
611
+
612
+ closeModalBtn.addEventListener('click', closeModals);
613
+ closeSuccessModalBtn.addEventListener('click', closeModals);
614
+
615
+ // Close modal when clicking outside
616
+ window.addEventListener('click', function(event) {
617
+ if (event.target === bookingModal) {
618
+ closeModals();
619
+ }
620
+ if (event.target === successModal) {
621
+ closeModals();
622
+ }
623
+ });
624
+
625
+ // Booking steps functionality
626
+ let currentStep = 1;
627
+ let selectedService = null;
628
+ let selectedDate = null;
629
+ let selectedTime = null;
630
+
631
+ // Step 1: Select service
632
+ const serviceOptions = document.querySelectorAll('.service-option');
633
+ const nextToStep2Btn = document.getElementById('next-to-step-2');
634
+
635
+ serviceOptions.forEach(option => {
636
+ option.addEventListener('click', function() {
637
+ // Remove active class from all options
638
+ serviceOptions.forEach(opt => {
639
+ opt.classList.remove('border-pink-300', 'border-amber-300', 'border-purple-300',
640
+ 'border-blue-300', 'border-green-300', 'border-indigo-300');
641
+ opt.classList.add('border-transparent');
642
+ });
643
+
644
+ // Add active class to selected option
645
+ const service = this.getAttribute('data-service');
646
+ let borderColor = 'border-pink-300';
647
+
648
+ if (service === 'Madéro-Thérapie Corps') borderColor = 'border-amber-300';
649
+ else if (service === 'Madéro-Thérapie Visage') borderColor = 'border-purple-300';
650
+ else if (service === 'Hydra Facial') borderColor = 'border-blue-300';
651
+ else if (service === 'Massage Crânien') borderColor = 'border-green-300';
652
+ else if (service === 'Autres Services') borderColor = 'border-indigo-300';
653
+
654
+ this.classList.remove('border-transparent');
655
+ this.classList.add(borderColor);
656
+
657
+ selectedService = {
658
+ name: service,
659
+ price: this.getAttribute('data-price')
660
+ };
661
+
662
+ // Update selected service display
663
+ document.getElementById('selected-service').textContent = service;
664
+ document.getElementById('confirm-service').textContent = service;
665
+ document.getElementById('confirm-price').textContent = selectedService.price + '€';
666
+
667
+ // Enable next button
668
+ nextToStep2Btn.disabled = false;
669
+ });
670
+ });
671
+
672
+ // Book service buttons from service cards
673
+ const bookServiceBtns = document.querySelectorAll('.book-service-btn');
674
+ bookServiceBtns.forEach(btn => {
675
+ btn.addEventListener('click', function() {
676
+ const service = this.getAttribute('data-service');
677
+ let price = '70';
678
+
679
+ if (service === 'Madéro-Thérapie Visage') price = '50';
680
+ else if (service === 'Autres Services') price = '0';
681
+
682
+ selectedService = {
683
+ name: service,
684
+ price: price
685
+ };
686
+
687
+ // Update selected service display
688
+ document.getElementById('selected-service').textContent = service;
689
+ document.getElementById('confirm-service').textContent = service;
690
+ document.getElementById('confirm-price').textContent = price + '€';
691
+
692
+ // Enable next button
693
+ nextToStep2Btn.disabled = false;
694
+
695
+ // Open modal
696
+ bookingModal.classList.remove('hidden');
697
+ document.body.style.overflow = 'hidden';
698
+
699
+ // Highlight the corresponding service option
700
+ serviceOptions.forEach(option => {
701
+ if (option.getAttribute('data-service') === service) {
702
+ option.click(); // Simulate click to highlight
703
+ }
704
+ });
705
+ });
706
+ });
707
+
708
+ // Next to step 2
709
+ nextToStep2Btn.addEventListener('click', function() {
710
+ document.getElementById('step-1').classList.add('hidden');
711
+ document.getElementById('step-2').classList.remove('hidden');
712
+ updateStep(2);
713
+
714
+ // Generate calendar (simplified version)
715
+ generateCalendar();
716
+ });
717
+
718
+ // Back to step 1
719
+ document.getElementById('back-to-step-1').addEventListener('click', function() {
720
+ document.getElementById('step-2').classList.add('hidden');
721
+ document.getElementById('step-1').classList.remove('hidden');
722
+ updateStep(1);
723
+ });
724
+
725
+ // Next to step 3
726
+ document.getElementById('next-to-step-3').addEventListener('click', function() {
727
+ document.getElementById('step-2').classList.add('hidden');
728
+ document.getElementById('step-3').classList.remove('hidden');
729
+ updateStep(3);
730
+ });
731
+
732
+ // Back to step 2
733
+ document.getElementById('back-to-step-2').addEventListener('click', function() {
734
+ document.getElementById('step-3').classList.add('hidden');
735
+ document.getElementById('step-2').classList.remove('hidden');
736
+ updateStep(2);
737
+ });
738
+
739
+ // Update step UI
740
+ function updateStep(step) {
741
+ currentStep = step;
742
+ const steps = document.querySelectorAll('.step');
743
+ const progressBar = document.getElementById('progress-bar');
744
+
745
+ steps.forEach((s, index) => {
746
+ const number = s.querySelector('div');
747
+ const text = s.querySelector('p');
748
+
749
+ if (index + 1 <= step) {
750
+ number.classList.remove('bg-gray-200', 'text-gray-600');
751
+ number.classList.add('bg-pink-500', 'text-white');
752
+ text.classList.remove('text-gray-500');
753
+ text.classList.add('text-pink-500');
754
+ } else {
755
+ number.classList.remove('bg-pink-500', 'text-white');
756
+ number.classList.add('bg-gray-200', 'text-gray-600');
757
+ text.classList.remove('text-pink-500');
758
+ text.classList.add('text-gray-500');
759
+ }
760
+ });
761
+
762
+ // Update progress bar
763
+ progressBar.style.width = `${(step - 1) * 50}%`;
764
+ }
765
+
766
+ // Generate calendar (simplified version)
767
+ function generateCalendar() {
768
+ const calendar = document.getElementById('calendar');
769
+ calendar.innerHTML = '';
770
+
771
+ // Create header
772
+ const header = document.createElement('div');
773
+ header.className = 'flex justify-between items-center mb-4';
774
+
775
+ const prevMonth = document.createElement('button');
776
+ prevMonth.innerHTML = '<i class="fas fa-chevron-left"></i>';
777
+ prevMonth.className = 'text-gray-500 hover:text-pink-500';
778
+ prevMonth.addEventListener('click', function() {
779
+ // In a real app, this would load the previous month
780
+ alert('Chargement du mois précédent');
781
+ });
782
+
783
+ const monthYear = document.createElement('h5');
784
+ monthYear.className = 'font-bold';
785
+ monthYear.textContent = 'Juillet 2023'; // Current month
786
+
787
+ const nextMonth = document.createElement('button');
788
+ nextMonth.innerHTML = '<i class="fas fa-chevron-right"></i>';
789
+ nextMonth.className = 'text-gray-500 hover:text-pink-500';
790
+ nextMonth.addEventListener('click', function() {
791
+ // In a real app, this would load the next month
792
+ alert('Chargement du mois suivant');
793
+ });
794
+
795
+ header.appendChild(prevMonth);
796
+ header.appendChild(monthYear);
797
+ header.appendChild(nextMonth);
798
+ calendar.appendChild(header);
799
+
800
+ // Create weekdays header
801
+ const weekdays = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
802
+ const weekdaysRow = document.createElement('div');
803
+ weekdaysRow.className = 'grid grid-cols-7 gap-1 mb-2';
804
+
805
+ weekdays.forEach(day => {
806
+ const dayElement = document.createElement('div');
807
+ dayElement.className = 'text-center text-sm font-medium text-gray-500';
808
+ dayElement.textContent = day;
809
+ weekdaysRow.appendChild(dayElement);
810
+ });
811
+
812
+ calendar.appendChild(weekdaysRow);
813
+
814
+ // Create days grid
815
+ const daysGrid = document.createElement('div');
816
+ daysGrid.className = 'grid grid-cols-7 gap-1';
817
+
818
+ // Add empty cells for days not in the month (simplified)
819
+ for (let i = 0; i < 5; i++) {
820
+ const emptyCell = document.createElement('div');
821
+ emptyCell.className = 'h-10';
822
+ daysGrid.appendChild(emptyCell);
823
+ }
824
+
825
+ // Add days (1-31)
826
+ for (let day = 1; day <= 31; day++) {
827
+ const dayCell = document.createElement('button');
828
+ dayCell.className = 'h-10 rounded-full flex items-center justify-center hover:bg-gray-100 transition';
829
+
830
+ // Mark weekends differently
831
+ if (day % 7 === 0 || day % 7 === 6) {
832
+ dayCell.classList.add('text-pink-500');
833
+ }
834
+
835
+ // Mark today
836
+ if (day === new Date().getDate()) {
837
+ dayCell.classList.add('bg-pink-100', 'font-bold');
838
+ }
839
+
840
+ // Randomly mark some days as unavailable
841
+ const isAvailable = Math.random() > 0.3;
842
+ if (!isAvailable) {
843
+ dayCell.classList.add('text-gray-300', 'line-through');
844
+ dayCell.disabled = true;
845
+ }
846
+
847
+ dayCell.textContent = day;
848
+ dayCell.addEventListener('click', function() {
849
+ // Remove selected class from all days
850
+ document.querySelectorAll('#calendar button').forEach(btn => {
851
+ btn.classList.remove('bg-pink-500', 'text-white');
852
+ });
853
+
854
+ // Add selected class to clicked day
855
+ this.classList.add('bg-pink-500', 'text-white');
856
+
857
+ // Set selected date
858
+ selectedDate = `${day}/07/2023`;
859
+ document.getElementById('selected-date').textContent = selectedDate;
860
+ document.getElementById('confirm-date').textContent = selectedDate;
861
+
862
+ // Generate time slots for selected date
863
+ generateTimeSlots();
864
+
865
+ // Enable next button if time is selected
866
+ document.getElementById('next-to-step-3').disabled = !selectedTime;
867
+ });
868
+
869
+ daysGrid.appendChild(dayCell);
870
+ }
871
+
872
+ calendar.appendChild(daysGrid);
873
+ }
874
+
875
+ // Generate time slots (simplified)
876
+ function generateTimeSlots() {
877
+ const timeSlotsContainer = document.getElementById('time-slots');
878
+ timeSlotsContainer.innerHTML = '';
879
+
880
+ const morningSlots = ['09:00', '10:00', '11:00', '12:00'];
881
+ const afternoonSlots = ['14:00', '15:00', '16:00', '17:00', '18:00'];
882
+
883
+ // Create morning section
884
+ const morningTitle = document.createElement('h5');
885
+ morningTitle.className = 'font-medium text-gray-700 mb-2';
886
+ morningTitle.textContent = 'Matin';
887
+ timeSlotsContainer.appendChild(morningTitle);
888
+
889
+ const morningGrid = document.createElement('div');
890
+ morningGrid.className = 'grid grid-cols-2 gap-2 mb-4';
891
+
892
+ morningSlots.forEach(time => {
893
+ const slot = createTimeSlot(time);
894
+ morningGrid.appendChild(slot);
895
+ });
896
+
897
+ timeSlotsContainer.appendChild(morningGrid);
898
+
899
+ // Create afternoon section
900
+ const afternoonTitle = document.createElement('h5');
901
+ afternoonTitle.className = 'font-medium text-gray-700 mb-2';
902
+ afternoonTitle.textContent = 'Après-midi';
903
+ timeSlotsContainer.appendChild(afternoonTitle);
904
+
905
+ const afternoonGrid = document.createElement('div');
906
+ afternoonGrid.className = 'grid grid-cols-2 gap-2';
907
+
908
+ afternoonSlots.forEach(time => {
909
+ const slot = createTimeSlot(time);
910
+ afternoonGrid.appendChild(slot);
911
+ });
912
+
913
+ timeSlotsContainer.appendChild(afternoonGrid);
914
+ }
915
+
916
+ function createTimeSlot(time) {
917
+ const slot = document.createElement('button');
918
+ slot.className = 'time-slot py-2 px-3 rounded border text-sm';
919
+
920
+ // Randomly mark some slots as booked
921
+ const isBooked = Math.random() > 0.7;
922
+ if (isBooked) {
923
+ slot.classList.add('booked', 'bg-gray-100', 'text-gray-400', 'border-gray-200');
924
+ slot.textContent = `${time} (Complet)`;
925
+ slot.disabled = true;
926
+ } else {
927
+ slot.classList.add('bg-white', 'border-gray-300', 'hover:border-pink-300');
928
+ slot.textContent = time;
929
+
930
+ slot.addEventListener('click', function() {
931
+ // Remove selected class from all slots
932
+ document.querySelectorAll('.time-slot').forEach(s => {
933
+ s.classList.remove('bg-pink-500', 'text-white', 'border-pink-500');
934
+ });
935
+
936
+ // Add selected class to clicked slot
937
+ this.classList.add('bg-pink-500', 'text-white', 'border-pink-500');
938
+
939
+ // Set selected time
940
+ selectedTime = time;
941
+ document.getElementById('selected-time').textContent = time;
942
+ document.getElementById('confirm-time').textContent = time;
943
+
944
+ // Enable next button
945
+ document.getElementById('next-to-step-3').disabled = false;
946
+ });
947
+ }
948
+
949
+ return slot;
950
+ }
951
+
952
+ // Handle form submission
953
+ document.getElementById('booking-form').addEventListener('submit', function(e) {
954
+ e.preventDefault();
955
+
956
+ // In a real app, this would send data to a server
957
+ console.log('Booking submitted:', {
958
+ service: selectedService,
959
+ date: selectedDate,
960
+ time: selectedTime,
961
+ client: {
962
+ name: document.getElementById('client-name').value,
963
+ email: document.getElementById('client-email').value,
964
+ phone: document.getElementById('client-phone').value,
965
+ notes: document.getElementById('client-notes').value
966
+ }
967
+ });
968
+
969
+ // Show success modal
970
+ bookingModal.classList.add('hidden');
971
+ successModal.classList.remove('hidden');
972
+
973
+ // Reset form for next booking
974
+ setTimeout(() => {
975
+ closeModals();
976
+ resetBookingForm();
977
+ }, 3000);
978
+ });
979
+
980
+ // Reset booking form
981
+ function resetBookingForm() {
982
+ selectedService = null;
983
+ selectedDate = null;
984
+ selectedTime = null;
985
+
986
+ // Reset step 1
987
+ serviceOptions.forEach(opt => {
988
+ opt.classList.remove('border-pink-300', 'border-amber-300', 'border-purple-300',
989
+ 'border-blue-300', 'border-green-300', 'border-indigo-300');
990
+ opt.classList.add('border-transparent');
991
+ });
992
+ document.getElementById('next-to-step-2').disabled = true;
993
+
994
+ // Reset step 2
995
+ document.getElementById('selected-service').textContent = 'Aucun service sélectionné';
996
+ document.getElementById('selected-date').textContent = 'Aucune date sélectionnée';
997
+ document.getElementById('selected-time').textContent = 'Aucun horaire sélectionné';
998
+ document.getElementById('next-to-step-3').disabled = true;
999
+
1000
+ // Reset step 3
1001
+ document.getElementById('confirm-service').textContent = '-';
1002
+ document.getElementById('confirm-date').textContent = '-';
1003
+ document.getElementById('confirm-time').textContent = '-';
1004
+ document.getElementById('confirm-price').textContent = '-';
1005
+ document.getElementById('booking-form').reset();
1006
+
1007
+ // Go back to step 1
1008
+ document.getElementById('step-2').classList.add('hidden');
1009
+ document.getElementById('step-3').classList.add('hidden');
1010
+ document.getElementById('step-1').classList.remove('hidden');
1011
+ updateStep(1);
1012
+ }
1013
+ </script>
1014
+ <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>
1015
+ </html>