Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>10-Minute 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> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .video-preview { | |
| aspect-ratio: 16/9; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| .video-option: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); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-blue-500"> | |
| 10-Minute Video Generator | |
| </span> | |
| </h1> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Create professional 10-minute videos in seconds with our AI-powered generator. Perfect for content creators, marketers, and educators. | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-6xl mx-auto"> | |
| <!-- Video Options --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"> | |
| <div class="video-option bg-white rounded-xl p-6 shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-purple-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-graduation-cap text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Educational</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Generate explainer videos with clear narration and visuals.</p> | |
| <button class="select-option w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition"> | |
| Select | |
| </button> | |
| </div> | |
| <div class="video-option bg-white rounded-xl p-6 shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-blue-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-chart-line text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Marketing</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Create promotional videos with compelling calls-to-action.</p> | |
| <button class="select-option w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"> | |
| Select | |
| </button> | |
| </div> | |
| <div class="video-option bg-white rounded-xl p-6 shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-pink-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-pink-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-gamepad text-pink-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Entertainment</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Generate fun, engaging content for your audience.</p> | |
| <button class="select-option w-full py-2 bg-pink-600 hover:bg-pink-700 text-white rounded-lg transition"> | |
| Select | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Video Customization --> | |
| <div class="bg-white rounded-xl shadow-xl p-6 mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Customize Your Video</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">Video Topic</label> | |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition" placeholder="Enter your video topic"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">Style</label> | |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition"> | |
| <option>Modern</option> | |
| <option>Minimalist</option> | |
| <option>Retro</option> | |
| <option>Futuristic</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">Voice Over</label> | |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition"> | |
| <option>Male - Professional</option> | |
| <option>Female - Professional</option> | |
| <option>Male - Friendly</option> | |
| <option>Female - Friendly</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">Background Music</label> | |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition"> | |
| <option>Upbeat</option> | |
| <option>Calm</option> | |
| <option>Corporate</option> | |
| <option>None</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Additional Instructions</label> | |
| <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition h-32" placeholder="Any specific requirements for your video..."></textarea> | |
| </div> | |
| <button id="generate-btn" class="w-full py-4 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white font-bold rounded-lg shadow-lg transition-all transform hover:scale-105"> | |
| <i class="fas fa-magic mr-2"></i> Generate 10-Minute Video | |
| </button> | |
| </div> | |
| <!-- Video Generation Section --> | |
| <div id="generation-section" class="hidden bg-white rounded-xl shadow-xl p-6 mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Generating Your Video</h2> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative w-full max-w-3xl mb-8"> | |
| <div class="video-preview rounded-xl mb-4 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-purple-500 mx-auto mb-4"></div> | |
| <p class="text-white font-medium">Generating your 10-minute video...</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-200 rounded-full h-4 mb-6"> | |
| <div id="progress-bar" class="progress-bar h-4 rounded-full bg-gradient-to-r from-blue-500 to-purple-600" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-8"> | |
| <span>0:00</span> | |
| <span>10:00</span> | |
| </div> | |
| </div> | |
| <div id="progress-messages" class="w-full max-w-3xl space-y-4 mb-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3 mt-1"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Initializing video generation</p> | |
| <p class="text-sm text-gray-600">Preparing assets and scripts</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results-section" class="hidden bg-white rounded-xl shadow-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Your Video is Ready!</h2> | |
| <div class="flex flex-col md:flex-row gap-8 mb-8"> | |
| <div class="md:w-2/3"> | |
| <div class="video-preview rounded-xl overflow-hidden relative"> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center"> | |
| <button class="bg-white bg-opacity-90 hover:bg-opacity-100 text-purple-600 rounded-full p-4 shadow-lg transform hover:scale-110 transition"> | |
| <i class="fas fa-play text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/3"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Video Details</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Duration</p> | |
| <p class="font-medium">10:00</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Resolution</p> | |
| <p class="font-medium">1080p HD</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">File Size</p> | |
| <p class="font-medium">125 MB</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Generated At</p> | |
| <p class="font-medium" id="generated-time"></p> | |
| </div> | |
| </div> | |
| <div class="mt-6 space-y-3"> | |
| <button class="w-full py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-download mr-2"></i> Download Video | |
| </button> | |
| <button class="w-full py-3 border border-purple-600 text-purple-600 hover:bg-purple-50 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-redo mr-2"></i> Regenerate | |
| </button> | |
| <button class="w-full py-3 border border-gray-300 text-gray-700 hover:bg-gray-50 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-share-alt mr-2"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-6"> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Next Steps</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-edit text-blue-600"></i> | |
| </div> | |
| <h4 class="font-medium">Edit Video</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Make adjustments to your generated video.</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-upload text-green-600"></i> | |
| </div> | |
| <h4 class="font-medium">Publish</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Upload directly to YouTube or other platforms.</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-copy text-purple-600"></i> | |
| </div> | |
| <h4 class="font-medium">Create Another</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Generate a new video with different settings.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-16 text-center text-gray-600"> | |
| <div class="flex justify-center space-x-6 mb-4"> | |
| <a href="#" class="hover:text-purple-600"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-purple-600"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="hover:text-purple-600"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="hover:text-purple-600"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| <p class="mb-2">© 2023 10-Minute Video Generator. All rights reserved.</p> | |
| <p class="text-sm">Powered by AI Video Technology</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Select video option | |
| const options = document.querySelectorAll('.select-option'); | |
| options.forEach(option => { | |
| option.addEventListener('click', function() { | |
| options.forEach(opt => { | |
| opt.classList.remove('bg-purple-700', 'bg-blue-700', 'bg-pink-700'); | |
| opt.classList.add('bg-purple-600', 'bg-blue-600', 'bg-pink-600'); | |
| }); | |
| if(this.classList.contains('bg-purple-600')) { | |
| this.classList.remove('bg-purple-600'); | |
| this.classList.add('bg-purple-700'); | |
| } else if(this.classList.contains('bg-blue-600')) { | |
| this.classList.remove('bg-blue-600'); | |
| this.classList.add('bg-blue-700'); | |
| } else if(this.classList.contains('bg-pink-600')) { | |
| this.classList.remove('bg-pink-600'); | |
| this.classList.add('bg-pink-700'); | |
| } | |
| }); | |
| }); | |
| // Generate video | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const generationSection = document.getElementById('generation-section'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const progressMessages = document.getElementById('progress-messages'); | |
| const generatedTime = document.getElementById('generated-time'); | |
| generateBtn.addEventListener('click', function() { | |
| generationSection.classList.remove('hidden'); | |
| generationSection.scrollIntoView({ behavior: 'smooth' }); | |
| // Simulate generation progress | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 5; | |
| if(progress > 100) progress = 100; | |
| progressBar.style.width = progress + '%'; | |
| // Add progress messages | |
| if(progress > 20 && progress < 25) { | |
| addProgressMessage('Script generation complete', 'AI has created the video script'); | |
| } | |
| if(progress > 40 && progress < 45) { | |
| addProgressMessage('Visual assets selected', 'Relevant images and clips added'); | |
| } | |
| if(progress > 60 && progress < 65) { | |
| addProgressMessage('Voice over generated', 'Narration added to timeline'); | |
| } | |
| if(progress > 80 && progress < 85) { | |
| addProgressMessage('Final rendering', 'Combining all elements'); | |
| } | |
| if(progress >= 100) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| generationSection.classList.add('hidden'); | |
| resultsSection.classList.remove('hidden'); | |
| // Set current time | |
| const now = new Date(); | |
| generatedTime.textContent = now.toLocaleString(); | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 1000); | |
| } | |
| }, 300); | |
| }); | |
| function addProgressMessage(title, description) { | |
| // Check if this message already exists | |
| const existingMessages = progressMessages.querySelectorAll('p'); | |
| for(let msg of existingMessages) { | |
| if(msg.textContent.includes(title)) return; | |
| } | |
| const message = document.createElement('div'); | |
| message.className = 'flex items-start'; | |
| message.innerHTML = ` | |
| <div class="bg-blue-100 p-2 rounded-full mr-3 mt-1"> | |
| <i class="fas fa-check text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">${title}</p> | |
| <p class="text-sm text-gray-600">${description}</p> | |
| </div> | |
| `; | |
| progressMessages.appendChild(message); | |
| } | |
| }); | |
| </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=Luxsplendida/10minute" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |