Hugging Face's logo

Spaces:
Advait3009
/
website9
Running

App Files Community
Advait3009 commited on
Commit
6175b90
·
verified ·
1 Parent(s): 3e44315

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1037 -4
index.html CHANGED
@@ -1,13 +1,1046 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <!-- All your existing head content remains the same -->
5
- <!-- ... -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  </head>
7
  <body>
8
- <!-- All your existing HTML remains the same until the script section -->
9
- <!-- ... -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  <script>
12
  // Preloader
13
  window.addEventListener('load', function() {
 
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>VogueAI - Next Generation Fashion</title>
7
+ <!-- Font Awesome -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Google Fonts -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+ <!-- Three.js -->
12
+ <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
14
+ <style>
15
+ :root {
16
+ --primary: #000000;
17
+ --secondary: #ffffff;
18
+ --accent: #ff4d6d;
19
+ --dark-accent: #d62d50;
20
+ --text: #333333;
21
+ --light-text: #777777;
22
+ --light-gray: #f8f8f8;
23
+ --dark-gray: #e0e0e0;
24
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
25
+ }
26
+ * {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+ }
31
+ body {
32
+ font-family: 'Raleway', sans-serif;
33
+ color: var(--text);
34
+ background-color: var(--secondary);
35
+ overflow-x: hidden;
36
+ line-height: 1.6;
37
+ }
38
+ h1, h2, h3, h4, h5, h6 {
39
+ font-family: 'Playfair Display', serif;
40
+ font-weight: 600;
41
+ }
42
+ /* Preloader */
43
+ .preloader {
44
+ position: fixed;
45
+ top: 0;
46
+ left: 0;
47
+ width: 100%;
48
+ height: 100%;
49
+ background: var(--secondary);
50
+ display: flex;
51
+ flex-direction: column;
52
+ justify-content: center;
53
+ align-items: center;
54
+ z-index: 9999;
55
+ transition: opacity 0.5s ease;
56
+ }
57
+ .preloader.fade-out {
58
+ opacity: 0;
59
+ }
60
+ .preloader-logo {
61
+ font-family: 'Playfair Display', serif;
62
+ font-size: 3rem;
63
+ font-weight: 700;
64
+ color: var(--primary);
65
+ margin-bottom: 1rem;
66
+ }
67
+ .preloader-logo span {
68
+ color: var(--accent);
69
+ }
70
+ .spinner {
71
+ width: 50px;
72
+ height: 50px;
73
+ border: 5px solid var(--dark-gray);
74
+ border-top: 5px solid var(--accent);
75
+ border-radius: 50%;
76
+ animation: spin 1s linear infinite;
77
+ margin-bottom: 2rem;
78
+ }
79
+ @keyframes spin {
80
+ 0% { transform: rotate(0deg); }
81
+ 100% { transform: rotate(360deg); }
82
+ }
83
+ /* Header */
84
+ header {
85
+ background-color: var(--secondary);
86
+ padding: 1.5rem 5%;
87
+ position: fixed;
88
+ width: 100%;
89
+ z-index: 1000;
90
+ box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
91
+ display: flex;
92
+ justify-content: space-between;
93
+ align-items: center;
94
+ transition: var(--transition);
95
+ }
96
+ header.scrolled {
97
+ padding: 1rem 5%;
98
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
99
+ }
100
+ .logo {
101
+ font-family: 'Playfair Display', serif;
102
+ font-size: 2rem;
103
+ font-weight: 700;
104
+ color: var(--primary);
105
+ text-decoration: none;
106
+ display: flex;
107
+ align-items: center;
108
+ gap: 0.5rem;
109
+ }
110
+ .logo-icon {
111
+ color: var(--accent);
112
+ }
113
+ nav ul {
114
+ display: flex;
115
+ list-style: none;
116
+ gap: 2rem;
117
+ }
118
+ nav ul li {
119
+ position: relative;
120
+ }
121
+ nav ul li a {
122
+ text-decoration: none;
123
+ color: var(--text);
124
+ font-weight: 600;
125
+ font-size: 0.95rem;
126
+ letter-spacing: 0.5px;
127
+ transition: var(--transition);
128
+ position: relative;
129
+ }
130
+ nav ul li a::after {
131
+ content: '';
132
+ position: absolute;
133
+ bottom: -5px;
134
+ left: 0;
135
+ width: 0;
136
+ height: 2px;
137
+ background-color: var(--accent);
138
+ transition: var(--transition);
139
+ }
140
+ nav ul li a:hover::after {
141
+ width: 100%;
142
+ }
143
+ .header-actions {
144
+ display: flex;
145
+ gap: 1.5rem;
146
+ align-items: center;
147
+ }
148
+ .header-actions i {
149
+ font-size: 1.2rem;
150
+ cursor: pointer;
151
+ transition: var(--transition);
152
+ position: relative;
153
+ }
154
+ .header-actions i:hover {
155
+ color: var(--accent);
156
+ }
157
+ .cart-count {
158
+ position: absolute;
159
+ top: -8px;
160
+ right: -8px;
161
+ background-color: var(--accent);
162
+ color: white;
163
+ border-radius: 50%;
164
+ width: 18px;
165
+ height: 18px;
166
+ display: flex;
167
+ align-items: center;
168
+ justify-content: center;
169
+ font-size: 0.6rem;
170
+ font-weight: 700;
171
+ }
172
+ .account-btn {
173
+ background-color: var(--primary);
174
+ color: white;
175
+ border: none;
176
+ padding: 0.8rem 1.5rem;
177
+ border-radius: 30px;
178
+ font-weight: 600;
179
+ font-size: 0.9rem;
180
+ cursor: pointer;
181
+ transition: var(--transition);
182
+ display: flex;
183
+ align-items: center;
184
+ gap: 0.5rem;
185
+ }
186
+ .account-btn:hover {
187
+ background-color: var(--accent);
188
+ transform: translateY(-2px);
189
+ box-shadow: 0 5px 15px rgba(255, 77, 109, 0.3);
190
+ }
191
+ .account-btn i {
192
+ font-size: 0.9rem;
193
+ color: white;
194
+ }
195
+ /* Hero Section */
196
+ .hero {
197
+ height: 100vh;
198
+ display: flex;
199
+ align-items: center;
200
+ padding: 0 5%;
201
+ position: relative;
202
+ overflow: hidden;
203
+ background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%),
204
+ url('https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=1200&auto=format&fit=crop') no-repeat center center/cover;
205
+ color: white;
206
+ }
207
+ .hero::before {
208
+ content: '';
209
+ position: absolute;
210
+ top: 0;
211
+ left: 0;
212
+ width: 100%;
213
+ height: 100%;
214
+ background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
215
+ }
216
+ .hero-content {
217
+ width: 50%;
218
+ z-index: 10;
219
+ position: relative;
220
+ }
221
+ .hero h1 {
222
+ font-size: 4rem;
223
+ margin-bottom: 1.5rem;
224
+ line-height: 1.2;
225
+ text-shadow: 0 2px 10px rgba(0,0,0,0.3);
226
+ }
227
+ .hero p {
228
+ font-size: 1.2rem;
229
+ margin-bottom: 2.5rem;
230
+ line-height: 1.7;
231
+ max-width: 85%;
232
+ font-weight: 300;
233
+ }
234
+ .hero-btns {
235
+ display: flex;
236
+ gap: 1.5rem;
237
+ margin-top: 2rem;
238
+ }
239
+ .hero-btn {
240
+ background-color: var(--accent);
241
+ color: white;
242
+ border: none;
243
+ padding: 1.1rem 2.2rem;
244
+ border-radius: 30px;
245
+ font-weight: 600;
246
+ font-size: 1rem;
247
+ cursor: pointer;
248
+ transition: var(--transition);
249
+ display: inline-flex;
250
+ align-items: center;
251
+ gap: 0.7rem;
252
+ text-decoration: none;
253
+ }
254
+ .hero-btn:hover {
255
+ background-color: var(--dark-accent);
256
+ transform: translateY(-3px);
257
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
258
+ }
259
+ .hero-btn i {
260
+ font-size: 0.9rem;
261
+ }
262
+ .hero-btn.secondary {
263
+ background-color: transparent;
264
+ color: white;
265
+ border: 2px solid white;
266
+ }
267
+ .hero-btn.secondary:hover {
268
+ background-color: rgba(255,255,255,0.2);
269
+ border-color: transparent;
270
+ }
271
+ /* AI Designer Section */
272
+ .ai-designer {
273
+ padding: 6rem 5%;
274
+ background-color: var(--secondary);
275
+ }
276
+ .section-title {
277
+ text-align: center;
278
+ margin-bottom: 5rem;
279
+ }
280
+ .section-title h2 {
281
+ font-size: 2.8rem;
282
+ font-weight: 700;
283
+ margin-bottom: 1.5rem;
284
+ position: relative;
285
+ display: inline-block;
286
+ }
287
+ .section-title h2::after {
288
+ content: '';
289
+ position: absolute;
290
+ bottom: -10px;
291
+ left: 50%;
292
+ transform: translateX(-50%);
293
+ width: 80px;
294
+ height: 3px;
295
+ background-color: var(--accent);
296
+ }
297
+ .section-title p {
298
+ font-size: 1.1rem;
299
+ color: var(--light-text);
300
+ max-width: 700px;
301
+ margin: 0 auto;
302
+ }
303
+ .designer-container {
304
+ display: flex;
305
+ gap: 3rem;
306
+ align-items: center;
307
+ margin-bottom: 5rem;
308
+ }
309
+ .designer-form {
310
+ flex: 1;
311
+ padding: 2.5rem;
312
+ background-color: var(--light-gray);
313
+ border-radius: 20px;
314
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
315
+ }
316
+ .designer-form h3 {
317
+ font-size: 1.6rem;
318
+ margin-bottom: 1.5rem;
319
+ color: var(--primary);
320
+ }
321
+ .form-group {
322
+ margin-bottom: 1.5rem;
323
+ }
324
+ .form-group label {
325
+ display: block;
326
+ font-weight: 600;
327
+ margin-bottom: 0.7rem;
328
+ color: var(--primary);
329
+ }
330
+ .form-control {
331
+ width: 100%;
332
+ padding: 1rem;
333
+ border: 1px solid var(--dark-gray);
334
+ border-radius: 8px;
335
+ font-family: 'Raleway', sans-serif;
336
+ font-size: 1rem;
337
+ transition: var(--transition);
338
+ }
339
+ .form-control:focus {
340
+ outline: none;
341
+ border-color: var(--accent);
342
+ box-shadow: 0 0 0 2px rgba(255, 77, 109, 0.2);
343
+ }
344
+ textarea.form-control {
345
+ min-height: 120px;
346
+ resize: vertical;
347
+ }
348
+ .generate-btn {
349
+ background-color: var(--accent);
350
+ color: white;
351
+ border: none;
352
+ padding: 1.1rem 2rem;
353
+ border-radius: 8px;
354
+ font-weight: 600;
355
+ font-size: 1rem;
356
+ cursor: pointer;
357
+ transition: var(--transition);
358
+ width: 100%;
359
+ display: flex;
360
+ align-items: center;
361
+ justify-content: center;
362
+ gap: 0.7rem;
363
+ }
364
+ .generate-btn:hover {
365
+ background-color: var(--dark-accent);
366
+ transform: translateY(-2px);
367
+ box-shadow: 0 5px 15px rgba(255, 77, 109, 0.3);
368
+ }
369
+ .designer-result {
370
+ flex: 1;
371
+ min-height: 400px;
372
+ border-radius: 20px;
373
+ background-color: var(--light-gray);
374
+ display: flex;
375
+ align-items: center;
376
+ justify-content: center;
377
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
378
+ overflow: hidden;
379
+ position: relative;
380
+ }
381
+ .result-placeholder {
382
+ text-align: center;
383
+ padding: 2rem;
384
+ color: var(--light-text);
385
+ }
386
+ .result-placeholder i {
387
+ font-size: 3rem;
388
+ margin-bottom: 1rem;
389
+ color: var(--dark-gray);
390
+ }
391
+ .result-image {
392
+ width: 100%;
393
+ height: 100%;
394
+ object-fit: cover;
395
+ display: none;
396
+ }
397
+ .loading-overlay {
398
+ position: absolute;
399
+ top: 0;
400
+ left: 0;
401
+ width: 100%;
402
+ height: 100%;
403
+ background-color: rgba(255,255,255,0.8);
404
+ display: flex;
405
+ flex-direction: column;
406
+ align-items: center;
407
+ justify-content: center;
408
+ display: none;
409
+ }
410
+ .loading-spinner {
411
+ width: 50px;
412
+ height: 50px;
413
+ border: 5px solid var(--light-gray);
414
+ border-top: 5px solid var(--accent);
415
+ border-radius: 50%;
416
+ animation: spin 1s linear infinite;
417
+ margin-bottom: 1rem;
418
+ }
419
+ /* Features Section */
420
+ .features {
421
+ padding: 6rem 5%;
422
+ background-color: var(--light-gray);
423
+ }
424
+ .features-grid {
425
+ display: grid;
426
+ grid-template-columns: repeat(3, 1fr);
427
+ gap: 2.5rem;
428
+ }
429
+ .feature-card {
430
+ background-color: var(--secondary);
431
+ border-radius: 15px;
432
+ padding: 2.5rem;
433
+ text-align: center;
434
+ transition: var(--transition);
435
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
436
+ position: relative;
437
+ overflow: hidden;
438
+ }
439
+ .feature-card::before {
440
+ content: '';
441
+ position: absolute;
442
+ top: 0;
443
+ left: 0;
444
+ width: 100%;
445
+ height: 5px;
446
+ background-color: var(--accent);
447
+ }
448
+ .feature-card:hover {
449
+ transform: translateY(-10px);
450
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
451
+ }
452
+ .feature-icon {
453
+ background: linear-gradient(135deg, var(--accent) 0%, var(--dark-accent) 100%);
454
+ color: white;
455
+ width: 80px;
456
+ height: 80px;
457
+ border-radius: 50%;
458
+ display: flex;
459
+ align-items: center;
460
+ justify-content: center;
461
+ margin: 0 auto 1.5rem;
462
+ font-size: 2rem;
463
+ box-shadow: 0 10px 20px rgba(255, 77, 109, 0.2);
464
+ }
465
+ .feature-card h3 {
466
+ font-size: 1.5rem;
467
+ margin-bottom: 1.2rem;
468
+ }
469
+ .feature-card p {
470
+ color: var(--light-text);
471
+ line-height: 1.7;
472
+ }
473
+ /* Collections Section */
474
+ .collections {
475
+ padding: 6rem 5%;
476
+ background-color: var(--secondary);
477
+ text-align: center;
478
+ }
479
+ .collections-container {
480
+ display: grid;
481
+ grid-template-columns: repeat(3, 1fr);
482
+ gap: 2.5rem;
483
+ margin-top: 3rem;
484
+ }
485
+ .collection-card {
486
+ background-color: var(--light-gray);
487
+ border-radius: 15px;
488
+ overflow: hidden;
489
+ transition: var(--transition);
490
+ text-align: left;
491
+ position: relative;
492
+ }
493
+ .collection-card:hover {
494
+ transform: translateY(-10px);
495
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
496
+ }
497
+ .collection-image {
498
+ width: 100%;
499
+ height: 300px;
500
+ object-fit: cover;
501
+ transition: var(--transition);
502
+ }
503
+ .collection-card:hover .collection-image {
504
+ transform: scale(1.05);
505
+ }
506
+ .collection-overlay {
507
+ position: absolute;
508
+ bottom: 0;
509
+ left: 0;
510
+ width: 100%;
511
+ padding: 1.5rem;
512
+ background: linear-gradient(transparent, rgba(0,0,0,0.8));
513
+ color: white;
514
+ }
515
+ .collection-overlay h3 {
516
+ font-size: 1.4rem;
517
+ margin-bottom: 0.5rem;
518
+ }
519
+ .collection-overlay p {
520
+ font-size: 0.9rem;
521
+ opacity: 0.8;
522
+ margin-bottom: 1rem;
523
+ }
524
+ .collection-btn {
525
+ background-color: var(--secondary);
526
+ color: var(--primary);
527
+ border: none;
528
+ padding: 0.6rem 1.2rem;
529
+ border-radius: 30px;
530
+ font-weight: 600;
531
+ font-size: 0.85rem;
532
+ cursor: pointer;
533
+ transition: var(--transition);
534
+ display: inline-flex;
535
+ align-items: center;
536
+ gap: 0.5rem;
537
+ }
538
+ .collection-btn:hover {
539
+ background-color: var(--accent);
540
+ color: white;
541
+ }
542
+ /* Newsletter Section */
543
+ .newsletter {
544
+ padding: 5rem 5%;
545
+ background: linear-gradient(135deg, var(--primary) 0%, #333333 100%);
546
+ color: white;
547
+ text-align: center;
548
+ }
549
+ .newsletter h2 {
550
+ font-size: 2.5rem;
551
+ margin-bottom: 1.5rem;
552
+ }
553
+ .newsletter p {
554
+ font-size: 1.1rem;
555
+ margin-bottom: 2.5rem;
556
+ max-width: 600px;
557
+ margin-left: auto;
558
+ margin-right: auto;
559
+ color: rgba(255,255,255,0.8);
560
+ }
561
+ .newsletter-form {
562
+ display: flex;
563
+ max-width: 500px;
564
+ margin: 0 auto;
565
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
566
+ border-radius: 50px;
567
+ overflow: hidden;
568
+ }
569
+ .newsletter-input {
570
+ flex: 1;
571
+ padding: 1rem 1.5rem;
572
+ border: none;
573
+ font-size: 1rem;
574
+ }
575
+ .newsletter-input:focus {
576
+ outline: none;
577
+ }
578
+ .newsletter-btn {
579
+ background-color: var(--accent);
580
+ color: white;
581
+ border: none;
582
+ padding: 0 2.5rem;
583
+ font-weight: 600;
584
+ cursor: pointer;
585
+ transition: var(--transition);
586
+ display: flex;
587
+ align-items: center;
588
+ gap: 0.5rem;
589
+ }
590
+ .newsletter-btn:hover {
591
+ background-color: var(--dark-accent);
592
+ }
593
+ /* Footer */
594
+ footer {
595
+ background-color: var(--primary);
596
+ color: white;
597
+ padding: 4rem 5% 2rem;
598
+ }
599
+ .footer-content {
600
+ display: grid;
601
+ grid-template-columns: repeat(4, 1fr);
602
+ gap: 3rem;
603
+ margin-bottom: 3rem;
604
+ }
605
+ .footer-logo {
606
+ font-family: 'Playfair Display', serif;
607
+ font-size: 2rem;
608
+ font-weight: 700;
609
+ color: white;
610
+ margin-bottom: 1.5rem;
611
+ display: flex;
612
+ align-items: center;
613
+ gap: 0.5rem;
614
+ }
615
+ .footer-logo .logo-icon {
616
+ color: var(--accent);
617
+ }
618
+ .footer-about p {
619
+ margin-bottom: 1.5rem;
620
+ color: rgba(255,255,255,0.6);
621
+ line-height: 1.7;
622
+ }
623
+ .social-links {
624
+ display: flex;
625
+ gap: 1.5rem;
626
+ margin-top: 2rem;
627
+ }
628
+ .social-links a {
629
+ color: white;
630
+ font-size: 1.2rem;
631
+ transition: var(--transition);
632
+ background-color: rgba(255,255,255,0.1);
633
+ width: 40px;
634
+ height: 40px;
635
+ border-radius: 50%;
636
+ display: flex;
637
+ align-items: center;
638
+ justify-content: center;
639
+ }
640
+ .social-links a:hover {
641
+ background-color: var(--accent);
642
+ transform: translateY(-3px);
643
+ }
644
+ .footer-title {
645
+ font-size: 1.2rem;
646
+ margin-bottom: 1.5rem;
647
+ font-weight: 600;
648
+ letter-spacing: 1px;
649
+ color: white;
650
+ }
651
+ .footer-links ul {
652
+ list-style: none;
653
+ }
654
+ .footer-links ul li {
655
+ margin-bottom: 1rem;
656
+ }
657
+ .footer-links ul li a {
658
+ color: rgba(255,255,255,0.6);
659
+ text-decoration: none;
660
+ transition: var(--transition);
661
+ font-weight: 400;
662
+ }
663
+ .footer-links ul li a:hover {
664
+ color: white;
665
+ padding-left: 5px;
666
+ }
667
+ .footer-contact p {
668
+ display: flex;
669
+ align-items: center;
670
+ gap: 0.8rem;
671
+ margin-bottom: 1.2rem;
672
+ color: rgba(255,255,255,0.6);
673
+ }
674
+ .footer-contact i {
675
+ color: var(--accent);
676
+ min-width: 20px;
677
+ }
678
+ .footer-bottom {
679
+ padding-top: 2rem;
680
+ border-top: 1px solid rgba(255,255,255,0.1);
681
+ text-align: center;
682
+ color: rgba(255,255,255,0.4);
683
+ font-size: 0.9rem;
684
+ }
685
+ /* Responsive styles */
686
+ @media (max-width: 1200px) {
687
+ .features-grid, .footer-content {
688
+ grid-template-columns: repeat(2, 1fr);
689
+ }
690
+
691
+ .collections-container {
692
+ grid-template-columns: repeat(2, 1fr);
693
+ }
694
+ }
695
+ @media (max-width: 768px) {
696
+ header {
697
+ padding: 1rem 5%;
698
+ }
699
+
700
+ nav {
701
+ display: none;
702
+ }
703
+
704
+ .hero {
705
+ height: auto;
706
+ padding: 8rem 5% 4rem;
707
+ }
708
+
709
+ .hero-content {
710
+ width: 100%;
711
+ text-align: center;
712
+ }
713
+
714
+ .hero p {
715
+ max-width: 100%;
716
+ }
717
+
718
+ .hero-btns {
719
+ justify-content: center;
720
+ }
721
+
722
+ .designer-container {
723
+ flex-direction: column;
724
+ }
725
+
726
+ .features-grid, .footer-content {
727
+ grid-template-columns: 1fr;
728
+ }
729
+
730
+ .collections-container {
731
+ grid-template-columns: 1fr;
732
+ }
733
+
734
+ .newsletter-form {
735
+ flex-direction: column;
736
+ border-radius: 30px;
737
+ }
738
+
739
+ .newsletter-btn {
740
+ padding: 1rem;
741
+ justify-content: center;
742
+ border-radius: 0 0 30px 30px;
743
+ }
744
+ }
745
+ </style>
746
  </head>
747
  <body>
748
+ <!-- Preloader -->
749
+ <div class="preloader">
750
+ <div class="preloader-logo">Vogue<span>AI</span></div>
751
+ <div class="spinner"></div>
752
+ <p>Loading next-gen fashion experience</p>
753
+ </div>
754
+
755
+ <!-- Header -->
756
+ <header>
757
+ <a href="#" class="logo">
758
+ <i class="fas fa-star logo-icon"></i>
759
+ Vogue<span>AI</span>
760
+ </a>
761
+ <nav>
762
+ <ul>
763
+ <li><a href="#">Home</a></li>
764
+ <li><a href="#">Designer</a></li>
765
+ <li><a href="#">Collections</a></li>
766
+ <li><a href="#">Features</a></li>
767
+ <li><a href="#">About</a></li>
768
+ </ul>
769
+ </nav>
770
+ <div class="header-actions">
771
+ <i class="fas fa-search"></i>
772
+ <i class="fas fa-heart"></i>
773
+ <i class="fas fa-shopping-bag">
774
+ <span class="cart-count">3</span>
775
+ </i>
776
+ <button class="account-btn">
777
+ <i class="fas fa-user"></i>
778
+ Account
779
+ </button>
780
+ </div>
781
+ </header>
782
 
783
+ <!-- Hero Section -->
784
+ <section class="hero">
785
+ <div class="hero-content">
786
+ <h1>Reimagine Fashion with AI</h1>
787
+ <p>Create personalized, trendsetting outfits powered by artificial intelligence. Our advanced algorithms analyze your style preferences and current trends to generate unique fashion concepts just for you.</p>
788
+ <div class="hero-btns">
789
+ <a href="#designer" class="hero-btn">
790
+ <i class="fas fa-magic"></i>
791
+ Try Now
792
+ </a>
793
+ <a href="#" class="hero-btn secondary">
794
+ <i class="fas fa-play"></i>
795
+ Watch Demo
796
+ </a>
797
+ </div>
798
+ </div>
799
+ </section>
800
+
801
+ <!-- AI Designer Section -->
802
+ <section id="designer" class="ai-designer">
803
+ <div class="section-title">
804
+ <h2>AI Fashion Designer</h2>
805
+ <p>Describe your ideal outfit and let our AI generate it for you in seconds.</p>
806
+ </div>
807
+
808
+ <div class="designer-container">
809
+ <div class="designer-form">
810
+ <h3>Custom Outfit Generator</h3>
811
+ <form id="designerForm">
812
+ <div class="form-group">
813
+ <label for="outfit-type">Outfit Type</label>
814
+ <select id="outfit-type" class="form-control">
815
+ <option value="">Select outfit type</option>
816
+ <option value="casual">Casual Wear</option>
817
+ <option value="formal">Formal Wear</option>
818
+ <option value="business">Business Attire</option>
819
+ <option value="evening">Evening Wear</option>
820
+ <option value="sporty">Sporty Outfit</option>
821
+ <option value="summer">Summer Outfit</option>
822
+ <option value="winter">Winter Outfit</option>
823
+ <option value="festive">Festive Look</option>
824
+ </select>
825
+ </div>
826
+
827
+ <div class="form-group">
828
+ <label for="style-preference">Style Preference</label>
829
+ <select id="style-preference" class="form-control">
830
+ <option value="">Select style preference</option>
831
+ <option value="minimalist">Minimalist</option>
832
+ <option value="bohemian">Bohemian</option>
833
+ <option value="streetwear">Streetwear</option>
834
+ <option value="classic">Classic</option>
835
+ <option value="edgy">Edgy</option>
836
+ <option value="romantic">Romantic</option>
837
+ <option value="vintage">Vintage</option>
838
+ <option value="modern">Modern</option>
839
+ </select>
840
+ </div>
841
+
842
+ <div class="form-group">
843
+ <label for="color-scheme">Color Scheme</label>
844
+ <input type="text" id="color-scheme" class="form-control" placeholder="E.g., pastel tones, monochrome, bold colors">
845
+ </div>
846
+
847
+ <div class="form-group">
848
+ <label for="additional-details">Additional Details</label>
849
+ <textarea id="additional-details" class="form-control" placeholder="Describe any specific details or inspirations for your outfit"></textarea>
850
+ </div>
851
+
852
+ <button type="submit" class="generate-btn">
853
+ <i class="fas fa-magic"></i>
854
+ Generate Outfit
855
+ </button>
856
+ </form>
857
+ </div>
858
+
859
+ <div class="designer-result">
860
+ <div class="result-placeholder">
861
+ <i class="fas fa-magic"></i>
862
+ <h3>Your AI-Generated Outfit</h3>
863
+ <p>Complete the form to see your custom fashion design</p>
864
+ </div>
865
+ <img id="resultImage" class="result-image" alt="AI Generated Outfit">
866
+ <div class="loading-overlay">
867
+ <div class="loading-spinner"></div>
868
+ <p>Generating your unique outfit...</p>
869
+ </div>
870
+ </div>
871
+ </div>
872
+ </section>
873
+
874
+ <!-- Features Section -->
875
+ <section class="features">
876
+ <div class="section-title">
877
+ <h2>Why Choose VogueAI</h2>
878
+ <p>Experience the future of fashion with our cutting-edge technology</p>
879
+ </div>
880
+
881
+ <div class="features-grid">
882
+ <div class="feature-card">
883
+ <div class="feature-icon">
884
+ <i class="fas fa-brain"></i>
885
+ </div>
886
+ <h3>AI-Powered Design</h3>
887
+ <p>Our advanced artificial intelligence analyzes billions of fashion data points to create personalized, trendsetting outfits just for you.</p>
888
+ </div>
889
+
890
+ <div class="feature-card">
891
+ <div class="feature-icon">
892
+ <i class="fas fa-user-astronaut"></i>
893
+ </div>
894
+ <h3>Virtual Try-On</h3>
895
+ <p>Visualize how outfits will look on your unique body type with our realistic 3D modeling and augmented reality technology.</p>
896
+ </div>
897
+
898
+ <div class="feature-card">
899
+ <div class="feature-icon">
900
+ <i class="fas fa-tshirt"></i>
901
+ </div>
902
+ <h3>Smart Wardrobe</h3>
903
+ <p>Our AI organizes your digital wardrobe and suggests perfect combinations of items you already own with new additions.</p>
904
+ </div>
905
+
906
+ <div class="feature-card">
907
+ <div class="feature-icon">
908
+ <i class="fas fa-chart-line"></i>
909
+ </div>
910
+ <h3>Trend Forecasting</h3>
911
+ <p>Stay ahead of the curve with outfits predicted to be the next big thing before they hit mainstream fashion.</p>
912
+ </div>
913
+
914
+ <div class="feature-card">
915
+ <div class="feature-icon">
916
+ <i class="fas fa-leaf"></i>
917
+ </div>
918
+ <h3>Sustainable Fashion</h3>
919
+ <p>We promote sustainable choices by helping you maximize your wardrobe and suggesting eco-friendly alternatives.</p>
920
+ </div>
921
+
922
+ <div class="feature-card">
923
+ <div class="feature-icon">
924
+ <i class="fas fa-gem"></i>
925
+ </div>
926
+ <h3>Personal Stylist</h3>
927
+ <p>Your personal AI stylist learns your preferences and helps you discover new styles that perfectly match your taste.</p>
928
+ </div>
929
+ </div>
930
+ </section>
931
+
932
+ <!-- Collections Section -->
933
+ <section class="collections">
934
+ <div class="section-title">
935
+ <h2>Featured Collections</h2>
936
+ <p>Explore our AI-generated fashion lines</p>
937
+ </div>
938
+
939
+ <div class="collections-container">
940
+ <div class="collection-card">
941
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?w=800&auto=format&fit=crop" alt="Urban Futurism" class="collection-image">
942
+ <div class="collection-overlay">
943
+ <h3>Urban Futurism</h3>
944
+ <p>Cutting-edge streetwear with a cyberpunk twist</p>
945
+ <button class="collection-btn">
946
+ Explore
947
+ <i class="fas fa-arrow-right"></i>
948
+ </button>
949
+ </div>
950
+ </div>
951
+
952
+ <div class="collection-card">
953
+ <img src="https://images.unsplash.com/photo-1556905055-8f358a7a10b7?w=800&auto=format&fit=crop" alt="Minimal Luxe" class="collection-image">
954
+ <div class="collection-overlay">
955
+ <h3>Minimal Luxe</h3>
956
+ <p>Elegant simplicity for the modern individual</p>
957
+ <button class="collection-btn">
958
+ Explore
959
+ <i class="fas fa-arrow-right"></i>
960
+ </button>
961
+ </div>
962
+ </div>
963
+
964
+ <div class="collection-card">
965
+ <img src="https://images.unsplash.com/photo-1591061400885-43e0286736bb?w=800&auto=format&fit=crop" alt="Neo Bohemia" class="collection-image">
966
+ <div class="collection-overlay">
967
+ <h3>Neo Bohemia</h3>
968
+ <p>Free-spirited styles with contemporary edge</p>
969
+ <button class="collection-btn">
970
+ Explore
971
+ <i class="fas fa-arrow-right"></i>
972
+ </button>
973
+ </div>
974
+ </div>
975
+ </div>
976
+ </section>
977
+
978
+ <!-- Newsletter Section -->
979
+ <section class="newsletter">
980
+ <h2>Join the Fashion Revolution</h2>
981
+ <p>Subscribe to receive early access to new features, exclusive AI-generated collections, and style insights.</p>
982
+ <form class="newsletter-form">
983
+ <input type="email" placeholder="Your email address" class="newsletter-input" required>
984
+ <button type="submit" class="newsletter-btn">
985
+ Subscribe
986
+ <i class="fas fa-paper-plane"></i>
987
+ </button>
988
+ </form>
989
+ </section>
990
+
991
+ <!-- Footer -->
992
+ <footer>
993
+ <div class="footer-content">
994
+ <div class="footer-about">
995
+ <div class="footer-logo">
996
+ <i class="fas fa-star logo-icon"></i>
997
+ Vogue<span>AI</span>
998
+ </div>
999
+ <p>We're at the forefront of AI-powered fashion, helping individuals discover and create their perfect style through cutting-edge technology.</p>
1000
+ <div class="social-links">
1001
+ <a href="#"><i class="fab fa-instagram"></i></a>
1002
+ <a href="#"><i class="fab fa-tiktok"></i></a>
1003
+ <a href="#"><i class="fab fa-pinterest"></i></a>
1004
+ <a href="#"><i class="fab fa-youtube"></i></a>
1005
+ </div>
1006
+ </div>
1007
+
1008
+ <div class="footer-links">
1009
+ <h3 class="footer-title">Shop</h3>
1010
+ <ul>
1011
+ <li><a href="#">Women's AI Collections</a></li>
1012
+ <li><a href="#">Men's AI Collections</a></li>
1013
+ <li><a href="#">Accessories</a></li>
1014
+ <li><a href="#">Sustainable Fashion</a></li>
1015
+ <li><a href="#">Limited Editions</a></li>
1016
+ </ul>
1017
+ </div>
1018
+
1019
+ <div class="footer-links">
1020
+ <h3 class="footer-title">Company</h3>
1021
+ <ul>
1022
+ <li><a href="#">About VogueAI</a></li>
1023
+ <li><a href="#">Our Technology</a></li>
1024
+ <li><a href="#">Careers</a></li>
1025
+ <li><a href="#">Press</a></li>
1026
+ <li><a href="#">Sustainability</a></li>
1027
+ </ul>
1028
+ </div>
1029
+
1030
+ <div class="footer-contact">
1031
+ <h3 class="footer-title">Contact</h3>
1032
+ <p><i class="fas fa-map-marker-alt"></i> 456 Fashion District, New York</p>
1033
+ <p><i class="fas fa-phone"></i> +1 (555) 987-6543</p>
1034
+ <p><i class="fas fa-envelope"></i> hello@vogueai.com</p>
1035
+ <p><i class="fas fa-clock"></i> Support 24/7</p>
1036
+ </div>
1037
+ </div>
1038
+
1039
+ <div class="footer-bottom">
1040
+ <p>&copy; 2023 VogueAI. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
1041
+ <p class="ai-badge">Powered by Advanced AI</p>
1042
+ </div>
1043
+ </footer>
1044
  <script>
1045
  // Preloader
1046
  window.addEventListener('load', function() {