Update index.html

index.html

@@ -23,13 +23,11 @@
             --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);
@@ -37,12 +35,10 @@
             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;
@@ -58,11 +54,9 @@
             z-index: 9999;
             transition: opacity 0.5s ease;
         }
-
         .preloader.fade-out {
             opacity: 0;
         }
-
         .preloader-logo {
             font-family: 'Playfair Display', serif;
             font-size: 3rem;
@@ -70,11 +64,9 @@
             color: var(--primary);
             margin-bottom: 1rem;
         }
-
         .preloader-logo span {
             color: var(--accent);
         }
-
         .spinner {
             width: 50px;
             height: 50px;
@@ -84,12 +76,10 @@
             animation: spin 1s linear infinite;
             margin-bottom: 2rem;
         }
-
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-
         /* Header */
         header {
             background-color: var(--secondary);
@@ -103,12 +93,10 @@
             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;
@@ -119,21 +107,17 @@
             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);
@@ -143,7 +127,6 @@
             transition: var(--transition);
             position: relative;
         }
-
         nav ul li a::after {
             content: '';
             position: absolute;
@@ -154,28 +137,23 @@
             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;
@@ -191,7 +169,6 @@
             font-size: 0.6rem;
             font-weight: 700;
         }
-
         .account-btn {
             background-color: var(--primary);
             color: white;
@@ -206,18 +183,15 @@
             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;
@@ -230,7 +204,6 @@
                         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;
@@ -240,20 +213,17 @@
             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;
@@ -261,13 +231,11 @@
             max-width: 85%;
             font-weight: 300;
         }
-
         .hero-btns {
             display: flex;
             gap: 1.5rem;
             margin-top: 2rem;
         }
-
         .hero-btn {
             background-color: var(--accent);
             color: white;
@@ -283,39 +251,32 @@
             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;
@@ -323,7 +284,6 @@
             position: relative;
             display: inline-block;
         }
-
         .section-title h2::after {
             content: '';
             position: absolute;
@@ -334,21 +294,18 @@
             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;
@@ -356,24 +313,20 @@
             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;
@@ -383,18 +336,15 @@
             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;
@@ -411,13 +361,11 @@
             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;
@@ -430,26 +378,22 @@
             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;
@@ -463,7 +407,6 @@
             justify-content: center;
             display: none;
         }
-
         .loading-spinner {
             width: 50px;
             height: 50px;
@@ -473,19 +416,16 @@
             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;
@@ -496,7 +436,6 @@
             position: relative;
             overflow: hidden;
         }
-
         .feature-card::before {
             content: '';
             position: absolute;
@@ -506,12 +445,10 @@
             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;
@@ -525,31 +462,26 @@
             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;
@@ -558,23 +490,19 @@
             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;
@@ -584,18 +512,15 @@
             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);
@@ -610,12 +535,10 @@
             align-items: center;
             gap: 0.5rem;
         }
-
         .collection-btn:hover {
             background-color: var(--accent);
             color: white;
         }
-
         /* Newsletter Section */
         .newsletter {
             padding: 5rem 5%;
@@ -623,12 +546,10 @@
             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;
@@ -637,7 +558,6 @@
             margin-right: auto;
             color: rgba(255,255,255,0.8);
         }
-
         .newsletter-form {
             display: flex;
             max-width: 500px;
@@ -646,18 +566,15 @@
             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;
@@ -670,25 +587,21 @@
             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;
@@ -699,23 +612,19 @@
             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;
@@ -728,12 +637,10 @@
             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;
@@ -741,27 +648,22 @@
             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;
@@ -769,12 +671,10 @@
             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);
@@ -782,7 +682,6 @@
             color: rgba(255,255,255,0.4);
             font-size: 0.9rem;
         }
-
         /* Responsive styles */
         @media (max-width: 1200px) {
             .features-grid, .footer-content {
@@ -793,7 +692,6 @@
                 grid-template-columns: repeat(2, 1fr);
             }
         }
-
         @media (max-width: 768px) {
             header {
                 padding: 1rem 5%;
@@ -912,30 +810,43 @@
                 <h3>Custom Outfit Generator</h3>
                 <form id="designerForm">
                     <div class="form-group">
-                        <label for="color-scheme">Color Scheme</label>
-                        <input type="text" id="color-scheme" class="form-control" placeholder="E.g., Red, Blue, Pastel tones" required>
+                        <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="outfit-type">Outfit Type</label>
-                        <select id="outfit-type" class="form-control" required>
-                            <option value="">Select outfit type</option>
-                            <option value="T-shirt">T-shirt</option>
-                            <option value="Hoodie">Hoodie</option>
-                            <option value="Dress">Dress</option>
-                            <option value="Sweatshirt">Sweatshirt</option>
-                            <option value="Jacket">Jacket</option>
+                        <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="design-style">Design Style</label>
-                        <input type="text" id="design-style" class="form-control" placeholder="E.g., Abstract Art, Minimalist Logo" required>
+                        <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-text">Additional Text (Optional)</label>
-                        <input type="text" id="additional-text" class="form-control" placeholder="E.g., Slogan or text to include">
+                        <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">
@@ -954,11 +865,7 @@
                 <img id="resultImage" class="result-image" alt="AI Generated Outfit">
                 <div class="loading-overlay">
                     <div class="loading-spinner"></div>
-                    <div class="progress-container">
-                        <div class="progress-bar" id="progressBar"></div>
-                        <span id="progressText">0%</span>
-                    </div>
-                    <p id="statusText">Initializing AI model...</p>
+                    <p>Generating your unique outfit...</p>
                 </div>
             </div>
         </div>
@@ -1136,127 +1043,118 @@
     </footer>
 
     <script>
-        // Add this to your existing script section
+        // 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();
             
-            // Get form values
-            const colorScheme = document.getElementById('color-scheme').value;
             const outfitType = document.getElementById('outfit-type').value;
-            const designStyle = document.getElementById('design-style').value;
-            const additionalText = document.getElementById('additional-text').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');
-            const progressBar = document.getElementById('progressBar');
-            const progressText = document.getElementById('progressText');
-            const statusText = document.getElementById('statusText');
             
             resultPlaceholder.style.display = 'none';
             resultImage.style.display = 'none';
             loadingOverlay.style.display = 'flex';
             
-            // Create a progress simulation (since we can't get real progress from API)
-            let progress = 0;
-            const progressInterval = setInterval(() => {
-                progress += Math.random() * 5;
-                if (progress > 95) progress = 95; // Don't go to 100% until we get the image
-                progressBar.style.width = `${progress}%`;
-                progressText.textContent = `${Math.floor(progress)}%`;
-                
-                // Update status text based on progress
-                if (progress < 30) {
-                    statusText.textContent = "Initializing AI model...";
-                } else if (progress < 60) {
-                    statusText.textContent = "Generating design concepts...";
-                } else {
-                    statusText.textContent = "Finalizing your unique outfit...";
-                }
-            }, 500);
-
             try {
-                // Construct the prompt based on form inputs
-                const prompt = `A high-resolution, premium-quality ${colorScheme} ${outfitType} with a ${designStyle}. ` +
-                              `The design is visually striking, seamlessly integrated, and enhances the garment's texture. ` +
-                              `The fabric appears realistic with natural folds, shadows, and highlights. ` +
-                              (additionalText ? `The text "${additionalText}" is positioned artistically.` : "");
+                // 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
+                        ]
+                    })
+                });
                 
-                console.log("Prompt:", prompt);
+                if (!response.ok) {
+                    throw new Error('API request failed');
+                }
                 
-                // Call your backend API (you'll need to set this up)
-                // For now, we'll simulate the API call with a timeout
-                const response = await simulateApiCall(prompt);
+                const data = await response.json();
                 
-                // Complete the progress bar
-                clearInterval(progressInterval);
-                progressBar.style.width = '100%';
-                progressText.textContent = '100%';
-                statusText.textContent = "Generation complete!";
+                // 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 result after a brief delay to show completion
-                setTimeout(() => {
-                    // In a real implementation, you would use the actual image from the API
-                    // For demo purposes, we'll use a placeholder
-                    resultImage.src = 'https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=800&auto=format&fit=crop';
-                    resultImage.style.display = 'block';
-                    loadingOverlay.style.display = 'none';
-                }, 1000);
+                // 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);
-                clearInterval(progressInterval);
                 loadingOverlay.style.display = 'none';
                 resultPlaceholder.style.display = 'block';
-                alert('Failed to generate outfit. Please try again.');
+                
+                // 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.');
             }
         });
-
-        // Simulate API call with progress (replace with actual API call)
-        async function simulateApiCall(prompt) {
-            return new Promise((resolve) => {
-                // Simulate API processing time (3-6 seconds)
-                const delay = 3000 + Math.random() * 3000;
-                setTimeout(() => {
-                    resolve({ success: true });
-                }, delay);
+        // 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');
             });
-        }
-
-        // Add this to your CSS
-        <style>
-            .progress-container {
-                width: 100%;
-                background-color: #f1f1f1;
-                border-radius: 10px;
-                margin: 20px 0;
-                position: relative;
-            }
-            
-            .progress-bar {
-                height: 20px;
-                border-radius: 10px;
-                background-color: var(--accent);
-                width: 0%;
-                transition: width 0.3s ease;
-            }
-            
-            #progressText {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                color: white;
-                font-weight: bold;
-            }
-            
-            #statusText {
-                margin-top: 10px;
-                font-size: 1rem;
-                color: var(--text);
-            }
-        </style>
+        });
+        // 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>