Hugging Face's logo

Spaces:
Kennhu
/
aiwardrobe
Running

App Files Community
Kennhu commited on
Commit
78ff7fd
·
verified ·
1 Parent(s): 0e5b07b

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +928 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Aiwardrobe
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: indigo
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: aiwardrobe
3
+ emoji: 🐳
4
+ colorFrom: blue
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,928 @@
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>AI Fashion Assistant | Your Virtual Stylist</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #ff6b6b;
11
+ --secondary-color: #5f27cd;
12
+ --dark-color: #2d3436;
13
+ --light-color: #f5f6fa;
14
+ --accent-color: #00cec9;
15
+ --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
16
+ --transition: all 0.3s ease;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24
+ }
25
+
26
+ body {
27
+ background-color: var(--light-color);
28
+ color: var(--dark-color);
29
+ line-height: 1.6;
30
+ }
31
+
32
+ .container {
33
+ max-width: 1200px;
34
+ margin: 0 auto;
35
+ padding: 0 20px;
36
+ }
37
+
38
+ /* Header */
39
+ header {
40
+ background-color: white;
41
+ box-shadow: var(--shadow);
42
+ position: fixed;
43
+ width: 100%;
44
+ top: 0;
45
+ z-index: 1000;
46
+ }
47
+
48
+ nav {
49
+ display: flex;
50
+ justify-content: space-between;
51
+ align-items: center;
52
+ padding: 20px 0;
53
+ }
54
+
55
+ .logo {
56
+ display: flex;
57
+ align-items: center;
58
+ font-size: 24px;
59
+ font-weight: 700;
60
+ color: var(--primary-color);
61
+ }
62
+
63
+ .logo i {
64
+ margin-right: 10px;
65
+ color: var(--secondary-color);
66
+ }
67
+
68
+ .nav-links {
69
+ display: flex;
70
+ list-style: none;
71
+ }
72
+
73
+ .nav-links li {
74
+ margin-left: 30px;
75
+ }
76
+
77
+ .nav-links a {
78
+ text-decoration: none;
79
+ color: var(--dark-color);
80
+ font-weight: 500;
81
+ transition: var(--transition);
82
+ }
83
+
84
+ .nav-links a:hover {
85
+ color: var(--primary-color);
86
+ }
87
+
88
+ .cta-button {
89
+ background-color: var(--primary-color);
90
+ color: white;
91
+ border: none;
92
+ padding: 10px 20px;
93
+ border-radius: 30px;
94
+ font-weight: 600;
95
+ cursor: pointer;
96
+ transition: var(--transition);
97
+ box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
98
+ }
99
+
100
+ .cta-button:hover {
101
+ transform: translateY(-3px);
102
+ box-shadow: 0 6px 15px rgba(255, 107, 107, 0.4);
103
+ }
104
+
105
+ .secondary-button {
106
+ background-color: transparent;
107
+ color: var(--primary-color);
108
+ border: 2px solid var(--primary-color);
109
+ padding: 8px 18px;
110
+ border-radius: 30px;
111
+ font-weight: 600;
112
+ cursor: pointer;
113
+ transition: var(--transition);
114
+ }
115
+
116
+ .secondary-button:hover {
117
+ background-color: var(--primary-color);
118
+ color: white;
119
+ }
120
+
121
+ /* Hero Section */
122
+ .hero {
123
+ padding: 150px 0 80px;
124
+ text-align: center;
125
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
126
+ }
127
+
128
+ .hero h1 {
129
+ font-size: 48px;
130
+ margin-bottom: 20px;
131
+ color: var(--dark-color);
132
+ }
133
+
134
+ .hero h1 span {
135
+ color: var(--primary-color);
136
+ }
137
+
138
+ .hero p {
139
+ font-size: 20px;
140
+ max-width: 700px;
141
+ margin: 0 auto 40px;
142
+ color: #666;
143
+ }
144
+
145
+ .hero-buttons {
146
+ display: flex;
147
+ justify-content: center;
148
+ gap: 20px;
149
+ margin-bottom: 50px;
150
+ }
151
+
152
+ .hero-image {
153
+ max-width: 800px;
154
+ margin: 0 auto;
155
+ border-radius: 20px;
156
+ overflow: hidden;
157
+ box-shadow: var(--shadow);
158
+ }
159
+
160
+ .hero-image img {
161
+ width: 100%;
162
+ height: auto;
163
+ display: block;
164
+ }
165
+
166
+ /* Features Section */
167
+ .features {
168
+ padding: 80px 0;
169
+ background-color: white;
170
+ }
171
+
172
+ .section-title {
173
+ text-align: center;
174
+ margin-bottom: 60px;
175
+ }
176
+
177
+ .section-title h2 {
178
+ font-size: 36px;
179
+ color: var(--dark-color);
180
+ }
181
+
182
+ .section-title p {
183
+ color: #666;
184
+ max-width: 600px;
185
+ margin: 15px auto 0;
186
+ }
187
+
188
+ .features-grid {
189
+ display: grid;
190
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
191
+ gap: 30px;
192
+ }
193
+
194
+ .feature-card {
195
+ background-color: white;
196
+ border-radius: 15px;
197
+ padding: 30px;
198
+ box-shadow: var(--shadow);
199
+ transition: var(--transition);
200
+ text-align: center;
201
+ }
202
+
203
+ .feature-card:hover {
204
+ transform: translateY(-10px);
205
+ }
206
+
207
+ .feature-icon {
208
+ font-size: 40px;
209
+ color: var(--secondary-color);
210
+ margin-bottom: 20px;
211
+ }
212
+
213
+ .feature-card h3 {
214
+ font-size: 22px;
215
+ margin-bottom: 15px;
216
+ color: var(--dark-color);
217
+ }
218
+
219
+ .feature-card p {
220
+ color: #666;
221
+ }
222
+
223
+ /* How It Works */
224
+ .how-it-works {
225
+ padding: 80px 0;
226
+ background-color: var(--light-color);
227
+ }
228
+
229
+ .steps {
230
+ display: flex;
231
+ flex-direction: column;
232
+ max-width: 800px;
233
+ margin: 0 auto;
234
+ }
235
+
236
+ .step {
237
+ display: flex;
238
+ margin-bottom: 40px;
239
+ align-items: flex-start;
240
+ }
241
+
242
+ .step-number {
243
+ background-color: var(--primary-color);
244
+ color: white;
245
+ width: 40px;
246
+ height: 40px;
247
+ border-radius: 50%;
248
+ display: flex;
249
+ align-items: center;
250
+ justify-content: center;
251
+ font-weight: bold;
252
+ margin-right: 20px;
253
+ flex-shrink: 0;
254
+ }
255
+
256
+ .step-content h3 {
257
+ font-size: 22px;
258
+ margin-bottom: 10px;
259
+ color: var(--dark-color);
260
+ }
261
+
262
+ .step-content p {
263
+ color: #666;
264
+ }
265
+
266
+ /* AI Assistant Section */
267
+ .ai-assistant {
268
+ padding: 80px 0;
269
+ background-color: white;
270
+ text-align: center;
271
+ }
272
+
273
+ .assistant-container {
274
+ max-width: 800px;
275
+ margin: 0 auto;
276
+ background-color: var(--light-color);
277
+ border-radius: 20px;
278
+ padding: 40px;
279
+ box-shadow: var(--shadow);
280
+ }
281
+
282
+ .assistant-header {
283
+ display: flex;
284
+ align-items: center;
285
+ justify-content: center;
286
+ margin-bottom: 30px;
287
+ }
288
+
289
+ .assistant-avatar {
290
+ width: 80px;
291
+ height: 80px;
292
+ border-radius: 50%;
293
+ background-color: var(--secondary-color);
294
+ display: flex;
295
+ align-items: center;
296
+ justify-content: center;
297
+ margin-right: 20px;
298
+ }
299
+
300
+ .assistant-avatar i {
301
+ font-size: 40px;
302
+ color: white;
303
+ }
304
+
305
+ .assistant-header h2 {
306
+ font-size: 28px;
307
+ color: var(--dark-color);
308
+ }
309
+
310
+ .chat-container {
311
+ background-color: white;
312
+ border-radius: 15px;
313
+ padding: 20px;
314
+ height: 300px;
315
+ overflow-y: auto;
316
+ margin-bottom: 20px;
317
+ text-align: left;
318
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
319
+ }
320
+
321
+ .message {
322
+ margin-bottom: 15px;
323
+ display: flex;
324
+ }
325
+
326
+ .message.bot {
327
+ align-items: flex-start;
328
+ }
329
+
330
+ .message.user {
331
+ justify-content: flex-end;
332
+ }
333
+
334
+ .message-content {
335
+ max-width: 70%;
336
+ padding: 12px 18px;
337
+ border-radius: 20px;
338
+ }
339
+
340
+ .bot .message-content {
341
+ background-color: #f0f0f0;
342
+ border-top-left-radius: 5px;
343
+ }
344
+
345
+ .user .message-content {
346
+ background-color: var(--primary-color);
347
+ color: white;
348
+ border-top-right-radius: 5px;
349
+ }
350
+
351
+ .chat-input {
352
+ display: flex;
353
+ margin-top: 20px;
354
+ }
355
+
356
+ .chat-input input {
357
+ flex: 1;
358
+ padding: 15px 20px;
359
+ border: none;
360
+ border-radius: 30px;
361
+ box-shadow: var(--shadow);
362
+ font-size: 16px;
363
+ outline: none;
364
+ }
365
+
366
+ .chat-input button {
367
+ background-color: var(--secondary-color);
368
+ color: white;
369
+ border: none;
370
+ width: 50px;
371
+ height: 50px;
372
+ border-radius: 50%;
373
+ margin-left: 10px;
374
+ cursor: pointer;
375
+ transition: var(--transition);
376
+ }
377
+
378
+ .chat-input button:hover {
379
+ background-color: var(--primary-color);
380
+ }
381
+
382
+ /* Testimonials */
383
+ .testimonials {
384
+ padding: 80px 0;
385
+ background-color: var(--light-color);
386
+ }
387
+
388
+ .testimonial-grid {
389
+ display: grid;
390
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
391
+ gap: 30px;
392
+ }
393
+
394
+ .testimonial-card {
395
+ background-color: white;
396
+ border-radius: 15px;
397
+ padding: 30px;
398
+ box-shadow: var(--shadow);
399
+ }
400
+
401
+ .testimonial-header {
402
+ display: flex;
403
+ align-items: center;
404
+ margin-bottom: 20px;
405
+ }
406
+
407
+ .testimonial-avatar {
408
+ width: 60px;
409
+ height: 60px;
410
+ border-radius: 50%;
411
+ background-color: #ddd;
412
+ margin-right: 15px;
413
+ overflow: hidden;
414
+ }
415
+
416
+ .testimonial-avatar img {
417
+ width: 100%;
418
+ height: 100%;
419
+ object-fit: cover;
420
+ }
421
+
422
+ .testimonial-info h4 {
423
+ font-size: 18px;
424
+ margin-bottom: 5px;
425
+ }
426
+
427
+ .testimonial-info p {
428
+ color: #666;
429
+ font-size: 14px;
430
+ }
431
+
432
+ .testimonial-text {
433
+ color: #555;
434
+ font-style: italic;
435
+ }
436
+
437
+ .rating {
438
+ color: var(--primary-color);
439
+ margin-top: 15px;
440
+ }
441
+
442
+ /* CTA Section */
443
+ .cta-section {
444
+ padding: 80px 0;
445
+ text-align: center;
446
+ background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
447
+ color: white;
448
+ }
449
+
450
+ .cta-section h2 {
451
+ font-size: 36px;
452
+ margin-bottom: 20px;
453
+ }
454
+
455
+ .cta-section p {
456
+ max-width: 600px;
457
+ margin: 0 auto 30px;
458
+ font-size: 18px;
459
+ }
460
+
461
+ /* Footer */
462
+ footer {
463
+ background-color: var(--dark-color);
464
+ color: white;
465
+ padding: 60px 0 20px;
466
+ }
467
+
468
+ .footer-content {
469
+ display: grid;
470
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
471
+ gap: 40px;
472
+ margin-bottom: 40px;
473
+ }
474
+
475
+ .footer-column h3 {
476
+ font-size: 18px;
477
+ margin-bottom: 20px;
478
+ position: relative;
479
+ padding-bottom: 10px;
480
+ }
481
+
482
+ .footer-column h3::after {
483
+ content: '';
484
+ position: absolute;
485
+ left: 0;
486
+ bottom: 0;
487
+ width: 40px;
488
+ height: 2px;
489
+ background-color: var(--primary-color);
490
+ }
491
+
492
+ .footer-links {
493
+ list-style: none;
494
+ }
495
+
496
+ .footer-links li {
497
+ margin-bottom: 10px;
498
+ }
499
+
500
+ .footer-links a {
501
+ color: #ddd;
502
+ text-decoration: none;
503
+ transition: var(--transition);
504
+ }
505
+
506
+ .footer-links a:hover {
507
+ color: var(--primary-color);
508
+ }
509
+
510
+ .social-links {
511
+ display: flex;
512
+ gap: 15px;
513
+ margin-top: 20px;
514
+ }
515
+
516
+ .social-links a {
517
+ color: white;
518
+ background-color: rgba(255, 255, 255, 0.1);
519
+ width: 40px;
520
+ height: 40px;
521
+ border-radius: 50%;
522
+ display: flex;
523
+ align-items: center;
524
+ justify-content: center;
525
+ transition: var(--transition);
526
+ }
527
+
528
+ .social-links a:hover {
529
+ background-color: var(--primary-color);
530
+ transform: translateY(-3px);
531
+ }
532
+
533
+ .copyright {
534
+ text-align: center;
535
+ padding-top: 20px;
536
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
537
+ color: #aaa;
538
+ font-size: 14px;
539
+ }
540
+
541
+ /* Responsive */
542
+ @media (max-width: 768px) {
543
+ .hero h1 {
544
+ font-size: 36px;
545
+ }
546
+
547
+ .hero p {
548
+ font-size: 18px;
549
+ }
550
+
551
+ .hero-buttons {
552
+ flex-direction: column;
553
+ align-items: center;
554
+ }
555
+
556
+ .nav-links {
557
+ display: none;
558
+ }
559
+
560
+ .step {
561
+ flex-direction: column;
562
+ }
563
+
564
+ .step-number {
565
+ margin-right: 0;
566
+ margin-bottom: 15px;
567
+ }
568
+ }
569
+ </style>
570
+ </head>
571
+ <body>
572
+ <header>
573
+ <div class="container">
574
+ <nav>
575
+ <div class="logo">
576
+ <i class="fas fa-tshirt"></i>
577
+ <span>AI Wardrobe</span>
578
+ </div>
579
+ <ul class="nav-links">
580
+ <li><a href="#features">Features</a></li>
581
+ <li><a href="#how-it-works">How It Works</a></li>
582
+ <li><a href="#assistant">AI Assistant</a></li>
583
+ <li><a href="#testimonials">Testimonials</a></li>
584
+ </ul>
585
+ <button class="cta-button">Get Started</button>
586
+ </nav>
587
+ </div>
588
+ </header>
589
+
590
+ <section class="hero">
591
+ <div class="container">
592
+ <h1>Your Personal <span>AI Fashion Assistant</span></h1>
593
+ <p>Discover your perfect style with our AI-powered wardrobe assistant. Get personalized outfit recommendations, style tips, and virtual try-ons.</p>
594
+ <div class="hero-buttons">
595
+ <button class="cta-button">Try It Now</button>
596
+ <button class="secondary-button">See How It Works</button>
597
+ </div>
598
+ <div class="hero-image">
599
+ <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AI Fashion Assistant">
600
+ </div>
601
+ </div>
602
+ </section>
603
+
604
+ <section class="features" id="features">
605
+ <div class="container">
606
+ <div class="section-title">
607
+ <h2>Smart Fashion Features</h2>
608
+ <p>Our AI-powered platform offers everything you need to revolutionize your wardrobe and style</p>
609
+ </div>
610
+ <div class="features-grid">
611
+ <div class="feature-card">
612
+ <div class="feature-icon">
613
+ <i class="fas fa-magic"></i>
614
+ </div>
615
+ <h3>Outfit Generator</h3>
616
+ <p>Get instant outfit recommendations based on your wardrobe, weather, and occasion with our smart AI generator.</p>
617
+ </div>
618
+ <div class="feature-card">
619
+ <div class="feature-icon">
620
+ <i class="fas fa-camera"></i>
621
+ </div>
622
+ <h3>Virtual Try-On</h3>
623
+ <p>See how clothes will look on you before buying with our augmented reality virtual try-on technology.</p>
624
+ </div>
625
+ <div class="feature-card">
626
+ <div class="feature-icon">
627
+ <i class="fas fa-robot"></i>
628
+ </div>
629
+ <h3>Style Assistant</h3>
630
+ <p>Your personal AI stylist available 24/7 to answer all your fashion questions and provide style advice.</p>
631
+ </div>
632
+ <div class="feature-card">
633
+ <div class="feature-icon">
634
+ <i class="fas fa-shopping-bag"></i>
635
+ </div>
636
+ <h3>Smart Shopping</h3>
637
+ <p>Get personalized shopping recommendations that match your style, size, and budget preferences.</p>
638
+ </div>
639
+ <div class="feature-card">
640
+ <div class="feature-icon">
641
+ <i class="fas fa-calendar-alt"></i>
642
+ </div>
643
+ <h3>Wardrobe Planner</h3>
644
+ <p>Plan your outfits for the week or special events with our intelligent wardrobe planning tool.</p>
645
+ </div>
646
+ <div class="feature-card">
647
+ <div class="feature-icon">
648
+ <i class="fas fa-chart-line"></i>
649
+ </div>
650
+ <h3>Style Analytics</h3>
651
+ <p>Track your style evolution, most-worn items, and color preferences with detailed analytics.</p>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ </section>
656
+
657
+ <section class="how-it-works" id="how-it-works">
658
+ <div class="container">
659
+ <div class="section-title">
660
+ <h2>How It Works</h2>
661
+ <p>Getting started with your AI fashion assistant is simple and intuitive</p>
662
+ </div>
663
+ <div class="steps">
664
+ <div class="step">
665
+ <div class="step-number">1</div>
666
+ <div class="step-content">
667
+ <h3>Upload Your Wardrobe</h3>
668
+ <p>Take photos of your clothes or connect your shopping accounts to create a digital version of your wardrobe.</p>
669
+ </div>
670
+ </div>
671
+ <div class="step">
672
+ <div class="step-number">2</div>
673
+ <div class="step-content">
674
+ <h3>Set Your Preferences</h3>
675
+ <p>Tell us about your style, favorite colors, fit preferences, and any special occasions coming up.</p>
676
+ </div>
677
+ </div>
678
+ <div class="step">
679
+ <div class="step-number">3</div>
680
+ <div class="step-content">
681
+ <h3>Get Recommendations</h3>
682
+ <p>Our AI analyzes your wardrobe and preferences to suggest perfect outfits for any occasion.</p>
683
+ </div>
684
+ </div>
685
+ <div class="step">
686
+ <div class="step-number">4</div>
687
+ <div class="step-content">
688
+ <h3>Refine & Discover</h3>
689
+ <p>Rate suggestions to help the AI learn your taste better and discover new styles you'll love.</p>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </section>
695
+
696
+ <section class="ai-assistant" id="assistant">
697
+ <div class="container">
698
+ <div class="assistant-container">
699
+ <div class="assistant-header">
700
+ <div class="assistant-avatar">
701
+ <i class="fas fa-robot"></i>
702
+ </div>
703
+ <h2>Chat with Your AI Stylist</h2>
704
+ </div>
705
+ <div class="chat-container" id="chat-container">
706
+ <div class="message bot">
707
+ <div class="message-content">
708
+ Hi there! I'm your AI fashion assistant. How can I help you with your style today?
709
+ </div>
710
+ </div>
711
+ </div>
712
+ <div class="chat-input">
713
+ <input type="text" id="user-input" placeholder="Ask me anything about fashion...">
714
+ <button id="send-button"><i class="fas fa-paper-plane"></i></button>
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </section>
719
+
720
+ <section class="testimonials" id="testimonials">
721
+ <div class="container">
722
+ <div class="section-title">
723
+ <h2>What Our Users Say</h2>
724
+ <p>Join thousands of happy users who transformed their style with AI Wardrobe</p>
725
+ </div>
726
+ <div class="testimonial-grid">
727
+ <div class="testimonial-card">
728
+ <div class="testimonial-header">
729
+ <div class="testimonial-avatar">
730
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J.">
731
+ </div>
732
+ <div class="testimonial-info">
733
+ <h4>Sarah J.</h4>
734
+ <p>Fashion Blogger</p>
735
+ </div>
736
+ </div>
737
+ <div class="testimonial-text">
738
+ "This app has completely changed how I approach my wardrobe. The outfit suggestions are always on point and have helped me discover new ways to wear my clothes."
739
+ </div>
740
+ <div class="rating">
741
+ <i class="fas fa-star"></i>
742
+ <i class="fas fa-star"></i>
743
+ <i class="fas fa-star"></i>
744
+ <i class="fas fa-star"></i>
745
+ <i class="fas fa-star"></i>
746
+ </div>
747
+ </div>
748
+ <div class="testimonial-card">
749
+ <div class="testimonial-header">
750
+ <div class="testimonial-avatar">
751
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T.">
752
+ </div>
753
+ <div class="testimonial-info">
754
+ <h4>Michael T.</h4>
755
+ <p>Busy Executive</p>
756
+ </div>
757
+ </div>
758
+ <div class="testimonial-text">
759
+ "As someone who hates shopping, this AI assistant has been a game-changer. It knows my style better than I do and saves me so much time getting dressed."
760
+ </div>
761
+ <div class="rating">
762
+ <i class="fas fa-star"></i>
763
+ <i class="fas fa-star"></i>
764
+ <i class="fas fa-star"></i>
765
+ <i class="fas fa-star"></i>
766
+ <i class="fas fa-star"></i>
767
+ </div>
768
+ </div>
769
+ <div class="testimonial-card">
770
+ <div class="testimonial-header">
771
+ <div class="testimonial-avatar">
772
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma L.">
773
+ </div>
774
+ <div class="testimonial-info">
775
+ <h4>Emma L.</h4>
776
+ <p>College Student</p>
777
+ </div>
778
+ </div>
779
+ <div class="testimonial-text">
780
+ "The virtual try-on feature is incredible! I can see how clothes will look before buying, which has saved me so much money on returns."
781
+ </div>
782
+ <div class="rating">
783
+ <i class="fas fa-star"></i>
784
+ <i class="fas fa-star"></i>
785
+ <i class="fas fa-star"></i>
786
+ <i class="fas fa-star"></i>
787
+ <i class="fas fa-star-half-alt"></i>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ </div>
792
+ </section>
793
+
794
+ <section class="cta-section">
795
+ <div class="container">
796
+ <h2>Ready to Transform Your Wardrobe?</h2>
797
+ <p>Join thousands of users who discovered their perfect style with AI Wardrobe. It's free to try!</p>
798
+ <button class="cta-button">Start Your Style Journey</button>
799
+ </div>
800
+ </section>
801
+
802
+ <footer>
803
+ <div class="container">
804
+ <div class="footer-content">
805
+ <div class="footer-column">
806
+ <h3>AI Wardrobe</h3>
807
+ <p>Your personal AI fashion assistant helping you discover your perfect style and make the most of your wardrobe.</p>
808
+ <div class="social-links">
809
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
810
+ <a href="#"><i class="fab fa-twitter"></i></a>
811
+ <a href="#"><i class="fab fa-instagram"></i></a>
812
+ <a href="#"><i class="fab fa-pinterest"></i></a>
813
+ </div>
814
+ </div>
815
+ <div class="footer-column">
816
+ <h3>Features</h3>
817
+ <ul class="footer-links">
818
+ <li><a href="#">Outfit Generator</a></li>
819
+ <li><a href="#">Virtual Try-On</a></li>
820
+ <li><a href="#">Style Assistant</a></li>
821
+ <li><a href="#">Wardrobe Planner</a></li>
822
+ <li><a href="#">Smart Shopping</a></li>
823
+ </ul>
824
+ </div>
825
+ <div class="footer-column">
826
+ <h3>Company</h3>
827
+ <ul class="footer-links">
828
+ <li><a href="#">About Us</a></li>
829
+ <li><a href="#">Careers</a></li>
830
+ <li><a href="#">Blog</a></li>
831
+ <li><a href="#">Press</a></li>
832
+ <li><a href="#">Contact</a></li>
833
+ </ul>
834
+ </div>
835
+ <div class="footer-column">
836
+ <h3>Support</h3>
837
+ <ul class="footer-links">
838
+ <li><a href="#">Help Center</a></li>
839
+ <li><a href="#">Privacy Policy</a></li>
840
+ <li><a href="#">Terms of Service</a></li>
841
+ <li><a href="#">FAQ</a></li>
842
+ <li><a href="#">Feedback</a></li>
843
+ </ul>
844
+ </div>
845
+ </div>
846
+ <div class="copyright">
847
+ <p>&copy; 2023 AI Wardrobe. All rights reserved.</p>
848
+ </div>
849
+ </div>
850
+ </footer>
851
+
852
+ <script>
853
+ // Simple chatbot functionality
854
+ document.addEventListener('DOMContentLoaded', function() {
855
+ const chatContainer = document.getElementById('chat-container');
856
+ const userInput = document.getElementById('user-input');
857
+ const sendButton = document.getElementById('send-button');
858
+
859
+ // Sample responses from the AI assistant
860
+ const botResponses = [
861
+ "That's a great question! Based on your wardrobe, I'd recommend pairing those with a white blouse and nude heels for a classic look.",
862
+ "For a business casual look, try pairing dress pants with a tucked-in blouse and a blazer. Add some loafers or low heels to complete the outfit.",
863
+ "The color palette that would work best with your skin tone includes navy, emerald green, and burgundy. These colors will really make you pop!",
864
+ "That dress would be perfect for a summer wedding! Pair it with strappy sandals and a clutch for a complete look.",
865
+ "I'd recommend checking out our 'Smart Shopping' section for jeans that match your style. Look for high-waisted, straight-leg cuts in dark wash.",
866
+ "For a date night, why not try that red dress you haven't worn in a while? It looks stunning on you! Add some simple jewelry and you're good to go."
867
+ ];
868
+
869
+ // Add user message and bot response to chat
870
+ function addMessage(message, isUser) {
871
+ const messageDiv = document.createElement('div');
872
+ messageDiv.classList.add('message');
873
+ messageDiv.classList.add(isUser ? 'user' : 'bot');
874
+
875
+ const contentDiv = document.createElement('div');
876
+ contentDiv.classList.add('message-content');
877
+ contentDiv.textContent = message;
878
+
879
+ messageDiv.appendChild(contentDiv);
880
+ chatContainer.appendChild(messageDiv);
881
+
882
+ // Scroll to bottom of chat
883
+ chatContainer.scrollTop = chatContainer.scrollHeight;
884
+ }
885
+
886
+ // Handle send button click
887
+ sendButton.addEventListener('click', function() {
888
+ const message = userInput.value.trim();
889
+ if (message) {
890
+ addMessage(message, true);
891
+ userInput.value = '';
892
+
893
+ // Simulate bot thinking
894
+ setTimeout(function() {
895
+ const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)];
896
+ addMessage(randomResponse, false);
897
+ }, 1000);
898
+ }
899
+ });
900
+
901
+ // Handle enter key press
902
+ userInput.addEventListener('keypress', function(e) {
903
+ if (e.key === 'Enter') {
904
+ sendButton.click();
905
+ }
906
+ });
907
+
908
+ // Smooth scrolling for navigation links
909
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
910
+ anchor.addEventListener('click', function(e) {
911
+ e.preventDefault();
912
+
913
+ const targetId = this.getAttribute('href');
914
+ if (targetId === '#') return;
915
+
916
+ const targetElement = document.querySelector(targetId);
917
+ if (targetElement) {
918
+ window.scrollTo({
919
+ top: targetElement.offsetTop - 80,
920
+ behavior: 'smooth'
921
+ });
922
+ }
923
+ });
924
+ });
925
+ });
926
+ </script>
927
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
928
+ </html>