Continue updating these info- Add upload ZIP option in UI . Add pricing options , add sign in options which will show gmail option and login will work. Show a progress bar when image is uploaded . Show create avatar button that will trigger a API (mock ) and also when user see AI Clone results - Follow Up Deployment

index.html

@@ -58,10 +58,16 @@
             <div class="flex justify-between items-center">
                 <h1 class="text-3xl font-bold">AI Clone Creator</h1>
                 <nav>
-                    <ul class="flex space-x-6">
+                    <ul class="flex space-x-6 items-center">
                         <li><a href="#image-clone" class="hover:text-gray-200 transition">Image Clone</a></li>
                         <li><a href="#video-clone" class="hover:text-gray-200 transition">Video Clone</a></li>
+                        <li><a href="#pricing" class="hover:text-gray-200 transition">Pricing</a></li>
                         <li><a href="#about" class="hover:text-gray-200 transition">About</a></li>
+                        <li>
+                            <button id="signin-btn" class="bg-white text-purple-600 hover:bg-gray-100 font-medium py-2 px-4 rounded-full transition">
+                                Sign In
+                            </button>
+                        </li>
                     </ul>
                 </nav>
             </div>
@@ -98,18 +104,27 @@
                                 <button id="upload-btn" class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-6 rounded-full transition">
                                     Browse Files
                                 </button>
-                                <p class="text-sm text-gray-500 mt-2">JPEG, PNG up to 5MB</p>
+                                <p class="text-sm text-gray-500 mt-2">JPEG, PNG or ZIP (multiple images) up to 5MB</p>
+                                <div class="mt-4 text-xs text-gray-500">
+                                    <p>For best results, upload a ZIP containing:</p>
+                                    <ul class="list-disc pl-5 mt-1">
+                                        <li>10-20 high-quality photos</li>
+                                        <li>Different angles and expressions</li>
+                                        <li>Good lighting conditions</li>
+                                    </ul>
+                                </div>
                             </div>
                             
                             <div id="upload-progress" class="hidden">
                                 <div class="flex items-center justify-center mb-4">
                                     <div class="w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full animate-spin"></div>
                                 </div>
-                                <p class="font-medium mb-2">Processing your image...</p>
+                                <p class="font-medium mb-2">Training your AI model...</p>
                                 <div class="progress-bar w-full mb-2">
                                     <div id="progress-fill" class="progress-fill" style="width: 0%"></div>
                                 </div>
                                 <p id="progress-text" class="text-sm text-gray-500">0% complete</p>
+                                <p class="text-xs text-gray-500 mt-1">Processing 20 facial features...</p>
                             </div>
                             
                             <div id="upload-preview" class="hidden">
@@ -118,8 +133,9 @@
                                 </div>
                                 <p class="font-medium mb-2">Image uploaded successfully!</p>
                                 <button id="generate-btn" class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-6 rounded-full transition">
-                                    Generate Clone
+                                    Create Avatar
                                 </button>
+                                <p class="text-xs text-gray-500 mt-2">This may take 1-2 minutes</p>
                             </div>
                         </div>
                     </div>
@@ -418,7 +434,27 @@
             
             // Generate AI clone images
             generateBtn.addEventListener('click', function() {
-                // Simulate AI processing
+                // Mock API call to create avatar
+                const mockApiCall = () => {
+                    return new Promise((resolve) => {
+                        let progress = 0;
+                        const interval = setInterval(() => {
+                            progress += Math.random() * 5;
+                            if (progress > 100) progress = 100;
+                            
+                            progressFill.style.width = `${progress}%`;
+                            progressText.textContent = `${Math.round(progress)}% complete`;
+                            
+                            if (progress === 100) {
+                                clearInterval(interval);
+                                resolve();
+                            }
+                        }, 200);
+                    });
+                };
+
+                // Simulate AI processing with mock API
+                mockApiCall().then(() => {
                 uploadPreview.classList.add('hidden');
                 uploadProgress.classList.remove('hidden');
                 progressFill.style.width = '0%';
@@ -571,5 +607,82 @@
             });
         });
     </script>
+
+    <!-- Sign In Modal -->
+    <div id="signin-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-xl p-8 w-full max-w-md">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-2xl font-bold">Sign In</h3>
+                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            
+            <button id="google-signin" class="w-full bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-4 rounded-lg flex items-center justify-center transition mb-4">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google" class="w-5 h-5 mr-2">
+                Continue with Google
+            </button>
+            
+            <div class="relative my-6">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-300"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-white text-gray-500">or</span>
+                </div>
+            </div>
+            
+            <form id="email-signin" class="space-y-4">
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                    <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500" placeholder="[email protected]" required>
+                </div>
+                <div>
+                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                    <input type="password" id="password" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500" placeholder="••••••••" required>
+                </div>
+                <button type="submit" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-4 rounded-lg transition">
+                    Sign In
+                </button>
+            </form>
+            
+            <p class="text-sm text-gray-500 mt-4 text-center">
+                Don't have an account? <a href="#" class="text-purple-500 hover:text-purple-700">Sign up</a>
+            </p>
+        </div>
+    </div>
+
+    <script>
+        // Sign in modal functionality
+        const signinBtn = document.getElementById('signin-btn');
+        const signinModal = document.getElementById('signin-modal');
+        const closeModal = document.getElementById('close-modal');
+        const googleSignin = document.getElementById('google-signin');
+        const emailSignin = document.getElementById('email-signin');
+
+        signinBtn.addEventListener('click', () => {
+            signinModal.classList.remove('hidden');
+        });
+
+        closeModal.addEventListener('click', () => {
+            signinModal.classList.add('hidden');
+        });
+
+        googleSignin.addEventListener('click', () => {
+            // In a real app, this would trigger Google OAuth flow
+            alert('Redirecting to Google sign in...');
+        });
+
+        emailSignin.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            
+            // Mock login - in a real app this would call your backend
+            alert(`Mock login with email: ${email}`);
+            signinModal.classList.add('hidden');
+            signinBtn.textContent = 'My Account';
+        });
+    </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rahul7star/ai-clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>