Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VogueAI - Next Generation Fashion</title> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Three.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script> | |
| <style> | |
| :root { | |
| --primary: #000000; | |
| --secondary: #ffffff; | |
| --accent: #ff4d6d; | |
| --dark-accent: #d62d50; | |
| --text: #333333; | |
| --light-text: #777777; | |
| --light-gray: #f8f8f8; | |
| --dark-gray: #e0e0e0; | |
| --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Raleway', sans-serif; | |
| color: var(--text); | |
| background-color: var(--secondary); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Playfair Display', serif; | |
| font-weight: 600; | |
| } | |
| /* Preloader */ | |
| .preloader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--secondary); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .preloader.fade-out { | |
| opacity: 0; | |
| } | |
| .preloader-logo { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 3rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| .preloader-logo span { | |
| color: var(--accent); | |
| } | |
| .spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid var(--dark-gray); | |
| border-top: 5px solid var(--accent); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: 2rem; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Header */ | |
| header { | |
| background-color: var(--secondary); | |
| padding: 1.5rem 5%; | |
| position: fixed; | |
| width: 100%; | |
| z-index: 1000; | |
| box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| transition: var(--transition); | |
| } | |
| header.scrolled { | |
| padding: 1rem 5%; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .logo { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo-icon { | |
| color: var(--accent); | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| nav ul li { | |
| position: relative; | |
| } | |
| nav ul li a { | |
| text-decoration: none; | |
| color: var(--text); | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| letter-spacing: 0.5px; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| nav ul li a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: var(--accent); | |
| transition: var(--transition); | |
| } | |
| nav ul li a:hover::after { | |
| width: 100%; | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 1.5rem; | |
| align-items: center; | |
| } | |
| .header-actions i { | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .header-actions i:hover { | |
| color: var(--accent); | |
| } | |
| .cart-count { | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| background-color: var(--accent); | |
| color: white; | |
| border-radius: 50%; | |
| width: 18px; | |
| height: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.6rem; | |
| font-weight: 700; | |
| } | |
| .account-btn { | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 30px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .account-btn:hover { | |
| background-color: var(--accent); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255, 77, 109, 0.3); | |
| } | |
| .account-btn i { | |
| font-size: 0.9rem; | |
| color: white; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 5%; | |
| position: relative; | |
| overflow: hidden; | |
| background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%), | |
| url('https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=1200&auto=format&fit=crop') no-repeat center center/cover; | |
| color: white; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%); | |
| } | |
| .hero-content { | |
| width: 50%; | |
| z-index: 10; | |
| position: relative; | |
| } | |
| .hero h1 { | |
| font-size: 4rem; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.2; | |
| text-shadow: 0 2px 10px rgba(0,0,0,0.3); | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2.5rem; | |
| line-height: 1.7; | |
| max-width: 85%; | |
| font-weight: 300; | |
| } | |
| .hero-btns { | |
| display: flex; | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .hero-btn { | |
| background-color: var(--accent); | |
| color: white; | |
| border: none; | |
| padding: 1.1rem 2.2rem; | |
| border-radius: 30px; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| text-decoration: none; | |
| } | |
| .hero-btn:hover { | |
| background-color: var(--dark-accent); | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .hero-btn i { | |
| font-size: 0.9rem; | |
| } | |
| .hero-btn.secondary { | |
| background-color: transparent; | |
| color: white; | |
| border: 2px solid white; | |
| } | |
| .hero-btn.secondary:hover { | |
| background-color: rgba(255,255,255,0.2); | |
| border-color: transparent; | |
| } | |
| /* AI Designer Section */ | |
| .ai-designer { | |
| padding: 6rem 5%; | |
| background-color: var(--secondary); | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 5rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2.8rem; | |
| font-weight: 700; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .section-title h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80px; | |
| height: 3px; | |
| background-color: var(--accent); | |
| } | |
| .section-title p { | |
| font-size: 1.1rem; | |
| color: var(--light-text); | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .designer-container { | |
| display: flex; | |
| gap: 3rem; | |
| align-items: center; | |
| margin-bottom: 5rem; | |
| } | |
| .designer-form { | |
| flex: 1; | |
| padding: 2.5rem; | |
| background-color: var(--light-gray); | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| } | |
| .designer-form h3 { | |
| font-size: 1.6rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--primary); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| font-weight: 600; | |
| margin-bottom: 0.7rem; | |
| color: var(--primary); | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 1rem; | |
| border: 1px solid var(--dark-gray); | |
| border-radius: 8px; | |
| font-family: 'Raleway', sans-serif; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 2px rgba(255, 77, 109, 0.2); | |
| } | |
| textarea.form-control { | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| .generate-btn { | |
| background-color: var(--accent); | |
| color: white; | |
| border: none; | |
| padding: 1.1rem 2rem; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.7rem; | |
| } | |
| .generate-btn:hover { | |
| background-color: var(--dark-accent); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255, 77, 109, 0.3); | |
| } | |
| .designer-result { | |
| flex: 1; | |
| min-height: 400px; | |
| border-radius: 20px; | |
| background-color: var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .result-placeholder { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--light-text); | |
| } | |
| .result-placeholder i { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| color: var(--dark-gray); | |
| } | |
| .result-image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: none; | |
| } | |
| .loading-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(255,255,255,0.8); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| display: none; | |
| } | |
| .loading-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid var(--light-gray); | |
| border-top: 5px solid var(--accent); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: 1rem; | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 6rem 5%; | |
| background-color: var(--light-gray); | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2.5rem; | |
| } | |
| .feature-card { | |
| background-color: var(--secondary); | |
| border-radius: 15px; | |
| padding: 2.5rem; | |
| text-align: center; | |
| transition: var(--transition); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 5px; | |
| background-color: var(--accent); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| background: linear-gradient(135deg, var(--accent) 0%, var(--dark-accent) 100%); | |
| color: white; | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 1.5rem; | |
| font-size: 2rem; | |
| box-shadow: 0 10px 20px rgba(255, 77, 109, 0.2); | |
| } | |
| .feature-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1.2rem; | |
| } | |
| .feature-card p { | |
| color: var(--light-text); | |
| line-height: 1.7; | |
| } | |
| /* Collections Section */ | |
| .collections { | |
| padding: 6rem 5%; | |
| background-color: var(--secondary); | |
| text-align: center; | |
| } | |
| .collections-container { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2.5rem; | |
| margin-top: 3rem; | |
| } | |
| .collection-card { | |
| background-color: var(--light-gray); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| transition: var(--transition); | |
| text-align: left; | |
| position: relative; | |
| } | |
| .collection-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .collection-image { | |
| width: 100%; | |
| height: 300px; | |
| object-fit: cover; | |
| transition: var(--transition); | |
| } | |
| .collection-card:hover .collection-image { | |
| transform: scale(1.05); | |
| } | |
| .collection-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 1.5rem; | |
| background: linear-gradient(transparent, rgba(0,0,0,0.8)); | |
| color: white; | |
| } | |
| .collection-overlay h3 { | |
| font-size: 1.4rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .collection-overlay p { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| margin-bottom: 1rem; | |
| } | |
| .collection-btn { | |
| background-color: var(--secondary); | |
| color: var(--primary); | |
| border: none; | |
| padding: 0.6rem 1.2rem; | |
| border-radius: 30px; | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .collection-btn:hover { | |
| background-color: var(--accent); | |
| color: white; | |
| } | |
| /* Newsletter Section */ | |
| .newsletter { | |
| padding: 5rem 5%; | |
| background: linear-gradient(135deg, var(--primary) 0%, #333333 100%); | |
| color: white; | |
| text-align: center; | |
| } | |
| .newsletter h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .newsletter p { | |
| font-size: 1.1rem; | |
| margin-bottom: 2.5rem; | |
| max-width: 600px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| color: rgba(255,255,255,0.8); | |
| } | |
| .newsletter-form { | |
| display: flex; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| border-radius: 50px; | |
| overflow: hidden; | |
| } | |
| .newsletter-input { | |
| flex: 1; | |
| padding: 1rem 1.5rem; | |
| border: none; | |
| font-size: 1rem; | |
| } | |
| .newsletter-input:focus { | |
| outline: none; | |
| } | |
| .newsletter-btn { | |
| background-color: var(--accent); | |
| color: white; | |
| border: none; | |
| padding: 0 2.5rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .newsletter-btn:hover { | |
| background-color: var(--dark-accent); | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 4rem 5% 2rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 3rem; | |
| margin-bottom: 3rem; | |
| } | |
| .footer-logo { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: white; | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .footer-logo .logo-icon { | |
| color: var(--accent); | |
| } | |
| .footer-about p { | |
| margin-bottom: 1.5rem; | |
| color: rgba(255,255,255,0.6); | |
| line-height: 1.7; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .social-links a { | |
| color: white; | |
| font-size: 1.2rem; | |
| transition: var(--transition); | |
| background-color: rgba(255,255,255,0.1); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .social-links a:hover { | |
| background-color: var(--accent); | |
| transform: translateY(-3px); | |
| } | |
| .footer-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 1.5rem; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| color: white; | |
| } | |
| .footer-links ul { | |
| list-style: none; | |
| } | |
| .footer-links ul li { | |
| margin-bottom: 1rem; | |
| } | |
| .footer-links ul li a { | |
| color: rgba(255,255,255,0.6); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| font-weight: 400; | |
| } | |
| .footer-links ul li a:hover { | |
| color: white; | |
| padding-left: 5px; | |
| } | |
| .footer-contact p { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| margin-bottom: 1.2rem; | |
| color: rgba(255,255,255,0.6); | |
| } | |
| .footer-contact i { | |
| color: var(--accent); | |
| min-width: 20px; | |
| } | |
| .footer-bottom { | |
| padding-top: 2rem; | |
| border-top: 1px solid rgba(255,255,255,0.1); | |
| text-align: center; | |
| color: rgba(255,255,255,0.4); | |
| font-size: 0.9rem; | |
| } | |
| /* Responsive styles */ | |
| @media (max-width: 1200px) { | |
| .features-grid, .footer-content { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .collections-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| header { | |
| padding: 1rem 5%; | |
| } | |
| nav { | |
| display: none; | |
| } | |
| .hero { | |
| height: auto; | |
| padding: 8rem 5% 4rem; | |
| } | |
| .hero-content { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .hero p { | |
| max-width: 100%; | |
| } | |
| .hero-btns { | |
| justify-content: center; | |
| } | |
| .designer-container { | |
| flex-direction: column; | |
| } | |
| .features-grid, .footer-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .collections-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .newsletter-form { | |
| flex-direction: column; | |
| border-radius: 30px; | |
| } | |
| .newsletter-btn { | |
| padding: 1rem; | |
| justify-content: center; | |
| border-radius: 0 0 30px 30px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Preloader --> | |
| <div class="preloader"> | |
| <div class="preloader-logo">Vogue<span>AI</span></div> | |
| <div class="spinner"></div> | |
| <p>Loading next-gen fashion experience</p> | |
| </div> | |
| <!-- Header --> | |
| <header> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-star logo-icon"></i> | |
| Vogue<span>AI</span> | |
| </a> | |
| <nav> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Designer</a></li> | |
| <li><a href="#">Collections</a></li> | |
| <li><a href="#">Features</a></li> | |
| <li><a href="#">About</a></li> | |
| </ul> | |
| </nav> | |
| <div class="header-actions"> | |
| <i class="fas fa-search"></i> | |
| <i class="fas fa-heart"></i> | |
| <i class="fas fa-shopping-bag"> | |
| <span class="cart-count">3</span> | |
| </i> | |
| <button class="account-btn"> | |
| <i class="fas fa-user"></i> | |
| Account | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <h1>Reimagine Fashion with AI</h1> | |
| <p>Create personalized, trendsetting outfits powered by artificial intelligence. Our advanced algorithms analyze your style preferences and current trends to generate unique fashion concepts just for you.</p> | |
| <div class="hero-btns"> | |
| <a href="#designer" class="hero-btn"> | |
| <i class="fas fa-magic"></i> | |
| Try Now | |
| </a> | |
| <a href="#" class="hero-btn secondary"> | |
| <i class="fas fa-play"></i> | |
| Watch Demo | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Designer Section --> | |
| <section id="designer" class="ai-designer"> | |
| <div class="section-title"> | |
| <h2>AI Fashion Designer</h2> | |
| <p>Describe your ideal outfit and let our AI generate it for you in seconds.</p> | |
| </div> | |
| <div class="designer-container"> | |
| <div class="designer-form"> | |
| <h3>Custom Outfit Generator</h3> | |
| <form id="designerForm"> | |
| <div class="form-group"> | |
| <label for="outfit-type">Outfit Type</label> | |
| <select id="outfit-type" class="form-control"> | |
| <option value="">Select outfit type</option> | |
| <option value="casual">Casual Wear</option> | |
| <option value="formal">Formal Wear</option> | |
| <option value="business">Business Attire</option> | |
| <option value="evening">Evening Wear</option> | |
| <option value="sporty">Sporty Outfit</option> | |
| <option value="summer">Summer Outfit</option> | |
| <option value="winter">Winter Outfit</option> | |
| <option value="festive">Festive Look</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="style-preference">Style Preference</label> | |
| <select id="style-preference" class="form-control"> | |
| <option value="">Select style preference</option> | |
| <option value="minimalist">Minimalist</option> | |
| <option value="bohemian">Bohemian</option> | |
| <option value="streetwear">Streetwear</option> | |
| <option value="classic">Classic</option> | |
| <option value="edgy">Edgy</option> | |
| <option value="romantic">Romantic</option> | |
| <option value="vintage">Vintage</option> | |
| <option value="modern">Modern</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="color-scheme">Color Scheme</label> | |
| <input type="text" id="color-scheme" class="form-control" placeholder="E.g., pastel tones, monochrome, bold colors"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="additional-details">Additional Details</label> | |
| <textarea id="additional-details" class="form-control" placeholder="Describe any specific details or inspirations for your outfit"></textarea> | |
| </div> | |
| <button type="submit" class="generate-btn"> | |
| <i class="fas fa-magic"></i> | |
| Generate Outfit | |
| </button> | |
| </form> | |
| </div> | |
| <div class="designer-result"> | |
| <div class="result-placeholder"> | |
| <i class="fas fa-magic"></i> | |
| <h3>Your AI-Generated Outfit</h3> | |
| <p>Complete the form to see your custom fashion design</p> | |
| </div> | |
| <img id="resultImage" class="result-image" alt="AI Generated Outfit"> | |
| <div class="loading-overlay"> | |
| <div class="loading-spinner"></div> | |
| <p>Generating your unique outfit...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features"> | |
| <div class="section-title"> | |
| <h2>Why Choose VogueAI</h2> | |
| <p>Experience the future of fashion with our cutting-edge technology</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3>AI-Powered Design</h3> | |
| <p>Our advanced artificial intelligence analyzes billions of fashion data points to create personalized, trendsetting outfits just for you.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-user-astronaut"></i> | |
| </div> | |
| <h3>Virtual Try-On</h3> | |
| <p>Visualize how outfits will look on your unique body type with our realistic 3D modeling and augmented reality technology.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-tshirt"></i> | |
| </div> | |
| <h3>Smart Wardrobe</h3> | |
| <p>Our AI organizes your digital wardrobe and suggests perfect combinations of items you already own with new additions.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3>Trend Forecasting</h3> | |
| <p>Stay ahead of the curve with outfits predicted to be the next big thing before they hit mainstream fashion.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-leaf"></i> | |
| </div> | |
| <h3>Sustainable Fashion</h3> | |
| <p>We promote sustainable choices by helping you maximize your wardrobe and suggesting eco-friendly alternatives.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-gem"></i> | |
| </div> | |
| <h3>Personal Stylist</h3> | |
| <p>Your personal AI stylist learns your preferences and helps you discover new styles that perfectly match your taste.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Collections Section --> | |
| <section class="collections"> | |
| <div class="section-title"> | |
| <h2>Featured Collections</h2> | |
| <p>Explore our AI-generated fashion lines</p> | |
| </div> | |
| <div class="collections-container"> | |
| <div class="collection-card"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?w=800&auto=format&fit=crop" alt="Urban Futurism" class="collection-image"> | |
| <div class="collection-overlay"> | |
| <h3>Urban Futurism</h3> | |
| <p>Cutting-edge streetwear with a cyberpunk twist</p> | |
| <button class="collection-btn"> | |
| Explore | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="collection-card"> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a10b7?w=800&auto=format&fit=crop" alt="Minimal Luxe" class="collection-image"> | |
| <div class="collection-overlay"> | |
| <h3>Minimal Luxe</h3> | |
| <p>Elegant simplicity for the modern individual</p> | |
| <button class="collection-btn"> | |
| Explore | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="collection-card"> | |
| <img src="https://images.unsplash.com/photo-1591061400885-43e0286736bb?w=800&auto=format&fit=crop" alt="Neo Bohemia" class="collection-image"> | |
| <div class="collection-overlay"> | |
| <h3>Neo Bohemia</h3> | |
| <p>Free-spirited styles with contemporary edge</p> | |
| <button class="collection-btn"> | |
| Explore | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="newsletter"> | |
| <h2>Join the Fashion Revolution</h2> | |
| <p>Subscribe to receive early access to new features, exclusive AI-generated collections, and style insights.</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="Your email address" class="newsletter-input" required> | |
| <button type="submit" class="newsletter-btn"> | |
| Subscribe | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-about"> | |
| <div class="footer-logo"> | |
| <i class="fas fa-star logo-icon"></i> | |
| Vogue<span>AI</span> | |
| </div> | |
| <p>We're at the forefront of AI-powered fashion, helping individuals discover and create their perfect style through cutting-edge technology.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-tiktok"></i></a> | |
| <a href="#"><i class="fab fa-pinterest"></i></a> | |
| <a href="#"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-links"> | |
| <h3 class="footer-title">Shop</h3> | |
| <ul> | |
| <li><a href="#">Women's AI Collections</a></li> | |
| <li><a href="#">Men's AI Collections</a></li> | |
| <li><a href="#">Accessories</a></li> | |
| <li><a href="#">Sustainable Fashion</a></li> | |
| <li><a href="#">Limited Editions</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-links"> | |
| <h3 class="footer-title">Company</h3> | |
| <ul> | |
| <li><a href="#">About VogueAI</a></li> | |
| <li><a href="#">Our Technology</a></li> | |
| <li><a href="#">Careers</a></li> | |
| <li><a href="#">Press</a></li> | |
| <li><a href="#">Sustainability</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-contact"> | |
| <h3 class="footer-title">Contact</h3> | |
| <p><i class="fas fa-map-marker-alt"></i> 456 Fashion District, New York</p> | |
| <p><i class="fas fa-phone"></i> +1 (555) 987-6543</p> | |
| <p><i class="fas fa-envelope"></i> hello@vogueai.com</p> | |
| <p><i class="fas fa-clock"></i> Support 24/7</p> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2023 VogueAI. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p> | |
| <p class="ai-badge">Powered by Advanced AI</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Preloader | |
| window.addEventListener('load', function() { | |
| const preloader = document.querySelector('.preloader'); | |
| preloader.classList.add('fade-out'); | |
| setTimeout(function() { | |
| preloader.style.display = 'none'; | |
| }, 500); | |
| }); | |
| // Header scroll effect | |
| window.addEventListener('scroll', function() { | |
| const header = document.querySelector('header'); | |
| if (window.scrollY > 50) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| // AI Designer Form Submission | |
| document.getElementById('designerForm').addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| const outfitType = document.getElementById('outfit-type').value; | |
| const stylePreference = document.getElementById('style-preference').value; | |
| const colorScheme = document.getElementById('color-scheme').value; | |
| const additionalDetails = document.getElementById('additional-details').value; | |
| // Validate inputs | |
| if (!outfitType || !stylePreference || !colorScheme) { | |
| alert('Please fill in all required fields'); | |
| return; | |
| } | |
| // Construct prompt | |
| let prompt = `Fashion design for ${outfitType} outfit with ${stylePreference} style and ${colorScheme} color scheme.`; | |
| if (additionalDetails) { | |
| prompt += ` Additional details: ${additionalDetails}`; | |
| } | |
| // Show loading state | |
| const resultPlaceholder = document.querySelector('.result-placeholder'); | |
| const resultImage = document.getElementById('resultImage'); | |
| const loadingOverlay = document.querySelector('.loading-overlay'); | |
| resultPlaceholder.style.display = 'none'; | |
| resultImage.style.display = 'none'; | |
| loadingOverlay.style.display = 'flex'; | |
| try { | |
| // Call the Hugging Face API | |
| const response = await fetch('https://gaur3009-imagier-text-2-img.hf.space/run/predict', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| data: [ | |
| prompt, // Prompt | |
| "", // Negative prompt (optional) | |
| 7.5, // Guidance scale | |
| 512, // Width | |
| 512, // Height | |
| 50, // Num inference steps | |
| false, // Enable safety checker | |
| 1, // Seed (-1 for random) | |
| 0 // Num outputs | |
| ] | |
| }) | |
| }); | |
| if (!response.ok) { | |
| throw new Error('API request failed'); | |
| } | |
| const data = await response.json(); | |
| // Extract the image URL from the response | |
| // Note: The actual response structure might need adjustment based on the API | |
| const imageData = data.data[0] || ''; | |
| // Display the generated image | |
| resultImage.src = `data:image/png;base64,${imageData}`; | |
| resultImage.style.display = 'block'; | |
| loadingOverlay.style.display = 'none'; | |
| } catch (error) { | |
| console.error('Error generating outfit:', error); | |
| loadingOverlay.style.display = 'none'; | |
| resultPlaceholder.style.display = 'block'; | |
| // Display a placeholder since the API might not work due to CORS or other issues | |
| resultImage.src = 'https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=800&auto=format&fit=crop'; | |
| resultImage.style.display = 'block'; | |
| alert('Outfit generation failed. Showing sample outfit instead.'); | |
| } | |
| }); | |
| // Like buttons functionality | |
| document.querySelectorAll('.collection-btn').forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // In a real app, this would navigate to the collection page | |
| alert('This would navigate to the collection page in a real application'); | |
| }); | |
| }); | |
| // Newsletter form | |
| document.querySelector('.newsletter-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const email = e.target.querySelector('input').value; | |
| alert(`Thank you for subscribing with ${email}! You'll receive our fashion updates soon.`); | |
| e.target.reset(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |