Hugging Face's logo

Spaces:
WhinkCoder1991
/
client-jobs
Running

App Files Community
WhinkCoder1991 commited on
Commit
b646222
·
verified ·
1 Parent(s): 5ae80dd

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +702 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Client Jobs
3
- emoji: 📊
4
- colorFrom: green
5
- colorTo: green
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: client-jobs
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
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,702 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Curlperfection - Book Your Perfect Hair Appointment</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #faf7f2;
15
+ }
16
+
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, #f5e6d8 0%, #e8c4c4 100%);
19
+ }
20
+
21
+ .service-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
24
+ }
25
+
26
+ .booking-form {
27
+ box-shadow: 0 5px 30px rgba(0,0,0,0.08);
28
+ }
29
+
30
+ .time-slot:hover {
31
+ background-color: #e8c4c4;
32
+ color: white;
33
+ }
34
+
35
+ .selected-time {
36
+ background-color: #d4a59a;
37
+ color: white;
38
+ }
39
+
40
+ .stylist-card:hover img {
41
+ transform: scale(1.05);
42
+ }
43
+
44
+ .scroll-hidden::-webkit-scrollbar {
45
+ display: none;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body>
50
+ <!-- Header/Navigation -->
51
+ <header class="bg-white shadow-sm sticky top-0 z-50">
52
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
53
+ <div class="flex items-center">
54
+ <i class="fas fa-scissors text-2xl text-amber-900 mr-2"></i>
55
+ <h1 class="text-2xl font-bold text-amber-900">Curlperfection</h1>
56
+ </div>
57
+ <nav class="hidden md:flex space-x-8">
58
+ <a href="#home" class="text-amber-900 hover:text-amber-700 font-medium">Home</a>
59
+ <a href="#services" class="text-amber-900 hover:text-amber-700 font-medium">Services</a>
60
+ <a href="#stylists" class="text-amber-900 hover:text-amber-700 font-medium">Stylists</a>
61
+ <a href="#booking" class="text-amber-900 hover:text-amber-700 font-medium">Book Now</a>
62
+ <a href="#contact" class="text-amber-900 hover:text-amber-700 font-medium">Contact</a>
63
+ </nav>
64
+ <button class="md:hidden text-amber-900">
65
+ <i class="fas fa-bars text-2xl"></i>
66
+ </button>
67
+ </div>
68
+ </header>
69
+
70
+ <!-- Hero Section -->
71
+ <section id="home" class="hero-gradient py-16 md:py-24">
72
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
73
+ <div class="md:w-1/2 mb-10 md:mb-0">
74
+ <h2 class="text-4xl md:text-5xl font-bold text-amber-900 mb-4">Perfect Curls, Perfect You</h2>
75
+ <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>
76
+ <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>
77
+ </div>
78
+ <div class="md:w-1/2 flex justify-center">
79
+ <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">
80
+ </div>
81
+ </div>
82
+ </section>
83
+
84
+ <!-- Services Section -->
85
+ <section id="services" class="py-16 bg-white">
86
+ <div class="container mx-auto px-4">
87
+ <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">Our Services</h2>
88
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
89
+ <!-- Service Card 1 -->
90
+ <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300">
91
+ <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4">
92
+ <i class="fas fa-spa text-2xl text-amber-800"></i>
93
+ </div>
94
+ <h3 class="text-xl font-bold text-amber-900 mb-2">Curl Definition</h3>
95
+ <p class="text-gray-600 mb-4">Enhance your natural curl pattern with our specialized techniques and products.</p>
96
+ <p class="text-amber-800 font-medium">From $75</p>
97
+ </div>
98
+
99
+ <!-- Service Card 2 -->
100
+ <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300">
101
+ <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4">
102
+ <i class="fas fa-cut text-2xl text-amber-800"></i>
103
+ </div>
104
+ <h3 class="text-xl font-bold text-amber-900 mb-2">Curly Haircut</h3>
105
+ <p class="text-gray-600 mb-4">Precision dry cutting to maintain your curl shape and remove damaged ends.</p>
106
+ <p class="text-amber-800 font-medium">From $65</p>
107
+ </div>
108
+
109
+ <!-- Service Card 3 -->
110
+ <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300">
111
+ <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4">
112
+ <i class="fas fa-paint-brush text-2xl text-amber-800"></i>
113
+ </div>
114
+ <h3 class="text-xl font-bold text-amber-900 mb-2">Color & Highlights</h3>
115
+ <p class="text-gray-600 mb-4">Curl-friendly coloring techniques that won't compromise your hair health.</p>
116
+ <p class="text-amber-800 font-medium">From $90</p>
117
+ </div>
118
+
119
+ <!-- Service Card 4 -->
120
+ <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300">
121
+ <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4">
122
+ <i class="fas fa-magic text-2xl text-amber-800"></i>
123
+ </div>
124
+ <h3 class="text-xl font-bold text-amber-900 mb-2">Deep Conditioning</h3>
125
+ <p class="text-gray-600 mb-4">Intensive moisture treatment to revive dry, damaged curls.</p>
126
+ <p class="text-amber-800 font-medium">From $45</p>
127
+ </div>
128
+
129
+ <!-- Service Card 5 -->
130
+ <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300">
131
+ <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4">
132
+ <i class="fas fa-child text-2xl text-amber-800"></i>
133
+ </div>
134
+ <h3 class="text-xl font-bold text-amber-900 mb-2">Kids Curly Care</h3>
135
+ <p class="text-gray-600 mb-4">Gentle treatments and cuts designed specifically for young curls.</p>
136
+ <p class="text-amber-800 font-medium">From $55</p>
137
+ </div>
138
+
139
+ <!-- Service Card 6 -->
140
+ <div class="service-card bg-white rounded-xl p-6 shadow-md transition duration-300">
141
+ <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4">
142
+ <i class="fas fa-star text-2xl text-amber-800"></i>
143
+ </div>
144
+ <h3 class="text-xl font-bold text-amber-900 mb-2">Special Occasion</h3>
145
+ <p class="text-gray-600 mb-4">Styled curls for weddings, proms, and other special events.</p>
146
+ <p class="text-amber-800 font-medium">From $85</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Stylists Section -->
153
+ <section id="stylists" class="py-16 bg-amber-50">
154
+ <div class="container mx-auto px-4">
155
+ <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">Meet Our Stylists</h2>
156
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
157
+ <!-- Stylist 1 -->
158
+ <div class="stylist-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
159
+ <div class="overflow-hidden h-64">
160
+ <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">
161
+ </div>
162
+ <div class="p-6">
163
+ <h3 class="text-xl font-bold text-amber-900 mb-1">Maria Rodriguez</h3>
164
+ <p class="text-amber-700 font-medium mb-3">Curl Specialist</p>
165
+ <p class="text-gray-600 mb-4">With 10 years of experience, Maria specializes in curly haircuts and curl definition treatments.</p>
166
+ <div class="flex space-x-2">
167
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Dry Cutting</span>
168
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">DevaCut</span>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Stylist 2 -->
174
+ <div class="stylist-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
175
+ <div class="overflow-hidden h-64">
176
+ <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">
177
+ </div>
178
+ <div class="p-6">
179
+ <h3 class="text-xl font-bold text-amber-900 mb-1">Jamal Williams</h3>
180
+ <p class="text-amber-700 font-medium mb-3">Color Expert</p>
181
+ <p class="text-gray-600 mb-4">Jamal is our curl color specialist, creating beautiful dimensional color that enhances your natural texture.</p>
182
+ <div class="flex space-x-2">
183
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Balayage</span>
184
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Color Correction</span>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Stylist 3 -->
190
+ <div class="stylist-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
191
+ <div class="overflow-hidden h-64">
192
+ <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">
193
+ </div>
194
+ <div class="p-6">
195
+ <h3 class="text-xl font-bold text-amber-900 mb-1">Sophia Chen</h3>
196
+ <p class="text-amber-700 font-medium mb-3">Texture Specialist</p>
197
+ <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>
198
+ <div class="flex space-x-2">
199
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Education</span>
200
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Treatments</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <!-- Booking Section -->
209
+ <section id="booking" class="py-16 bg-white">
210
+ <div class="container mx-auto px-4">
211
+ <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">Book Your Appointment</h2>
212
+
213
+ <div class="max-w-4xl mx-auto bg-white rounded-xl booking-form overflow-hidden">
214
+ <div class="md:flex">
215
+ <!-- Booking Steps -->
216
+ <div class="md:w-1/3 bg-amber-50 p-6">
217
+ <div class="flex items-center mb-8">
218
+ <div class="w-8 h-8 rounded-full bg-amber-800 text-white flex items-center justify-center font-bold mr-3">1</div>
219
+ <h3 class="font-medium text-amber-900">Service Selection</h3>
220
+ </div>
221
+ <div class="flex items-center mb-8">
222
+ <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>
223
+ <h3 class="font-medium text-gray-500">Stylist & Date</h3>
224
+ </div>
225
+ <div class="flex items-center mb-8">
226
+ <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>
227
+ <h3 class="font-medium text-gray-500">Time Selection</h3>
228
+ </div>
229
+ <div class="flex items-center">
230
+ <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>
231
+ <h3 class="font-medium text-gray-500">Your Details</h3>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Booking Form -->
236
+ <div class="md:w-2/3 p-6">
237
+ <h3 class="text-xl font-bold text-amber-900 mb-6">Select Your Service</h3>
238
+
239
+ <div class="mb-6">
240
+ <label class="block text-gray-700 font-medium mb-2">Service Category</label>
241
+ <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">
242
+ <option value="">Select a category</option>
243
+ <option value="cuts">Haircuts</option>
244
+ <option value="color">Color Services</option>
245
+ <option value="treatments">Treatments</option>
246
+ <option value="styling">Styling</option>
247
+ </select>
248
+ </div>
249
+
250
+ <div class="mb-6">
251
+ <label class="block text-gray-700 font-medium mb-2">Specific Service</label>
252
+ <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>
253
+ <option value="">Select a category first</option>
254
+ </select>
255
+ </div>
256
+
257
+ <div class="flex justify-end">
258
+ <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>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </section>
265
+
266
+ <!-- Testimonials -->
267
+ <section class="py-16 bg-amber-50">
268
+ <div class="container mx-auto px-4">
269
+ <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">What Our Clients Say</h2>
270
+
271
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
272
+ <!-- Testimonial 1 -->
273
+ <div class="bg-white p-6 rounded-xl shadow-md">
274
+ <div class="flex items-center mb-4">
275
+ <div class="text-amber-500 mr-2">
276
+ <i class="fas fa-star"></i>
277
+ <i class="fas fa-star"></i>
278
+ <i class="fas fa-star"></i>
279
+ <i class="fas fa-star"></i>
280
+ <i class="fas fa-star"></i>
281
+ </div>
282
+ </div>
283
+ <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>
284
+ <div class="flex items-center">
285
+ <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">
286
+ <div>
287
+ <h4 class="font-medium text-amber-900">Sarah J.</h4>
288
+ <p class="text-sm text-gray-500">Regular Client</p>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Testimonial 2 -->
294
+ <div class="bg-white p-6 rounded-xl shadow-md">
295
+ <div class="flex items-center mb-4">
296
+ <div class="text-amber-500 mr-2">
297
+ <i class="fas fa-star"></i>
298
+ <i class="fas fa-star"></i>
299
+ <i class="fas fa-star"></i>
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star"></i>
302
+ </div>
303
+ </div>
304
+ <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>
305
+ <div class="flex items-center">
306
+ <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">
307
+ <div>
308
+ <h4 class="font-medium text-amber-900">Michael T.</h4>
309
+ <p class="text-sm text-gray-500">New Client</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Testimonial 3 -->
315
+ <div class="bg-white p-6 rounded-xl shadow-md">
316
+ <div class="flex items-center mb-4">
317
+ <div class="text-amber-500 mr-2">
318
+ <i class="fas fa-star"></i>
319
+ <i class="fas fa-star"></i>
320
+ <i class="fas fa-star"></i>
321
+ <i class="fas fa-star"></i>
322
+ <i class="fas fa-star"></i>
323
+ </div>
324
+ </div>
325
+ <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>
326
+ <div class="flex items-center">
327
+ <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">
328
+ <div>
329
+ <h4 class="font-medium text-amber-900">Lisa P.</h4>
330
+ <p class="text-sm text-gray-500">Parent</p>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- Contact Section -->
339
+ <section id="contact" class="py-16 bg-white">
340
+ <div class="container mx-auto px-4">
341
+ <div class="max-w-4xl mx-auto bg-amber-50 rounded-xl overflow-hidden shadow-md">
342
+ <div class="md:flex">
343
+ <div class="md:w-1/2 p-8">
344
+ <h2 class="text-2xl font-bold text-amber-900 mb-6">Contact Us</h2>
345
+ <div class="mb-6">
346
+ <div class="flex items-center mb-4">
347
+ <i class="fas fa-map-marker-alt text-amber-800 mr-3"></i>
348
+ <p class="text-gray-700">123 Curly Street, Hairville, HV 12345</p>
349
+ </div>
350
+ <div class="flex items-center mb-4">
351
+ <i class="fas fa-phone-alt text-amber-800 mr-3"></i>
352
+ <p class="text-gray-700">(555) 123-4567</p>
353
+ </div>
354
+ <div class="flex items-center">
355
+ <i class="fas fa-envelope text-amber-800 mr-3"></i>
356
+ <p class="text-gray-700">hello@curlperfection.com</p>
357
+ </div>
358
+ </div>
359
+ <div class="flex space-x-4">
360
+ <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">
361
+ <i class="fab fa-instagram"></i>
362
+ </a>
363
+ <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">
364
+ <i class="fab fa-facebook-f"></i>
365
+ </a>
366
+ <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">
367
+ <i class="fab fa-tiktok"></i>
368
+ </a>
369
+ </div>
370
+ </div>
371
+ <div class="md:w-1/2 p-8 bg-white">
372
+ <h3 class="text-xl font-bold text-amber-900 mb-6">Send Us a Message</h3>
373
+ <form>
374
+ <div class="mb-4">
375
+ <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">
376
+ </div>
377
+ <div class="mb-4">
378
+ <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">
379
+ </div>
380
+ <div class="mb-4">
381
+ <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>
382
+ </div>
383
+ <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>
384
+ </form>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </section>
390
+
391
+ <!-- Footer -->
392
+ <footer class="bg-amber-900 text-white py-8">
393
+ <div class="container mx-auto px-4">
394
+ <div class="flex flex-col md:flex-row justify-between items-center">
395
+ <div class="mb-6 md:mb-0">
396
+ <div class="flex items-center">
397
+ <i class="fas fa-scissors text-2xl text-amber-200 mr-2"></i>
398
+ <h2 class="text-2xl font-bold text-amber-200">Curlperfection</h2>
399
+ </div>
400
+ <p class="text-amber-200 mt-2">Specializing in curly hair care since 2015</p>
401
+ </div>
402
+ <div class="flex flex-col items-center md:items-end">
403
+ <p class="text-amber-200 mb-2">© 2023 Curlperfection. All rights reserved.</p>
404
+ <div class="flex space-x-4">
405
+ <a href="#" class="text-amber-200 hover:text-white">Privacy Policy</a>
406
+ <a href="#" class="text-amber-200 hover:text-white">Terms of Service</a>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </footer>
412
+
413
+ <!-- Booking Modal (hidden by default) -->
414
+ <div id="bookingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
415
+ <div class="bg-white rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto scroll-hidden">
416
+ <div class="p-6">
417
+ <div class="flex justify-between items-center mb-6">
418
+ <h3 class="text-2xl font-bold text-amber-900">Complete Your Booking</h3>
419
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
420
+ <i class="fas fa-times text-2xl"></i>
421
+ </button>
422
+ </div>
423
+
424
+ <!-- Step 2: Stylist & Date -->
425
+ <div id="step2" class="hidden">
426
+ <div class="mb-6">
427
+ <label class="block text-gray-700 font-medium mb-2">Select Stylist</label>
428
+ <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">
429
+ <option value="">Any available stylist</option>
430
+ <option value="maria">Maria Rodriguez</option>
431
+ <option value="jamal">Jamal Williams</option>
432
+ <option value="sophia">Sophia Chen</option>
433
+ </select>
434
+ </div>
435
+
436
+ <div class="mb-6">
437
+ <label class="block text-gray-700 font-medium mb-2">Select Date</label>
438
+ <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">
439
+ </div>
440
+
441
+ <div class="flex justify-between">
442
+ <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>
443
+ <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>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Step 3: Time Selection -->
448
+ <div id="step3" class="hidden">
449
+ <h4 class="text-lg font-medium text-gray-700 mb-4">Available Time Slots</h4>
450
+ <div class="grid grid-cols-3 sm:grid-cols-4 gap-3 mb-6">
451
+ <!-- Time slots will be generated by JavaScript -->
452
+ <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>
453
+ <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>
454
+ <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>
455
+ <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>
456
+ <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>
457
+ <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>
458
+ </div>
459
+
460
+ <div class="flex justify-between">
461
+ <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>
462
+ <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>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Step 4: Client Details -->
467
+ <div id="step4" class="hidden">
468
+ <div class="mb-4">
469
+ <label class="block text-gray-700 font-medium mb-2">Full Name</label>
470
+ <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">
471
+ </div>
472
+ <div class="mb-4">
473
+ <label class="block text-gray-700 font-medium mb-2">Email</label>
474
+ <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">
475
+ </div>
476
+ <div class="mb-4">
477
+ <label class="block text-gray-700 font-medium mb-2">Phone Number</label>
478
+ <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">
479
+ </div>
480
+ <div class="mb-6">
481
+ <label class="block text-gray-700 font-medium mb-2">Special Requests (Optional)</label>
482
+ <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>
483
+ </div>
484
+
485
+ <div class="flex justify-between">
486
+ <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>
487
+ <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>
488
+ </div>
489
+ </div>
490
+
491
+ <!-- Confirmation -->
492
+ <div id="confirmation" class="hidden text-center py-8">
493
+ <div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6">
494
+ <i class="fas fa-check text-3xl text-amber-800"></i>
495
+ </div>
496
+ <h3 class="text-2xl font-bold text-amber-900 mb-3">Booking Confirmed!</h3>
497
+ <p class="text-gray-600 mb-6">Thank you for booking with Curlperfection. We've sent the details to your email.</p>
498
+ <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>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <script>
505
+ // Service data
506
+ const services = {
507
+ cuts: [
508
+ { name: "Curly Haircut", price: 65, duration: 60 },
509
+ { name: "Kids Curly Cut", price: 55, duration: 45 },
510
+ { name: "Bang Trim", price: 15, duration: 15 },
511
+ { name: "DevaCut", price: 85, duration: 90 }
512
+ ],
513
+ color: [
514
+ { name: "Full Color", price: 90, duration: 120 },
515
+ { name: "Root Touch Up", price: 65, duration: 90 },
516
+ { name: "Balayage", price: 120, duration: 150 },
517
+ { name: "Highlights", price: 100, duration: 120 }
518
+ ],
519
+ treatments: [
520
+ { name: "Deep Conditioning", price: 45, duration: 30 },
521
+ { name: "Protein Treatment", price: 55, duration: 45 },
522
+ { name: "Scalp Treatment", price: 40, duration: 30 }
523
+ ],
524
+ styling: [
525
+ { name: "Curl Definition", price: 75, duration: 60 },
526
+ { name: "Blowout", price: 60, duration: 45 },
527
+ { name: "Special Occasion", price: 85, duration: 90 },
528
+ { name: "Bridal Styling", price: 120, duration: 120 }
529
+ ]
530
+ };
531
+
532
+ // DOM Elements
533
+ const serviceCategory = document.getElementById('serviceCategory');
534
+ const specificService = document.getElementById('specificService');
535
+ const nextStep1 = document.getElementById('nextStep1');
536
+ const bookingModal = document.getElementById('bookingModal');
537
+ const closeModal = document.getElementById('closeModal');
538
+ const step2 = document.getElementById('step2');
539
+ const step3 = document.getElementById('step3');
540
+ const step4 = document.getElementById('step4');
541
+ const confirmation = document.getElementById('confirmation');
542
+ const backStep1 = document.getElementById('backStep1');
543
+ const nextStep2 = document.getElementById('nextStep2');
544
+ const backStep2 = document.getElementById('backStep2');
545
+ const nextStep3 = document.getElementById('nextStep3');
546
+ const backStep3 = document.getElementById('backStep3');
547
+ const confirmBooking = document.getElementById('confirmBooking');
548
+ const closeConfirmation = document.getElementById('closeConfirmation');
549
+ const timeSlots = document.querySelectorAll('.time-slot');
550
+
551
+ // Current booking data
552
+ let bookingData = {
553
+ service: null,
554
+ stylist: null,
555
+ date: null,
556
+ time: null,
557
+ client: {
558
+ name: '',
559
+ email: '',
560
+ phone: '',
561
+ requests: ''
562
+ }
563
+ };
564
+
565
+ // Event Listeners
566
+ serviceCategory.addEventListener('change', function() {
567
+ const category = this.value;
568
+ specificService.disabled = !category;
569
+
570
+ if (category) {
571
+ specificService.innerHTML = '<option value="">Select a service</option>';
572
+ services[category].forEach(service => {
573
+ const option = document.createElement('option');
574
+ option.value = service.name.toLowerCase().replace(/\s+/g, '-');
575
+ option.textContent = `${service.name} (${service.duration} min) - $${service.price}`;
576
+ specificService.appendChild(option);
577
+ });
578
+ } else {
579
+ specificService.innerHTML = '<option value="">Select a category first</option>';
580
+ }
581
+ });
582
+
583
+ nextStep1.addEventListener('click', function() {
584
+ if (specificService.value) {
585
+ bookingData.service = specificService.options[specificService.selectedIndex].text;
586
+ openBookingModal();
587
+ showStep(2);
588
+ } else {
589
+ alert('Please select a service');
590
+ }
591
+ });
592
+
593
+ closeModal.addEventListener('click', closeBookingModal);
594
+ closeConfirmation.addEventListener('click', closeBookingModal);
595
+
596
+ nextStep2.addEventListener('click', function() {
597
+ const stylistSelect = document.getElementById('stylistSelect');
598
+ const bookingDate = document.getElementById('bookingDate');
599
+
600
+ if (!bookingDate.value) {
601
+ alert('Please select a date');
602
+ return;
603
+ }
604
+
605
+ bookingData.stylist = stylistSelect.value ? stylistSelect.options[stylistSelect.selectedIndex].text : 'Any available stylist';
606
+ bookingData.date = bookingDate.value;
607
+ showStep(3);
608
+ });
609
+
610
+ nextStep3.addEventListener('click', function() {
611
+ const selectedTime = document.querySelector('.time-slot.selected-time');
612
+
613
+ if (!selectedTime) {
614
+ alert('Please select a time slot');
615
+ return;
616
+ }
617
+
618
+ bookingData.time = selectedTime.textContent;
619
+ showStep(4);
620
+ });
621
+
622
+ confirmBooking.addEventListener('click', function() {
623
+ bookingData.client.name = document.getElementById('clientName').value;
624
+ bookingData.client.email = document.getElementById('clientEmail').value;
625
+ bookingData.client.phone = document.getElementById('clientPhone').value;
626
+ bookingData.client.requests = document.getElementById('specialRequests').value;
627
+
628
+ if (!bookingData.client.name || !bookingData.client.email || !bookingData.client.phone) {
629
+ alert('Please fill in all required fields');
630
+ return;
631
+ }
632
+
633
+ // In a real app, you would send this data to your backend
634
+ console.log('Booking confirmed:', bookingData);
635
+
636
+ showConfirmation();
637
+ });
638
+
639
+ backStep1.addEventListener('click', function() {
640
+ showStep(1);
641
+ closeBookingModal();
642
+ });
643
+
644
+ backStep2.addEventListener('click', function() {
645
+ showStep(2);
646
+ });
647
+
648
+ backStep3.addEventListener('click', function() {
649
+ showStep(3);
650
+ });
651
+
652
+ timeSlots.forEach(slot => {
653
+ slot.addEventListener('click', function() {
654
+ document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected-time'));
655
+ this.classList.add('selected-time');
656
+ });
657
+ });
658
+
659
+ // Functions
660
+ function openBookingModal() {
661
+ bookingModal.classList.remove('hidden');
662
+ document.body.style.overflow = 'hidden';
663
+ }
664
+
665
+ function closeBookingModal() {
666
+ bookingModal.classList.add('hidden');
667
+ document.body.style.overflow = 'auto';
668
+ }
669
+
670
+ function showStep(stepNumber) {
671
+ // Hide all steps
672
+ [step2, step3, step4, confirmation].forEach(step => step.classList.add('hidden'));
673
+
674
+ // Show the requested step
675
+ if (stepNumber === 2) step2.classList.remove('hidden');
676
+ if (stepNumber === 3) step3.classList.remove('hidden');
677
+ if (stepNumber === 4) step4.classList.remove('hidden');
678
+ }
679
+
680
+ function showConfirmation() {
681
+ // Hide all steps
682
+ [step2, step3, step4].forEach(step => step.classList.add('hidden'));
683
+
684
+ // Show confirmation
685
+ confirmation.classList.remove('hidden');
686
+ }
687
+
688
+ // Initialize date picker with tomorrow as minimum date
689
+ document.addEventListener('DOMContentLoaded', function() {
690
+ const today = new Date();
691
+ const tomorrow = new Date(today);
692
+ tomorrow.setDate(tomorrow.getDate() + 1);
693
+
694
+ const dd = String(tomorrow.getDate()).padStart(2, '0');
695
+ const mm = String(tomorrow.getMonth() + 1).padStart(2, '0');
696
+ const yyyy = tomorrow.getFullYear();
697
+
698
+ document.getElementById('bookingDate').min = `${yyyy}-${mm}-${dd}`;
699
+ });
700
+ </script>
701
+ <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>
702
+ </html>
prompts.txt ADDED
File without changes