Hugging Face's logo

Spaces:
rahul7star
/
ai-clone
Running

App Files Community
rahul7star commited on
Commit
3de33a9
·
verified ·
1 Parent(s): f4c412b

Build a full-stack AI Clone web application with a modern, responsive UI that includes all major features using mocked functionality. The app should begin with a "Sign In with Google" button, which triggers a simulated Google login flow; after login, display the user's mock profile including name and avatar. Include an upload section with two options: one for uploading multiple images (minimum 5 required), and another for uploading a `.zip` file. If the user uploads images, display a count and a horizontal slider or carousel preview of all images. If a zip file is uploaded, show a "Train Model" button; when clicked, simulate training progress with a mocked progress bar reaching 100%. After training, display an "AI Clone Results" component that shows a mock generated image along with a “Recreate” button which replaces the image with another placeholder when clicked. Next, add a component called “Bring Your Avatar to Life” where the user can input a text prompt and click “Generate Video” to simulate avatar animation. Display a loading state, followed by a placeholder video preview. Include a pricing section with three selectable mock plans: Free, Pro, and Studio — each with visual cards or radio buttons. Upon selection, show a mock confirmation message. Lastly, implement social sharing features where users can share generated images or videos using buttons like "Share to Twitter", "Share to Instagram", and "Copy Link", each triggering a mocked success message or toast notification. Use a clean UI framework such as React with Tailwind CSS or Shadcn/UI, and apply a polished, minimal design with soft gradients, rounded corners, and clear user flow. All features should be fully mocked with placeholder actions and state transitions — no backend or real APIs required. - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +345 -15
index.html CHANGED
@@ -52,16 +52,37 @@
52
  </style>
53
  </head>
54
  <body class="bg-gray-50 min-h-screen">
55
- <!-- Header -->
56
- <header class="gradient-bg text-white py-6">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  <div class="container mx-auto px-4">
58
  <div class="flex justify-between items-center">
59
  <h1 class="text-3xl font-bold">AI Clone Creator</h1>
60
  <nav>
61
- <ul class="flex space-x-6">
62
  <li><a href="#image-clone" class="hover:text-gray-200 transition">Image Clone</a></li>
63
  <li><a href="#video-clone" class="hover:text-gray-200 transition">Video Clone</a></li>
 
64
  <li><a href="#about" class="hover:text-gray-200 transition">About</a></li>
 
 
 
 
 
65
  </ul>
66
  </nav>
67
  </div>
@@ -89,27 +110,61 @@
89
  Upload a clear photo of yourself (face forward, good lighting) to create your digital twin.
90
  </p>
91
 
92
- <div id="upload-container" class="upload-area rounded-lg p-8 text-center cursor-pointer mb-6">
93
- <input type="file" id="image-upload" class="hidden" accept="image/*">
94
- <div id="upload-content" class="flex flex-col items-center justify-center">
95
- <i class="fas fa-cloud-upload-alt text-4xl text-purple-500 mb-4"></i>
96
- <p class="text-lg font-medium mb-2">Drag & drop your photo here</p>
97
- <p class="text-gray-500 mb-4">or</p>
98
- <button id="upload-btn" class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-6 rounded-full transition">
99
- Browse Files
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
100
  </button>
101
- <p class="text-sm text-gray-500 mt-2">JPEG, PNG up to 5MB</p>
102
  </div>
103
 
104
  <div id="upload-progress" class="hidden">
105
  <div class="flex items-center justify-center mb-4">
106
  <div class="w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full animate-spin"></div>
107
  </div>
108
- <p class="font-medium mb-2">Processing your image...</p>
109
  <div class="progress-bar w-full mb-2">
110
  <div id="progress-fill" class="progress-fill" style="width: 0%"></div>
111
  </div>
112
  <p id="progress-text" class="text-sm text-gray-500">0% complete</p>
 
113
  </div>
114
 
115
  <div id="upload-preview" class="hidden">
@@ -118,8 +173,9 @@
118
  </div>
119
  <p class="font-medium mb-2">Image uploaded successfully!</p>
120
  <button id="generate-btn" class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-6 rounded-full transition">
121
- Generate Clone
122
  </button>
 
123
  </div>
124
  </div>
125
  </div>
@@ -253,6 +309,50 @@
253
  </div>
254
  </section>
255
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
256
  <!-- About Section -->
257
  <section id="about" class="bg-white rounded-xl shadow-lg p-8 mb-12">
258
  <h3 class="text-2xl font-bold mb-6">About AI Clone Creator</h3>
@@ -311,6 +411,139 @@
311
 
312
  <script>
313
  document.addEventListener('DOMContentLoaded', function() {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
314
  // Image Upload Functionality
315
  const uploadContainer = document.getElementById('upload-container');
316
  const uploadContent = document.getElementById('upload-content');
@@ -418,7 +651,27 @@
418
 
419
  // Generate AI clone images
420
  generateBtn.addEventListener('click', function() {
421
- // Simulate AI processing
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
422
  uploadPreview.classList.add('hidden');
423
  uploadProgress.classList.remove('hidden');
424
  progressFill.style.width = '0%';
@@ -571,5 +824,82 @@
571
  });
572
  });
573
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
574
  <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>
575
  </html>
 
52
  </style>
53
  </head>
54
  <body class="bg-gray-50 min-h-screen">
55
+ <!-- User Profile Header -->
56
+ <header class="gradient-bg text-white py-6 hidden" id="user-header">
57
+ <div class="container mx-auto px-4">
58
+ <div class="flex justify-between items-center">
59
+ <div class="flex items-center space-x-4">
60
+ <img id="user-avatar" src="https://via.placeholder.com/40" alt="User" class="w-10 h-10 rounded-full">
61
+ <span id="user-name" class="font-medium">John Doe</span>
62
+ </div>
63
+ <button id="signout-btn" class="bg-white text-purple-600 hover:bg-gray-100 font-medium py-2 px-4 rounded-full transition">
64
+ Sign Out
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </header>
69
+
70
+ <!-- Main Header (hidden after login) -->
71
+ <header class="gradient-bg text-white py-6 hidden" id="main-header">
72
  <div class="container mx-auto px-4">
73
  <div class="flex justify-between items-center">
74
  <h1 class="text-3xl font-bold">AI Clone Creator</h1>
75
  <nav>
76
+ <ul class="flex space-x-6 items-center">
77
  <li><a href="#image-clone" class="hover:text-gray-200 transition">Image Clone</a></li>
78
  <li><a href="#video-clone" class="hover:text-gray-200 transition">Video Clone</a></li>
79
+ <li><a href="#pricing" class="hover:text-gray-200 transition">Pricing</a></li>
80
  <li><a href="#about" class="hover:text-gray-200 transition">About</a></li>
81
+ <li>
82
+ <button id="signin-btn" class="bg-white text-purple-600 hover:bg-gray-100 font-medium py-2 px-4 rounded-full transition">
83
+ Sign In
84
+ </button>
85
+ </li>
86
  </ul>
87
  </nav>
88
  </div>
 
110
  Upload a clear photo of yourself (face forward, good lighting) to create your digital twin.
111
  </p>
112
 
113
+ <div class="mb-6">
114
+ <h4 class="text-lg font-medium mb-4">Upload Options</h4>
115
+ <div class="grid grid-cols-2 gap-4 mb-4">
116
+ <div id="images-upload" class="upload-area rounded-lg p-6 text-center cursor-pointer">
117
+ <input type="file" id="image-upload" class="hidden" accept="image/*" multiple>
118
+ <div id="images-upload-content" class="flex flex-col items-center justify-center">
119
+ <i class="fas fa-images text-3xl text-purple-500 mb-3"></i>
120
+ <p class="font-medium mb-1">Upload Multiple Images</p>
121
+ <p class="text-sm text-gray-500">(Minimum 5 required)</p>
122
+ <button id="images-upload-btn" class="mt-3 bg-purple-500 hover:bg-purple-600 text-white text-sm font-medium py-1.5 px-4 rounded-full transition">
123
+ Select Images
124
+ </button>
125
+ </div>
126
+ </div>
127
+ <div id="zip-upload" class="upload-area rounded-lg p-6 text-center cursor-pointer">
128
+ <input type="file" id="zip-upload-input" class="hidden" accept=".zip">
129
+ <div id="zip-upload-content" class="flex flex-col items-center justify-center">
130
+ <i class="fas fa-file-archive text-3xl text-purple-500 mb-3"></i>
131
+ <p class="font-medium mb-1">Upload ZIP File</p>
132
+ <p class="text-sm text-gray-500">(Contains training images)</p>
133
+ <button id="zip-upload-btn" class="mt-3 bg-purple-500 hover:bg-purple-600 text-white text-sm font-medium py-1.5 px-4 rounded-full transition">
134
+ Select ZIP
135
+ </button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ <div id="upload-preview" class="hidden">
140
+ <div id="images-preview" class="hidden mb-4">
141
+ <p class="text-sm font-medium mb-2"><span id="image-count">0</span> images selected</p>
142
+ <div class="flex space-x-2 overflow-x-auto pb-2">
143
+ <!-- Images will be added here -->
144
+ </div>
145
+ </div>
146
+ <div id="zip-preview" class="hidden mb-4">
147
+ <p class="text-sm font-medium mb-2">ZIP file ready for training</p>
148
+ <div class="flex items-center text-gray-500">
149
+ <i class="fas fa-file-archive mr-2"></i>
150
+ <span id="zip-filename">training_images.zip</span>
151
+ </div>
152
+ </div>
153
+ <button id="train-btn" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2.5 px-6 rounded-lg transition">
154
+ Train Model
155
  </button>
 
156
  </div>
157
 
158
  <div id="upload-progress" class="hidden">
159
  <div class="flex items-center justify-center mb-4">
160
  <div class="w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full animate-spin"></div>
161
  </div>
162
+ <p class="font-medium mb-2">Training your AI model...</p>
163
  <div class="progress-bar w-full mb-2">
164
  <div id="progress-fill" class="progress-fill" style="width: 0%"></div>
165
  </div>
166
  <p id="progress-text" class="text-sm text-gray-500">0% complete</p>
167
+ <p class="text-xs text-gray-500 mt-1">Processing 20 facial features...</p>
168
  </div>
169
 
170
  <div id="upload-preview" class="hidden">
 
173
  </div>
174
  <p class="font-medium mb-2">Image uploaded successfully!</p>
175
  <button id="generate-btn" class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-6 rounded-full transition">
176
+ Create Avatar
177
  </button>
178
+ <p class="text-xs text-gray-500 mt-2">This may take 1-2 minutes</p>
179
  </div>
180
  </div>
181
  </div>
 
309
  </div>
310
  </section>
311
 
312
+ <!-- Pricing Section -->
313
+ <section id="pricing" class="bg-white rounded-xl shadow-lg p-8 mb-8">
314
+ <h3 class="text-2xl font-bold mb-6">Choose Your Plan</h3>
315
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
316
+ <div class="border border-gray-200 rounded-xl p-6 hover:border-purple-300 transition">
317
+ <h4 class="text-xl font-bold mb-2">Free</h4>
318
+ <p class="text-3xl font-bold mb-4">$0<span class="text-sm font-normal text-gray-500">/month</span></p>
319
+ <ul class="space-y-2 mb-6">
320
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 5 AI Generations</li>
321
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Basic Styles</li>
322
+ <li class="flex items-center text-gray-400"><i class="fas fa-times text-red-400 mr-2"></i> Video Generation</li>
323
+ </ul>
324
+ <button class="w-full border border-purple-500 text-purple-500 hover:bg-purple-50 font-medium py-2 px-4 rounded-lg transition plan-select" data-plan="free">
325
+ Select Plan
326
+ </button>
327
+ </div>
328
+ <div class="border-2 border-purple-500 rounded-xl p-6 bg-purple-50">
329
+ <div class="bg-purple-500 text-white text-xs font-bold px-2 py-1 rounded-full inline-block mb-3">POPULAR</div>
330
+ <h4 class="text-xl font-bold mb-2">Pro</h4>
331
+ <p class="text-3xl font-bold mb-4">$19<span class="text-sm font-normal text-gray-500">/month</span></p>
332
+ <ul class="space-y-2 mb-6">
333
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 100 AI Generations</li>
334
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Premium Styles</li>
335
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 5 Video Minutes</li>
336
+ </ul>
337
+ <button class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-lg transition plan-select" data-plan="pro">
338
+ Select Plan
339
+ </button>
340
+ </div>
341
+ <div class="border border-gray-200 rounded-xl p-6 hover:border-purple-300 transition">
342
+ <h4 class="text-xl font-bold mb-2">Studio</h4>
343
+ <p class="text-3xl font-bold mb-4">$49<span class="text-sm font-normal text-gray-500">/month</span></p>
344
+ <ul class="space-y-2 mb-6">
345
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Unlimited Generations</li>
346
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> All Styles</li>
347
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 30 Video Minutes</li>
348
+ </ul>
349
+ <button class="w-full border border-purple-500 text-purple-500 hover:bg-purple-50 font-medium py-2 px-4 rounded-lg transition plan-select" data-plan="studio">
350
+ Select Plan
351
+ </button>
352
+ </div>
353
+ </div>
354
+ </section>
355
+
356
  <!-- About Section -->
357
  <section id="about" class="bg-white rounded-xl shadow-lg p-8 mb-12">
358
  <h3 class="text-2xl font-bold mb-6">About AI Clone Creator</h3>
 
411
 
412
  <script>
413
  document.addEventListener('DOMContentLoaded', function() {
414
+ // Google Sign In
415
+ googleSignin.addEventListener('click', () => {
416
+ // Simulate Google OAuth flow
417
+ setTimeout(() => {
418
+ signinModal.classList.add('hidden');
419
+ document.getElementById('main-header').classList.add('hidden');
420
+ document.getElementById('user-header').classList.remove('hidden');
421
+
422
+ // Set mock user data
423
+ document.getElementById('user-name').textContent = 'Alex Johnson';
424
+ document.getElementById('user-avatar').src = 'https://randomuser.me/api/portraits/men/32.jpg';
425
+
426
+ // Show toast notification
427
+ showToast('Signed in successfully!');
428
+ }, 1500);
429
+ });
430
+
431
+ // Sign Out
432
+ document.getElementById('signout-btn').addEventListener('click', () => {
433
+ document.getElementById('user-header').classList.add('hidden');
434
+ document.getElementById('main-header').classList.remove('hidden');
435
+ signinModal.classList.remove('hidden');
436
+ showToast('Signed out successfully');
437
+ });
438
+
439
+ // Image Upload
440
+ document.getElementById('images-upload-btn').addEventListener('click', () => {
441
+ document.getElementById('image-upload').click();
442
+ });
443
+
444
+ // ZIP Upload
445
+ document.getElementById('zip-upload-btn').addEventListener('click', () => {
446
+ document.getElementById('zip-upload-input').click();
447
+ });
448
+
449
+ // Handle image upload
450
+ document.getElementById('image-upload').addEventListener('change', (e) => {
451
+ if (e.target.files.length < 5) {
452
+ showToast('Please upload at least 5 images', 'error');
453
+ return;
454
+ }
455
+
456
+ document.getElementById('upload-preview').classList.remove('hidden');
457
+ document.getElementById('images-preview').classList.remove('hidden');
458
+ document.getElementById('zip-preview').classList.add('hidden');
459
+
460
+ const previewContainer = document.querySelector('#images-preview div');
461
+ previewContainer.innerHTML = '';
462
+
463
+ document.getElementById('image-count').textContent = e.target.files.length;
464
+
465
+ // Show first 5 images as preview
466
+ const filesToShow = Math.min(e.target.files.length, 5);
467
+ for (let i = 0; i < filesToShow; i++) {
468
+ const reader = new FileReader();
469
+ reader.onload = function(event) {
470
+ const img = document.createElement('img');
471
+ img.src = event.target.result;
472
+ img.className = 'w-20 h-20 object-cover rounded-lg';
473
+ previewContainer.appendChild(img);
474
+ };
475
+ reader.readAsDataURL(e.target.files[i]);
476
+ }
477
+ });
478
+
479
+ // Handle ZIP upload
480
+ document.getElementById('zip-upload-input').addEventListener('change', (e) => {
481
+ if (e.target.files.length) {
482
+ document.getElementById('upload-preview').classList.remove('hidden');
483
+ document.getElementById('images-preview').classList.add('hidden');
484
+ document.getElementById('zip-preview').classList.remove('hidden');
485
+ document.getElementById('zip-filename').textContent = e.target.files[0].name;
486
+ }
487
+ });
488
+
489
+ // Train Model
490
+ document.getElementById('train-btn').addEventListener('click', () => {
491
+ const progressBar = document.createElement('div');
492
+ progressBar.className = 'progress-bar w-full mt-4';
493
+ progressBar.innerHTML = '<div class="progress-fill" style="width: 0%"></div>';
494
+
495
+ document.getElementById('upload-preview').appendChild(progressBar);
496
+
497
+ let progress = 0;
498
+ const interval = setInterval(() => {
499
+ progress += Math.random() * 5;
500
+ if (progress > 100) progress = 100;
501
+
502
+ progressBar.querySelector('.progress-fill').style.width = `${progress}%`;
503
+
504
+ if (progress === 100) {
505
+ clearInterval(interval);
506
+ setTimeout(() => {
507
+ document.getElementById('result-area').classList.remove('hidden');
508
+ document.getElementById('empty-result').classList.add('hidden');
509
+ showToast('Model trained successfully!');
510
+ }, 500);
511
+ }
512
+ }, 200);
513
+ });
514
+
515
+ // Plan Selection
516
+ document.querySelectorAll('.plan-select').forEach(btn => {
517
+ btn.addEventListener('click', function() {
518
+ const plan = this.getAttribute('data-plan');
519
+ showToast(`${plan.charAt(0).toUpperCase() + plan.slice(1)} plan selected`);
520
+ });
521
+ });
522
+
523
+ // Share Buttons
524
+ document.querySelectorAll('.share-btn').forEach(btn => {
525
+ btn.addEventListener('click', function() {
526
+ const platform = this.getAttribute('data-platform');
527
+ let message = 'Link copied to clipboard';
528
+ if (platform === 'twitter') message = 'Shared to Twitter';
529
+ if (platform === 'instagram') message = 'Shared to Instagram';
530
+ showToast(message);
531
+ });
532
+ });
533
+
534
+ // Toast Notification
535
+ function showToast(message, type = 'success') {
536
+ const toast = document.createElement('div');
537
+ toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${
538
+ type === 'error' ? 'bg-red-500' : 'bg-green-500'
539
+ }`;
540
+ toast.textContent = message;
541
+ document.body.appendChild(toast);
542
+
543
+ setTimeout(() => {
544
+ toast.remove();
545
+ }, 3000);
546
+ }
547
  // Image Upload Functionality
548
  const uploadContainer = document.getElementById('upload-container');
549
  const uploadContent = document.getElementById('upload-content');
 
651
 
652
  // Generate AI clone images
653
  generateBtn.addEventListener('click', function() {
654
+ // Mock API call to create avatar
655
+ const mockApiCall = () => {
656
+ return new Promise((resolve) => {
657
+ let progress = 0;
658
+ const interval = setInterval(() => {
659
+ progress += Math.random() * 5;
660
+ if (progress > 100) progress = 100;
661
+
662
+ progressFill.style.width = `${progress}%`;
663
+ progressText.textContent = `${Math.round(progress)}% complete`;
664
+
665
+ if (progress === 100) {
666
+ clearInterval(interval);
667
+ resolve();
668
+ }
669
+ }, 200);
670
+ });
671
+ };
672
+
673
+ // Simulate AI processing with mock API
674
+ mockApiCall().then(() => {
675
  uploadPreview.classList.add('hidden');
676
  uploadProgress.classList.remove('hidden');
677
  progressFill.style.width = '0%';
 
824
  });
825
  });
826
  </script>
827
+
828
+ <!-- Sign In Modal (shown by default) -->
829
+ <div id="signin-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
830
+ <div class="bg-white rounded-xl p-8 w-full max-w-md">
831
+ <div class="flex justify-between items-center mb-6">
832
+ <h3 class="text-2xl font-bold">Sign In</h3>
833
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
834
+ <i class="fas fa-times"></i>
835
+ </button>
836
+ </div>
837
+
838
+ <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">
839
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google" class="w-5 h-5 mr-2">
840
+ Continue with Google
841
+ </button>
842
+
843
+ <div class="relative my-6">
844
+ <div class="absolute inset-0 flex items-center">
845
+ <div class="w-full border-t border-gray-300"></div>
846
+ </div>
847
+ <div class="relative flex justify-center text-sm">
848
+ <span class="px-2 bg-white text-gray-500">or</span>
849
+ </div>
850
+ </div>
851
+
852
+ <form id="email-signin" class="space-y-4">
853
+ <div>
854
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
855
+ <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>
856
+ </div>
857
+ <div>
858
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
859
+ <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>
860
+ </div>
861
+ <button type="submit" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-4 rounded-lg transition">
862
+ Sign In
863
+ </button>
864
+ </form>
865
+
866
+ <p class="text-sm text-gray-500 mt-4 text-center">
867
+ Don't have an account? <a href="#" class="text-purple-500 hover:text-purple-700">Sign up</a>
868
+ </p>
869
+ </div>
870
+ </div>
871
+
872
+ <script>
873
+ // Sign in modal functionality
874
+ const signinBtn = document.getElementById('signin-btn');
875
+ const signinModal = document.getElementById('signin-modal');
876
+ const closeModal = document.getElementById('close-modal');
877
+ const googleSignin = document.getElementById('google-signin');
878
+ const emailSignin = document.getElementById('email-signin');
879
+
880
+ signinBtn.addEventListener('click', () => {
881
+ signinModal.classList.remove('hidden');
882
+ });
883
+
884
+ closeModal.addEventListener('click', () => {
885
+ signinModal.classList.add('hidden');
886
+ });
887
+
888
+ googleSignin.addEventListener('click', () => {
889
+ // In a real app, this would trigger Google OAuth flow
890
+ alert('Redirecting to Google sign in...');
891
+ });
892
+
893
+ emailSignin.addEventListener('submit', (e) => {
894
+ e.preventDefault();
895
+ const email = document.getElementById('email').value;
896
+ const password = document.getElementById('password').value;
897
+
898
+ // Mock login - in a real app this would call your backend
899
+ alert(`Mock login with email: ${email}`);
900
+ signinModal.classList.add('hidden');
901
+ signinBtn.textContent = 'My Account';
902
+ });
903
+ </script>
904
  <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>
905
  </html>