Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChicMate - AI Virtual Stylist</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/@phosphor-icons/web"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| serif: ['Instrument Serif', 'Georgia', 'serif'], | |
| sans: ['Space Grotesk', 'system-ui', 'sans-serif'], | |
| body: ['Inter', 'system-ui', 'sans-serif'], | |
| }, | |
| colors: { | |
| 'cm-cream': '#F8F6F2', | |
| 'cm-linen': '#ECE8E1', | |
| 'cm-sand': '#DDD6CA', | |
| 'cm-warm': '#C4B49A', | |
| 'cm-stone': '#A09080', | |
| 'cm-ink': '#2A2520', | |
| 'cm-charcoal': '#3D3630', | |
| 'cm-slate': '#5C544C', | |
| 'cm-blush': '#E8D4D0', | |
| 'cm-sage': '#C8D4C4', | |
| 'cm-lavender': '#D4C8E0', | |
| }, | |
| animation: { | |
| 'fade-up': 'fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| 'fade-in': 'fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| 'scale-in': 'scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| 'slide-in-right': 'slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| 'slide-in-left': 'slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-gentle': 'pulseGentle 3s ease-in-out infinite', | |
| 'scan': 'scan 2s ease-in-out infinite', | |
| 'marquee': 'marquee 20s linear infinite', | |
| }, | |
| keyframes: { | |
| fadeUp: { | |
| '0%': { opacity: '0', transform: 'translateY(32px)' }, | |
| '100%': { opacity: '1', transform: 'translateY(0)' }, | |
| }, | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| scaleIn: { | |
| '0%': { opacity: '0', transform: 'scale(0.9)' }, | |
| '100%': { opacity: '1', transform: 'scale(1)' }, | |
| }, | |
| slideInRight: { | |
| '0%': { opacity: '0', transform: 'translateX(40px)' }, | |
| '100%': { opacity: '1', transform: 'translateX(0)' }, | |
| }, | |
| slideInLeft: { | |
| '0%': { opacity: '0', transform: 'translateX(-40px)' }, | |
| '100%': { opacity: '1', transform: 'translateX(0)' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-16px)' }, | |
| }, | |
| pulseGentle: { | |
| '0%, 100%': { opacity: '1' }, | |
| '50%': { opacity: '0.5' }, | |
| }, | |
| scan: { | |
| '0%': { transform: 'translateY(-100%)' }, | |
| '100%': { transform: 'translateY(100%)' }, | |
| }, | |
| marquee: { | |
| '0%': { transform: 'translateX(0%)' }, | |
| '100%': { transform: 'translateX(-50%)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); } | |
| *, *::before, *::after { box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { font-family: 'Space Grotesk', system-ui, sans-serif; background: #F8F6F2; color: #2A2520; overflow-x: hidden; } | |
| .font-body { font-family: 'Inter', system-ui, sans-serif; } | |
| ::selection { background: #C8D4C4; color: #2A2520; } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: #C4B49A; border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #A09080; } | |
| /* Noise texture overlay */ | |
| .noise-overlay { | |
| position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.03; | |
| 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"); | |
| background-repeat: repeat; background-size: 256px; | |
| } | |
| /* Upload zone */ | |
| .upload-zone { transition: all 0.4s var(--ease-out-expo); border: 2px dashed #DDD6CA; } | |
| .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); } | |
| .upload-zone.has-image { border-color: #C8D4C4; background: #F0F4EE; } | |
| /* Image preview */ | |
| .preview-img { border-radius: 16px; object-fit: cover; width: 100%; height: 100%; transition: transform 0.6s var(--ease-out-expo); } | |
| .preview-wrapper:hover .preview-img { transform: scale(1.03); } | |
| .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; } | |
| /* Scanning overlay */ | |
| .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; } | |
| /* Tabs */ | |
| .tab-btn { position: relative; transition: all 0.3s var(--ease-out-expo); border-radius: 12px; } | |
| .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%); } | |
| .tab-btn:hover::after, .tab-btn.active::after { width: 40%; } | |
| .tab-btn.active { color: #2A2520; } | |
| .tab-btn:not(.active) { color: #A09080; } | |
| /* Outfit card */ | |
| .outfit-card { transition: all 0.5s var(--ease-out-expo); transform-style: preserve-3d; perspective: 1200px; } | |
| .outfit-card:hover { transform: translateY(-8px) rotateX(2deg) rotateY(-2deg); box-shadow: 0 24px 64px rgba(42, 37, 32, 0.08); } | |
| /* Color swatch */ | |
| .swatch { position: relative; transition: all 0.3s var(--ease-out-expo); } | |
| .swatch:hover { transform: translateY(-4px) scale(1.05); } | |
| .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; } | |
| .swatch:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } | |
| /* Tag */ | |
| .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; } | |
| .tag:hover { transform: translateY(-1px); } | |
| /* Progress bar */ | |
| .progress-fill { transition: width 0.8s var(--ease-out-expo); } | |
| /* Marquee */ | |
| .marquee-container { overflow: hidden; white-space: nowrap; } | |
| .marquee-content { display: inline-flex; animation: marquee 25s linear infinite; } | |
| .marquee-content:hover { animation-play-state: paused; } | |
| /* Tooltip */ | |
| .tooltip-trigger { position: relative; } | |
| .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; } | |
| .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #2A2520; } | |
| .tooltip-trigger:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } | |
| /* Flat lay item */ | |
| .flat-lay-item { transition: all 0.4s var(--ease-out-expo); cursor: pointer; } | |
| .flat-lay-item:hover { transform: scale(1.03) translateY(-2px); box-shadow: 0 8px 24px rgba(42, 37, 32, 0.1); } | |
| /* Loading shimmer */ | |
| @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } | |
| .shimmer { background: linear-gradient(90deg, #F8F6F2 0%, #ECE8E1 50%, #F8F6F2 100%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } | |
| /* Hero decorations */ | |
| .hero-deco { position: absolute; pointer-events: none; } | |
| .hero-deco-1 { top: -60px; right: 5%; width: 280px; height: 280px; border-radius: 50%; background: #E8D4D0; opacity: 0.15; filter: blur(60px); } | |
| .hero-deco-2 { bottom: -40px; left: 10%; width: 200px; height: 200px; border-radius: 50%; background: #C8D4C4; opacity: 0.12; filter: blur(50px); } | |
| .hero-deco-3 { top: 30%; left: 3%; width: 120px; height: 120px; border-radius: 50%; background: #D4C8E0; opacity: 0.1; filter: blur(40px); } | |
| /* Nav link underline */ | |
| .nav-link { position: relative; } | |
| .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); } | |
| .nav-link:hover::after { width: 100%; } | |
| /* Step number */ | |
| .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; } | |
| .step-num.active { background: #2A2520; color: #F8F6F2; border-color: #2A2520; transform: scale(1.1); } | |
| /* Analysis dot */ | |
| .analysis-dot { width: 8px; height: 8px; border-radius: 50%; background: #C4B49A; transition: all 0.3s ease; } | |
| .analysis-dot.active { background: #C8D4C4; box-shadow: 0 0 8px rgba(200, 212, 196, 0.5); transform: scale(1.3); } | |
| /* Flat lay grid */ | |
| .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; } | |
| .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; } | |
| /* Section reveal */ | |
| .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); } | |
| .reveal.visible { opacity: 1; transform: translateY(0); } | |
| /* Button primary */ | |
| .btn-primary { | |
| background: #2A2520; color: #F8F6F2; padding: 14px 32px; border-radius: 100px; font-weight: 500; font-size: 15px; letter-spacing: 0.02em; | |
| transition: all 0.3s var(--ease-out-expo); display: inline-flex; align-items: center; gap: 10px; border: none; cursor: pointer; position: relative; overflow: hidden; | |
| } | |
| .btn-primary::before { content: ''; position: absolute; inset: 0; background: #3D3630; transform: translateX(-100%); transition: transform 0.4s var(--ease-out-expo); } | |
| .btn-primary:hover::before { transform: translateX(0); } | |
| .btn-primary span { position: relative; z-index: 1; } | |
| .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(42, 37, 32, 0.15); } | |
| .btn-primary:active { transform: translateY(0); } | |
| /* Flat lay center item glow */ | |
| .center-item-glow { box-shadow: 0 0 40px rgba(200, 212, 196, 0.2); } | |
| /* Style badge */ | |
| .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; } | |
| /* Footer link */ | |
| .footer-link { color: #A09080; font-size: 14px; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; } | |
| .footer-link:hover { color: #2A2520; transform: translateX(2px); } | |
| /* Confetti */ | |
| @keyframes confetti { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-100px) rotate(720deg); opacity: 0; } } | |
| /* Hide show class */ | |
| .hidden-section { display: none; } | |
| .hidden-section.show { display: block; } | |
| </style> | |
| </head> | |
| <body class="min-h-screen antialiased"> | |
| <div class="noise-overlay"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar"> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-10"> | |
| <div class="flex items-center justify-between h-16 lg:h-20"> | |
| <a href="#" class="flex items-center gap-2.5 group"> | |
| <div class="w-8 h-8 rounded-full bg-cm-ink flex items-center justify-center transition-transform duration-300 group-hover:rotate-12"> | |
| <i class="ph ph-coat-hanger text-cm-cream text-sm"></i> | |
| </div> | |
| <span class="font-serif text-xl lg:text-2xl text-cm-ink tracking-tight">ChicMate</span> | |
| </a> | |
| <div class="flex items-center gap-6"> | |
| <a href="#" onclick="showAboutModal(); return false;" class="nav-link text-sm font-medium text-cm-slate hover:text-cm-ink transition-colors">About</a> | |
| <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"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="h-px bg-cm-linen opacity-50" id="nav-line"></div> | |
| </nav> | |
| <!-- Hero --> | |
| <section class="relative pt-28 lg:pt-40 pb-16 lg:pb-24 overflow-hidden" id="hero"> | |
| <div class="hero-deco hero-deco-1"></div> | |
| <div class="hero-deco hero-deco-2"></div> | |
| <div class="hero-deco hero-deco-3"></div> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-10 relative z-10"> | |
| <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center"> | |
| <div class="order-2 lg:order-1"> | |
| <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"> | |
| <i class="ph ph-sparkle text-cm-stone text-sm"></i> | |
| <span class="text-xs font-semibold tracking-widest uppercase text-cm-stone">AI-Powered Styling</span> | |
| </div> | |
| <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"> | |
| What to wear<br> | |
| <em class="text-cm-stone">with this?</em> | |
| </h1> | |
| <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"> | |
| Upload any piece of clothing and watch our AI analyze its palette, pattern, and style to curate three complete outfits for every occasion. | |
| </p> | |
| <div class="flex flex-wrap items-center gap-4 animate-fade-up" style="animation-delay: 0.5s"> | |
| <button onclick="scrollToUpload()" class="btn-primary"> | |
| <span>Upload Your Piece</span> | |
| <i class="ph ph-arrow-down text-sm"></i> | |
| </button> | |
| <span class="text-sm text-cm-stone font-body">Drop an image or click to browse</span> | |
| </div> | |
| <div class="flex items-center gap-6 mt-12 animate-fade-up" style="animation-delay: 0.65s"> | |
| <div class="flex -space-x-3"> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| <p class="text-xs text-cm-stone font-body">Join <strong class="text-cm-ink">2,400+</strong> people styling smarter</p> | |
| </div> | |
| </div> | |
| <div class="order-1 lg:order-2 relative animate-fade-up" style="animation-delay: 0.4s"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 bg-cm-linen rounded-[32px] rotate-3 transform origin-bottom-left"></div> | |
| <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"> | |
| <div class="space-y-4"> | |
| <div class="aspect-square rounded-2xl overflow-hidden shadow-sm group"> | |
| <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"> | |
| </div> | |
| <div class="aspect-square rounded-2xl overflow-hidden shadow-sm group"> | |
| <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"> | |
| </div> | |
| </div> | |
| <div class="space-y-4 pt-6"> | |
| <div class="aspect-square rounded-2xl overflow-hidden shadow-sm group"> | |
| <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"> | |
| </div> | |
| <div class="aspect-square rounded-2xl overflow-hidden shadow-sm group"> | |
| <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"> | |
| </div> | |
| </div> | |
| <div class="absolute -top-4 -right-4 bg-white rounded-2xl shadow-lg p-3 animate-float" style="animation-delay: 0s;"> | |
| <div class="flex items-center gap-2"> | |
| <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> | |
| <span class="text-xs font-semibold text-cm-ink">3 Palettes</span> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-3 -left-4 bg-white rounded-2xl shadow-lg p-3 animate-float" style="animation-delay: 1.5s;"> | |
| <div class="flex items-center gap-2"> | |
| <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> | |
| <span class="text-xs font-semibold text-cm-ink">3 Outfits</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="marquee-container mt-16 lg:mt-24 border-y border-cm-linen py-4"> | |
| <div class="marquee-content"> | |
| <span class="inline-flex items-center gap-12 px-6"> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Vintage</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Minimal</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Bohemian</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Preppy</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Chic</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Streetwear</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Athleisure</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Romantic</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| </span> | |
| <span class="inline-flex items-center gap-12 px-6"> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Vintage</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Minimal</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Bohemian</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Preppy</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Chic</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Streetwear</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Athleisure</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| <span class="text-sm font-medium text-cm-sand tracking-widest uppercase">Romantic</span> | |
| <span class="w-1.5 h-1.5 rounded-full bg-cm-sand"></span> | |
| </span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Steps --> | |
| <section class="py-20 lg:py-28" id="steps"> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-10"> | |
| <div class="grid md:grid-cols-3 gap-8 lg:gap-12 reveal"> | |
| <div class="group"> | |
| <div class="step-num mb-6 group-hover:border-cm-ink group-hover:text-cm-ink">1</div> | |
| <h3 class="font-serif text-2xl text-cm-ink mb-3">Upload</h3> | |
| <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> | |
| </div> | |
| <div class="group"> | |
| <div class="step-num mb-6 group-hover:border-cm-ink group-hover:text-cm-ink">2</div> | |
| <h3 class="font-serif text-2xl text-cm-ink mb-3">Analyze</h3> | |
| <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> | |
| </div> | |
| <div class="group"> | |
| <div class="step-num mb-6 group-hover:border-cm-ink group-hover:text-cm-ink">3</div> | |
| <h3 class="font-serif text-2xl text-cm-ink mb-3">Style</h3> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upload --> | |
| <section class="py-20 lg:py-28 bg-white" id="upload-section"> | |
| <div class="max-w-4xl mx-auto px-6 lg:px-10"> | |
| <div class="text-center mb-12 reveal"> | |
| <span class="inline-block text-xs font-semibold tracking-widest uppercase text-cm-stone mb-4">Upload</span> | |
| <h2 class="font-serif text-3xl lg:text-4xl text-cm-ink mb-4">Let's see your piece</h2> | |
| <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> | |
| </div> | |
| <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)"> | |
| <div id="upload-placeholder"> | |
| <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-cm-linen flex items-center justify-center"> | |
| <i class="ph ph-camera text-3xl text-cm-stone"></i> | |
| </div> | |
| <p class="font-serif text-xl text-cm-ink mb-2">Drop your photo here</p> | |
| <p class="font-body text-sm text-cm-slate mb-6">or click to browse</p> | |
| <div class="flex items-center justify-center gap-4 text-xs text-cm-stone font-body"> | |
| <span class="flex items-center gap-1.5"><i class="ph ph-image"></i> JPG, PNG</span> | |
| <span class="flex items-center gap-1.5"><i class="ph ph-file-image"></i> up to 10MB</span> | |
| </div> | |
| </div> | |
| <div id="preview-container" class="hidden"> | |
| <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12"> | |
| <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"> | |
| <img id="preview-img" src="" alt="Uploaded" class="preview-img"> | |
| </div> | |
| <div class="flex-1 text-left"> | |
| <div class="flex items-center gap-3 mb-5"> | |
| <div class="w-10 h-10 rounded-full bg-cm-sage/30 flex items-center justify-center"> | |
| <i class="ph ph-check-circle text-cm-ink text-lg"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-cm-ink text-sm">Image uploaded</p> | |
| <p class="font-body text-xs text-cm-stone" id="filename-display">photo.jpg</p> | |
| </div> | |
| </div> | |
| <div class="mb-2"> | |
| <div class="h-2 bg-cm-linen rounded-full overflow-hidden"> | |
| <div id="upload-progress" class="progress-fill h-full bg-cm-ink rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <p class="font-body text-xs text-cm-stone" id="upload-status">Ready to analyze</p> | |
| <button onclick="analyzeImage(); event.stopPropagation();" id="analyze-btn" class="btn-primary mt-6"> | |
| <span>Generate Outfits</span> | |
| <i class="ph ph-sparkle"></i> | |
| </button> | |
| <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"> | |
| Upload different | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <input type="file" id="file-input" accept="image/*" class="hidden" onchange="handleFileSelect(this)"> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="relative w-full lg:w-64 aspect-square lg:aspect-auto lg:min-h-[300px] overflow-hidden shrink-0"> | |
| <img id="analysis-img" src="" alt="Analyzing" class="w-full h-full object-cover"> | |
| <div class="scan-line top-0"></div> | |
| <div class="absolute inset-0 bg-cm-ink/10 backdrop-blur-[2px]"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center shadow-lg animate-pulse-gentle"> | |
| <i class="ph ph-magic-wand text-cm-ink text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-1 p-8 lg:p-10"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div> | |
| <h3 class="font-serif text-xl text-cm-ink mb-1">AI Analysis</h3> | |
| <p class="font-body text-xs text-cm-stone">Decoding your piece...</p> | |
| </div> | |
| <div class="flex items-center gap-1.5"> | |
| <div class="analysis-dot" id="dot-1"></div> | |
| <div class="analysis-dot" id="dot-2"></div> | |
| <div class="analysis-dot" id="dot-3"></div> | |
| <div class="analysis-dot" id="dot-4"></div> | |
| </div> | |
| </div> | |
| <div id="analysis-progress" class="space-y-4"> | |
| <div class="flex items-center gap-4 opacity-40" id="step-color"> | |
| <i class="ph ph-palette text-cm-stone text-lg"></i> | |
| <div class="flex-1"> | |
| <div class="h-1.5 bg-cm-linen rounded-full overflow-hidden"> | |
| <div class="progress-fill h-full bg-cm-sage rounded-full" style="width: 0%" id="bar-color"></div> | |
| </div> | |
| </div> | |
| <span class="text-xs text-cm-stone font-body w-24 text-right">Color palette</span> | |
| </div> | |
| <div class="flex items-center gap-4 opacity-40" id="step-pattern"> | |
| <i class="ph ph-diamonds-four text-cm-stone text-lg"></i> | |
| <div class="flex-1"> | |
| <div class="h-1.5 bg-cm-linen rounded-full overflow-hidden"> | |
| <div class="progress-fill h-full bg-cm-sage rounded-full" style="width: 0%" id="bar-pattern"></div> | |
| </div> | |
| </div> | |
| <span class="text-xs text-cm-stone font-body w-24 text-right">Pattern & texture</span> | |
| </div> | |
| <div class="flex items-center gap-4 opacity-40" id="step-style"> | |
| <i class="ph ph-dress text-cm-stone text-lg"></i> | |
| <div class="flex-1"> | |
| <div class="h-1.5 bg-cm-linen rounded-full overflow-hidden"> | |
| <div class="progress-fill h-full bg |