Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VidGen - AI Video Generator</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); | |
| } | |
| .video-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .video-card:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .loading-dots:after { | |
| content: '.'; | |
| animation: dots 1.5s steps(5, end) infinite; | |
| } | |
| @keyframes dots { | |
| 0%, 20% { content: '.'; } | |
| 40% { content: '..'; } | |
| 60% { content: '...'; } | |
| 80%, 100% { content: ''; } | |
| } | |
| .wave-animation { | |
| animation: wave 2s infinite; | |
| } | |
| @keyframes wave { | |
| 0% { transform: rotate(0deg); } | |
| 10% { transform: rotate(14deg); } | |
| 20% { transform: rotate(-8deg); } | |
| 30% { transform: rotate(14deg); } | |
| 40% { transform: rotate(-4deg); } | |
| 50% { transform: rotate(10deg); } | |
| 60% { transform: rotate(0deg); } | |
| 100% { transform: rotate(0deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-video text-2xl"></i> | |
| <h1 class="text-2xl font-bold">VidGen</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200 transition">Home</a> | |
| <a href="#" class="hover:text-gray-200 transition">Templates</a> | |
| <a href="#" class="hover:text-gray-200 transition">Pricing</a> | |
| <a href="#" class="hover:text-gray-200 transition">About</a> | |
| </nav> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col items-center text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Turn Ideas Into Videos <span class="wave-animation inline-block">🎬</span></h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl">Generate stunning short videos in seconds with our AI-powered video creator. Just describe your idea and let us do the magic!</p> | |
| <!-- Video Generator Form --> | |
| <div class="w-full max-w-2xl bg-white rounded-xl shadow-2xl p-6 mb-12"> | |
| <div class="flex flex-col space-y-4"> | |
| <div> | |
| <label for="video-idea" class="block text-gray-700 font-medium mb-2">Describe your video idea</label> | |
| <textarea id="video-idea" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="E.g. A cat wearing sunglasses dancing on a beach at sunset"></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="video-style" class="block text-gray-700 font-medium mb-2">Style</label> | |
| <select id="video-style" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option>Animated</option> | |
| <option>Realistic</option> | |
| <option>Cartoon</option> | |
| <option>Minimalist</option> | |
| <option>Cinematic</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="video-length" class="block text-gray-700 font-medium mb-2">Duration</label> | |
| <select id="video-length" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option>15 seconds</option> | |
| <option>30 seconds</option> | |
| <option>45 seconds</option> | |
| <option>60 seconds</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="generate-btn" class="gradient-bg text-white font-bold py-3 px-6 rounded-lg hover:opacity-90 transition flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> Generate Video | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Loading State (Hidden by default) --> | |
| <div id="loading-section" class="hidden container mx-auto px-4 py-12 text-center"> | |
| <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-xl p-8"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-film text-white text-3xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Creating your masterpiece<span class="loading-dots"></span></h2> | |
| <p class="text-gray-600 mb-6">Our AI is working hard to bring your vision to life. This usually takes about 30-45 seconds.</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="progress-bar" class="gradient-bg h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Generated Video Section (Hidden by default) --> | |
| <div id="result-section" class="hidden container mx-auto px-4 py-12"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Your Generated Video</h2> | |
| <p id="generated-idea" class="text-gray-600 mb-6">Based on: <span class="font-medium">A cat wearing sunglasses dancing on a beach at sunset</span></p> | |
| <div class="relative bg-black rounded-lg overflow-hidden mb-6" style="padding-bottom: 56.25%;"> | |
| <video id="generated-video" controls class="absolute top-0 left-0 w-full h-full"> | |
| <source src="" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div id="video-placeholder" class="absolute top-0 left-0 w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-white text-6xl opacity-70"></i> | |
| </div> | |
| </div> | |
| <div class="flex flex-col sm:flex-row justify-between space-y-4 sm:space-y-0"> | |
| <button class="gradient-bg text-white font-bold py-3 px-6 rounded-lg hover:opacity-90 transition flex items-center justify-center"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| <div class="flex space-x-4"> | |
| <button class="bg-gray-100 text-gray-700 font-medium py-3 px-6 rounded-lg hover:bg-gray-200 transition flex items-center justify-center"> | |
| <i class="fas fa-redo mr-2"></i> Regenerate | |
| </button> | |
| <button class="bg-gray-100 text-gray-700 font-medium py-3 px-6 rounded-lg hover:bg-gray-200 transition flex items-center justify-center"> | |
| <i class="fas fa-edit mr-2"></i> Edit | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Why Choose VidGen?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl video-card"> | |
| <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-bolt text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Lightning Fast</h3> | |
| <p class="text-gray-600">Generate videos in under a minute with our powerful AI technology.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl video-card"> | |
| <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-palette text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Multiple Styles</h3> | |
| <p class="text-gray-600">Choose from various artistic styles to match your brand or vision.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl video-card"> | |
| <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-sliders-h text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Easy Customization</h3> | |
| <p class="text-gray-600">Fine-tune your videos with simple controls before downloading.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Video Templates Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Popular Video Templates</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Get inspired by our most popular video styles</p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Template 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md video-card"> | |
| <div class="relative bg-gray-200" style="padding-bottom: 56.25%;"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-gray-400 text-4xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-800 mb-1">Product Showcase</h3> | |
| <p class="text-sm text-gray-600">Highlight your products in style</p> | |
| </div> | |
| </div> | |
| <!-- Template 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md video-card"> | |
| <div class="relative bg-gray-200" style="padding-bottom: 56.25%;"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-gray-400 text-4xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-800 mb-1">Social Media Ad</h3> | |
| <p class="text-sm text-gray-600">Engaging ads for Instagram & TikTok</p> | |
| </div> | |
| </div> | |
| <!-- Template 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md video-card"> | |
| <div class="relative bg-gray-200" style="padding-bottom: 56.25%;"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-gray-400 text-4xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-800 mb-1">Explainer Video</h3> | |
| <p class="text-sm text-gray-600">Simplify complex ideas visually</p> | |
| </div> | |
| </div> | |
| <!-- Template 4 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md video-card"> | |
| <div class="relative bg-gray-200" style="padding-bottom: 56.25%;"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-gray-400 text-4xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-800 mb-1">Travel Vlog</h3> | |
| <p class="text-sm text-gray-600">Showcase destinations beautifully</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="border-2 border-purple-500 text-purple-500 font-bold py-2 px-6 rounded-lg hover:bg-purple-50 transition"> | |
| Browse All Templates | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Users Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> | |
| <span class="text-purple-600 font-bold">JD</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Jane Doe</h4> | |
| <p class="text-sm text-gray-500">Marketing Director</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"VidGen has completely transformed our social media strategy. We can now create professional-looking videos in minutes instead of days!"</p> | |
| <div class="flex mt-4"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> | |
| <span class="text-purple-600 font-bold">AS</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Alex Smith</h4> | |
| <p class="text-sm text-gray-500">Small Business Owner</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"As a small business with no video budget, VidGen has been a game-changer. The quality rivals professional agencies at a fraction of the cost."</p> | |
| <div class="flex mt-4"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> | |
| <span class="text-purple-600 font-bold">TM</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Taylor Morgan</h4> | |
| <p class="text-sm text-gray-500">Content Creator</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"I use VidGen daily for my YouTube channel. The AI understands exactly what I need and delivers creative results every time."</p> | |
| <div class="flex mt-4"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Create Amazing Videos?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of creators and businesses who are transforming their ideas into engaging video content.</p> | |
| <button class="bg-white text-purple-600 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition"> | |
| Get Started - It's Free | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-video text-2xl"></i> | |
| <h3 class="text-xl font-bold">VidGen</h3> | |
| </div> | |
| <p class="text-gray-400">The easiest way to create professional videos with AI.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Templates</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 VidGen. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const loadingSection = document.getElementById('loading-section'); | |
| const resultSection = document.getElementById('result-section'); | |
| const videoIdeaInput = document.getElementById('video-idea'); | |
| const generatedIdea = document.getElementById('generated-idea'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const videoPlaceholder = document.getElementById('video-placeholder'); | |
| const generatedVideo = document.getElementById('generated-video'); | |
| // Sample video URLs (in a real app, these would come from your backend) | |
| const sampleVideos = [ | |
| 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4', | |
| 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4', | |
| 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_5mb.mp4' | |
| ]; | |
| generateBtn.addEventListener('click', function() { | |
| const idea = videoIdeaInput.value.trim(); | |
| if (!idea) { | |
| alert('Please describe your video idea first!'); | |
| return; | |
| } | |
| // Show loading section | |
| loadingSection.classList.remove('hidden'); | |
| resultSection.classList.add('hidden'); | |
| // Update the generated idea text | |
| generatedIdea.innerHTML = `Based on: <span class="font-medium">${idea}</span>`; | |
| // Simulate progress | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 10; | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| if (progress === 100) { | |
| clearInterval(interval); | |
| // Hide loading, show result after a small delay | |
| setTimeout(() => { | |
| loadingSection.classList.add('hidden'); | |
| resultSection.classList.remove('hidden'); | |
| // Randomly select a sample video | |
| const randomVideo = sampleVideos[Math.floor(Math.random() * sampleVideos.length)]; | |
| generatedVideo.src = randomVideo; | |
| // When video is loaded, hide placeholder | |
| generatedVideo.onloadeddata = function() { | |
| videoPlaceholder.style.display = 'none'; | |
| }; | |
| }, 500); | |
| } | |
| }, 300); | |
| }); | |
| // Play video when placeholder is clicked | |
| videoPlaceholder.addEventListener('click', function() { | |
| videoPlaceholder.style.display = 'none'; | |
| generatedVideo.play(); | |
| }); | |
| }); | |
| </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=nolascoin/video-maker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |