Hugging Face's logo

Spaces:
rahul7star
/
ai-clone
Running

App Files Community
ai-clone / index.html
rahul7star's picture
rahul7star
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
1375cd0 verified
raw
history blame
39 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Clone Creator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #6e8efb, #a777e3);
}
.upload-area {
border: 2px dashed #a777e3;
transition: all 0.3s ease;
}
.upload-area:hover {
border-color: #6e8efb;
background-color: rgba(110, 142, 251, 0.05);
}
.progress-bar {
height: 8px;
background-color: #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #6e8efb, #a777e3);
transition: width 0.3s ease;
}
.result-card {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.result-card:hover {
transform: translateY(-5px);
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Header -->
<header class="gradient-bg text-white py-6">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center">
<h1 class="text-3xl font-bold">AI Clone Creator</h1>
<nav>
<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>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-12">
<!-- Hero Section -->
<section class="text-center mb-20">
<h2 class="text-4xl font-bold mb-4">Create Your Digital Twin</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Upload your photo and we'll create an AI clone that can generate images and videos of you in any scenario.
</p>
</section>
<!-- Image Clone Section -->
<section id="image-clone" class="mb-20">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="md:flex">
<!-- Upload Area -->
<div class="md:w-1/2 p-8">
<h3 class="text-2xl font-bold mb-6">Create Your Image Clone</h3>
<p class="text-gray-600 mb-6">
Upload a clear photo of yourself (face forward, good lighting) to create your digital twin.
</p>
<div id="upload-container" class="upload-area rounded-lg p-8 text-center cursor-pointer mb-6">
<input type="file" id="image-upload" class="hidden" accept="image/*">
<div id="upload-content" class="flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-4xl text-purple-500 mb-4"></i>
<p class="text-lg font-medium mb-2">Drag & drop your photo here</p>
<p class="text-gray-500 mb-4">or</p>
<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 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">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">
<div class="flex justify-center mb-4">
<img id="preview-image" src="" alt="Preview" class="w-32 h-32 rounded-full object-cover border-4 border-purple-200">
</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">
Create Avatar
</button>
<p class="text-xs text-gray-500 mt-2">This may take 1-2 minutes</p>
</div>
</div>
</div>
<!-- Result Area -->
<div class="md:w-1/2 bg-gray-50 p-8">
<h3 class="text-2xl font-bold mb-6">Your AI Clone Results</h3>
<p class="text-gray-600 mb-6">
Your digital twin will appear here. Try different styles and scenarios.
</p>
<div id="result-area" class="hidden">
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="result-card bg-white rounded-lg overflow-hidden">
<img id="result-1" src="" alt="AI Clone 1" class="w-full h-48 object-cover">
<div class="p-4">
<p class="font-medium">Professional Headshot</p>
<button class="download-btn mt-2 text-sm text-purple-500 hover:text-purple-700" data-id="1">
<i class="fas fa-download mr-1"></i> Download
</button>
</div>
</div>
<div class="result-card bg-white rounded-lg overflow-hidden">
<img id="result-2" src="" alt="AI Clone 2" class="w-full h-48 object-cover">
<div class="p-4">
<p class="font-medium">Fantasy Character</p>
<button class="download-btn mt-2 text-sm text-purple-500 hover:text-purple-700" data-id="2">
<i class="fas fa-download mr-1"></i> Download
</button>
</div>
</div>
</div>
<div class="mb-6">
<label for="style-select" class="block text-sm font-medium text-gray-700 mb-2">Select Style</label>
<select id="style-select" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500">
<option value="professional">Professional</option>
<option value="fantasy">Fantasy</option>
<option value="anime">Anime</option>
<option value="watercolor">Watercolor</option>
<option value="cyberpunk">Cyberpunk</option>
</select>
</div>
<button id="regenerate-btn" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-6 rounded-lg transition">
<i class="fas fa-sync-alt mr-2"></i> Regenerate with New Style
</button>
</div>
<div id="empty-result" class="flex flex-col items-center justify-center py-12">
<i class="fas fa-user-astronaut text-5xl text-gray-300 mb-4"></i>
<p class="text-gray-500">Your AI clone will appear here after processing</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Clone Section -->
<section id="video-clone" class="mb-20">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="md:flex">
<!-- Prompt Area -->
<div class="md:w-1/2 p-8">
<h3 class="text-2xl font-bold mb-6">Create Your Video Clone</h3>
<p class="text-gray-600 mb-6">
Describe the scenario you want your digital twin to appear in.
</p>
<div class="mb-6">
<label for="video-prompt" class="block text-sm font-medium text-gray-700 mb-2">Describe the video</label>
<textarea id="video-prompt" rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500" placeholder="Example: A video of me giving a TED talk about artificial intelligence on a futuristic stage with holograms..."></textarea>
</div>
<div class="mb-6">
<label for="voice-select" class="block text-sm font-medium text-gray-700 mb-2">Select Voice</label>
<select id="voice-select" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500">
<option value="male1">Male Voice 1</option>
<option value="male2">Male Voice 2</option>
<option value="female1">Female Voice 1</option>
<option value="female2">Female Voice 2</option>
<option value="custom">Use My Voice (requires recording)</option>
</select>
</div>
<button id="generate-video-btn" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-6 rounded-lg transition">
<i class="fas fa-video mr-2"></i> Generate Video
</button>
<div id="video-progress" class="hidden mt-6">
<p class="font-medium mb-2">Generating your video...</p>
<div class="progress-bar w-full mb-2">
<div id="video-progress-fill" class="progress-fill" style="width: 0%"></div>
</div>
<p id="video-progress-text" class="text-sm text-gray-500">0% complete</p>
<p class="text-sm text-gray-500 mt-2">This may take a few minutes. You can leave this page and we'll notify you when it's ready.</p>
</div>
</div>
<!-- Video Result Area -->
<div class="md:w-1/2 bg-gray-50 p-8">
<h3 class="text-2xl font-bold mb-6">Your Video Clone</h3>
<p class="text-gray-600 mb-6">
Your AI-generated video will appear here.
</p>
<div id="video-result" class="hidden">
<div class="video-container rounded-lg overflow-hidden mb-4">
<video id="generated-video" controls class="w-full">
Your browser does not support the video tag.
</video>
</div>
<div class="flex justify-between items-center">
<div>
<p class="font-medium" id="video-title">TED Talk about AI</p>
<p class="text-sm text-gray-500" id="video-duration">2:34</p>
</div>
<button id="download-video-btn" class="text-purple-500 hover:text-purple-700">
<i class="fas fa-download text-lg"></i>
</button>
</div>
</div>
<div id="empty-video" class="flex flex-col items-center justify-center py-12">
<i class="fas fa-film text-5xl text-gray-300 mb-4"></i>
<p class="text-gray-500">Your AI video will appear here after processing</p>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="bg-white rounded-xl shadow-lg p-8 mb-12">
<h3 class="text-2xl font-bold mb-6">About AI Clone Creator</h3>
<div class="prose max-w-none">
<p class="mb-4">
AI Clone Creator uses advanced artificial intelligence to generate realistic digital twins from just a single photo. Our technology can create images and videos of you in any scenario you imagine.
</p>
<p class="mb-4">
<strong>How it works:</strong> We analyze your facial features, expressions, and voice (if provided) to create a personalized AI model. This model can then generate new content featuring your digital twin.
</p>
<p class="mb-4">
<strong>Privacy:</strong> Your data is processed securely and never shared with third parties. You maintain full control over your digital twin.
</p>
<div class="bg-purple-50 border-l-4 border-purple-500 p-4 mb-4">
<p class="text-purple-700">
<strong>Note:</strong> The current version is a demonstration. Actual AI processing would require server-side implementation.
</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="md:flex md:justify-between">
<div class="mb-6 md:mb-0">
<h4 class="text-xl font-bold mb-4">AI Clone Creator</h4>
<p class="text-gray-400">Create your digital twin with AI</p>
</div>
<div class="grid grid-cols-2 gap-8">
<div>
<h5 class="text-sm font-semibold uppercase tracking-wider mb-4">Links</h5>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
<li><a href="#image-clone" class="text-gray-400 hover:text-white transition">Image Clone</a></li>
<li><a href="#video-clone" class="text-gray-400 hover:text-white transition">Video Clone</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition">About</a></li>
</ul>
</div>
<div>
<h5 class="text-sm font-semibold uppercase tracking-wider mb-4">Legal</h5>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
<p>&copy; 2023 AI Clone Creator. All rights reserved.</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Image Upload Functionality
const uploadContainer = document.getElementById('upload-container');
const uploadContent = document.getElementById('upload-content');
const uploadProgress = document.getElementById('upload-progress');
const uploadPreview = document.getElementById('upload-preview');
const imageUpload = document.getElementById('image-upload');
const uploadBtn = document.getElementById('upload-btn');
const generateBtn = document.getElementById('generate-btn');
const previewImage = document.getElementById('preview-image');
const resultArea = document.getElementById('result-area');
const emptyResult = document.getElementById('empty-result');
const progressFill = document.getElementById('progress-fill');
const progressText = document.getElementById('progress-text');
const result1 = document.getElementById('result-1');
const result2 = document.getElementById('result-2');
const regenerateBtn = document.getElementById('regenerate-btn');
const styleSelect = document.getElementById('style-select');
// Video Generation Functionality
const generateVideoBtn = document.getElementById('generate-video-btn');
const videoPrompt = document.getElementById('video-prompt');
const videoProgress = document.getElementById('video-progress');
const videoProgressFill = document.getElementById('video-progress-fill');
const videoProgressText = document.getElementById('video-progress-text');
const videoResult = document.getElementById('video-result');
const emptyVideo = document.getElementById('empty-video');
const generatedVideo = document.getElementById('generated-video');
const videoTitle = document.getElementById('video-title');
const videoDuration = document.getElementById('video-duration');
const downloadVideoBtn = document.getElementById('download-video-btn');
// Handle drag and drop
uploadContainer.addEventListener('dragover', (e) => {
e.preventDefault();
uploadContainer.classList.add('border-purple-500', 'bg-purple-50');
});
uploadContainer.addEventListener('dragleave', () => {
uploadContainer.classList.remove('border-purple-500', 'bg-purple-50');
});
uploadContainer.addEventListener('drop', (e) => {
e.preventDefault();
uploadContainer.classList.remove('border-purple-500', 'bg-purple-50');
if (e.dataTransfer.files.length) {
handleImageUpload(e.dataTransfer.files[0]);
}
});
// Handle file selection via button
uploadBtn.addEventListener('click', () => {
imageUpload.click();
});
imageUpload.addEventListener('change', (e) => {
if (e.target.files.length) {
handleImageUpload(e.target.files[0]);
}
});
// Process the uploaded image
function handleImageUpload(file) {
// Check if file is an image
if (!file.type.match('image.*')) {
alert('Please upload an image file (JPEG, PNG)');
return;
}
// Check file size (max 5MB)
if (file.size > 5 * 1024 * 1024) {
alert('File size exceeds 5MB limit');
return;
}
// Show upload progress
uploadContent.classList.add('hidden');
uploadProgress.classList.remove('hidden');
// Simulate upload progress
let progress = 0;
const progressInterval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 100) progress = 100;
progressFill.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}% complete`;
if (progress === 100) {
clearInterval(progressInterval);
// Show preview after a short delay
setTimeout(() => {
const reader = new FileReader();
reader.onload = function(e) {
previewImage.src = e.target.result;
uploadProgress.classList.add('hidden');
uploadPreview.classList.remove('hidden');
};
reader.readAsDataURL(file);
}, 500);
}
}, 200);
}
// Generate AI clone images
generateBtn.addEventListener('click', function() {
// 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%';
progressText.textContent = '0% complete';
let progress = 0;
const processingInterval = setInterval(() => {
progress += Math.random() * 5;
if (progress > 100) progress = 100;
progressFill.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}% complete`;
if (progress === 100) {
clearInterval(processingInterval);
// Show results after a short delay
setTimeout(() => {
uploadProgress.classList.add('hidden');
emptyResult.classList.add('hidden');
resultArea.classList.remove('hidden');
// Generate sample results (in a real app, these would come from an AI API)
result1.src = 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
}, 500);
}
}, 200);
});
// Regenerate with new style
regenerateBtn.addEventListener('click', function() {
const selectedStyle = styleSelect.value;
// Show processing
resultArea.classList.add('hidden');
uploadProgress.classList.remove('hidden');
progressFill.style.width = '0%';
progressText.textContent = '0% complete';
let progress = 0;
const processingInterval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 100) progress = 100;
progressFill.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}% complete`;
if (progress === 100) {
clearInterval(processingInterval);
// Show new results after a short delay
setTimeout(() => {
uploadProgress.classList.add('hidden');
resultArea.classList.remove('hidden');
// Generate different sample results based on style
if (selectedStyle === 'professional') {
result1.src = 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
} else if (selectedStyle === 'fantasy') {
result1.src = 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
} else if (selectedStyle === 'anime') {
result1.src = 'https://images.unsplash.com/photo-1503249023995-51b0f3778ccb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
} else if (selectedStyle === 'watercolor') {
result1.src = 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
} else if (selectedStyle === 'cyberpunk') {
result1.src = 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
}
}, 500);
}
}, 200);
});
// Download image buttons
document.querySelectorAll('.download-btn').forEach(btn => {
btn.addEventListener('click', function() {
const id = this.getAttribute('data-id');
alert(`Downloading image ${id}. In a real app, this would trigger a download.`);
});
});
// Generate video from prompt
generateVideoBtn.addEventListener('click', function() {
const prompt = videoPrompt.value.trim();
const voice = document.getElementById('voice-select').value;
if (!prompt) {
alert('Please describe the video you want to generate');
return;
}
// Show processing
videoProgress.classList.remove('hidden');
// Simulate video generation progress
let progress = 0;
const videoInterval = setInterval(() => {
progress += Math.random() * 3;
if (progress > 100) progress = 100;
videoProgressFill.style.width = `${progress}%`;
videoProgressText.textContent = `${Math.round(progress)}% complete`;
if (progress === 100) {
clearInterval(videoInterval);
// Show video after a short delay
setTimeout(() => {
videoProgress.classList.add('hidden');
emptyVideo.classList.add('hidden');
videoResult.classList.remove('hidden');
// Set sample video (in a real app, this would be the generated video)
generatedVideo.src = 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4';
generatedVideo.load();
// Set video info
videoTitle.textContent = prompt.substring(0, 30) + (prompt.length > 30 ? '...' : '');
videoDuration.textContent = '1:45';
}, 1000);
}
}, 300);
});
// Download video button
downloadVideoBtn.addEventListener('click', function() {
alert('Downloading video. In a real app, this would trigger a download.');
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
});
</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>