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'); | |
| } | |
| }); | |
| // ============================================= | |
| // AUTHENTICATION SYSTEM (REAL FIREBASE OR MOCK) | |
| // ============================================= | |
| // Configuration - Set useMockAuth to true for testing without Firebase | |
| const useMockAuth = true; // Change to false to use real Firebase | |
| if (!useMockAuth) { | |
| // Real Firebase Configuration - Replace with your actual config | |
| const firebaseConfig = { | |
| apiKey: "YOUR_API_KEY", | |
| authDomain: "YOUR_PROJECT_ID.firebaseapp.com", | |
| projectId: "YOUR_PROJECT_ID", | |
| storageBucket: "YOUR_PROJECT_ID.appspot.com", | |
| messagingSenderId: "YOUR_SENDER_ID", | |
| appId: "YOUR_APP_ID" | |
| }; | |
| // Initialize Firebase | |
| firebase.initializeApp(firebaseConfig); | |
| var auth = firebase.auth(); | |
| var provider = new firebase.auth.GoogleAuthProvider(); | |
| } else { | |
| // Mock Authentication System for testing | |
| console.log("Using mock authentication system for testing"); | |
| var auth = { | |
| currentUser: null, | |
| signInWithEmailAndPassword: function(email, password) { | |
| return new Promise((resolve) => { | |
| setTimeout(() => { | |
| this.currentUser = { | |
| email: email, | |
| displayName: email.split('@')[0], | |
| photoURL: 'https://via.placeholder.com/40', | |
| uid: 'mock-user-' + Math.random().toString(36).substr(2, 9) | |
| }; | |
| resolve({ user: this.currentUser }); | |
| updateUI(this.currentUser); | |
| alert('Mock login successful! (Email: ' + email + ')'); | |
| }, 500); | |
| }); | |
| }, | |
| createUserWithEmailAndPassword: function(email, password) { | |
| return new Promise((resolve) => { | |
| setTimeout(() => { | |
| const name = document.getElementById('registerName').value.trim() || email.split('@')[0]; | |
| this.currentUser = { | |
| email: email, | |
| displayName: name, | |
| photoURL: 'https://via.placeholder.com/40', | |
| uid: 'mock-user-' + Math.random().toString(36).substr(2, 9) | |
| }; | |
| resolve({ user: this.currentUser }); | |
| updateUI(this.currentUser); | |
| alert('Mock registration successful! (Email: ' + email + ')'); | |
| }, 500); | |
| }); | |
| }, | |
| signInWithPopup: function(provider) { | |
| return new Promise((resolve) => { | |
| setTimeout(() => { | |
| this.currentUser = { | |
| email: 'mockuser@gmail.com', | |
| displayName: 'Mock Google User', | |
| photoURL: 'https://via.placeholder.com/40', | |
| uid: 'mock-google-user-' + Math.random().toString(36).substr(2, 9) | |
| }; | |
| resolve({ user: this.currentUser }); | |
| updateUI(this.currentUser); | |
| alert('Mock Google login successful!'); | |
| }, 500); | |
| }); | |
| }, | |
| signOut: function() { | |
| this.currentUser = null; | |
| updateUI(null); | |
| alert('Mock sign out successful'); | |
| }, | |
| sendPasswordResetEmail: function(email) { | |
| return new Promise((resolve) => { | |
| setTimeout(() => { | |
| alert('Mock password reset email sent to: ' + email); | |
| resolve(); | |
| }, 500); | |
| }); | |
| }, | |
| onAuthStateChanged: function(callback) { | |
| // Call immediately with current user | |
| callback(this.currentUser); | |
| // Simulate auth changes (for demo purposes) | |
| setInterval(() => { | |
| callback(this.currentUser); | |
| }, 1000); | |
| } | |
| }; | |
| var provider = { | |
| // Mock provider object for Google auth | |
| providerId: 'google.com' | |
| }; | |
| } | |
| // ============================================= | |
| // REST OF YOUR APPLICATION CODE | |
| // ============================================= | |
| // Auth Modal Elements | |
| const authModal = document.getElementById('authModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const loginTab = document.getElementById('loginTab'); | |
| const registerTab = document.getElementById('registerTab'); | |
| const loginForm = document.getElementById('loginForm'); | |
| const registerForm = document.getElementById('registerForm'); | |
| const switchToRegister = document.getElementById('switchToRegister'); | |
| const switchToLogin = document.getElementById('switchToLogin'); | |
| const googleLogin = document.getElementById('googleLogin'); | |
| const forgotPassword = document.getElementById('forgotPassword'); | |
| // Account Dropdown Elements | |
| const accountButton = document.getElementById('accountButton'); | |
| const dropdownMenu = document.getElementById('dropdownMenu'); | |
| const signinBtn = document.getElementById('signinBtn'); | |
| const signupBtn = document.getElementById('signupBtn'); | |
| // Show/hide auth modal | |
| function toggleAuthModal() { | |
| authModal.classList.toggle('show'); | |
| } | |
| // Switch between login and register forms | |
| function switchTab(tab) { | |
| if (tab === 'login') { | |
| loginTab.classList.add('active'); | |
| registerTab.classList.remove('active'); | |
| loginForm.classList.add('active'); | |
| registerForm.classList.remove('active'); | |
| } else { | |
| registerTab.classList.add('active'); | |
| loginTab.classList.remove('active'); | |
| registerForm.classList.add('active'); | |
| loginForm.classList.remove('active'); | |
| } | |
| } | |
| // Show account dropdown | |
| function toggleDropdown() { | |
| dropdownMenu.classList.toggle('show'); | |
| } | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(event) { | |
| if (!accountButton.contains(event.target) && !dropdownMenu.contains(event.target)) { | |
| dropdownMenu.classList.remove('show'); | |
| } | |
| }); | |
| // Event Listeners | |
| closeModal.addEventListener('click', toggleAuthModal); | |
| loginTab.addEventListener('click', () => switchTab('login')); | |
| registerTab.addEventListener('click', () => switchTab('register')); | |
| switchToRegister.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| switchTab('register'); | |
| }); | |
| switchToLogin.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| switchTab('login'); | |
| }); | |
| accountButton.addEventListener('click', toggleDropdown); | |
| signinBtn.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| toggleAuthModal(); | |
| dropdownMenu.classList.remove('show'); | |
| switchTab('login'); | |
| }); | |
| signupBtn.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| toggleAuthModal(); | |
| dropdownMenu.classList.remove('show'); | |
| switchTab('register'); | |
| }); | |
| // Forgot password | |
| forgotPassword.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const email = document.getElementById('loginEmail').value.trim(); | |
| if (!email) { | |
| alert('Please enter your email address first'); | |
| return; | |
| } | |
| auth.sendPasswordResetEmail(email) | |
| .then(() => { | |
| alert('Password reset email sent. Please check your inbox.'); | |
| }) | |
| .catch(error => { | |
| alert('Error sending reset email: ' + (error.message || error)); | |
| }); | |
| }); | |
| // Login with email/password | |
| loginForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const email = document.getElementById('loginEmail').value.trim(); | |
| const password = document.getElementById('loginPassword').value.trim(); | |
| auth.signInWithEmailAndPassword(email, password) | |
| .then((userCredential) => { | |
| toggleAuthModal(); | |
| updateUI(userCredential.user); | |
| }) | |
| .catch(error => { | |
| alert('Login error: ' + (error.message || error)); | |
| }); | |
| }); | |
| // Register with email/password | |
| registerForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const name = document.getElementById('registerName').value.trim(); | |
| const email = document.getElementById('registerEmail').value.trim(); | |
| const password = document.getElementById('registerPassword').value.trim(); | |
| auth.createUserWithEmailAndPassword(email, password) | |
| .then((userCredential) => { | |
| if (auth.currentUser && auth.currentUser.updateProfile) { | |
| return auth.currentUser.updateProfile({ | |
| displayName: name | |
| }).then(() => userCredential); | |
| } | |
| return userCredential; | |
| }) | |
| .then((userCredential) => { | |
| toggleAuthModal(); | |
| updateUI(userCredential.user); | |
| }) | |
| .catch(error => { | |
| alert('Registration error: ' + (error.message || error)); | |
| }); | |
| }); | |
| // Google Sign-In | |
| googleLogin.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| auth.signInWithPopup(provider) | |
| .then((result) => { | |
| toggleAuthModal(); | |
| updateUI(result.user); | |
| }) | |
| .catch(error => { | |
| alert('Google sign-in error: ' + (error.message || error)); | |
| }); | |
| }); | |
| // Update UI based on auth state | |
| function updateUI(user) { | |
| const accountButton = document.getElementById('accountButton'); | |
| const dropdownMenu = document.getElementById('dropdownMenu'); | |
| if (user) { | |
| // User is signed in | |
| accountButton.innerHTML = ` | |
| <img src="${user.photoURL || 'https://via.placeholder.com/40'}" class="user-avatar" alt="User Avatar"> | |
| <span class="user-name">${user.displayName || 'My Account'}</span> | |
| `; | |
| dropdownMenu.innerHTML = ` | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-user-circle"></i> | |
| My Profile | |
| </a> | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-heart"></i> | |
| Saved Designs | |
| </a> | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-shopping-bag"></i> | |
| My Orders | |
| </a> | |
| <div class="dropdown-divider"></div> | |
| <a href="#" class="dropdown-item" id="signoutBtn"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| Sign Out | |
| </a> | |
| `; | |
| // Add event listener for sign out | |
| document.getElementById('signoutBtn')?.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| auth.signOut(); | |
| }); | |
| } else { | |
| // User is signed out | |
| accountButton.innerHTML = ` | |
| <i class="fas fa-user"></i> | |
| <span class="user-name">Account</span> | |
| `; | |
| dropdownMenu.innerHTML = ` | |
| <a href="#" class="dropdown-item" id="signinBtn"> | |
| <i class="fas fa-sign-in-alt"></i> | |
| Sign In | |
| </a> | |
| <a href="#" class="dropdown-item" id="signupBtn"> | |
| <i class="fas fa-user-plus"></i> | |
| Sign Up | |
| </a> | |
| `; | |
| // Re-add event listeners | |
| document.getElementById('signinBtn')?.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| toggleAuthModal(); | |
| dropdownMenu.classList.remove('show'); | |
| switchTab('login'); | |
| }); | |
| document.getElementById('signupBtn')?.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| toggleAuthModal(); | |
| dropdownMenu.classList.remove('show'); | |
| switchTab('register'); | |
| }); | |
| } | |
| } | |
| // Auth state observer | |
| auth.onAuthStateChanged(user => { | |
| updateUI(user); | |
| }); | |
| // AI Outfit Generator | |
| const designerForm = document.getElementById('designerForm'); | |
| const resultImage = document.getElementById('resultImage'); | |
| const resultPlaceholder = document.querySelector('.result-placeholder'); | |
| const loadingOverlay = document.querySelector('.loading-overlay'); | |
| designerForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| // Get form values | |
| 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) { | |
| alert('Please select at least outfit type and style preference'); | |
| return; | |
| } | |
| // Show loading state | |
| resultPlaceholder.style.display = 'none'; | |
| resultImage.style.display = 'none'; | |
| loadingOverlay.style.display = 'flex'; | |
| try { | |
| // In a real app, you would call your backend API here | |
| const prompt = `A ${outfitType} outfit in ${stylePreference} style with ${colorScheme} colors. ${additionalDetails}`; | |
| console.log('Generating outfit with prompt:', prompt); | |
| // Simulate API call delay | |
| await new Promise(resolve => setTimeout(resolve, 3000)); | |
| // For demo purposes, we'll use placeholder images | |
| const outfitImages = [ | |
| 'https://images.unsplash.com/photo-1551232864-3f0890e580d9?w=800&auto=format&fit=crop', | |
| 'https://images.unsplash.com/photo-1556905055-8f358a7a10b7?w=800&auto=format&fit=crop', | |
| 'https://images.unsplash.com/photo-1591061400885-43e0286736bb?w=800&auto=format&fit=crop', | |
| 'https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=800&auto=format&fit=crop', | |
| 'https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?w=800&auto=format&fit=crop' | |
| ]; | |
| // Select random image for demo | |
| const randomImage = outfitImages[Math.floor(Math.random() * outfitImages.length)]; | |
| // Display result | |
| resultImage.src = randomImage; | |
| resultImage.style.display = 'block'; | |
| loadingOverlay.style.display = 'none'; | |
| // In a real implementation, you would save the generated design to the user's account | |
| if (auth.currentUser) { | |
| console.log('Saving design to user account'); | |
| // Example: fetch('/api/save-design', { method: 'POST', body: JSON.stringify({userId: auth.currentUser.uid, prompt, imageUrl: randomImage}) }); | |
| } | |
| } catch (error) { | |
| console.error('Error generating outfit:', error); | |
| alert('Failed to generate outfit. Please try again.'); | |
| resultPlaceholder.style.display = 'block'; | |
| loadingOverlay.style.display = 'none'; | |
| } | |
| }); | |
| // Newsletter Form | |
| const newsletterForm = document.querySelector('.newsletter-form'); | |
| newsletterForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const emailInput = newsletterForm.querySelector('input[type="email"]'); | |
| const email = emailInput.value.trim(); | |
| if (!email) { | |
| alert('Please enter your email address'); | |
| return; | |
| } | |
| try { | |
| // In a real app, you would call your backend API here | |
| console.log('Subscribing email:', email); | |
| // Simulate API call delay | |
| await new Promise(resolve => setTimeout(resolve, 1000)); | |
| alert('Thank you for subscribing to our newsletter!'); | |
| emailInput.value = ''; | |
| } catch (error) { | |
| console.error('Error subscribing:', error); | |
| alert('Failed to subscribe. Please try again.'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Initialize the app | |
| document.addEventListener('DOMContentLoaded', function() { | |
| console.log('VogueAI application initialized'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |