Spaces:
Running
Running
show price option always in footer and when user click frpm top button it should scroll to pricing tav - Follow Up Deployment
Browse files- index.html +100 -6
index.html
CHANGED
|
@@ -49,6 +49,25 @@
|
|
| 49 |
</style>
|
| 50 |
</head>
|
| 51 |
<body class="gradient-bg min-h-screen">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 52 |
<div class="container mx-auto px-4 py-8">
|
| 53 |
<!-- Header -->
|
| 54 |
<header class="flex justify-between items-center mb-12">
|
|
@@ -70,8 +89,45 @@
|
|
| 70 |
|
| 71 |
<!-- Main Content -->
|
| 72 |
<main class="max-w-4xl mx-auto">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 73 |
<!-- Upload Section -->
|
| 74 |
-
<section id="
|
| 75 |
<h2 class="text-xl font-semibold text-gray-800 mb-6">Create Your AI Clone</h2>
|
| 76 |
|
| 77 |
<div class="grid md:grid-cols-2 gap-6">
|
|
@@ -197,7 +253,7 @@
|
|
| 197 |
</section>
|
| 198 |
|
| 199 |
<!-- Pricing Plans -->
|
| 200 |
-
<section id="pricing
|
| 201 |
<h2 class="text-xl font-semibold text-gray-800 mb-6">Choose Your Plan</h2>
|
| 202 |
|
| 203 |
<div class="grid md:grid-cols-3 gap-6">
|
|
@@ -316,6 +372,21 @@
|
|
| 316 |
</div>
|
| 317 |
</section>
|
| 318 |
</main>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 319 |
|
| 320 |
<!-- Toast Notification -->
|
| 321 |
<div id="toast" class="fixed bottom-4 right-4 hidden">
|
|
@@ -346,7 +417,6 @@
|
|
| 346 |
const userProfile = document.getElementById('user-profile');
|
| 347 |
const userName = document.getElementById('user-name');
|
| 348 |
const userAvatar = document.getElementById('user-avatar');
|
| 349 |
-
const uploadSection = document.getElementById('upload-section');
|
| 350 |
const imageUpload = document.getElementById('image-upload');
|
| 351 |
const zipUpload = document.getElementById('zip-upload');
|
| 352 |
const imageInput = document.getElementById('image-input');
|
|
@@ -403,9 +473,7 @@
|
|
| 403 |
userAvatar.src = mockUser.avatar;
|
| 404 |
|
| 405 |
// Show upload section after sign in
|
| 406 |
-
|
| 407 |
-
animateSection.classList.remove('hidden');
|
| 408 |
-
pricingSection.classList.remove('hidden');
|
| 409 |
}
|
| 410 |
|
| 411 |
function handleImageUpload(e) {
|
|
@@ -558,6 +626,32 @@
|
|
| 558 |
toast.classList.add('hidden');
|
| 559 |
}, 3000);
|
| 560 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 561 |
</script>
|
| 562 |
<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>
|
| 563 |
</html>
|
|
|
|
| 49 |
</style>
|
| 50 |
</head>
|
| 51 |
<body class="gradient-bg min-h-screen">
|
| 52 |
+
<!-- Navigation Bar -->
|
| 53 |
+
<nav class="bg-white shadow-sm sticky top-0 z-10">
|
| 54 |
+
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
| 55 |
+
<div class="flex items-center">
|
| 56 |
+
<i class="fas fa-robot text-indigo-600 text-2xl mr-2"></i>
|
| 57 |
+
<span class="text-xl font-bold text-gray-800">AI Clone</span>
|
| 58 |
+
</div>
|
| 59 |
+
<div class="hidden md:flex space-x-8">
|
| 60 |
+
<a href="#home" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Home</a>
|
| 61 |
+
<a href="#features" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Features</a>
|
| 62 |
+
<a href="#create" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Create</a>
|
| 63 |
+
<a href="#pricing" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Pricing</a>
|
| 64 |
+
</div>
|
| 65 |
+
<button id="mobile-menu-button" class="md:hidden text-gray-600">
|
| 66 |
+
<i class="fas fa-bars text-xl"></i>
|
| 67 |
+
</button>
|
| 68 |
+
</div>
|
| 69 |
+
</nav>
|
| 70 |
+
|
| 71 |
<div class="container mx-auto px-4 py-8">
|
| 72 |
<!-- Header -->
|
| 73 |
<header class="flex justify-between items-center mb-12">
|
|
|
|
| 89 |
|
| 90 |
<!-- Main Content -->
|
| 91 |
<main class="max-w-4xl mx-auto">
|
| 92 |
+
<!-- Home Section -->
|
| 93 |
+
<section id="home" class="text-center py-16">
|
| 94 |
+
<h1 class="text-4xl font-bold text-gray-800 mb-4">Create Your Digital Twin</h1>
|
| 95 |
+
<p class="text-xl text-gray-600 mb-8">Generate AI-powered avatars that look just like you</p>
|
| 96 |
+
<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">
|
| 97 |
+
Get Started
|
| 98 |
+
</button>
|
| 99 |
+
</section>
|
| 100 |
+
|
| 101 |
+
<!-- Features Section -->
|
| 102 |
+
<section id="features" class="mb-16">
|
| 103 |
+
<h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Key Features</h2>
|
| 104 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 105 |
+
<div class="bg-white p-6 rounded-xl shadow-md">
|
| 106 |
+
<div class="text-indigo-500 text-3xl mb-4">
|
| 107 |
+
<i class="fas fa-user-circle"></i>
|
| 108 |
+
</div>
|
| 109 |
+
<h3 class="text-lg font-semibold mb-2">Realistic Avatars</h3>
|
| 110 |
+
<p class="text-gray-600">Generate high-quality avatars that capture your unique features.</p>
|
| 111 |
+
</div>
|
| 112 |
+
<div class="bg-white p-6 rounded-xl shadow-md">
|
| 113 |
+
<div class="text-purple-500 text-3xl mb-4">
|
| 114 |
+
<i class="fas fa-video"></i>
|
| 115 |
+
</div>
|
| 116 |
+
<h3 class="text-lg font-semibold mb-2">Animated Videos</h3>
|
| 117 |
+
<p class="text-gray-600">Bring your avatar to life with custom animated videos.</p>
|
| 118 |
+
</div>
|
| 119 |
+
<div class="bg-white p-6 rounded-xl shadow-md">
|
| 120 |
+
<div class="text-pink-500 text-3xl mb-4">
|
| 121 |
+
<i class="fas fa-magic"></i>
|
| 122 |
+
</div>
|
| 123 |
+
<h3 class="text-lg font-semibold mb-2">AI Magic</h3>
|
| 124 |
+
<p class="text-gray-600">Use AI to transform your photos into stunning digital art.</p>
|
| 125 |
+
</div>
|
| 126 |
+
</div>
|
| 127 |
+
</section>
|
| 128 |
+
|
| 129 |
<!-- Upload Section -->
|
| 130 |
+
<section id="create" class="mb-12 bg-white rounded-xl shadow-lg p-6 hidden">
|
| 131 |
<h2 class="text-xl font-semibold text-gray-800 mb-6">Create Your AI Clone</h2>
|
| 132 |
|
| 133 |
<div class="grid md:grid-cols-2 gap-6">
|
|
|
|
| 253 |
</section>
|
| 254 |
|
| 255 |
<!-- Pricing Plans -->
|
| 256 |
+
<section id="pricing" class="mb-12 bg-white rounded-xl shadow-lg p-6">
|
| 257 |
<h2 class="text-xl font-semibold text-gray-800 mb-6">Choose Your Plan</h2>
|
| 258 |
|
| 259 |
<div class="grid md:grid-cols-3 gap-6">
|
|
|
|
| 372 |
</div>
|
| 373 |
</section>
|
| 374 |
</main>
|
| 375 |
+
|
| 376 |
+
<!-- Footer with Pricing Info -->
|
| 377 |
+
<footer class="mt-12 bg-white py-8 border-t border-gray-200">
|
| 378 |
+
<div class="container mx-auto px-4">
|
| 379 |
+
<h3 class="text-xl font-bold text-center mb-4">Ready to create your AI Clone?</h3>
|
| 380 |
+
<div class="flex justify-center">
|
| 381 |
+
<a href="#pricing" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition">
|
| 382 |
+
View Pricing Plans
|
| 383 |
+
</a>
|
| 384 |
+
</div>
|
| 385 |
+
<div class="mt-8 text-center text-gray-600">
|
| 386 |
+
<p>Choose the plan that works best for you</p>
|
| 387 |
+
</div>
|
| 388 |
+
</div>
|
| 389 |
+
</footer>
|
| 390 |
|
| 391 |
<!-- Toast Notification -->
|
| 392 |
<div id="toast" class="fixed bottom-4 right-4 hidden">
|
|
|
|
| 417 |
const userProfile = document.getElementById('user-profile');
|
| 418 |
const userName = document.getElementById('user-name');
|
| 419 |
const userAvatar = document.getElementById('user-avatar');
|
|
|
|
| 420 |
const imageUpload = document.getElementById('image-upload');
|
| 421 |
const zipUpload = document.getElementById('zip-upload');
|
| 422 |
const imageInput = document.getElementById('image-input');
|
|
|
|
| 473 |
userAvatar.src = mockUser.avatar;
|
| 474 |
|
| 475 |
// Show upload section after sign in
|
| 476 |
+
document.getElementById('create').classList.remove('hidden');
|
|
|
|
|
|
|
| 477 |
}
|
| 478 |
|
| 479 |
function handleImageUpload(e) {
|
|
|
|
| 626 |
toast.classList.add('hidden');
|
| 627 |
}, 3000);
|
| 628 |
}
|
| 629 |
+
|
| 630 |
+
// Navigation functionality
|
| 631 |
+
document.querySelectorAll('.nav-link').forEach(link => {
|
| 632 |
+
link.addEventListener('click', (e) => {
|
| 633 |
+
e.preventDefault();
|
| 634 |
+
const targetId = link.getAttribute('href').substring(1);
|
| 635 |
+
const targetElement = document.getElementById(targetId);
|
| 636 |
+
|
| 637 |
+
if (targetElement) {
|
| 638 |
+
window.scrollTo({
|
| 639 |
+
top: targetElement.offsetTop - 80,
|
| 640 |
+
behavior: 'smooth'
|
| 641 |
+
});
|
| 642 |
+
}
|
| 643 |
+
});
|
| 644 |
+
});
|
| 645 |
+
|
| 646 |
+
// Get Started button
|
| 647 |
+
document.getElementById('get-started-btn').addEventListener('click', () => {
|
| 648 |
+
document.getElementById('sign-in-btn').click();
|
| 649 |
+
});
|
| 650 |
+
|
| 651 |
+
// Mobile menu toggle (placeholder - would need additional HTML/CSS)
|
| 652 |
+
document.getElementById('mobile-menu-button').addEventListener('click', () => {
|
| 653 |
+
showToast("Mobile menu would open here");
|
| 654 |
+
});
|
| 655 |
</script>
|
| 656 |
<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>
|
| 657 |
</html>
|