Hugging Face's logo

Spaces:
gaur3009
/
dreamwork1
Running

App Files Community
gaur3009 commited on
Commit
976d1f6
·
verified ·
1 Parent(s): 9c7297f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1342 -19
index.html CHANGED
@@ -1,19 +1,1342 @@
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>RookusAI - Advanced Dress Recoloring with CosXL</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
+ @keyframes gradientBG {
11
+ 0% { background-position: 0% 50%; }
12
+ 50% { background-position: 100% 50%; }
13
+ 100% { background-position: 0% 50%; }
14
+ }
15
+
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
18
+ background-size: 200% 200%;
19
+ animation: gradientBG 15s ease infinite;
20
+ }
21
+
22
+ .upload-area {
23
+ border: 2px dashed #cbd5e0;
24
+ transition: all 0.3s ease;
25
+ }
26
+
27
+ .upload-area:hover {
28
+ border-color: #667eea;
29
+ transform: translateY(-2px);
30
+ }
31
+
32
+ .upload-area.active {
33
+ border-color: #667eea;
34
+ background-color: #ebf4ff;
35
+ box-shadow: 0 4px 6px -1px rgba(102, 126, 234, 0.1), 0 2px 4px -1px rgba(102, 126, 234, 0.06);
36
+ }
37
+
38
+ .color-option {
39
+ width: 40px;
40
+ height: 40px;
41
+ border-radius: 50%;
42
+ cursor: pointer;
43
+ transition: all 0.2s;
44
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
45
+ }
46
+
47
+ .color-option:hover {
48
+ transform: scale(1.1);
49
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
50
+ }
51
+
52
+ .color-option.selected {
53
+ border: 3px solid #4f46e5;
54
+ transform: scale(1.1);
55
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
56
+ }
57
+
58
+ .result-container {
59
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
60
+ transition: all 0.3s ease;
61
+ }
62
+
63
+ .loading-spinner {
64
+ animation: spin 1s linear infinite;
65
+ }
66
+
67
+ @keyframes spin {
68
+ 0% { transform: rotate(0deg); }
69
+ 100% { transform: rotate(360deg); }
70
+ }
71
+
72
+ .history-item {
73
+ transition: all 0.2s ease;
74
+ transform-origin: center;
75
+ }
76
+
77
+ .history-item:hover {
78
+ transform: translateY(-5px) scale(1.02);
79
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
80
+ z-index: 10;
81
+ }
82
+
83
+ .tooltip {
84
+ position: relative;
85
+ display: inline-block;
86
+ }
87
+
88
+ .tooltip .tooltiptext {
89
+ visibility: hidden;
90
+ width: 120px;
91
+ background-color: #555;
92
+ color: #fff;
93
+ text-align: center;
94
+ border-radius: 6px;
95
+ padding: 5px;
96
+ position: absolute;
97
+ z-index: 1;
98
+ bottom: 125%;
99
+ left: 50%;
100
+ margin-left: -60px;
101
+ opacity: 0;
102
+ transition: opacity 0.3s;
103
+ font-size: 12px;
104
+ }
105
+
106
+ .tooltip .tooltiptext::after {
107
+ content: "";
108
+ position: absolute;
109
+ top: 100%;
110
+ left: 50%;
111
+ margin-left: -5px;
112
+ border-width: 5px;
113
+ border-style: solid;
114
+ border-color: #555 transparent transparent transparent;
115
+ }
116
+
117
+ .tooltip:hover .tooltiptext {
118
+ visibility: visible;
119
+ opacity: 1;
120
+ }
121
+
122
+ .fade-in {
123
+ animation: fadeIn 0.5s ease-in;
124
+ }
125
+
126
+ @keyframes fadeIn {
127
+ from { opacity: 0; }
128
+ to { opacity: 1; }
129
+ }
130
+
131
+ .slide-up {
132
+ animation: slideUp 0.5s ease-out;
133
+ }
134
+
135
+ @keyframes slideUp {
136
+ from {
137
+ transform: translateY(20px);
138
+ opacity: 0;
139
+ }
140
+ to {
141
+ transform: translateY(0);
142
+ opacity: 1;
143
+ }
144
+ }
145
+
146
+ .pulse {
147
+ animation: pulse 2s infinite;
148
+ }
149
+
150
+ @keyframes pulse {
151
+ 0% { transform: scale(1); }
152
+ 50% { transform: scale(1.05); }
153
+ 100% { transform: scale(1); }
154
+ }
155
+
156
+ .nav-link {
157
+ position: relative;
158
+ }
159
+
160
+ .nav-link::after {
161
+ content: '';
162
+ position: absolute;
163
+ width: 0;
164
+ height: 2px;
165
+ bottom: 0;
166
+ left: 0;
167
+ background-color: #4f46e5;
168
+ transition: width 0.3s ease;
169
+ }
170
+
171
+ .nav-link:hover::after {
172
+ width: 100%;
173
+ }
174
+
175
+ .progress-bar {
176
+ height: 4px;
177
+ background: linear-gradient(90deg, #4f46e5 0%, #a5b4fc 100%);
178
+ width: 0%;
179
+ transition: width 0.3s ease;
180
+ }
181
+
182
+ .notification {
183
+ position: fixed;
184
+ top: 20px;
185
+ right: 20px;
186
+ padding: 15px 20px;
187
+ background: #4f46e5;
188
+ color: white;
189
+ border-radius: 8px;
190
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
191
+ transform: translateX(200%);
192
+ transition: transform 0.3s ease;
193
+ z-index: 1000;
194
+ }
195
+
196
+ .notification.show {
197
+ transform: translateX(0);
198
+ }
199
+
200
+ .modal {
201
+ display: none;
202
+ position: fixed;
203
+ top: 0;
204
+ left: 0;
205
+ width: 100%;
206
+ height: 100%;
207
+ background-color: rgba(0, 0, 0, 0.5);
208
+ z-index: 100;
209
+ justify-content: center;
210
+ align-items: center;
211
+ }
212
+
213
+ .modal-content {
214
+ background: white;
215
+ padding: 30px;
216
+ border-radius: 12px;
217
+ max-width: 500px;
218
+ width: 90%;
219
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
220
+ transform: scale(0.9);
221
+ opacity: 0;
222
+ transition: all 0.3s ease;
223
+ }
224
+
225
+ .modal.show .modal-content {
226
+ transform: scale(1);
227
+ opacity: 1;
228
+ }
229
+
230
+ .tabs {
231
+ display: flex;
232
+ border-bottom: 1px solid #e5e7eb;
233
+ }
234
+
235
+ .tab {
236
+ padding: 10px 20px;
237
+ cursor: pointer;
238
+ border-bottom: 2px solid transparent;
239
+ transition: all 0.3s ease;
240
+ }
241
+
242
+ .tab.active {
243
+ border-bottom: 2px solid #4f46e5;
244
+ color: #4f46e5;
245
+ font-weight: 600;
246
+ }
247
+
248
+ .tab:hover:not(.active) {
249
+ border-bottom: 2px solid #a5b4fc;
250
+ color: #4f46e5;
251
+ }
252
+
253
+ .tab-content {
254
+ display: none;
255
+ }
256
+
257
+ .tab-content.active {
258
+ display: block;
259
+ animation: fadeIn 0.5s ease;
260
+ }
261
+
262
+ .accordion {
263
+ border: 1px solid #e5e7eb;
264
+ border-radius: 8px;
265
+ overflow: hidden;
266
+ }
267
+
268
+ .accordion-item {
269
+ border-bottom: 1px solid #e5e7eb;
270
+ }
271
+
272
+ .accordion-item:last-child {
273
+ border-bottom: none;
274
+ }
275
+
276
+ .accordion-header {
277
+ padding: 15px 20px;
278
+ background: #f9fafb;
279
+ cursor: pointer;
280
+ display: flex;
281
+ justify-content: space-between;
282
+ align-items: center;
283
+ transition: background 0.3s ease;
284
+ }
285
+
286
+ .accordion-header:hover {
287
+ background: #f3f4f6;
288
+ }
289
+
290
+ .accordion-content {
291
+ padding: 0;
292
+ max-height: 0;
293
+ overflow: hidden;
294
+ transition: max-height 0.3s ease, padding 0.3s ease;
295
+ }
296
+
297
+ .accordion-item.active .accordion-content {
298
+ padding: 15px 20px;
299
+ max-height: 500px;
300
+ }
301
+
302
+ .accordion-item.active .accordion-header {
303
+ background: #eef2ff;
304
+ }
305
+
306
+ .badge {
307
+ display: inline-block;
308
+ padding: 3px 8px;
309
+ border-radius: 9999px;
310
+ font-size: 12px;
311
+ font-weight: 600;
312
+ text-transform: uppercase;
313
+ letter-spacing: 0.05em;
314
+ }
315
+
316
+ .badge-new {
317
+ background-color: #ec4899;
318
+ color: white;
319
+ }
320
+
321
+ .badge-pro {
322
+ background-color: #10b981;
323
+ color: white;
324
+ }
325
+
326
+ .badge-beta {
327
+ background-color: #f59e0b;
328
+ color: white;
329
+ }
330
+
331
+ .dropdown {
332
+ position: relative;
333
+ display: inline-block;
334
+ }
335
+
336
+ .dropdown-content {
337
+ display: none;
338
+ position: absolute;
339
+ right: 0;
340
+ background-color: white;
341
+ min-width: 200px;
342
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
343
+ border-radius: 8px;
344
+ z-index: 1;
345
+ opacity: 0;
346
+ transform: translateY(-10px);
347
+ transition: all 0.3s ease;
348
+ }
349
+
350
+ .dropdown:hover .dropdown-content {
351
+ display: block;
352
+ opacity: 1;
353
+ transform: translateY(0);
354
+ }
355
+
356
+ .dropdown-item {
357
+ padding: 10px 15px;
358
+ display: block;
359
+ transition: background 0.2s ease;
360
+ }
361
+
362
+ .dropdown-item:hover {
363
+ background-color: #f3f4f6;
364
+ }
365
+
366
+ .dropdown-divider {
367
+ height: 1px;
368
+ background-color: #e5e7eb;
369
+ margin: 5px 0;
370
+ }
371
+
372
+ .carousel {
373
+ position: relative;
374
+ overflow: hidden;
375
+ border-radius: 12px;
376
+ }
377
+
378
+ .carousel-inner {
379
+ display: flex;
380
+ transition: transform 0.5s ease;
381
+ }
382
+
383
+ .carousel-item {
384
+ min-width: 100%;
385
+ }
386
+
387
+ .carousel-control {
388
+ position: absolute;
389
+ top: 50%;
390
+ transform: translateY(-50%);
391
+ background-color: rgba(255, 255, 255, 0.8);
392
+ border: none;
393
+ border-radius: 50%;
394
+ width: 40px;
395
+ height: 40px;
396
+ display: flex;
397
+ align-items: center;
398
+ justify-content: center;
399
+ cursor: pointer;
400
+ z-index: 10;
401
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
402
+ transition: all 0.3s ease;
403
+ }
404
+
405
+ .carousel-control:hover {
406
+ background-color: white;
407
+ transform: translateY(-50%) scale(1.1);
408
+ }
409
+
410
+ .carousel-control.prev {
411
+ left: 15px;
412
+ }
413
+
414
+ .carousel-control.next {
415
+ right: 15px;
416
+ }
417
+
418
+ .carousel-indicators {
419
+ position: absolute;
420
+ bottom: 15px;
421
+ left: 50%;
422
+ transform: translateX(-50%);
423
+ display: flex;
424
+ gap: 8px;
425
+ }
426
+
427
+ .carousel-indicator {
428
+ width: 10px;
429
+ height: 10px;
430
+ border-radius: 50%;
431
+ background-color: rgba(255, 255, 255, 0.5);
432
+ cursor: pointer;
433
+ transition: all 0.3s ease;
434
+ }
435
+
436
+ .carousel-indicator.active {
437
+ background-color: white;
438
+ transform: scale(1.2);
439
+ }
440
+
441
+ .floating-action-button {
442
+ position: fixed;
443
+ bottom: 30px;
444
+ right: 30px;
445
+ width: 60px;
446
+ height: 60px;
447
+ border-radius: 50%;
448
+ background-color: #4f46e5;
449
+ color: white;
450
+ display: flex;
451
+ align-items: center;
452
+ justify-content: center;
453
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
454
+ cursor: pointer;
455
+ z-index: 100;
456
+ transition: all 0.3s ease;
457
+ }
458
+
459
+ .floating-action-button:hover {
460
+ transform: scale(1.1);
461
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
462
+ }
463
+
464
+ .toast {
465
+ position: fixed;
466
+ bottom: 20px;
467
+ left: 50%;
468
+ transform: translateX(-50%);
469
+ padding: 12px 24px;
470
+ background-color: #4f46e5;
471
+ color: white;
472
+ border-radius: 8px;
473
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
474
+ opacity: 0;
475
+ transition: opacity 0.3s ease;
476
+ z-index: 1000;
477
+ }
478
+
479
+ .toast.show {
480
+ opacity: 1;
481
+ }
482
+ </style>
483
+ </head>
484
+ <body class="gradient-bg min-h-screen">
485
+ <!-- Notification -->
486
+ <div id="notification" class="notification">
487
+ <div class="flex items-center">
488
+ <i class="fas fa-check-circle mr-2"></i>
489
+ <span id="notification-message">Success! Your image has been processed.</span>
490
+ </div>
491
+ </div>
492
+
493
+ <!-- Toast -->
494
+ <div id="toast" class="toast">
495
+ <div class="flex items-center">
496
+ <i class="fas fa-info-circle mr-2"></i>
497
+ <span id="toast-message">Processing your image...</span>
498
+ </div>
499
+ </div>
500
+
501
+ <!-- Modal -->
502
+ <div id="login-modal" class="modal">
503
+ <div class="modal-content">
504
+ <div class="flex justify-between items-center mb-6">
505
+ <h3 class="text-2xl font-bold text-gray-800">Sign In to RookusAI</h3>
506
+ <button id="close-modal" class="text-gray-400 hover:text-gray-600">
507
+ <i class="fas fa-times"></i>
508
+ </button>
509
+ </div>
510
+
511
+ <div class="tabs mb-6">
512
+ <div class="tab active" data-tab="login">Sign In</div>
513
+ <div class="tab" data-tab="register">Create Account</div>
514
+ </div>
515
+
516
+ <div class="tab-content active" id="login-tab">
517
+ <form id="login-form">
518
+ <div class="mb-4">
519
+ <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
520
+ <input type="email" id="login-email" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="[email protected]" required>
521
+ </div>
522
+ <div class="mb-6">
523
+ <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
524
+ <input type="password" id="login-password" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="••••••••" required>
525
+ </div>
526
+ <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md transition duration-200">
527
+ Sign In
528
+ </button>
529
+ </form>
530
+ <div class="mt-4 text-center text-sm text-gray-500">
531
+ <a href="#" class="text-indigo-600 hover:text-indigo-500">Forgot password?</a>
532
+ </div>
533
+ <div class="mt-6">
534
+ <div class="relative">
535
+ <div class="absolute inset-0 flex items-center">
536
+ <div class="w-full border-t border-gray-300"></div>
537
+ </div>
538
+ <div class="relative flex justify-center text-sm">
539
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
540
+ </div>
541
+ </div>
542
+ <div class="mt-6 grid grid-cols-2 gap-3">
543
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
544
+ <i class="fab fa-google text-red-500 mr-2"></i> Google
545
+ </button>
546
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
547
+ <i class="fab fa-github text-gray-800 mr-2"></i> GitHub
548
+ </button>
549
+ </div>
550
+ </div>
551
+ </div>
552
+
553
+ <div class="tab-content" id="register-tab">
554
+ <form id="register-form">
555
+ <div class="mb-4">
556
+ <label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
557
+ <input type="text" id="register-name" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="John Doe" required>
558
+ </div>
559
+ <div class="mb-4">
560
+ <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
561
+ <input type="email" id="register-email" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="[email protected]" required>
562
+ </div>
563
+ <div class="mb-4">
564
+ <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
565
+ <input type="password" id="register-password" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="••••••••" required>
566
+ </div>
567
+ <div class="mb-6">
568
+ <label for="register-confirm" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
569
+ <input type="password" id="register-confirm" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="••••••••" required>
570
+ </div>
571
+ <div class="flex items-center mb-4">
572
+ <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
573
+ <label for="terms" class="ml-2 block text-sm text-gray-700">
574
+ I agree to the <a href="#" class="text-indigo-600 hover:text-indigo-500">Terms</a> and <a href="#" class="text-indigo-600 hover:text-indigo-500">Privacy Policy</a>
575
+ </label>
576
+ </div>
577
+ <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md transition duration-200">
578
+ Create Account
579
+ </button>
580
+ </form>
581
+ </div>
582
+ </div>
583
+ </div>
584
+
585
+ <!-- Profile Dropdown Modal -->
586
+ <div id="profile-modal" class="modal">
587
+ <div class="modal-content">
588
+ <div class="flex justify-between items-center mb-6">
589
+ <h3 class="text-2xl font-bold text-gray-800">Your Profile</h3>
590
+ <button id="close-profile-modal" class="text-gray-400 hover:text-gray-600">
591
+ <i class="fas fa-times"></i>
592
+ </button>
593
+ </div>
594
+
595
+ <div class="flex items-center mb-6">
596
+ <div class="relative">
597
+ <img id="profile-avatar" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" class="w-16 h-16 rounded-full object-cover" alt="Profile">
598
+ <div class="absolute bottom-0 right-0 bg-indigo-500 rounded-full p-1">
599
+ <i class="fas fa-camera text-white text-xs"></i>
600
+ </div>
601
+ </div>
602
+ <div class="ml-4">
603
+ <h4 id="profile-name" class="text-lg font-semibold text-gray-800">John Doe</h4>
604
+ <p id="profile-email" class="text-sm text-gray-500">[email protected]</p>
605
+ </div>
606
+ </div>
607
+
608
+ <div class="space-y-4">
609
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 transition duration-200">
610
+ <i class="fas fa-user-circle text-gray-500 mr-3"></i>
611
+ <span class="text-gray-700">Account Settings</span>
612
+ </a>
613
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 transition duration-200">
614
+ <i class="fas fa-history text-gray-500 mr-3"></i>
615
+ <span class="text-gray-700">History & Saved</span>
616
+ </a>
617
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 transition duration-200">
618
+ <i class="fas fa-credit-card text-gray-500 mr-3"></i>
619
+ <span class="text-gray-700">Billing & Plans</span>
620
+ </a>
621
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 transition duration-200">
622
+ <i class="fas fa-cog text-gray-500 mr-3"></i>
623
+ <span class="text-gray-700">Preferences</span>
624
+ </a>
625
+ </div>
626
+
627
+ <div class="mt-6 pt-4 border-t border-gray-200">
628
+ <button id="sign-out-btn" class="w-full flex justify-center items-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
629
+ <i class="fas fa-sign-out-alt mr-2"></i> Sign Out
630
+ </button>
631
+ </div>
632
+ </div>
633
+ </div>
634
+
635
+ <!-- Navigation -->
636
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
637
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
638
+ <div class="flex justify-between h-16">
639
+ <div class="flex items-center">
640
+ <div class="flex-shrink-0 flex items-center">
641
+ <i class="fas fa-tshirt text-indigo-600 text-2xl mr-2"></i>
642
+ <span class="text-xl font-bold text-gray-900">RookusAI</span>
643
+ </div>
644
+ </div>
645
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
646
+ <a href="#" class="nav-link px-3 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">Home</a>
647
+ <a href="#" class="nav-link px-3 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">Features</a>
648
+ <a href="#" class="nav-link px-3 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">Pricing</a>
649
+ <a href="#" class="nav-link px-3 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">About</a>
650
+ </div>
651
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
652
+ <div id="auth-buttons">
653
+ <button id="sign-in-btn" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
654
+ Sign In
655
+ </button>
656
+ </div>
657
+ <div id="user-profile" class="ml-3 relative hidden">
658
+ <div class="dropdown">
659
+ <button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out">
660
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile">
661
+ </button>
662
+ <div class="dropdown-content">
663
+ <div class="px-4 py-3">
664
+ <p class="text-sm text-gray-900">Signed in as</p>
665
+ <p id="dropdown-email" class="text-sm font-medium text-gray-700 truncate">[email protected]</p>
666
+ </div>
667
+ <div class="dropdown-divider"></div>
668
+ <a href="#" class="dropdown-item">
669
+ <i class="fas fa-user-circle mr-2 text-gray-500"></i> Profile
670
+ </a>
671
+ <a href="#" class="dropdown-item">
672
+ <i class="fas fa-history mr-2 text-gray-500"></i> History
673
+ </a>
674
+ <a href="#" class="dropdown-item">
675
+ <i class="fas fa-cog mr-2 text-gray-500"></i> Settings
676
+ </a>
677
+ <div class="dropdown-divider"></div>
678
+ <button id="dropdown-sign-out" class="dropdown-item text-left w-full">
679
+ <i class="fas fa-sign-out-alt mr-2 text-gray-500"></i> Sign out
680
+ </button>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ <div class="-mr-2 flex items-center sm:hidden">
686
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
687
+ <span class="sr-only">Open main menu</span>
688
+ <i class="fas fa-bars"></i>
689
+ </button>
690
+ </div>
691
+ </div>
692
+ </div>
693
+
694
+ <!-- Mobile menu -->
695
+ <div class="sm:hidden hidden" id="mobile-menu">
696
+ <div class="pt-2 pb-3 space-y-1">
697
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Home</a>
698
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Features</a>
699
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Pricing</a>
700
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">About</a>
701
+ </div>
702
+ <div class="pt-4 pb-3 border-t border-gray-200">
703
+ <div id="mobile-auth-buttons" class="px-5">
704
+ <button id="mobile-sign-in-btn" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700">
705
+ Sign In
706
+ </button>
707
+ </div>
708
+ <div id="mobile-user-profile" class="mt-3 px-2 space-y-1 hidden">
709
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Your Profile</a>
710
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Settings</a>
711
+ <button id="mobile-sign-out-btn" class="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">
712
+ Sign Out
713
+ </button>
714
+ </div>
715
+ </div>
716
+ </div>
717
+ </nav>
718
+
719
+ <!-- Progress Bar -->
720
+ <div id="progress-bar" class="progress-bar"></div>
721
+
722
+ <!-- Main Content -->
723
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
724
+ <!-- Hero Section -->
725
+ <div class="text-center mb-12 slide-up">
726
+ <div class="flex justify-center mb-4">
727
+ <span class="badge badge-new">New</span>
728
+ <span class="badge badge-pro ml-2">Pro Feature</span>
729
+ </div>
730
+ <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
731
+ AI-Powered Dress Recoloring
732
+ </h1>
733
+ <p class="mt-5 max-w-xl mx-auto text-xl text-gray-500">
734
+ Transform your outfit with CosXL's advanced AI technology. Simply upload a photo and choose your desired color.
735
+ </p>
736
+ <div class="mt-8 flex justify-center space-x-4">
737
+ <button class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
738
+ <i class="fas fa-magic mr-2"></i> Try It Now
739
+ </button>
740
+ <button class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
741
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
742
+ </button>
743
+ </div>
744
+ </div>
745
+
746
+ <!-- How It Works Section -->
747
+ <div class="mt-16 mb-16">
748
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">How It Works</h2>
749
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
750
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200 text-center">
751
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600 mb-4">
752
+ <i class="fas fa-cloud-upload-alt"></i>
753
+ </div>
754
+ <h3 class="text-xl font-semibold mb-2">Upload Your Image</h3>
755
+ <p class="text-gray-500">Simply drag & drop your dress photo or browse your files. We support JPG, PNG up to 10MB.</p>
756
+ </div>
757
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200 text-center">
758
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600 mb-4">
759
+ <i class="fas fa-palette"></i>
760
+ </div>
761
+ <h3 class="text-xl font-semibold mb-2">Choose Your Color</h3>
762
+ <p class="text-gray-500">Select from our color palette or describe exactly what color you want in natural language.</p>
763
+ </div>
764
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200 text-center">
765
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600 mb-4">
766
+ <i class="fas fa-magic"></i>
767
+ </div>
768
+ <h3 class="text-xl font-semibold mb-2">Download Result</h3>
769
+ <p class="text-gray-500">Get your professionally recolored image in seconds. Save, share or order prints directly.</p>
770
+ </div>
771
+ </div>
772
+ </div>
773
+
774
+ <!-- Main Editor Section -->
775
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
776
+ <!-- Upload and Controls Section -->
777
+ <div class="bg-white rounded-xl shadow-md p-6">
778
+ <div class="mb-6">
779
+ <div class="flex justify-between items-center mb-4">
780
+ <h2 class="text-xl font-semibold text-gray-800">Upload Your Dress Photo</h2>
781
+ <div class="tooltip">
782
+ <i class="fas fa-info-circle text-gray-400 cursor-pointer"></i>
783
+ <span class="tooltiptext">Supported formats: JPG, PNG, WEBP (Max 10MB)</span>
784
+ </div>
785
+ </div>
786
+ <div id="upload-area" class="upload-area rounded-lg p-8 text-center cursor-pointer">
787
+ <input type="file" id="file-input" class="hidden" accept="image/*">
788
+ <div id="upload-content">
789
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
790
+ <p class="text-gray-500">Drag & drop your photo here or click to browse</p>
791
+ <p class="text-sm text-gray-400 mt-2">Supports JPG, PNG (Max 10MB)</p>
792
+ </div>
793
+ <img id="preview-image" class="hidden max-w-full h-auto rounded-lg mx-auto" alt="Preview">
794
+ </div>
795
+ <div class="mt-3 flex justify-between text-sm text-gray-500">
796
+ <span id="file-name">No file selected</span>
797
+ <span id="file-size">0 MB</span>
798
+ </div>
799
+ </div>
800
+
801
+ <div class="mb-6">
802
+ <div class="flex justify-between items-center mb-4">
803
+ <h2 class="text-xl font-semibold text-gray-800">Color Instructions</h2>
804
+ <button id="random-color-btn" class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-2 py-1 rounded">
805
+ <i class="fas fa-random mr-1"></i> Random
806
+ </button>
807
+ </div>
808
+ <div class="mb-4">
809
+ <label for="color-prompt" class="block text-sm font-medium text-gray-700 mb-1">Describe the color change</label>
810
+ <input type="text" id="color-prompt" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g. Change the dress to emerald green">
811
+ </div>
812
+ <div class="grid grid-cols-5 gap-4 mb-4">
813
+ <div class="color-option bg-red-500 selected" data-prompt="change the dress to bright red" title="Red"></div>
814
+ <div class="color-option bg-blue-500" data-prompt="change the dress to deep blue" title="Blue"></div>
815
+ <div class="color-option bg-green-500" data-prompt="change the dress to emerald green" title="Green"></div>
816
+ <div class="color-option bg-yellow-400" data-prompt="change the dress to golden yellow" title="Yellow"></div>
817
+ <div class="color-option bg-purple-500" data-prompt="change the dress to royal purple" title="Purple"></div>
818
+ <div class="color-option bg-pink-500" data-prompt="change the dress to hot pink" title="Pink"></div>
819
+ <div class="color-option bg-indigo-500" data-prompt="change the dress to indigo" title="Indigo"></div>
820
+ <div class="color-option bg-teal-500" data-prompt="change the dress to teal" title="Teal"></div>
821
+ <div class="color-option bg-gray-500" data-prompt="change the dress to charcoal gray" title="Gray"></div>
822
+ <div class="color-option bg-black" data-prompt="change the dress to black" title="Black"></div>
823
+ </div>
824
+ <div class="grid grid-cols-5 gap-4">
825
+ <div class="color-option bg-red-300" data-prompt="change the dress to pastel pink" title="Pastel Pink"></div>
826
+ <div class="color-option bg-blue-300" data-prompt="change the dress to sky blue" title="Sky Blue"></div>
827
+ <div class="color-option bg-green-300" data-prompt="change the dress to mint green" title="Mint Green"></div>
828
+ <div class="color-option bg-yellow-200" data-prompt="change the dress to lemon yellow" title="Lemon Yellow"></div>
829
+ <div class="color-option bg-purple-300" data-prompt="change the dress to lavender" title="Lavender"></div>
830
+ </div>
831
+ </div>
832
+
833
+ <div class="mb-6">
834
+ <div class="flex items-center justify-between mb-4">
835
+ <h2 class="text-xl font-semibold text-gray-800">Advanced Options</h2>
836
+ <button id="toggle-advanced" class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-2 py-1 rounded">
837
+ <i class="fas fa-cog mr-1"></i> Toggle
838
+ </button>
839
+ </div>
840
+
841
+ <div id="advanced-options" class="space-y-4">
842
+ <div>
843
+ <label for="negative-prompt" class="block text-sm font-medium text-gray-700 mb-1">Negative Prompt</label>
844
+ <input type="text" id="negative-prompt" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Things you don't want in the result">
845
+ </div>
846
+ <div>
847
+ <label for="guidance-scale" class="block text-sm font-medium text-gray-700 mb-1">Guidance Scale</label>
848
+ <input type="range" id="guidance-scale" min="1" max="20" value="7" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
849
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
850
+ <span>1 (More Creative)</span>
851
+ <span>7</span>
852
+ <span>20 (More Precise)</span>
853
+ </div>
854
+ </div>
855
+ <div>
856
+ <label for="steps" class="block text-sm font-medium text-gray-700 mb-1">Steps</label>
857
+ <input type="range" id="steps" min="10" max="50" value="20" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
858
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
859
+ <span>10 (Faster)</span>
860
+ <span>20</span>
861
+ <span>50 (Higher Quality)</span>
862
+ </div>
863
+ </div>
864
+ <div>
865
+ <label for="style" class="block text-sm font-medium text-gray-700 mb-1">Style</label>
866
+ <select id="style" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
867
+ <option value="realistic">Realistic</option>
868
+ <option value="artistic">Artistic</option>
869
+ <option value="vintage">Vintage</option>
870
+ <option value="futuristic">Futuristic</option>
871
+ </select>
872
+ </div>
873
+ </div>
874
+ </div>
875
+
876
+ <button id="generate-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
877
+ <span>Recolor Dress</span>
878
+ <i id="generate-icon" class="fas fa-magic ml-2"></i>
879
+ <i id="loading-icon" class="fas fa-circle-notch loading-spinner ml-2 hidden"></i>
880
+ </button>
881
+
882
+ <div class="mt-4 text-center text-sm text-gray-500">
883
+ <p>By using RookusAI, you agree to our <a href="#" class="text-indigo-600 hover:text-indigo-500">Terms</a> and <a href="#" class="text-indigo-600 hover:text-indigo-500">Privacy Policy</a></p>
884
+ </div>
885
+ </div>
886
+
887
+ <!-- Results Section -->
888
+ <div class="bg-white rounded-xl shadow-md p-6">
889
+ <div class="flex justify-between items-center mb-4">
890
+ <h2 class="text-xl font-semibold text-gray-800">Your Results</h2>
891
+ <div class="flex space-x-2">
892
+ <button id="clear-results" class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-2 py-1 rounded">
893
+ <i class="fas fa-trash-alt mr-1"></i> Clear
894
+ </button>
895
+ <button id="save-preset" class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-2 py-1 rounded">
896
+ <i class="fas fa-save mr-1"></i> Save
897
+ </button>
898
+ </div>
899
+ </div>
900
+
901
+ <div id="result-container" class="result-container bg-gray-50 rounded-lg p-4 hidden">
902
+ <div class="flex justify-between mb-4">
903
+ <h3 class="text-lg font-medium text-gray-700">Original</h3>
904
+ <h3 class="text-lg font-medium text-gray-700">Recolored</h3>
905
+ </div>
906
+ <div class="grid grid-cols-2 gap-4">
907
+ <img id="original-image" class="w-full h-auto rounded-lg" alt="Original">
908
+ <img id="result-image" class="w-full h-auto rounded-lg" alt="Result">
909
+ </div>
910
+ <div class="mt-4 flex justify-between">
911
+ <button id="download-btn" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-700 font-medium py-2 px-4 rounded-lg transition duration-200">
912
+ <i class="fas fa-download mr-2"></i> Download
913
+ </button>
914
+ <button id="save-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition duration-200">
915
+ <i class="fas fa-save mr-2"></i> Save to Profile
916
+ </button>
917
+ <button id="share-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition duration-200">
918
+ <i class="fas fa-share-alt mr-2"></i> Share
919
+ </button>
920
+ </div>
921
+ </div>
922
+
923
+ <div id="empty-state" class="text-center py-12">
924
+ <i class="fas fa-tshirt text-4xl text-gray-300 mb-4"></i>
925
+ <h3 class="text-lg font-medium text-gray-500">No results yet</h3>
926
+ <p class="text-gray-400 mt-1">Upload a photo and click "Recolor Dress" to see the magic!</p>
927
+ </div>
928
+
929
+ <div id="history-section" class="mt-8 hidden">
930
+ <div class="flex justify-between items-center mb-3">
931
+ <h3 class="text-lg font-medium text-gray-700">Recent Recolors</h3>
932
+ <button id="clear-history" class="text-xs text-gray-500 hover:text-gray-700">
933
+ Clear All
934
+ </button>
935
+ </div>
936
+ <div class="grid grid-cols-3 gap-3" id="history-grid">
937
+ <!-- History items will be added here dynamically -->
938
+ </div>
939
+ </div>
940
+
941
+ <div id="presets-section" class="mt-8 hidden">
942
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Your Saved Presets</h3>
943
+ <div class="grid grid-cols-3 gap-3" id="presets-grid">
944
+ <div class="history-item bg-white p-2 rounded-lg shadow-sm cursor-pointer">
945
+ <div class="relative">
946
+ <img src="https://via.placeholder.com/150" class="w-full h-auto rounded" alt="Preset">
947
+ <div class="absolute inset-0 bg-indigo-500 bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-200">
948
+ <button class="bg-white text-indigo-600 p-1 rounded-full">
949
+ <i class="fas fa-play"></i>
950
+ </button>
951
+ </div>
952
+ </div>
953
+ <p class="text-xs text-gray-700 mt-1 truncate">Emerald Green</p>
954
+ </div>
955
+ <div class="history-item bg-white p-2 rounded-lg shadow-sm cursor-pointer">
956
+ <div class="relative">
957
+ <img src="https://via.placeholder.com/150" class="w-full h-auto rounded" alt="Preset">
958
+ <div class="absolute inset-0 bg-indigo-500 bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-200">
959
+ <button class="bg-white text-indigo-600 p-1 rounded-full">
960
+ <i class="fas fa-play"></i>
961
+ </button>
962
+ </div>
963
+ </div>
964
+ <p class="text-xs text-gray-700 mt-1 truncate">Royal Purple</p>
965
+ </div>
966
+ <div class="history-item bg-white p-2 rounded-lg shadow-sm cursor-pointer">
967
+ <div class="relative">
968
+ <img src="https://via.placeholder.com/150" class="w-full h-auto rounded" alt="Preset">
969
+ <div class="absolute inset-0 bg-indigo-500 bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-200">
970
+ <button class="bg-white text-indigo-600 p-1 rounded-full">
971
+ <i class="fas fa-play"></i>
972
+ </button>
973
+ </div>
974
+ </div>
975
+ <p class="text-xs text-gray-700 mt-1 truncate">Sunset Orange</p>
976
+ </div>
977
+ </div>
978
+ </div>
979
+ </div>
980
+ </div>
981
+
982
+ <!-- Features Section -->
983
+ <div class="mt-16">
984
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Why Choose RookusAI with CosXL?</h2>
985
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
986
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200">
987
+ <div class="text-indigo-600 mb-4">
988
+ <i class="fas fa-bolt text-3xl"></i>
989
+ </div>
990
+ <h3 class="text-xl font-semibold mb-2">Advanced AI Technology</h3>
991
+ <p class="text-gray-500">Powered by CosXL's state-of-the-art image editing capabilities for realistic color transformations.</p>
992
+ </div>
993
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200">
994
+ <div class="text-indigo-600 mb-4">
995
+ <i class="fas fa-palette text-3xl"></i>
996
+ </div>
997
+ <h3 class="text-xl font-semibold mb-2">Precise Color Control</h3>
998
+ <p class="text-gray-500">Get exactly the color you want with natural-looking results that maintain fabric textures.</p>
999
+ </div>
1000
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200">
1001
+ <div class="text-indigo-600 mb-4">
1002
+ <i class="fas fa-lock text-3xl"></i>
1003
+ </div>
1004
+ <h3 class="text-xl font-semibold mb-2">Secure Processing</h3>
1005
+ <p class="text-gray-500">Your images are processed securely through CosXL's API with no permanent storage.</p>
1006
+ </div>
1007
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200">
1008
+ <div class="text-indigo-600 mb-4">
1009
+ <i class="fas fa-history text-3xl"></i>
1010
+ </div>
1011
+ <h3 class="text-xl font-semibold mb-2">History & Presets</h3>
1012
+ <p class="text-gray-500">Save your favorite color combinations and access your recent edits anytime.</p>
1013
+ </div>
1014
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200">
1015
+ <div class="text-indigo-600 mb-4">
1016
+ <i class="fas fa-mobile-alt text-3xl"></i>
1017
+ </div>
1018
+ <h3 class="text-xl font-semibold mb-2">Mobile Friendly</h3>
1019
+ <p class="text-gray-500">Works perfectly on all devices. Edit your photos on the go from your smartphone.</p>
1020
+ </div>
1021
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200">
1022
+ <div class="text-indigo-600 mb-4">
1023
+ <i class="fas fa-rocket text-3xl"></i>
1024
+ </div>
1025
+ <h3 class="text-xl font-semibold mb-2">Fast Processing</h3>
1026
+ <p class="text-gray-500">Get results in seconds thanks to our optimized AI models and cloud infrastructure.</p>
1027
+ </div>
1028
+ </div>
1029
+ </div>
1030
+
1031
+ <!-- Testimonials -->
1032
+ <div class="mt-16">
1033
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">What Our Users Say</h2>
1034
+ <div class="carousel bg-white rounded-xl shadow-md overflow-hidden">
1035
+ <div class="carousel-inner">
1036
+ <div class="carousel-item p-8">
1037
+ <div class="flex items-center mb-6">
1038
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full object-cover" alt="User">
1039
+ <div class="ml-4">
1040
+ <h4 class="text-lg font-semibold">Sarah Johnson</h4>
1041
+ <p class="text-sm text-gray-500">Fashion Designer</p>
1042
+ </div>
1043
+ </div>
1044
+ <p class="text-gray-700 mb-4">"RookusAI has completely transformed how I work with colors. I can now visualize any dress in different colors before production, saving me countless hours and resources."</p>
1045
+ <div class="flex text-yellow-400">
1046
+ <i class="fas fa-star"></i>
1047
+ <i class="fas fa-star"></i>
1048
+ <i class="fas fa-star"></i>
1049
+ <i class="fas fa-star"></i>
1050
+ <i class="fas fa-star"></i>
1051
+ </div>
1052
+ </div>
1053
+ <div class="carousel-item p-8">
1054
+ <div class="flex items-center mb-6">
1055
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full object-cover" alt="User">
1056
+ <div class="ml-4">
1057
+ <h4 class="text-lg font-semibold">Michael Chen</h4>
1058
+ <p class="text-sm text-gray-500">E-commerce Store Owner</p>
1059
+ </div>
1060
+ </div>
1061
+ <p class="text-gray-700 mb-4">"The ability to show products in multiple colors without photographing each variation has increased my conversion rates by 30%. This tool is a game-changer for online retail."</p>
1062
+ <div class="flex text-yellow-400">
1063
+ <i class="fas fa-star"></i>
1064
+ <i class="fas fa-star"></i>
1065
+ <i class="fas fa-star"></i>
1066
+ <i class="fas fa-star"></i>
1067
+ <i class="fas fa-star"></i>
1068
+ </div>
1069
+ </div>
1070
+ <div class="carousel-item p-8">
1071
+ <div class="flex items-center mb-6">
1072
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full object-cover" alt="User">
1073
+ <div class="ml-4">
1074
+ <h4 class="text-lg font-semibold">Emma Rodriguez</h4>
1075
+ <p class="text-sm text-gray-500">Blogger</p>
1076
+ </div>
1077
+ </div>
1078
+ <p class="text-gray-700 mb-4">"As a fashion blogger, I love experimenting with different looks. RookusAI lets me try endless color combinations without buying new clothes. My followers are obsessed!"</p>
1079
+ <div class="flex text-yellow-400">
1080
+ <i class="fas fa-star"></i>
1081
+ <i class="fas fa-star"></i>
1082
+ <i class="fas fa-star"></i>
1083
+ <i class="fas fa-star"></i>
1084
+ <i class="fas fa-star-half-alt"></i>
1085
+ </div>
1086
+ </div>
1087
+ </div>
1088
+ <button class="carousel-control prev">
1089
+ <i class="fas fa-chevron-left"></i>
1090
+ </button>
1091
+ <button class="carousel-control next">
1092
+ <i class="fas fa-chevron-right"></i>
1093
+ </button>
1094
+ <div class="carousel-indicators">
1095
+ <div class="carousel-indicator active"></div>
1096
+ <div class="carousel-indicator"></div>
1097
+ <div class="carousel-indicator"></div>
1098
+ </div>
1099
+ </div>
1100
+ </div>
1101
+
1102
+ <!-- FAQ Section -->
1103
+ <div class="mt-16">
1104
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Frequently Asked Questions</h2>
1105
+ <div class="accordion bg-white rounded-xl shadow-md">
1106
+ <div class="accordion-item">
1107
+ <div class="accordion-header">
1108
+ <span>How does the AI recoloring work?</span>
1109
+ <i class="fas fa-chevron-down text-gray-400 transition duration-200"></i>
1110
+ </div>
1111
+ <div class="accordion-content">
1112
+ <p class="text-gray-600">Our AI uses advanced computer vision and deep learning models to understand the fabric and structure of your clothing. It then applies the color transformation while preserving all the original textures, shadows, and details for a natural-looking result.</p>
1113
+ </div>
1114
+ </div>
1115
+ <div class="accordion-item">
1116
+ <div class="accordion-header">
1117
+ <span>What image formats do you support?</span>
1118
+ <i class="fas fa-chevron-down text-gray-400 transition duration-200"></i>
1119
+ </div>
1120
+ <div class="accordion-content">
1121
+ <p class="text-gray-600">We support JPG, PNG, and WEBP formats. The maximum file size is 10MB. For best results, use high-quality images with good lighting and clear visibility of the clothing.</p>
1122
+ </div>
1123
+ </div>
1124
+ <div class="accordion-item">
1125
+ <div class="accordion-header">
1126
+ <span>Is there a limit to how many images I can process?</span>
1127
+ <i class="fas fa-chevron-down text-gray-400 transition duration-200"></i>
1128
+ </div>
1129
+ <div class="accordion-content">
1130
+ <p class="text-gray-600">Free users can process up to 10 images per day. Our Pro plan offers unlimited processing, higher resolution outputs, and additional advanced features.</p>
1131
+ </div>
1132
+ </div>
1133
+ <div class="accordion-item">
1134
+ <div class="accordion-header">
1135
+ <span>How do you handle my uploaded images?</span>
1136
+ <i class="fas fa-chevron-down text-gray-400 transition duration-200"></i>
1137
+ </div>
1138
+ <div class="accordion-content">
1139
+ <p class="text-gray-600">Your privacy is important to us. Uploaded images are processed temporarily and automatically deleted after 24 hours. We don't use your images to train our models without explicit permission.</p>
1140
+ </div>
1141
+ </div>
1142
+ <div class="accordion-item">
1143
+ <div class="accordion-header">
1144
+ <span>Can I use this for commercial purposes?</span>
1145
+ <i class="fas fa-chevron-down text-gray-400 transition duration-200"></i>
1146
+ </div>
1147
+ <div class="accordion-content">
1148
+ <p class="text-gray-600">Yes! Our Pro and Business plans include commercial licenses. You can use the recolored images in your e-commerce store, marketing materials, or any other commercial applications.</p>
1149
+ </div>
1150
+ </div>
1151
+ </div>
1152
+ </div>
1153
+
1154
+ <!-- CTA Section -->
1155
+ <div class="mt-16 bg-indigo-700 rounded-xl shadow-xl overflow-hidden">
1156
+ <div class="grid grid-cols-1 md:grid-cols-2">
1157
+ <div class="p-12">
1158
+ <h2 class="text-3xl font-bold text-white mb-4">Ready to transform your wardrobe?</h2>
1159
+ <p class="text-indigo-200 mb-8">Join thousands of designers, retailers, and fashion enthusiasts who are using RookusAI to explore endless color possibilities.</p>
1160
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
1161
+ <button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-lg shadow hover:bg-gray-100 transition duration-200">
1162
+ <i class="fas fa-crown mr-2"></i> Upgrade to Pro
1163
+ </button>
1164
+ <button class="px-6 py-3 border border-white text-white font-bold rounded-lg hover:bg-indigo-600 transition duration-200">
1165
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
1166
+ </button>
1167
+ </div>
1168
+ </div>
1169
+ <div class="hidden md:block bg-indigo-600 bg-opacity-50 relative">
1170
+ <div class="absolute inset-0 bg-gradient-to-r from-indigo-600 to-indigo-700 opacity-50"></div>
1171
+ <img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-full h-full object-cover" alt="Fashion">
1172
+ </div>
1173
+ </div>
1174
+ </div>
1175
+ </div>
1176
+
1177
+ <!-- Floating Action Button -->
1178
+ <div class="floating-action-button pulse">
1179
+ <i class="fas fa-question text-xl"></i>
1180
+ </div>
1181
+
1182
+ <!-- Footer -->
1183
+ <footer class="bg-white mt-16">
1184
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
1185
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
1186
+ <div>
1187
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
1188
+ <ul class="mt-4 space-y-2">
1189
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Features</a></li>
1190
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Pricing</a></li>
1191
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">API</a></li>
1192
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Changelog</a></li>
1193
+ </ul>
1194
+ </div>
1195
+ <div>
1196
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
1197
+ <ul class="mt-4 space-y-2">
1198
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Documentation</a></li>
1199
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Tutorials</a></li>
1200
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Blog</a></li>
1201
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Community</a></li>
1202
+ </ul>
1203
+ </div>
1204
+ <div>
1205
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
1206
+ <ul class="mt-4 space-y-2">
1207
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">About</a></li>
1208
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Careers</a></li>
1209
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Contact</a></li>
1210
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Press</a></li>
1211
+ </ul>
1212
+ </div>
1213
+ <div>
1214
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
1215
+ <ul class="mt-4 space-y-2">
1216
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Privacy</a></li>
1217
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Terms</a></li>
1218
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">License</a></li>
1219
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Cookie Policy</a></li>
1220
+ </ul>
1221
+ </div>
1222
+ </div>
1223
+ <div class="mt-8 border-t border-gray-200 pt-8 flex flex-col md:flex-row justify-between items-center">
1224
+ <div class="flex items-center">
1225
+ <i class="fas fa-tshirt text-indigo-600 text-2xl mr-2"></i>
1226
+ <span class="text-xl font-bold text-gray-900">RookusAI</span>
1227
+ </div>
1228
+ <p class="text-gray-500 text-sm mt-4 md:mt-0">© 2023 RookusAI. All rights reserved.</p>
1229
+ <div class="flex space-x-6 mt-4 md:mt-0">
1230
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
1231
+ <i class="fab fa-twitter"></i>
1232
+ </a>
1233
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
1234
+ <i class="fab fa-instagram"></i>
1235
+ </a>
1236
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
1237
+ <i class="fab fa-facebook"></i>
1238
+ </a>
1239
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
1240
+ <i class="fab fa-github"></i>
1241
+ </a>
1242
+ </div>
1243
+ </div>
1244
+ </div>
1245
+ </footer>
1246
+
1247
+ <script>
1248
+ document.addEventListener('DOMContentLoaded', function() {
1249
+ // Auth state
1250
+ let isAuthenticated = false;
1251
+
1252
+ // DOM Elements
1253
+ const uploadArea = document.getElementById('upload-area');
1254
+ const fileInput = document.getElementById('file-input');
1255
+ const uploadContent = document.getElementById('upload-content');
1256
+ const previewImage = document.getElementById('preview-image');
1257
+ const fileName = document.getElementById('file-name');
1258
+ const fileSize = document.getElementById('file-size');
1259
+ const generateBtn = document.getElementById('generate-btn');
1260
+ const generateIcon = document.getElementById('generate-icon');
1261
+ const loadingIcon = document.getElementById('loading-icon');
1262
+ const resultContainer = document.getElementById('result-container');
1263
+ const emptyState = document.getElementById('empty-state');
1264
+ const originalImage = document.getElementById('original-image');
1265
+ const resultImage = document.getElementById('result-image');
1266
+ const colorOptions = document.querySelectorAll('.color-option');
1267
+ const colorPrompt = document.getElementById('color-prompt');
1268
+ const negativePrompt = document.getElementById('negative-prompt');
1269
+ const guidanceScale = document.getElementById('guidance-scale');
1270
+ const steps = document.getElementById('steps');
1271
+ const downloadBtn = document.getElementById('download-btn');
1272
+ const saveBtn = document.getElementById('save-btn');
1273
+ const shareBtn = document.getElementById('share-btn');
1274
+ const historySection = document.getElementById('history-section');
1275
+ const historyGrid = document.getElementById('history-grid');
1276
+ const clearResults = document.getElementById('clear-results');
1277
+ const clearHistory = document.getElementById('clear-history');
1278
+ const savePreset = document.getElementById('save-preset');
1279
+ const presetsSection = document.getElementById('presets-section');
1280
+ const presetsGrid = document.getElementById('presets-grid');
1281
+ const randomColorBtn = document.getElementById('random-color-btn');
1282
+ const toggleAdvanced = document.getElementById('toggle-advanced');
1283
+ const advancedOptions = document.getElementById('advanced-options');
1284
+ const progressBar = document.getElementById('progress-bar');
1285
+ const notification = document.getElementById('notification');
1286
+ const notificationMessage = document.getElementById('notification-message');
1287
+ const toast = document.getElementById('toast');
1288
+ const toastMessage = document.getElementById('toast-message');
1289
+ const loginModal = document.getElementById('login-modal');
1290
+ const profileModal = document.getElementById('profile-modal');
1291
+ const closeModal = document.getElementById('close-modal');
1292
+ const closeProfileModal = document.getElementById('close-profile-modal');
1293
+ const signInBtn = document.getElementById('sign-in-btn');
1294
+ const mobileSignInBtn = document.getElementById('mobile-sign-in-btn');
1295
+ const signOutBtn = document.getElementById('sign-out-btn');
1296
+ const mobileSignOutBtn = document.getElementById('mobile-sign-out-btn');
1297
+ const dropdownSignOut = document.getElementById('dropdown-sign-out');
1298
+ const authButtons = document.getElementById('auth-buttons');
1299
+ const userProfile = document.getElementById('user-profile');
1300
+ const mobileAuthButtons = document.getElementById('mobile-auth-buttons');
1301
+ const mobileUserProfile = document.getElementById('mobile-user-profile');
1302
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
1303
+ const mobileMenu = document.getElementById('mobile-menu');
1304
+ const loginForm = document.getElementById('login-form');
1305
+ const registerForm = document.getElementById('register-form');
1306
+ const tabs = document.querySelectorAll('.tab');
1307
+ const tabContents = document.querySelectorAll('.tab-content');
1308
+ const accordionItems = document.querySelectorAll('.accordion-item');
1309
+ const accordionHeaders = document.querySelectorAll('.accordion-header');
1310
+ const carouselInner = document.querySelector('.carousel-inner');
1311
+ const carouselItems = document.querySelectorAll('.carousel-item');
1312
+ const prevButton = document.querySelector('.carousel-control.prev');
1313
+ const nextButton = document.querySelector('.carousel-control.next');
1314
+ const indicators = document.querySelectorAll('.carousel-indicator');
1315
+
1316
+ // API Endpoint
1317
+ const API_URL = 'https://cors-anywhere.herokuapp.com/https://multimodalart-cosxl.hf.space/run/predict';
1318
+
1319
+ // Current state
1320
+ let uploadedImage = null;
1321
+ let uploadedFile = null;
1322
+ let currentSlide = 0;
1323
+ let carouselInterval;
1324
+
1325
+ // Initialize components
1326
+ initCarousel();
1327
+
1328
+ // Event Listeners
1329
+ uploadArea.addEventListener('click', () => fileInput.click());
1330
+
1331
+ fileInput.addEventListener('change', (e) => {
1332
+ const file = e.target.files[0];
1333
+ if (file) {
1334
+ if (file.size > 10 * 1024 * 1024) {
1335
+ showNotification('File size exceeds 10MB limit', 'error');
1336
+ return;
1337
+ }
1338
+
1339
+ uploadedFile = file;
1340
+ fileName.textContent = file.name;
1341
+ fileSize.textContent = `${(
1342
+ </html>