Hugging Face's logo

Spaces:
easyaaa
/
anycoder-c6e4466c
Running

App Files Community
easyaaa commited on
Commit
713b8f7
·
verified ·
1 Parent(s): 5e9bef5

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +499 -19
index.html CHANGED
@@ -1,19 +1,499 @@
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" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ChicMate - AI Virtual Stylist</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/@phosphor-icons/web"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ fontFamily: {
17
+ serif: ['Instrument Serif', 'Georgia', 'serif'],
18
+ sans: ['Space Grotesk', 'system-ui', 'sans-serif'],
19
+ body: ['Inter', 'system-ui', 'sans-serif'],
20
+ },
21
+ colors: {
22
+ 'cm-cream': '#F8F6F2',
23
+ 'cm-linen': '#ECE8E1',
24
+ 'cm-sand': '#DDD6CA',
25
+ 'cm-warm': '#C4B49A',
26
+ 'cm-stone': '#A09080',
27
+ 'cm-ink': '#2A2520',
28
+ 'cm-charcoal': '#3D3630',
29
+ 'cm-slate': '#5C544C',
30
+ 'cm-blush': '#E8D4D0',
31
+ 'cm-sage': '#C8D4C4',
32
+ 'cm-lavender': '#D4C8E0',
33
+ },
34
+ animation: {
35
+ 'fade-up': 'fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards',
36
+ 'fade-in': 'fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards',
37
+ 'scale-in': 'scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards',
38
+ 'slide-in-right': 'slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
39
+ 'slide-in-left': 'slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
40
+ 'float': 'float 6s ease-in-out infinite',
41
+ 'pulse-gentle': 'pulseGentle 3s ease-in-out infinite',
42
+ 'scan': 'scan 2s ease-in-out infinite',
43
+ 'marquee': 'marquee 20s linear infinite',
44
+ },
45
+ keyframes: {
46
+ fadeUp: {
47
+ '0%': { opacity: '0', transform: 'translateY(32px)' },
48
+ '100%': { opacity: '1', transform: 'translateY(0)' },
49
+ },
50
+ fadeIn: {
51
+ '0%': { opacity: '0' },
52
+ '100%': { opacity: '1' },
53
+ },
54
+ scaleIn: {
55
+ '0%': { opacity: '0', transform: 'scale(0.9)' },
56
+ '100%': { opacity: '1', transform: 'scale(1)' },
57
+ },
58
+ slideInRight: {
59
+ '0%': { opacity: '0', transform: 'translateX(40px)' },
60
+ '100%': { opacity: '1', transform: 'translateX(0)' },
61
+ },
62
+ slideInLeft: {
63
+ '0%': { opacity: '0', transform: 'translateX(-40px)' },
64
+ '100%': { opacity: '1', transform: 'translateX(0)' },
65
+ },
66
+ float: {
67
+ '0%, 100%': { transform: 'translateY(0px)' },
68
+ '50%': { transform: 'translateY(-16px)' },
69
+ },
70
+ pulseGentle: {
71
+ '0%, 100%': { opacity: '1' },
72
+ '50%': { opacity: '0.5' },
73
+ },
74
+ scan: {
75
+ '0%': { transform: 'translateY(-100%)' },
76
+ '100%': { transform: 'translateY(100%)' },
77
+ },
78
+ marquee: {
79
+ '0%': { transform: 'translateX(0%)' },
80
+ '100%': { transform: 'translateX(-50%)' },
81
+ }
82
+ }
83
+ }
84
+ }
85
+ }
86
+ </script>
87
+ <style>
88
+ :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); }
89
+
90
+ *, *::before, *::after { box-sizing: border-box; }
91
+
92
+ html { scroll-behavior: smooth; }
93
+
94
+ body { font-family: 'Space Grotesk', system-ui, sans-serif; background: #F8F6F2; color: #2A2520; overflow-x: hidden; }
95
+
96
+ .font-body { font-family: 'Inter', system-ui, sans-serif; }
97
+
98
+ ::selection { background: #C8D4C4; color: #2A2520; }
99
+
100
+ /* Custom scrollbar */
101
+ ::-webkit-scrollbar { width: 6px; }
102
+ ::-webkit-scrollbar-track { background: transparent; }
103
+ ::-webkit-scrollbar-thumb { background: #C4B49A; border-radius: 3px; }
104
+ ::-webkit-scrollbar-thumb:hover { background: #A09080; }
105
+
106
+ /* Noise texture overlay */
107
+ .noise-overlay {
108
+ position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.03;
109
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
110
+ background-repeat: repeat; background-size: 256px;
111
+ }
112
+
113
+ /* Upload zone */
114
+ .upload-zone { transition: all 0.4s var(--ease-out-expo); border: 2px dashed #DDD6CA; }
115
+ .upload-zone:hover, .upload-zone.drag-over { border-color: #A09080; background: #ECE8E1; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(42, 37, 32, 0.06); }
116
+ .upload-zone.has-image { border-color: #C8D4C4; background: #F0F4EE; }
117
+
118
+ /* Image preview */
119
+ .preview-img { border-radius: 16px; object-fit: cover; width: 100%; height: 100%; transition: transform 0.6s var(--ease-out-expo); }
120
+ .preview-wrapper:hover .preview-img { transform: scale(1.03); }
121
+ .preview-wrapper::after { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(135deg, rgba(0,0,0,0.05) 0%, transparent 50%); pointer-events: none; }
122
+
123
+ /* Scanning overlay */
124
+ .scan-line { position: absolute; left: 0; right: 0; height: 3px; background: #C8D4C4; box-shadow: 0 0 24px 4px rgba(200, 212, 196, 0.4); border-radius: 2px; animation: scan 2s ease-in-out infinite; pointer-events: none; }
125
+
126
+ /* Tabs */
127
+ .tab-btn { position: relative; transition: all 0.3s var(--ease-out-expo); border-radius: 12px; }
128
+ .tab-btn::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: #2A2520; border-radius: 1px; transition: all 0.3s var(--ease-out-expo); transform: translateX(-50%); }
129
+ .tab-btn:hover::after, .tab-btn.active::after { width: 40%; }
130
+ .tab-btn.active { color: #2A2520; }
131
+ .tab-btn:not(.active) { color: #A09080; }
132
+
133
+ /* Outfit card */
134
+ .outfit-card { transition: all 0.5s var(--ease-out-expo); transform-style: preserve-3d; perspective: 1200px; }
135
+ .outfit-card:hover { transform: translateY(-8px) rotateX(2deg) rotateY(-2deg); box-shadow: 0 24px 64px rgba(42, 37, 32, 0.08); }
136
+
137
+ /* Color swatch */
138
+ .swatch { position: relative; transition: all 0.3s var(--ease-out-expo); }
139
+ .swatch:hover { transform: translateY(-4px) scale(1.05); }
140
+ .swatch::after { content: attr(data-color); position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%) scale(0.8); opacity: 0; font-size: 10px; font-weight: 500; letter-spacing: 0.05em; color: #A09080; white-space: nowrap; transition: all 0.2s ease; }
141
+ .swatch:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
142
+
143
+ /* Tag */
144
+ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 100px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; transition: all 0.2s ease; cursor: default; }
145
+ .tag:hover { transform: translateY(-1px); }
146
+
147
+ /* Progress bar */
148
+ .progress-fill { transition: width 0.8s var(--ease-out-expo); }
149
+
150
+ /* Marquee */
151
+ .marquee-container { overflow: hidden; white-space: nowrap; }
152
+ .marquee-content { display: inline-flex; animation: marquee 25s linear infinite; }
153
+ .marquee-content:hover { animation-play-state: paused; }
154
+
155
+ /* Tooltip */
156
+ .tooltip-trigger { position: relative; }
157
+ .tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; transition: all 0.2s ease; font-size: 12px; font-weight: 500; white-space: nowrap; padding: 6px 12px; border-radius: 8px; background: #2A2520; color: #F8F6F2; z-index: 10; }
158
+ .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #2A2520; }
159
+ .tooltip-trigger:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
160
+
161
+ /* Flat lay item */
162
+ .flat-lay-item { transition: all 0.4s var(--ease-out-expo); cursor: pointer; }
163
+ .flat-lay-item:hover { transform: scale(1.03) translateY(-2px); box-shadow: 0 8px 24px rgba(42, 37, 32, 0.1); }
164
+
165
+ /* Loading shimmer */
166
+ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
167
+ .shimmer { background: linear-gradient(90deg, #F8F6F2 0%, #ECE8E1 50%, #F8F6F2 100%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; }
168
+
169
+ /* Hero decorations */
170
+ .hero-deco { position: absolute; pointer-events: none; }
171
+ .hero-deco-1 { top: -60px; right: 5%; width: 280px; height: 280px; border-radius: 50%; background: #E8D4D0; opacity: 0.15; filter: blur(60px); }
172
+ .hero-deco-2 { bottom: -40px; left: 10%; width: 200px; height: 200px; border-radius: 50%; background: #C8D4C4; opacity: 0.12; filter: blur(50px); }
173
+ .hero-deco-3 { top: 30%; left: 3%; width: 120px; height: 120px; border-radius: 50%; background: #D4C8E0; opacity: 0.1; filter: blur(40px); }
174
+
175
+ /* Nav link underline */
176
+ .nav-link { position: relative; }
177
+ .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px; background: #2A2520; transition: width 0.3s var(--ease-out-expo); }
178
+ .nav-link:hover::after { width: 100%; }
179
+
180
+ /* Step number */
181
+ .step-num { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; border: 2px solid #DDD6CA; color: #A09080; transition: all 0.4s var(--ease-out-expo); flex-shrink: 0; }
182
+ .step-num.active { background: #2A2520; color: #F8F6F2; border-color: #2A2520; transform: scale(1.1); }
183
+
184
+ /* Analysis dot */
185
+ .analysis-dot { width: 8px; height: 8px; border-radius: 50%; background: #C4B49A; transition: all 0.3s ease; }
186
+ .analysis-dot.active { background: #C8D4C4; box-shadow: 0 0 8px rgba(200, 212, 196, 0.5); transform: scale(1.3); }
187
+
188
+ /* Flat lay grid */
189
+ .flat-lay { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; padding: 24px; border-radius: 20px; background: #ECE8E1; min-height: 360px; position: relative; }
190
+ .flat-lay::before { content: ''; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%); pointer-events: none; }
191
+
192
+ /* Section reveal */
193
+ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); }
194
+ .reveal.visible { opacity: 1; transform: translateY(0); }
195
+
196
+ /* Button primary */
197
+ .btn-primary {
198
+ background: #2A2520; color: #F8F6F2; padding: 14px 32px; border-radius: 100px; font-weight: 500; font-size: 15px; letter-spacing: 0.02em;
199
+ transition: all 0.3s var(--ease-out-expo); display: inline-flex; align-items: center; gap: 10px; border: none; cursor: pointer; position: relative; overflow: hidden;
200
+ }
201
+ .btn-primary::before { content: ''; position: absolute; inset: 0; background: #3D3630; transform: translateX(-100%); transition: transform 0.4s var(--ease-out-expo); }
202
+ .btn-primary:hover::before { transform: translateX(0); }
203
+ .btn-primary span { position: relative; z-index: 1; }
204
+ .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(42, 37, 32, 0.15); }
205
+ .btn-primary:active { transform: translateY(0); }
206
+
207
+ /* Flat lay center item glow */
208
+ .center-item-glow { box-shadow: 0 0 40px rgba(200, 212, 196, 0.2); }
209
+
210
+ /* Style badge */
211
+ .style-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; border: 1px solid; }
212
+
213
+ /* Footer link */
214
+ .footer-link { color: #A09080; font-size: 14px; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; }
215
+ .footer-link:hover { color: #2A2520; transform: translateX(2px); }
216
+
217
+ /* Confetti */
218
+ @keyframes confetti { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-100px) rotate(720deg); opacity: 0; } }
219
+
220
+ /* Hide show class */
221
+ .hidden-section { display: none; }
222
+ .hidden-section.show { display: block; }
223
+ </style>
224
+ </head>
225
+ <body class="min-h-screen antialiased">
226
+ <div class="noise-overlay"></div>
227
+
228
+ <!-- Navigation -->
229
+ <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
230
+ <div class="max-w-7xl mx-auto px-6 lg:px-10">
231
+ <div class="flex items-center justify-between h-16 lg:h-20">
232
+ <a href="#" class="flex items-center gap-2.5 group">
233
+ <div class="w-8 h-8 rounded-full bg-cm-ink flex items-center justify-center transition-transform duration-300 group-hover:rotate-12">
234
+ <i class="ph ph-coat-hanger text-cm-cream text-sm"></i>
235
+ </div>
236
+ <span class="font-serif text-xl lg:text-2xl text-cm-ink tracking-tight">ChicMate</span>
237
+ </a>
238
+ <div class="flex items-center gap-6">
239
+ <a href="#" onclick="showAboutModal(); return false;" class="nav-link text-sm font-medium text-cm-slate hover:text-cm-ink transition-colors">About</a>
240
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" class="text-xs font-medium text-cm-stone hover:text-cm-ink transition-colors border border-cm-sand rounded-full px-3 py-1.5 hover:border-cm-stone">
241
+ Built with anycoder
242
+ </a>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ <div class="h-px bg-cm-linen opacity-50" id="nav-line"></div>
247
+ </nav>
248
+
249
+ <!-- Hero -->
250
+ <section class="relative pt-28 lg:pt-40 pb-16 lg:pb-24 overflow-hidden" id="hero">
251
+ <div class="hero-deco hero-deco-1"></div>
252
+ <div class="hero-deco hero-deco-2"></div>
253
+ <div class="hero-deco hero-deco-3"></div>
254
+
255
+ <div class="max-w-7xl mx-auto px-6 lg:px-10 relative z-10">
256
+ <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
257
+ <div class="order-2 lg:order-1">
258
+ <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-cm-blush/30 border border-cm-blush/50 mb-8 animate-fade-up" style="animation-delay: 0.1s">
259
+ <i class="ph ph-sparkle text-cm-stone text-sm"></i>
260
+ <span class="text-xs font-semibold tracking-widest uppercase text-cm-stone">AI-Powered Styling</span>
261
+ </div>
262
+
263
+ <h1 class="font-serif text-4xl sm:text-5xl lg:text-6xl xl:text-7xl text-cm-ink leading-[1.05] mb-6 animate-fade-up" style="animation-delay: 0.2s">
264
+ What to wear<br>
265
+ <em class="text-cm-stone">with this?</em>
266
+ </h1>
267
+
268
+ <p class="font-body text-cm-slate text-base lg:text-lg leading-relaxed max-w-md mb-10 animate-fade-up" style="animation-delay: 0.35s">
269
+ Upload any piece of clothing and watch our AI analyze its palette, pattern, and style to curate three complete outfits for every occasion.
270
+ </p>
271
+
272
+ <div class="flex flex-wrap items-center gap-4 animate-fade-up" style="animation-delay: 0.5s">
273
+ <button onclick="scrollToUpload()" class="btn-primary">
274
+ <span>Upload Your Piece</span>
275
+ <i class="ph ph-arrow-down text-sm"></i>
276
+ </button>
277
+ <span class="text-sm text-cm-stone font-body">Drop an image or click to browse</span>
278
+ </div>
279
+
280
+ <div class="flex items-center gap-6 mt-12 animate-fade-up" style="animation-delay: 0.65s">
281
+ <div class="flex -space-x-3">
282
+ <div class="w-9 h-9 rounded-full bg-cm-blush border-2 border-cm-cream flex items-center justify-center text-[10px] font-bold text-cm-slate">L</div>
283
+ <div class="w-9 h-9 rounded-full bg-cm-sage border-2 border-cm-cream flex items-center justify-center text-[10px] font-bold text-cm-slate">A</div>
284
+ <div class="w-9 h-9 rounded-full bg-cm-lavender border-2 border-cm-cream flex items-center justify-center text-[10px] font-bold text-cm-slate">M</div>
285
+ </div>
286
+ <p class="text-xs text-cm-stone font-body">Join <strong class="text-cm-ink">2,400+</strong> people styling smarter</p>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="order-1 lg:order-2 relative animate-fade-up" style="animation-delay: 0.4s">
291
+ <div class="relative">
292
+ <div class="absolute inset-0 bg-cm-linen rounded-[32px] rotate-3 transform origin-bottom-left"></div>
293
+ <div class="relative grid grid-cols-2 gap-4 p-6 lg:p-8 bg-white rounded-[28px] shadow-[0_8px_40px_rgba(42,37,32,0.06)] border border-cm-linen">
294
+ <div class="space-y-4">
295
+ <div class="aspect-square rounded-2xl overflow-hidden shadow-sm group">
296
+ <img src="https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=400&h=400&fit=crop&q=80" alt="Fashion flat lay" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
297
+ </div>
298
+ <div class="aspect-square rounded-2xl overflow-hidden shadow-sm group">
299
+ <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=400&h=400&fit=crop&q=80" alt="Fashion flat lay" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
300
+ </div>
301
+ </div>
302
+ <div class="space-y-4 pt-6">
303
+ <div class="aspect-square rounded-2xl overflow-hidden shadow-sm group">
304
+ <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=400&h=400&fit=crop&q=80" alt="Fashion flat lay" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
305
+ </div>
306
+ <div class="aspect-square rounded-2xl overflow-hidden shadow-sm group">
307
+ <img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=400&h=400&fit=crop&q=80" alt="Fashion flat lay" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
308
+ </div>
309
+ </div>
310
+
311
+ <div class="absolute -top-4 -right-4 bg-white rounded-2xl shadow-lg p-3 animate-float" style="animation-delay: 0s;">
312
+ <div class="flex items-center gap-2">
313
+ <div class="w-7 h-7 rounded-full bg-cm-blush flex items-center justify-center"><i class="ph ph-palette text-cm-stone text-xs"></i></div>
314
+ <span class="text-xs font-semibold text-cm-ink">3 Palettes</span>
315
+ </div>
316
+ </div>
317
+ <div class="absolute -bottom-3 -left-4 bg-white rounded-2xl shadow-lg p-3 animate-float" style="animation-delay: 1.5s;">
318
+ <div class="flex items-center gap-2">
319
+ <div class="w-7 h-7 rounded-full bg-cm-sage flex items-center justify-center"><i class="ph ph-t-shirt text-cm-stone text-xs"></i></div>
320
+ <span class="text-xs font-semibold text-cm-ink">3 Outfits</span>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="marquee-container mt-16 lg:mt-24 border-y border-cm-linen py-4">
330
+ <div class="marquee-content">
331
+ <span class="inline-flex items-center gap-12 px-6">
332
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Vintage</span>
333
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
334
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Minimal</span>
335
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
336
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Bohemian</span>
337
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
338
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Preppy</span>
339
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
340
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Chic</span>
341
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
342
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Streetwear</span>
343
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
344
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Athleisure</span>
345
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
346
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Romantic</span>
347
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
348
+ </span>
349
+ <span class="inline-flex items-center gap-12 px-6">
350
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Vintage</span>
351
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
352
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Minimal</span>
353
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
354
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Bohemian</span>
355
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
356
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Preppy</span>
357
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
358
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Chic</span>
359
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
360
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Streetwear</span>
361
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
362
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Athleisure</span>
363
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
364
+ <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Romantic</span>
365
+ <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span>
366
+ </span>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Steps -->
372
+ <section class="py-20 lg:py-28" id="steps">
373
+ <div class="max-w-7xl mx-auto px-6 lg:px-10">
374
+ <div class="grid md:grid-cols-3 gap-8 lg:gap-12 reveal">
375
+ <div class="group">
376
+ <div class="step-num mb-6 group-hover:border-cm-ink group-hover:text-cm-ink">1</div>
377
+ <h3 class="font-serif text-2xl text-cm-ink mb-3">Upload</h3>
378
+ <p class="font-body text-cm-slate text-sm leading-relaxed">Snap or upload a photo of any piece in your wardrobe. A tricky patterned skirt, statement top, or that jacket you never know how to style.</p>
379
+ </div>
380
+ <div class="group">
381
+ <div class="step-num mb-6 group-hover:border-cm-ink group-hover:text-cm-ink">2</div>
382
+ <h3 class="font-serif text-2xl text-cm-ink mb-3">Analyze</h3>
383
+ <p class="font-body text-cm-slate text-sm leading-relaxed">Our AI scans the dominant colors, secondary tones, fabric texture, and pattern type to understand exactly what makes your piece unique.</p>
384
+ </div>
385
+ <div class="group">
386
+ <div class="step-num mb-6 group-hover:border-cm-ink group-hover:text-cm-ink">3</div>
387
+ <h3 class="font-serif text-2xl text-cm-ink mb-3">Style</h3>
388
+ <p class="font-body text-cm-slate text-sm leading-relaxed">Get three complete outfit flat lays: Casual, Business, and Night Out. Each one is curated to complement your piece perfectly.</p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </section>
393
+
394
+ <!-- Upload -->
395
+ <section class="py-20 lg:py-28 bg-white" id="upload-section">
396
+ <div class="max-w-4xl mx-auto px-6 lg:px-10">
397
+ <div class="text-center mb-12 reveal">
398
+ <span class="inline-block text-xs font-semibold tracking-widest uppercase text-cm-stone mb-4">Upload</span>
399
+ <h2 class="font-serif text-3xl lg:text-4xl text-cm-ink mb-4">Let's see your piece</h2>
400
+ <p class="font-body text-cm-slate text-sm max-w-md mx-auto">Drag and drop, or click to choose a photo of the item you want styled.</p>
401
+ </div>
402
+
403
+ <div class="upload-zone rounded-[28px] p-8 lg:p-12 text-center cursor-pointer relative overflow-hidden reveal" id="upload-zone" onclick="document.getElementById('file-input').click()" ondrop="handleDrop(event)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)">
404
+ <div id="upload-placeholder">
405
+ <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-cm-linen flex items-center justify-center">
406
+ <i class="ph ph-camera text-3xl text-cm-stone"></i>
407
+ </div>
408
+ <p class="font-serif text-xl text-cm-ink mb-2">Drop your photo here</p>
409
+ <p class="font-body text-sm text-cm-slate mb-6">or click to browse</p>
410
+ <div class="flex items-center justify-center gap-4 text-xs text-cm-stone font-body">
411
+ <span class="flex items-center gap-1.5"><i class="ph ph-image"></i> JPG, PNG</span>
412
+ <span class="flex items-center gap-1.5"><i class="ph ph-file-image"></i> up to 10MB</span>
413
+ </div>
414
+ </div>
415
+
416
+ <div id="preview-container" class="hidden">
417
+ <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12">
418
+ <div class="preview-wrapper relative w-full max-w-xs lg:w-72 aspect-square rounded-2xl overflow-hidden shadow-md shrink-0 mx-auto lg:mx-0">
419
+ <img id="preview-img" src="" alt="Uploaded" class="preview-img">
420
+ </div>
421
+ <div class="flex-1 text-left">
422
+ <div class="flex items-center gap-3 mb-5">
423
+ <div class="w-10 h-10 rounded-full bg-cm-sage/30 flex items-center justify-center">
424
+ <i class="ph ph-check-circle text-cm-ink text-lg"></i>
425
+ </div>
426
+ <div>
427
+ <p class="font-medium text-cm-ink text-sm">Image uploaded</p>
428
+ <p class="font-body text-xs text-cm-stone" id="filename-display">photo.jpg</p>
429
+ </div>
430
+ </div>
431
+ <div class="mb-2">
432
+ <div class="h-2 bg-cm-linen rounded-full overflow-hidden">
433
+ <div id="upload-progress" class="progress-fill h-full bg-cm-ink rounded-full" style="width: 0%"></div>
434
+ </div>
435
+ </div>
436
+ <p class="font-body text-xs text-cm-stone" id="upload-status">Ready to analyze</p>
437
+ <button onclick="analyzeImage(); event.stopPropagation();" id="analyze-btn" class="btn-primary mt-6">
438
+ <span>Generate Outfits</span>
439
+ <i class="ph ph-sparkle"></i>
440
+ </button>
441
+ <button onclick="clearImage(); event.stopPropagation();" class="ml-3 text-xs text-cm-stone hover:text-cm-ink font-body underline underline-offset-2 decoration-cm-sand transition-colors">
442
+ Upload different
443
+ </button>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ <input type="file" id="file-input" accept="image/*" class="hidden" onchange="handleFileSelect(this)">
448
+ </div>
449
+
450
+ <div id="analysis-overlay" class="hidden rounded-[28px] overflow-hidden bg-white shadow-[0_8px_40px_rgba(42,37,32,0.08)] border border-cm-linen mt-8">
451
+ <div class="flex flex-col lg:flex-row">
452
+ <div class="relative w-full lg:w-64 aspect-square lg:aspect-auto lg:min-h-[300px] overflow-hidden shrink-0">
453
+ <img id="analysis-img" src="" alt="Analyzing" class="w-full h-full object-cover">
454
+ <div class="scan-line top-0"></div>
455
+ <div class="absolute inset-0 bg-cm-ink/10 backdrop-blur-[2px]"></div>
456
+ <div class="absolute inset-0 flex items-center justify-center">
457
+ <div class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center shadow-lg animate-pulse-gentle">
458
+ <i class="ph ph-magic-wand text-cm-ink text-xl"></i>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ <div class="flex-1 p-8 lg:p-10">
463
+ <div class="flex items-center justify-between mb-6">
464
+ <div>
465
+ <h3 class="font-serif text-xl text-cm-ink mb-1">AI Analysis</h3>
466
+ <p class="font-body text-xs text-cm-stone">Decoding your piece...</p>
467
+ </div>
468
+ <div class="flex items-center gap-1.5">
469
+ <div class="analysis-dot" id="dot-1"></div>
470
+ <div class="analysis-dot" id="dot-2"></div>
471
+ <div class="analysis-dot" id="dot-3"></div>
472
+ <div class="analysis-dot" id="dot-4"></div>
473
+ </div>
474
+ </div>
475
+
476
+ <div id="analysis-progress" class="space-y-4">
477
+ <div class="flex items-center gap-4 opacity-40" id="step-color">
478
+ <i class="ph ph-palette text-cm-stone text-lg"></i>
479
+ <div class="flex-1">
480
+ <div class="h-1.5 bg-cm-linen rounded-full overflow-hidden">
481
+ <div class="progress-fill h-full bg-cm-sage rounded-full" style="width: 0%" id="bar-color"></div>
482
+ </div>
483
+ </div>
484
+ <span class="text-xs text-cm-stone font-body w-24 text-right">Color palette</span>
485
+ </div>
486
+ <div class="flex items-center gap-4 opacity-40" id="step-pattern">
487
+ <i class="ph ph-diamonds-four text-cm-stone text-lg"></i>
488
+ <div class="flex-1">
489
+ <div class="h-1.5 bg-cm-linen rounded-full overflow-hidden">
490
+ <div class="progress-fill h-full bg-cm-sage rounded-full" style="width: 0%" id="bar-pattern"></div>
491
+ </div>
492
+ </div>
493
+ <span class="text-xs text-cm-stone font-body w-24 text-right">Pattern & texture</span>
494
+ </div>
495
+ <div class="flex items-center gap-4 opacity-40" id="step-style">
496
+ <i class="ph ph-dress text-cm-stone text-lg"></i>
497
+ <div class="flex-1">
498
+ <div class="h-1.5 bg-cm-linen rounded-full overflow-hidden">
499
+ <div class="progress-fill h-full bg