Hugging Face's logo

Spaces:
rahul7star
/
ai-clone-me
Running

App Files Community
ai-clone-me / index.html
rahul7star's picture
rahul7star
create a see demo button . when user click that in a UI box load this youtube video https://www.youtube.com/watch?v=LRkj_ObV0T0 make it look profesional - Follow Up Deployment
441a4fe verified
raw
history blame
37.4 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 - Create Your Digital Twin</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, #f5f7fa 0%, #c3cfe2 100%);
}
.upload-area {
border: 2px dashed #cbd5e0;
transition: all 0.3s ease;
}
.upload-area:hover {
border-color: #667eea;
background-color: rgba(102, 126, 234, 0.05);
}
.progress-bar {
transition: width 0.5s ease;
}
.avatar-preview {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.plan-card {
transition: all 0.3s ease;
}
.plan-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.selected-plan {
border-color: #667eea;
background-color: rgba(102, 126, 234, 0.05);
}
.toast {
animation: slideIn 0.5s, fadeOut 0.5s 2.5s;
}
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
</style>
</head>
<body class="gradient-bg min-h-screen">
<!-- Navigation Bar -->
<nav class="bg-white shadow-sm sticky top-0 z-10">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-robot text-indigo-600 text-2xl mr-2"></i>
<span class="text-xl font-bold text-gray-800">AI Clone</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Home</a>
<a href="#features" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Features</a>
<a href="#create" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Create</a>
<a href="#pricing" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Pricing</a>
</div>
<button id="mobile-menu-button" class="md:hidden text-gray-600">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</nav>
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="flex justify-between items-center mb-12">
<div class="flex items-center">
<i class="fas fa-robot text-indigo-600 text-3xl mr-3"></i>
<h1 class="text-2xl font-bold text-gray-800">AI Clone</h1>
</div>
<div id="auth-section">
<button id="sign-in-btn" class="bg-white text-gray-700 px-6 py-2 rounded-full shadow-md hover:bg-gray-100 transition flex items-center">
<i class="fab fa-google text-red-500 mr-2"></i>
Sign In with Google
</button>
<div id="user-profile" class="hidden flex items-center space-x-4">
<img id="user-avatar" class="w-10 h-10 rounded-full" src="" alt="User Avatar">
<span id="user-name" class="font-medium text-gray-700"></span>
<button id="sign-out-btn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="max-w-4xl mx-auto">
<!-- Home Section -->
<section id="home" class="text-center py-16">
<h1 class="text-4xl font-bold text-gray-800 mb-4">Create Your Digital Twin</h1>
<p class="text-xl text-gray-600 mb-8">Generate AI-powered avatars that look just like you</p>
<div class="flex space-x-4 justify-center">
<button id="get-started-btn" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition">
Get Started
</button>
<button id="demo-btn" class="bg-white text-indigo-600 border-2 border-indigo-600 px-8 py-3 rounded-full font-medium shadow-lg hover:bg-indigo-50 transition">
See Demo
</button>
</div>
</section>
<!-- Features Section -->
<section id="features" class="mb-16">
<h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Key Features</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow-md">
<div class="text-indigo-500 text-3xl mb-4">
<i class="fas fa-user-circle"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Realistic Avatars</h3>
<p class="text-gray-600">Generate high-quality avatars that capture your unique features.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md">
<div class="text-purple-500 text-3xl mb-4">
<i class="fas fa-video"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Animated Videos</h3>
<p class="text-gray-600">Bring your avatar to life with custom animated videos.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md">
<div class="text-pink-500 text-3xl mb-4">
<i class="fas fa-magic"></i>
</div>
<h3 class="text-lg font-semibold mb-2">AI Magic</h3>
<p class="text-gray-600">Use AI to transform your photos into stunning digital art.</p>
</div>
</div>
</section>
<!-- Upload Section -->
<section id="create" class="mb-12 bg-white rounded-xl shadow-lg p-6 hidden">
<h2 class="text-xl font-semibold text-gray-800 mb-6">Create Your AI Clone</h2>
<div class="grid md:grid-cols-2 gap-6">
<!-- Image Upload -->
<div class="upload-area rounded-lg p-8 text-center cursor-pointer" id="image-upload">
<i class="fas fa-images text-indigo-500 text-4xl mb-4"></i>
<h3 class="text-lg font-medium text-gray-700 mb-2">Upload Images</h3>
<p class="text-gray-500 mb-4">Upload at least 5 images of yourself from different angles</p>
<input type="file" id="image-input" class="hidden" accept="image/*" multiple>
<button class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full text-sm font-medium">
Select Files
</button>
</div>
<!-- ZIP Upload -->
<div class="upload-area rounded-lg p-8 text-center cursor-pointer" id="zip-upload">
<i class="fas fa-file-archive text-purple-500 text-4xl mb-4"></i>
<h3 class="text-lg font-medium text-gray-700 mb-2">Upload ZIP File</h3>
<p class="text-gray-500 mb-4">Compress your images into a single .zip file</p>
<input type="file" id="zip-input" class="hidden" accept=".zip">
<button class="bg-purple-100 text-purple-600 px-4 py-2 rounded-full text-sm font-medium">
Select ZIP File
</button>
</div>
</div>
<!-- Image Preview Carousel -->
<div id="image-preview-container" class="hidden mt-8">
<div class="flex justify-between items-center mb-4">
<h3 class="text-md font-medium text-gray-700">
<span id="image-count">0</span> images selected
</h3>
<button id="clear-images" class="text-red-500 text-sm font-medium">Clear all</button>
</div>
<div id="image-carousel" class="flex space-x-4 overflow-x-auto pb-4">
<!-- Images will be added here dynamically -->
</div>
</div>
<!-- Train Model Button -->
<div id="train-model-section" class="hidden mt-8 text-center">
<button id="train-model-btn" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition">
Train Your AI Model
</button>
</div>
<!-- Training Progress -->
<div id="training-progress" class="hidden mt-8">
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-700">Training in progress...</span>
<span id="progress-percent" class="text-sm font-medium text-gray-700">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="progress-bar" class="bg-gradient-to-r from-indigo-500 to-purple-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
</div>
</div>
</section>
<!-- AI Clone Results -->
<section id="results-section" class="hidden mb-12 bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold text-gray-800 mb-6">Your AI Clone Results</h2>
<div class="flex flex-col items-center">
<div class="avatar-preview w-64 h-64 rounded-full bg-gray-100 mb-6 overflow-hidden flex items-center justify-center">
<img id="generated-avatar" src="" alt="Generated Avatar" class="hidden w-full h-full object-cover">
<i class="fas fa-user text-gray-400 text-6xl" id="avatar-placeholder"></i>
</div>
<button id="recreate-btn" class="bg-indigo-600 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700 transition">
<i class="fas fa-sync-alt mr-2"></i> Recreate
</button>
<div class="mt-6 flex space-x-4">
<button class="share-btn bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-blue-600 transition">
<i class="fab fa-twitter mr-2"></i> Share to Twitter
</button>
<button class="share-btn bg-pink-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-pink-600 transition">
<i class="fab fa-instagram mr-2"></i> Share to Instagram
</button>
<button class="share-btn bg-gray-700 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition">
<i class="fas fa-link mr-2"></i> Copy Link
</button>
</div>
</div>
</section>
<!-- Bring Avatar to Life -->
<section id="animate-section" class="hidden mb-12 bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold text-gray-800 mb-6">Bring Your Avatar to Life</h2>
<div class="mb-6">
<label for="prompt-input" class="block text-sm font-medium text-gray-700 mb-2">Enter a prompt for your avatar</label>
<textarea id="prompt-input" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="E.g., 'A professional headshot with a blue background'"></textarea>
</div>
<button id="generate-video-btn" class="bg-gradient-to-r from-purple-500 to-pink-600 text-white px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition">
<i class="fas fa-film mr-2"></i> Generate Video
</button>
<!-- Video Loading -->
<div id="video-loading" class="hidden mt-8 text-center">
<div class="inline-block animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-purple-500 mb-4"></div>
<p class="text-gray-700">Generating your animated avatar... This may take a few moments.</p>
</div>
<!-- Video Preview -->
<div id="video-preview" class="hidden mt-8">
<div class="bg-gray-100 rounded-xl overflow-hidden w-full aspect-video flex items-center justify-center">
<i class="fas fa-play-circle text-purple-500 text-6xl opacity-70" id="video-play-icon"></i>
</div>
<div class="mt-4 flex justify-center space-x-4">
<button class="share-btn bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-blue-600 transition">
<i class="fab fa-twitter mr-2"></i> Share
</button>
<button class="share-btn bg-pink-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-pink-600 transition">
<i class="fab fa-instagram mr-2"></i> Share
</button>
<button class="share-btn bg-gray-700 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition">
<i class="fas fa-download mr-2"></i> Download
</button>
</div>
</div>
</section>
<!-- Pricing Plans -->
<section id="pricing" class="mb-12 bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold text-gray-800 mb-6">Choose Your Plan</h2>
<div class="grid md:grid-cols-3 gap-6">
<!-- Free Plan -->
<div class="plan-card border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-plan="free">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-lg font-bold text-gray-800">Free</h3>
<p class="text-gray-600 text-sm">Basic features</p>
</div>
<div class="text-right">
<span class="text-2xl font-bold text-gray-800">$0</span>
<span class="text-gray-500 text-sm">/month</span>
</div>
</div>
<ul class="space-y-2 mb-6">
<li class="flex items-center text-gray-700">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>5 AI Generations</span>
</li>
<li class="flex items-center text-gray-700">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Standard Quality</span>
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times-circle text-gray-300 mr-2"></i>
<span>No Video Generation</span>
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times-circle text-gray-300 mr-2"></i>
<span>No Priority Support</span>
</li>
</ul>
<button class="w-full border-2 border-gray-300 text-gray-700 py-2 rounded-lg font-medium hover:bg-gray-50 transition">
Current Plan
</button>
</div>
<!-- Pro Plan -->
<div class="plan-card border-2 border-indigo-300 rounded-xl p-6 cursor-pointer bg-indigo-50" data-plan="pro">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-lg font-bold text-gray-800">Pro</h3>
<p class="text-gray-600 text-sm">For creators</p>
</div>
<div class="text-right">
<span class="text-2xl font-bold text-gray-800">$19</span>
<span class="text-gray-500 text-sm">/month</span>
</div>
</div>
<ul class="space-y-2 mb-6">
<li class="flex items-center text-gray-700">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>100 AI Generations</span>
</li>
<li class="flex items-center text-gray-700">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>High Quality</span>
</li>
<li class="flex items-center text-gray-700">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>5 Video Generations</span>
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times-circle text-gray-300 mr-2"></i>
<span>Standard Support</span>
</li>
</ul>
<button class="w-full bg-indigo-600 text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition">
Upgrade to Pro
</button>
</div>
<!-- Studio Plan -->
<div class="plan-card border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-plan="studio">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-lg font-bold text-gray-800">Studio</h3>
<p class="text-gray-600 text-sm">For professionals</p>
</div>
<div class="text-right">
<span class="text-2xl font-bold text-gray-800">$49</span>
<span class="text-gray-500 text-sm">/month</span>
</div>
</div>
<ul class="space-y-2 mb-6">
<li class="flex items-center text-gray-700">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Unlimited Generations</span>
</li>
<li class="flex items-center text-gray-700">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Ultra Quality</span>
</li>
<li class="flex items-center text-gray-700">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Unlimited Videos</span>
</li>
<li class="flex items-center text-gray-700">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Priority Support</span>
</li>
</ul>
<button class="w-full border-2 border-gray-300 text-gray-700 py-2 rounded-lg font-medium hover:bg-gray-50 transition">
Choose Studio
</button>
</div>
</div>
<!-- Plan Confirmation -->
<div id="plan-confirmation" class="hidden mt-6 p-4 bg-green-50 border border-green-200 rounded-lg text-center">
<div class="flex justify-center items-center text-green-600">
<i class="fas fa-check-circle text-2xl mr-2"></i>
<span class="font-medium">Your plan has been updated successfully!</span>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="mt-12 bg-white py-8 border-t border-gray-200">
<div class="container mx-auto px-4 text-center text-gray-600">
<p>© 2023 AI Clone. All rights reserved.</p>
</div>
</footer>
<!-- Toast Notification -->
<div id="toast" class="fixed bottom-4 right-4 hidden">
<div class="bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg flex items-center">
<i class="fas fa-check-circle text-green-400 mr-2"></i>
<span id="toast-message">Link copied to clipboard!</span>
</div>
</div>
</div>
<!-- Demo Video Modal -->
<div id="demo-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-75">
<div class="relative w-full max-w-4xl mx-4">
<div class="bg-white rounded-lg overflow-hidden shadow-xl">
<div class="flex justify-between items-center px-6 py-4 border-b">
<h3 class="text-xl font-semibold text-gray-800">AI Clone Demo</h3>
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times text-2xl"></i>
</button>
</div>
<div class="p-4">
<div class="aspect-w-16 aspect-h-9">
<iframe id="demo-video" class="w-full h-96" src="https://www.youtube.com/embed/LRkj_ObV0T0?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<script>
// Demo Video Modal
const demoBtn = document.getElementById('demo-btn');
const demoModal = document.getElementById('demo-modal');
const closeModal = document.getElementById('close-modal');
const demoVideo = document.getElementById('demo-video');
demoBtn.addEventListener('click', () => {
demoModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
});
closeModal.addEventListener('click', () => {
demoModal.classList.add('hidden');
document.body.style.overflow = 'auto';
// Reset video when closing modal
demoVideo.src = demoVideo.src;
});
// Close modal when clicking outside
demoModal.addEventListener('click', (e) => {
if (e.target === demoModal) {
demoModal.classList.add('hidden');
document.body.style.overflow = 'auto';
demoVideo.src = demoVideo.src;
}
});
// Mock user data
const mockUser = {
name: "John Doe",
avatar: "https://randomuser.me/api/portraits/men/1.jpg"
};
// DOM Elements
const signOutBtn = document.getElementById('sign-out-btn');
// Mock generated avatars
const mockAvatars = [
"https://randomuser.me/api/portraits/men/2.jpg",
"https://randomuser.me/api/portraits/men/3.jpg",
"https://randomuser.me/api/portraits/men/4.jpg",
"https://randomuser.me/api/portraits/men/5.jpg"
];
// DOM Elements
const signInBtn = document.getElementById('sign-in-btn');
const userProfile = document.getElementById('user-profile');
const userName = document.getElementById('user-name');
const userAvatar = document.getElementById('user-avatar');
const imageUpload = document.getElementById('image-upload');
const zipUpload = document.getElementById('zip-upload');
const imageInput = document.getElementById('image-input');
const zipInput = document.getElementById('zip-input');
const imagePreviewContainer = document.getElementById('image-preview-container');
const imageCarousel = document.getElementById('image-carousel');
const imageCount = document.getElementById('image-count');
const clearImagesBtn = document.getElementById('clear-images');
const trainModelSection = document.getElementById('train-model-section');
const trainModelBtn = document.getElementById('train-model-btn');
const trainingProgress = document.getElementById('training-progress');
const progressBar = document.getElementById('progress-bar');
const progressPercent = document.getElementById('progress-percent');
const resultsSection = document.getElementById('results-section');
const generatedAvatar = document.getElementById('generated-avatar');
const avatarPlaceholder = document.getElementById('avatar-placeholder');
const recreateBtn = document.getElementById('recreate-btn');
const animateSection = document.getElementById('animate-section');
const promptInput = document.getElementById('prompt-input');
const generateVideoBtn = document.getElementById('generate-video-btn');
const videoLoading = document.getElementById('video-loading');
const videoPreview = document.getElementById('video-preview');
const pricingSection = document.getElementById('pricing-section');
const planCards = document.querySelectorAll('.plan-card');
const planConfirmation = document.getElementById('plan-confirmation');
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toast-message');
// State
let selectedImages = [];
let currentAvatarIndex = 0;
let selectedPlan = 'free';
// Event Listeners
signInBtn.addEventListener('click', handleSignIn);
signOutBtn.addEventListener('click', handleSignOut);
imageUpload.addEventListener('click', () => imageInput.click());
zipUpload.addEventListener('click', () => zipInput.click());
imageInput.addEventListener('change', handleImageUpload);
zipInput.addEventListener('change', handleZipUpload);
clearImagesBtn.addEventListener('click', clearImages);
trainModelBtn.addEventListener('click', trainModel);
recreateBtn.addEventListener('click', recreateAvatar);
generateVideoBtn.addEventListener('click', generateVideo);
planCards.forEach(card => card.addEventListener('click', () => selectPlan(card.dataset.plan)));
document.querySelectorAll('.share-btn').forEach(btn => btn.addEventListener('click', showToast));
// Functions
function handleSignIn() {
// Mock Google sign in
signInBtn.classList.add('hidden');
userProfile.classList.remove('hidden');
userName.textContent = mockUser.name;
userAvatar.src = mockUser.avatar;
// Show upload section after sign in and scroll to it
const uploadSection = document.getElementById('create');
uploadSection.classList.remove('hidden');
window.scrollTo({
top: uploadSection.offsetTop - 80,
behavior: 'smooth'
});
}
function handleSignOut() {
signInBtn.classList.remove('hidden');
userProfile.classList.add('hidden');
// Hide upload section and clear any uploaded images
document.getElementById('create').classList.add('hidden');
clearImages();
// Scroll back to top
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
function handleImageUpload(e) {
const files = Array.from(e.target.files);
if (files.length < 5) {
alert('Please upload at least 5 images');
return;
}
selectedImages = files.slice(0, 5); // Limit to 5 images
updateImagePreview();
// Show the train model button if we have enough images
trainModelSection.classList.remove('hidden');
}
function handleZipUpload(e) {
if (e.target.files.length > 0) {
// Show the train model button when ZIP is uploaded
trainModelSection.classList.remove('hidden');
showToast("ZIP file uploaded successfully!");
}
}
function updateImagePreview() {
imageCarousel.innerHTML = '';
imageCount.textContent = selectedImages.length;
selectedImages.forEach((file, index) => {
const reader = new FileReader();
reader.onload = (e) => {
const imgContainer = document.createElement('div');
imgContainer.className = 'flex-shrink-0 relative';
const img = document.createElement('img');
img.src = e.target.result;
img.className = 'w-24 h-24 rounded-lg object-cover';
img.alt = `Preview ${index + 1}`;
imgContainer.appendChild(img);
imageCarousel.appendChild(imgContainer);
};
reader.readAsDataURL(file);
});
imagePreviewContainer.classList.remove('hidden');
}
function clearImages() {
selectedImages = [];
imageInput.value = '';
imagePreviewContainer.classList.add('hidden');
trainModelSection.classList.add('hidden');
}
function trainModel() {
// Show training progress
trainingProgress.classList.remove('hidden');
trainModelSection.classList.add('hidden');
// Simulate training progress
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 100) progress = 100;
progressBar.style.width = `${progress}%`;
progressPercent.textContent = `${Math.floor(progress)}%`;
if (progress === 100) {
clearInterval(interval);
setTimeout(() => {
trainingProgress.classList.add('hidden');
showResults();
}, 500);
}
}, 500);
}
function showResults() {
resultsSection.classList.remove('hidden');
animateSection.classList.remove('hidden');
currentAvatarIndex = 0;
displayGeneratedAvatar();
}
function displayGeneratedAvatar() {
avatarPlaceholder.classList.add('hidden');
generatedAvatar.classList.remove('hidden');
generatedAvatar.src = mockAvatars[currentAvatarIndex];
}
function recreateAvatar() {
avatarPlaceholder.classList.remove('hidden');
generatedAvatar.classList.add('hidden');
// Simulate loading
setTimeout(() => {
currentAvatarIndex = (currentAvatarIndex + 1) % mockAvatars.length;
displayGeneratedAvatar();
showToast("New avatar generated!");
}, 800);
}
function generateVideo() {
if (!promptInput.value.trim()) {
showToast("Please enter a prompt first");
return;
}
videoLoading.classList.remove('hidden');
videoPreview.classList.add('hidden');
// Simulate video generation
setTimeout(() => {
videoLoading.classList.add('hidden');
videoPreview.classList.remove('hidden');
showToast("Video generated successfully!");
}, 3000);
}
function selectPlan(plan) {
selectedPlan = plan;
// Update UI
planCards.forEach(card => {
if (card.dataset.plan === plan) {
card.classList.add('selected-plan');
card.querySelector('button').classList.add('bg-indigo-600', 'text-white');
card.querySelector('button').classList.remove('border-gray-300', 'text-gray-700');
} else {
card.classList.remove('selected-plan');
card.querySelector('button').classList.remove('bg-indigo-600', 'text-white');
card.querySelector('button').classList.add('border-gray-300', 'text-gray-700');
}
});
// Show confirmation
planConfirmation.classList.remove('hidden');
setTimeout(() => {
planConfirmation.classList.add('hidden');
}, 3000);
}
function showToast(message) {
toastMessage.textContent = message;
toast.classList.remove('hidden');
setTimeout(() => {
toast.classList.add('hidden');
}, 3000);
}
// Navigation functionality
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const targetId = link.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Get Started button
document.getElementById('get-started-btn').addEventListener('click', () => {
document.getElementById('sign-in-btn').click();
});
// Mobile menu toggle (placeholder - would need additional HTML/CSS)
document.getElementById('mobile-menu-button').addEventListener('click', () => {
showToast("Mobile menu would open here");
});
</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-me" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>