Hugging Face's logo

Spaces:
Hairitics
/
glamai
Running

App Files Community
Hairitics commited on
Commit
74aa53e
·
verified ·
1 Parent(s): eb1ba5a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +804 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Glamai
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: pink
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: glamai
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,804 @@
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>GlamAI - AI-Powered Beauty Salon</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5d0fe 0%, #c4b5fd 50%, #a5b4fc 100%);
12
+ }
13
+ .service-card:hover {
14
+ transform: translateY(-10px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .ai-pulse {
18
+ animation: pulse 2s infinite;
19
+ }
20
+ @keyframes pulse {
21
+ 0% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.7); }
22
+ 70% { box-shadow: 0 0 0 10px rgba(165, 180, 252, 0); }
23
+ 100% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0); }
24
+ }
25
+ .virtual-tryon {
26
+ background: rgba(255, 255, 255, 0.2);
27
+ backdrop-filter: blur(10px);
28
+ border-radius: 20px;
29
+ }
30
+ .hair-section {
31
+ background: url('https://images.unsplash.com/photo-1605497788044-5a32c7078486?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') no-repeat center center;
32
+ background-size: cover;
33
+ position: relative;
34
+ }
35
+ .hair-section::before {
36
+ content: '';
37
+ position: absolute;
38
+ top: 0;
39
+ left: 0;
40
+ right: 0;
41
+ bottom: 0;
42
+ background: rgba(0, 0, 0, 0.6);
43
+ }
44
+ .color-section {
45
+ background: url('https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') no-repeat center center;
46
+ background-size: cover;
47
+ position: relative;
48
+ }
49
+ .color-section::before {
50
+ content: '';
51
+ position: absolute;
52
+ top: 0;
53
+ left: 0;
54
+ right: 0;
55
+ bottom: 0;
56
+ background: rgba(99, 102, 241, 0.7);
57
+ }
58
+ .advanced-color-section {
59
+ background: url('https://images.unsplash.com/photo-1559599101-0ae7b1ca6eaf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') no-repeat center center;
60
+ background-size: cover;
61
+ position: relative;
62
+ }
63
+ .advanced-color-section::before {
64
+ content: '';
65
+ position: absolute;
66
+ top: 0;
67
+ left: 0;
68
+ right: 0;
69
+ bottom: 0;
70
+ background: rgba(124, 58, 237, 0.7);
71
+ }
72
+ .cutting-section {
73
+ background: url('https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') no-repeat center center;
74
+ background-size: cover;
75
+ position: relative;
76
+ }
77
+ .cutting-section::before {
78
+ content: '';
79
+ position: absolute;
80
+ top: 0;
81
+ left: 0;
82
+ right: 0;
83
+ bottom: 0;
84
+ background: rgba(16, 185, 129, 0.7);
85
+ }
86
+ .section-content {
87
+ position: relative;
88
+ z-index: 10;
89
+ }
90
+ </style>
91
+ </head>
92
+ <body class="font-sans antialiased text-gray-800">
93
+ <!-- Header -->
94
+ <header class="gradient-bg text-white sticky top-0 z-50">
95
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
96
+ <div class="flex items-center space-x-2">
97
+ <i class="fas fa-spa text-3xl"></i>
98
+ <h1 class="text-2xl font-bold">Glam<span class="text-indigo-800">AI</span></h1>
99
+ </div>
100
+ <nav class="hidden md:flex space-x-8">
101
+ <a href="#home" class="hover:text-indigo-800 font-medium">Home</a>
102
+ <a href="#hairstyling" class="hover:text-indigo-800 font-medium">Hairstyling</a>
103
+ <a href="#coloring" class="hover:text-indigo-800 font-medium">Coloring</a>
104
+ <a href="#advanced-color" class="hover:text-indigo-800 font-medium">Advanced Color</a>
105
+ <a href="#cutting" class="hover:text-indigo-800 font-medium">Hair Cutting</a>
106
+ <a href="#ai" class="hover:text-indigo-800 font-medium">AI Features</a>
107
+ <a href="#contact" class="hover:text-indigo-800 font-medium">Contact</a>
108
+ </nav>
109
+ <button class="md:hidden text-2xl" id="menu-toggle">
110
+ <i class="fas fa-bars"></i>
111
+ </button>
112
+ <div class="hidden md:block">
113
+ <button class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-2 rounded-full font-medium transition duration-300">
114
+ Book Now
115
+ </button>
116
+ </div>
117
+ </div>
118
+ <!-- Mobile Menu -->
119
+ <div class="md:hidden hidden bg-white text-gray-800 py-4 px-4 absolute w-full" id="mobile-menu">
120
+ <a href="#home" class="block py-2 hover:text-indigo-800">Home</a>
121
+ <a href="#hairstyling" class="block py-2 hover:text-indigo-800">Hairstyling</a>
122
+ <a href="#coloring" class="block py-2 hover:text-indigo-800">Coloring</a>
123
+ <a href="#advanced-color" class="block py-2 hover:text-indigo-800">Advanced Color</a>
124
+ <a href="#cutting" class="block py-2 hover:text-indigo-800">Hair Cutting</a>
125
+ <a href="#ai" class="block py-2 hover:text-indigo-800">AI Features</a>
126
+ <a href="#contact" class="block py-2 hover:text-indigo-800">Contact</a>
127
+ <button class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-2 rounded-full font-medium mt-2 w-full">
128
+ Book Now
129
+ </button>
130
+ </div>
131
+ </header>
132
+
133
+ <!-- Hero Section -->
134
+ <section id="home" class="gradient-bg text-white py-20">
135
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
136
+ <div class="md:w-1/2 mb-10 md:mb-0">
137
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Experience <span class="text-indigo-800">AI-Powered</span> Beauty</h1>
138
+ <p class="text-xl mb-8">Our revolutionary AI technology analyzes your features to create personalized beauty treatments just for you.</p>
139
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
140
+ <button class="bg-indigo-800 hover:bg-indigo-900 text-white px-8 py-3 rounded-full font-medium transition duration-300">
141
+ Try Virtual Makeover
142
+ </button>
143
+ <button class="bg-white hover:bg-gray-100 text-indigo-800 px-8 py-3 rounded-full font-medium transition duration-300">
144
+ Book Consultation
145
+ </button>
146
+ </div>
147
+ </div>
148
+ <div class="md:w-1/2 relative">
149
+ <div class="relative">
150
+ <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
151
+ alt="AI Beauty Salon"
152
+ class="rounded-3xl shadow-2xl w-full max-w-md mx-auto">
153
+ <div class="absolute -bottom-5 -right-5 bg-indigo-800 text-white p-4 rounded-full ai-pulse">
154
+ <i class="fas fa-robot text-3xl"></i>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </section>
160
+
161
+ <!-- Hairstyling Section -->
162
+ <section id="hairstyling" class="hair-section py-20 text-white">
163
+ <div class="container mx-auto px-4 section-content">
164
+ <div class="text-center mb-16">
165
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">AI-Enhanced <span class="text-pink-300">Hairstyling</span></h2>
166
+ <p class="text-xl max-w-3xl mx-auto">Our AI analyzes your face shape, hair texture, and lifestyle to recommend perfect styles</p>
167
+ </div>
168
+
169
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
170
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20">
171
+ <div class="text-pink-300 text-4xl mb-4">
172
+ <i class="fas fa-wand-magic-sparkles"></i>
173
+ </div>
174
+ <h3 class="text-xl font-bold mb-3">Style Recommendations</h3>
175
+ <p>Our AI suggests hairstyles that complement your face shape, hair type, and personal style preferences.</p>
176
+ </div>
177
+
178
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20">
179
+ <div class="text-pink-300 text-4xl mb-4">
180
+ <i class="fas fa-arrows-spin"></i>
181
+ </div>
182
+ <h3 class="text-xl font-bold mb-3">Virtual Styling</h3>
183
+ <p>See how different styles will look on you before committing, with realistic 3D simulations.</p>
184
+ </div>
185
+
186
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20">
187
+ <div class="text-pink-300 text-4xl mb-4">
188
+ <i class="fas fa-clock-rotate-left"></i>
189
+ </div>
190
+ <h3 class="text-xl font-bold mb-3">Maintenance Planning</h3>
191
+ <p>Get personalized advice on how to maintain your style between salon visits.</p>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="mt-12 text-center">
196
+ <button class="bg-pink-300 hover:bg-pink-400 text-gray-900 px-8 py-3 rounded-full font-medium transition duration-300">
197
+ Book Hairstyling Consultation
198
+ </button>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- Hair Coloring Section -->
204
+ <section id="coloring" class="color-section py-20 text-white">
205
+ <div class="container mx-auto px-4 section-content">
206
+ <div class="text-center mb-16">
207
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Precision <span class="text-indigo-200">Hair Coloring</span></h2>
208
+ <p class="text-xl max-w-3xl mx-auto">AI-powered color matching for perfect shades every time</p>
209
+ </div>
210
+
211
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
212
+ <div>
213
+ <h3 class="text-2xl font-bold mb-6">Our Coloring Services</h3>
214
+ <div class="space-y-6">
215
+ <div class="flex items-start">
216
+ <div class="bg-indigo-200 text-indigo-800 p-2 rounded-full mr-4 mt-1">
217
+ <i class="fas fa-palette"></i>
218
+ </div>
219
+ <div>
220
+ <h4 class="font-bold text-lg">Single Process Color</h4>
221
+ <p>Full coverage color with AI-selected shades that complement your skin tone.</p>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="flex items-start">
226
+ <div class="bg-indigo-200 text-indigo-800 p-2 rounded-full mr-4 mt-1">
227
+ <i class="fas fa-sun"></i>
228
+ </div>
229
+ <div>
230
+ <h4 class="font-bold text-lg">Highlights & Lowlights</h4>
231
+ <p>Dimension-enhancing techniques placed strategically based on your facial features.</p>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="flex items-start">
236
+ <div class="bg-indigo-200 text-indigo-800 p-2 rounded-full mr-4 mt-1">
237
+ <i class="fas fa-spa"></i>
238
+ </div>
239
+ <div>
240
+ <h4 class="font-bold text-lg">Balayage & Ombré</h4>
241
+ <p>Hand-painted color techniques with AI-guided placement for optimal results.</p>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20">
248
+ <h3 class="text-xl font-bold mb-4">Try Our Virtual Color Studio</h3>
249
+ <p class="mb-6">Upload your photo to experiment with different colors before your appointment.</p>
250
+ <div class="bg-gray-200 bg-opacity-20 rounded-xl w-full h-40 flex items-center justify-center mb-6">
251
+ <div class="text-center">
252
+ <i class="fas fa-camera text-2xl text-white mb-2"></i>
253
+ <p class="text-white">Upload your photo</p>
254
+ </div>
255
+ </div>
256
+ <button class="bg-indigo-200 hover:bg-indigo-300 text-indigo-800 px-6 py-2 rounded-full font-medium w-full">
257
+ Try Color Now
258
+ </button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </section>
263
+
264
+ <!-- Advanced Color Techniques Section -->
265
+ <section id="advanced-color" class="advanced-color-section py-20 text-white">
266
+ <div class="container mx-auto px-4 section-content">
267
+ <div class="text-center mb-16">
268
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Advanced <span class="text-purple-200">Color Techniques</span></h2>
269
+ <p class="text-xl max-w-3xl mx-auto">Cutting-edge coloring methods enhanced by AI precision</p>
270
+ </div>
271
+
272
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
273
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-6 rounded-2xl border border-white border-opacity-20">
274
+ <div class="text-purple-200 text-3xl mb-3">
275
+ <i class="fas fa-water"></i>
276
+ </div>
277
+ <h3 class="text-lg font-bold mb-2">Color Melting</h3>
278
+ <p class="text-sm">Seamless blending of multiple shades for dimensional color.</p>
279
+ </div>
280
+
281
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-6 rounded-2xl border border-white border-opacity-20">
282
+ <div class="text-purple-200 text-3xl mb-3">
283
+ <i class="fas fa-fire"></i>
284
+ </div>
285
+ <h3 class="text-lg font-bold mb-2">Shadow Roots</h3>
286
+ <p class="text-sm">Low-maintenance color with soft root transitions.</p>
287
+ </div>
288
+
289
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-6 rounded-2xl border border-white border-opacity-20">
290
+ <div class="text-purple-200 text-3xl mb-3">
291
+ <i class="fas fa-moon"></i>
292
+ </div>
293
+ <h3 class="text-lg font-bold mb-2">Money Piece</h3>
294
+ <p class="text-sm">Face-framing highlights for maximum impact.</p>
295
+ </div>
296
+
297
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-6 rounded-2xl border border-white border-opacity-20">
298
+ <div class="text-purple-200 text-3xl mb-3">
299
+ <i class="fas fa-star"></i>
300
+ </div>
301
+ <h3 class="text-lg font-bold mb-2">Color Correction</h3>
302
+ <p class="text-sm">AI analysis to fix and perfect existing color.</p>
303
+ </div>
304
+ </div>
305
+
306
+ <div class="mt-12 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20 max-w-4xl mx-auto">
307
+ <div class="flex flex-col md:flex-row items-center">
308
+ <div class="md:w-2/3 mb-6 md:mb-0 md:pr-8">
309
+ <h3 class="text-xl font-bold mb-3">Color Consultation</h3>
310
+ <p>Our AI system analyzes your skin tone, eye color, and natural hair color to recommend the perfect shades and techniques for you.</p>
311
+ </div>
312
+ <div class="md:w-1/3">
313
+ <button class="bg-purple-200 hover:bg-purple-300 text-purple-800 px-6 py-3 rounded-full font-medium w-full">
314
+ Book Consultation
315
+ </button>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </section>
321
+
322
+ <!-- Hair Cutting Section -->
323
+ <section id="cutting" class="cutting-section py-20 text-white">
324
+ <div class="container mx-auto px-4 section-content">
325
+ <div class="flex flex-col md:flex-row items-center">
326
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-12">
327
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Precision <span class="text-emerald-200">Hair Cutting</span></h2>
328
+ <p class="text-xl mb-8">Our AI analyzes your hair type, growth patterns, and facial structure to recommend the perfect cut for you.</p>
329
+
330
+ <div class="space-y-6">
331
+ <div class="flex items-start">
332
+ <div class="bg-emerald-200 text-emerald-800 p-2 rounded-full mr-4 mt-1">
333
+ <i class="fas fa-ruler-combined"></i>
334
+ </div>
335
+ <div>
336
+ <h4 class="font-bold">Customized Layers</h4>
337
+ <p class="text-sm">Precisely placed layers based on your hair's natural movement.</p>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="flex items-start">
342
+ <div class="bg-emerald-200 text-emerald-800 p-2 rounded-full mr-4 mt-1">
343
+ <i class="fas fa-scissors"></i>
344
+ </div>
345
+ <div>
346
+ <h4 class="font-bold">Texturizing</h4>
347
+ <p class="text-sm">AI-guided texturizing for perfect volume and movement.</p>
348
+ </div>
349
+ </div>
350
+
351
+ <div class="flex items-start">
352
+ <div class="bg-emerald-200 text-emerald-800 p-2 rounded-full mr-4 mt-1">
353
+ <i class="fas fa-chart-line"></i>
354
+ </div>
355
+ <div>
356
+ <h4 class="font-bold">Growth Planning</h4>
357
+ <p class="text-sm">Predict how your cut will grow out with our growth simulator.</p>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <button class="mt-8 bg-emerald-200 hover:bg-emerald-300 text-emerald-800 px-8 py-3 rounded-full font-medium">
363
+ Book Cutting Service
364
+ </button>
365
+ </div>
366
+
367
+ <div class="md:w-1/2">
368
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20">
369
+ <h3 class="text-xl font-bold mb-4">Virtual Cut Preview</h3>
370
+ <p class="mb-6">See how different cuts will look on you before making the change.</p>
371
+
372
+ <div class="grid grid-cols-3 gap-4 mb-6">
373
+ <div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center">
374
+ <i class="fas fa-user text-xl"></i>
375
+ </div>
376
+ <div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center">
377
+ <i class="fas fa-user text-xl"></i>
378
+ </div>
379
+ <div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center">
380
+ <i class="fas fa-user text-xl"></i>
381
+ </div>
382
+ <div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center">
383
+ <i class="fas fa-user text-xl"></i>
384
+ </div>
385
+ <div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center">
386
+ <i class="fas fa-user text-xl"></i>
387
+ </div>
388
+ <div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center">
389
+ <i class="fas fa-plus text-xl"></i>
390
+ </div>
391
+ </div>
392
+
393
+ <div class="flex justify-between">
394
+ <button class="text-emerald-200 hover:text-emerald-300 font-medium">
395
+ <i class="fas fa-rotate-left mr-1"></i> Reset
396
+ </button>
397
+ <button class="text-emerald-200 hover:text-emerald-300 font-medium">
398
+ Save Look <i class="fas fa-save ml-1"></i>
399
+ </button>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </section>
406
+
407
+ <!-- AI Features Section -->
408
+ <section id="ai" class="py-20 bg-white">
409
+ <div class="container mx-auto px-4">
410
+ <div class="text-center mb-16">
411
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-indigo-800">AI Technology</span></h2>
412
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Revolutionizing beauty with artificial intelligence for personalized experiences</p>
413
+ </div>
414
+
415
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
416
+ <!-- Feature 1 -->
417
+ <div class="bg-gray-50 p-8 rounded-2xl transition duration-300 hover:shadow-xl">
418
+ <div class="bg-indigo-100 text-indigo-800 w-16 h-16 rounded-full flex items-center justify-center mb-6">
419
+ <i class="fas fa-face-scan text-2xl"></i>
420
+ </div>
421
+ <h3 class="text-xl font-bold mb-3">Facial Analysis</h3>
422
+ <p class="text-gray-600">Our AI scans your facial features to recommend the perfect hairstyle, makeup, and treatments tailored to your unique face shape.</p>
423
+ </div>
424
+
425
+ <!-- Feature 2 -->
426
+ <div class="bg-gray-50 p-8 rounded-2xl transition duration-300 hover:shadow-xl">
427
+ <div class="bg-indigo-100 text-indigo-800 w-16 h-16 rounded-full flex items-center justify-center mb-6">
428
+ <i class="fas fa-magic text-2xl"></i>
429
+ </div>
430
+ <h3 class="text-xl font-bold mb-3">Virtual Try-On</h3>
431
+ <p class="text-gray-600">Experiment with different looks virtually before committing. See how hair colors, cuts, and makeup will look on you instantly.</p>
432
+ </div>
433
+
434
+ <!-- Feature 3 -->
435
+ <div class="bg-gray-50 p-8 rounded-2xl transition duration-300 hover:shadow-xl">
436
+ <div class="bg-indigo-100 text-indigo-800 w-16 h-16 rounded-full flex items-center justify-center mb-6">
437
+ <i class="fas fa-brain text-2xl"></i>
438
+ </div>
439
+ <h3 class="text-xl font-bold mb-3">Skin Diagnosis</h3>
440
+ <p class="text-gray-600">Advanced AI analyzes your skin condition to recommend personalized skincare routines and treatments for optimal results.</p>
441
+ </div>
442
+ </div>
443
+
444
+ <!-- Virtual Try-On Demo -->
445
+ <div class="mt-20 virtual-tryon p-8 md:p-12">
446
+ <div class="flex flex-col md:flex-row items-center">
447
+ <div class="md:w-1/2 mb-8 md:mb-0">
448
+ <h3 class="text-2xl font-bold mb-4">Try Our Virtual Makeover</h3>
449
+ <p class="mb-6">Upload your photo and experiment with different looks powered by our AI technology.</p>
450
+ <div class="flex space-x-4">
451
+ <button class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-2 rounded-full font-medium transition duration-300">
452
+ Try Hair Color
453
+ </button>
454
+ <button class="bg-white hover:bg-gray-100 text-indigo-800 px-6 py-2 rounded-full font-medium transition duration-300 border border-indigo-800">
455
+ Try Makeup
456
+ </button>
457
+ </div>
458
+ </div>
459
+ <div class="md:w-1/2 relative">
460
+ <div class="bg-gray-200 rounded-xl w-full h-64 md:h-80 flex items-center justify-center">
461
+ <div class="text-center">
462
+ <i class="fas fa-camera text-4xl text-gray-400 mb-2"></i>
463
+ <p class="text-gray-500">Upload your photo to begin</p>
464
+ </div>
465
+ </div>
466
+ <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-full shadow-lg">
467
+ <i class="fas fa-arrow-rotate-right text-indigo-800 text-xl"></i>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </section>
474
+
475
+ <!-- Testimonials -->
476
+ <section class="py-20 bg-white">
477
+ <div class="container mx-auto px-4">
478
+ <div class="text-center mb-16">
479
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our <span class="text-indigo-800">Clients Say</span></h2>
480
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from people who've experienced our AI-powered beauty services</p>
481
+ </div>
482
+
483
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
484
+ <!-- Testimonial 1 -->
485
+ <div class="bg-gray-50 p-8 rounded-2xl">
486
+ <div class="flex items-center mb-4">
487
+ <div class="text-yellow-400 text-xl mr-2">
488
+ <i class="fas fa-star"></i>
489
+ <i class="fas fa-star"></i>
490
+ <i class="fas fa-star"></i>
491
+ <i class="fas fa-star"></i>
492
+ <i class="fas fa-star"></i>
493
+ </div>
494
+ </div>
495
+ <p class="text-gray-600 mb-6">"The AI hair color recommendation was spot on! I've never received so many compliments. The virtual try-on made me confident in my choice before committing."</p>
496
+ <div class="flex items-center">
497
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
498
+ <div>
499
+ <h4 class="font-bold">Sarah J.</h4>
500
+ <p class="text-gray-500 text-sm">Regular Client</p>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- Testimonial 2 -->
506
+ <div class="bg-gray-50 p-8 rounded-2xl">
507
+ <div class="flex items-center mb-4">
508
+ <div class="text-yellow-400 text-xl mr-2">
509
+ <i class="fas fa-star"></i>
510
+ <i class="fas fa-star"></i>
511
+ <i class="fas fa-star"></i>
512
+ <i class="fas fa-star"></i>
513
+ <i class="fas fa-star"></i>
514
+ </div>
515
+ </div>
516
+ <p class="text-gray-600 mb-6">"The skin analysis revealed issues I didn't even know I had. The personalized facial treatment made my skin glow like never before. Worth every penny!"</p>
517
+ <div class="flex items-center">
518
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Maria L." class="w-12 h-12 rounded-full mr-4">
519
+ <div>
520
+ <h4 class="font-bold">Maria L.</h4>
521
+ <p class="text-gray-500 text-sm">First-Time Client</p>
522
+ </div>
523
+ </div>
524
+ </div>
525
+
526
+ <!-- Testimonial 3 -->
527
+ <div class="bg-gray-50 p-8 rounded-2xl">
528
+ <div class="flex items-center mb-4">
529
+ <div class="text-yellow-400 text-xl mr-2">
530
+ <i class="fas fa-star"></i>
531
+ <i class="fas fa-star"></i>
532
+ <i class="fas fa-star"></i>
533
+ <i class="fas fa-star"></i>
534
+ <i class="fas fa-star-half-alt"></i>
535
+ </div>
536
+ </div>
537
+ <p class="text-gray-600 mb-6">"I was skeptical about AI in beauty, but the makeup recommendations perfectly matched my skin tone and features. The artist executed it beautifully."</p>
538
+ <div class="flex items-center">
539
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Emily T." class="w-12 h-12 rounded-full mr-4">
540
+ <div>
541
+ <h4 class="font-bold">Emily T.</h4>
542
+ <p class="text-gray-500 text-sm">Wedding Client</p>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </section>
549
+
550
+ <!-- Contact Section -->
551
+ <section id="contact" class="py-20 bg-white">
552
+ <div class="container mx-auto px-4">
553
+ <div class="text-center mb-16">
554
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In <span class="text-indigo-800">Touch</span></h2>
555
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Book your AI-powered beauty experience today</p>
556
+ </div>
557
+
558
+ <div class="flex flex-col md:flex-row">
559
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-8">
560
+ <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
561
+
562
+ <div class="flex items-start mb-6">
563
+ <div class="bg-indigo-100 text-indigo-800 p-3 rounded-full mr-4">
564
+ <i class="fas fa-map-marker-alt"></i>
565
+ </div>
566
+ <div>
567
+ <h4 class="font-bold">Location</h4>
568
+ <p class="text-gray-600">123 Beauty Avenue, Tech District, CA 90210</p>
569
+ </div>
570
+ </div>
571
+
572
+ <div class="flex items-start mb-6">
573
+ <div class="bg-indigo-100 text-indigo-800 p-3 rounded-full mr-4">
574
+ <i class="fas fa-phone-alt"></i>
575
+ </div>
576
+ <div>
577
+ <h4 class="font-bold">Phone</h4>
578
+ <p class="text-gray-600">(555) 123-4567</p>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="flex items-start mb-6">
583
+ <div class="bg-indigo-100 text-indigo-800 p-3 rounded-full mr-4">
584
+ <i class="fas fa-envelope"></i>
585
+ </div>
586
+ <div>
587
+ <h4 class="font-bold">Email</h4>
588
+ <p class="text-gray-600">[email protected]</p>
589
+ </div>
590
+ </div>
591
+
592
+ <div class="flex items-start">
593
+ <div class="bg-indigo-100 text-indigo-800 p-3 rounded-full mr-4">
594
+ <i class="fas fa-clock"></i>
595
+ </div>
596
+ <div>
597
+ <h4 class="font-bold">Hours</h4>
598
+ <p class="text-gray-600">Monday - Friday: 9am - 8pm</p>
599
+ <p class="text-gray-600">Saturday - Sunday: 10am - 6pm</p>
600
+ </div>
601
+ </div>
602
+ </div>
603
+
604
+ <div class="md:w-1/2">
605
+ <form class="bg-gray-50 p-8 rounded-2xl">
606
+ <h3 class="text-2xl font-bold mb-6">Book a Consultation</h3>
607
+
608
+ <div class="mb-4">
609
+ <label class="block text-gray-700 mb-2" for="name">Full Name</label>
610
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
611
+ </div>
612
+
613
+ <div class="mb-4">
614
+ <label class="block text-gray-700 mb-2" for="email">Email</label>
615
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
616
+ </div>
617
+
618
+ <div class="mb-4">
619
+ <label class="block text-gray-700 mb-2" for="phone">Phone</label>
620
+ <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
621
+ </div>
622
+
623
+ <div class="mb-4">
624
+ <label class="block text-gray-700 mb-2" for="service">Service</label>
625
+ <select id="service" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
626
+ <option>Select a service</option>
627
+ <option>AI Hair Styling</option>
628
+ <option>Smart Facial Treatment</option>
629
+ <option>Personalized Makeup</option>
630
+ <option>Virtual Try-On Consultation</option>
631
+ <option>Full AI Beauty Analysis</option>
632
+ </select>
633
+ </div>
634
+
635
+ <div class="mb-6">
636
+ <label class="block text-gray-700 mb-2" for="message">Special Requests</label>
637
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
638
+ </div>
639
+
640
+ <button type="submit" class="bg-indigo-800 hover:bg-indigo-900 text-white px-8 py-3 rounded-full font-medium w-full transition duration-300">
641
+ Book Now
642
+ </button>
643
+ </form>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </section>
648
+
649
+ <!-- Newsletter -->
650
+ <section class="py-16 bg-indigo-100">
651
+ <div class="container mx-auto px-4 text-center">
652
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">Join Our <span class="text-indigo-800">Beauty AI</span> Newsletter</h2>
653
+ <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Get exclusive tips, offers, and early access to our new AI beauty features.</p>
654
+
655
+ <div class="max-w-md mx-auto flex">
656
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
657
+ <button class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-3 rounded-r-full font-medium transition duration-300">
658
+ Subscribe
659
+ </button>
660
+ </div>
661
+ </div>
662
+ </section>
663
+
664
+ <!-- Footer -->
665
+ <footer class="bg-gray-900 text-white py-12">
666
+ <div class="container mx-auto px-4">
667
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
668
+ <div>
669
+ <div class="flex items-center space-x-2 mb-4">
670
+ <i class="fas fa-spa text-3xl"></i>
671
+ <h3 class="text-2xl font-bold">Glam<span class="text-indigo-400">AI</span></h3>
672
+ </div>
673
+ <p class="text-gray-400 mb-4">Revolutionizing beauty with artificial intelligence for personalized experiences.</p>
674
+ <div class="flex space-x-4">
675
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
676
+ <i class="fab fa-facebook-f"></i>
677
+ </a>
678
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
679
+ <i class="fab fa-instagram"></i>
680
+ </a>
681
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
682
+ <i class="fab fa-tiktok"></i>
683
+ </a>
684
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
685
+ <i class="fab fa-pinterest-p"></i>
686
+ </a>
687
+ </div>
688
+ </div>
689
+
690
+ <div>
691
+ <h4 class="text-lg font-bold mb-4">Services</h4>
692
+ <ul class="space-y-2">
693
+ <li><a href="#" class="text-gray-400 hover:text-white">AI Hair Styling</a></li>
694
+ <li><a href="#" class="text-gray-400 hover:text-white">Smart Facials</a></li>
695
+ <li><a href="#" class="text-gray-400 hover:text-white">Personalized Makeup</a></li>
696
+ <li><a href="#" class="text-gray-400 hover:text-white">Skin Analysis</a></li>
697
+ <li><a href="#" class="text-gray-400 hover:text-white">Virtual Try-On</a></li>
698
+ </ul>
699
+ </div>
700
+
701
+ <div>
702
+ <h4 class="text-lg font-bold mb-4">Company</h4>
703
+ <ul class="space-y-2">
704
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
705
+ <li><a href="#" class="text-gray-400 hover:text-white">Our Technology</a></li>
706
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
707
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
708
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
709
+ </ul>
710
+ </div>
711
+
712
+ <div>
713
+ <h4 class="text-lg font-bold mb-4">Support</h4>
714
+ <ul class="space-y-2">
715
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
716
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
717
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
718
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
719
+ <li><a href="#" class="text-gray-400 hover:text-white">Accessibility</a></li>
720
+ </ul>
721
+ </div>
722
+ </div>
723
+
724
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
725
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 GlamAI. All rights reserved.</p>
726
+ <div class="flex space-x-6">
727
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
728
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
729
+ <a href="#" class="text-gray-400 hover:text-white">Sitemap</a>
730
+ </div>
731
+ </div>
732
+ </div>
733
+ </footer>
734
+
735
+ <!-- Back to Top Button -->
736
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-indigo-800 text-white p-3 rounded-full shadow-lg hidden">
737
+ <i class="fas fa-arrow-up"></i>
738
+ </button>
739
+
740
+ <script>
741
+ // Mobile Menu Toggle
742
+ document.getElementById('menu-toggle').addEventListener('click', function() {
743
+ const menu = document.getElementById('mobile-menu');
744
+ menu.classList.toggle('hidden');
745
+ });
746
+
747
+ // Back to Top Button
748
+ const backToTopButton = document.getElementById('back-to-top');
749
+
750
+ window.addEventListener('scroll', function() {
751
+ if (window.pageYOffset > 300) {
752
+ backToTopButton.classList.remove('hidden');
753
+ } else {
754
+ backToTopButton.classList.add('hidden');
755
+ }
756
+ });
757
+
758
+ backToTopButton.addEventListener('click', function() {
759
+ window.scrollTo({ top: 0, behavior: 'smooth' });
760
+ });
761
+
762
+ // Smooth scrolling for anchor links
763
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
764
+ anchor.addEventListener('click', function(e) {
765
+ e.preventDefault();
766
+
767
+ const targetId = this.getAttribute('href');
768
+ const targetElement = document.querySelector(targetId);
769
+
770
+ if (targetElement) {
771
+ window.scrollTo({
772
+ top: targetElement.offsetTop - 80,
773
+ behavior: 'smooth'
774
+ });
775
+
776
+ // Close mobile menu if open
777
+ const mobileMenu = document.getElementById('mobile-menu');
778
+ if (!mobileMenu.classList.contains('hidden')) {
779
+ mobileMenu.classList.add('hidden');
780
+ }
781
+ }
782
+ });
783
+ });
784
+
785
+ // Animation on scroll
786
+ const observerOptions = {
787
+ threshold: 0.1
788
+ };
789
+
790
+ const observer = new IntersectionObserver((entries) => {
791
+ entries.forEach(entry => {
792
+ if (entry.isIntersecting) {
793
+ entry.target.classList.add('animate-fadeIn');
794
+ observer.unobserve(entry.target);
795
+ }
796
+ });
797
+ }, observerOptions);
798
+
799
+ document.querySelectorAll('.service-card, .virtual-tryon, [class*="bg-indigo-100"]').forEach(el => {
800
+ observer.observe(el);
801
+ });
802
+ </script>
803
+ <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=Hairitics/glamai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
804
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ landing page for Beauty Salom featuring AI
2
+ add sections for Hairstyling, hair coloring, advanced color techniques and hair cutting