| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Explainer 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> |
| .fade-in { |
| animation: fadeIn 0.5s ease-in-out; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .progress-bar { |
| transition: width 0.5s ease-in-out; |
| } |
| .avatar-option:hover { |
| transform: scale(1.05); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| .voice-option:hover { |
| background-color: #f0f9ff; |
| } |
| .storyboard-panel { |
| min-height: 200px; |
| background-size: cover; |
| background-position: center; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> |
| |
| <header class="text-center mb-12"> |
| <h1 class="text-4xl font-bold text-indigo-700 mb-2">Explainer Video Generator</h1> |
| <p class="text-gray-600 text-lg">Create professional explainer videos in just 4 simple steps</p> |
| </header> |
|
|
| |
| <div class="mb-12"> |
| <div class="flex justify-between mb-2"> |
| <div class="w-1/4 text-center"> |
| <div class="w-12 h-12 mx-auto rounded-full flex items-center justify-center bg-indigo-600 text-white font-bold">1</div> |
| <p class="mt-2 text-sm font-medium text-indigo-600">Upload & Script</p> |
| </div> |
| <div class="w-1/4 text-center"> |
| <div class="w-12 h-12 mx-auto rounded-full flex items-center justify-center bg-gray-200 text-gray-600 font-bold">2</div> |
| <p class="mt-2 text-sm font-medium text-gray-500">Avatar & Voice</p> |
| </div> |
| <div class="w-1/4 text-center"> |
| <div class="w-12 h-12 mx-auto rounded-full flex items-center justify-center bg-gray-200 text-gray-600 font-bold">3</div> |
| <p class="mt-2 text-sm font-medium text-gray-500">Storyboard</p> |
| </div> |
| <div class="w-1/4 text-center"> |
| <div class="w-12 h-12 mx-auto rounded-full flex items-center justify-center bg-gray-200 text-gray-600 font-bold">4</div> |
| <p class="mt-2 text-sm font-medium text-gray-500">Final Video</p> |
| </div> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 25%"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg p-8 mb-8 fade-in"> |
| |
| <div id="step1" class="step-content"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Upload Your Document</h2> |
| <div class="mb-8"> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center cursor-pointer hover:border-indigo-400 transition-colors duration-300" id="dropZone"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i> |
| <p class="text-gray-600 mb-2">Drag & drop your document here</p> |
| <p class="text-sm text-gray-500 mb-4">Supported formats: PDF, DOCX, PPTX, TXT</p> |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-300"> |
| Or browse files |
| </button> |
| <input type="file" id="fileInput" class="hidden" accept=".pdf,.docx,.pptx,.txt"> |
| </div> |
| </div> |
|
|
| <div class="mb-8" id="uploadedFile" style="display: none;"> |
| <div class="flex items-center bg-gray-50 p-4 rounded-lg"> |
| <i class="fas fa-file-alt text-2xl text-indigo-500 mr-4"></i> |
| <div class="flex-grow"> |
| <p class="font-medium" id="fileName">Document.pdf</p> |
| <p class="text-sm text-gray-500" id="fileSize">2.4 MB</p> |
| </div> |
| <button class="text-red-500 hover:text-red-700" id="removeFile"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="mb-8"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Or paste your content directly</h3> |
| <textarea class="w-full h-40 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Paste your content here..."></textarea> |
| </div> |
|
|
| <div class="mb-8"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Video Script (Auto-generated)</h3> |
| <div class="bg-gray-50 p-6 rounded-lg"> |
| <div class="flex items-start mb-4"> |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div> |
| <p class="font-medium text-gray-800 mb-1">AI Script Assistant</p> |
| <p class="text-gray-600" id="generatedScript">Your script will be automatically generated here after document processing. Our AI will analyze your content and create an engaging narrative for your explainer video.</p> |
| </div> |
| </div> |
| <div class="flex justify-end"> |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-300 mr-2"> |
| <i class="fas fa-magic mr-2"></i>Enhance Script |
| </button> |
| <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors duration-300"> |
| <i class="fas fa-edit mr-2"></i>Edit Manually |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex justify-end"> |
| <button class="next-step bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors duration-300 font-medium"> |
| Continue to Avatar & Voice <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step2" class="step-content hidden"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Choose Your Avatar</h2> |
| |
| <div class="mb-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
| <div class="avatar-option cursor-pointer p-4 rounded-xl border-2 border-transparent hover:border-indigo-300 transition-all duration-300" data-avatar="1"> |
| <div class="bg-indigo-100 rounded-lg p-4 mb-3 flex justify-center"> |
| <img src="https://placehold.co/150x150/e0e7ff/6366f1?text=Avatar+1" alt="Avatar 1" class="w-24 h-24 rounded-full object-cover"> |
| </div> |
| <p class="text-center font-medium">Business Alex</p> |
| <p class="text-center text-sm text-gray-500">Professional</p> |
| </div> |
| <div class="avatar-option cursor-pointer p-4 rounded-xl border-2 border-transparent hover:border-indigo-300 transition-all duration-300" data-avatar="2"> |
| <div class="bg-indigo-100 rounded-lg p-4 mb-3 flex justify-center"> |
| <img src="https://placehold.co/150x150/e0e7ff/6366f1?text=Avatar+2" alt="Avatar 2" class="w-24 h-24 rounded-full object-cover"> |
| </div> |
| <p class="text-center font-medium">Tech Sarah</p> |
| <p class="text-center text-sm text-gray-500">Modern</p> |
| </div> |
| <div class="avatar-option cursor-pointer p-4 rounded-xl border-2 border-transparent hover:border-indigo-300 transition-all duration-300" data-avatar="3"> |
| <div class="bg-indigo-100 rounded-lg p-4 mb-3 flex justify-center"> |
| <img src="https://placehold.co/150x150/e0e7ff/6366f1?text=Avatar+3" alt="Avatar 3" class="w-24 h-24 rounded-full object-cover"> |
| </div> |
| <p class="text-center font-medium">Creative Jamie</p> |
| <p class="text-center text-sm text-gray-500">Artistic</p> |
| </div> |
| <div class="avatar-option cursor-pointer p-4 rounded-xl border-2 border-transparent hover:border-indigo-300 transition-all duration-300" data-avatar="4"> |
| <div class="bg-indigo-100 rounded-lg p-4 mb-3 flex justify-center"> |
| <img src="https://placehold.co/150x150/e0e7ff/6366f1?text=Avatar+4" alt="Avatar 4" class="w-24 h-24 rounded-full object-cover"> |
| </div> |
| <p class="text-center font-medium">Friendly Max</p> |
| <p class="text-center text-sm text-gray-500">Casual</p> |
| </div> |
| </div> |
| </div> |
|
|
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Select Voice Style</h2> |
| |
| <div class="mb-8"> |
| <div class="space-y-4"> |
| <div class="voice-option p-4 rounded-lg border border-gray-200 cursor-pointer transition-colors duration-300" data-voice="1"> |
| <div class="flex items-center"> |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-volume-up"></i> |
| </div> |
| <div class="flex-grow"> |
| <p class="font-medium">Sophisticated (Male)</p> |
| <p class="text-sm text-gray-500">Clear, professional tone</p> |
| </div> |
| <button class="text-indigo-600 hover:text-indigo-800"> |
| <i class="fas fa-play"></i> Preview |
| </button> |
| </div> |
| </div> |
| <div class="voice-option p-4 rounded-lg border border-gray-200 cursor-pointer transition-colors duration-300" data-voice="2"> |
| <div class="flex items-center"> |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-volume-up"></i> |
| </div> |
| <div class="flex-grow"> |
| <p class="font-medium">Engaging (Female)</p> |
| <p class="text-sm text-gray-500">Friendly, conversational</p> |
| </div> |
| <button class="text-indigo-600 hover:text-indigo-800"> |
| <i class="fas fa-play"></i> Preview |
| </button> |
| </div> |
| </div> |
| <div class="voice-option p-4 rounded-lg border border-gray-200 cursor-pointer transition-colors duration-300" data-voice="3"> |
| <div class="flex items-center"> |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-volume-up"></i> |
| </div> |
| <div class="flex-grow"> |
| <p class="font-medium">Energetic (Male)</p> |
| <p class="text-sm text-gray-500">Dynamic, enthusiastic</p> |
| </div> |
| <button class="text-indigo-600 hover:text-indigo-800"> |
| <i class="fas fa-play"></i> Preview |
| </button> |
| </div> |
| </div> |
| <div class="voice-option p-4 rounded-lg border border-gray-200 cursor-pointer transition-colors duration-300" data-voice="4"> |
| <div class="flex items-center"> |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-volume-up"></i> |
| </div> |
| <div class="flex-grow"> |
| <p class="font-medium">Warm (Female)</p> |
| <p class="text-sm text-gray-500">Soothing, trustworthy</p> |
| </div> |
| <button class="text-indigo-600 hover:text-indigo-800"> |
| <i class="fas fa-play"></i> Preview |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex justify-between"> |
| <button class="prev-step bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 transition-colors duration-300 font-medium"> |
| <i class="fas fa-arrow-left mr-2"></i> Back |
| </button> |
| <button class="next-step bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors duration-300 font-medium"> |
| Continue to Storyboard <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step3" class="step-content hidden"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Storyboard Preview</h2> |
| <p class="text-gray-600 mb-8">Review and customize the automatically generated scenes for your video. Drag to reorder scenes or click to edit.</p> |
| |
| <div class="mb-8"> |
| <div class="space-y-6" id="storyboardContainer"> |
| |
| <div class="scene bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:border-indigo-300 transition-colors duration-300" data-scene="1"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="w-full md:w-1/3 storyboard-panel bg-indigo-50" style="background-image: url('https://placehold.co/600x400/e0e7ff/6366f1?text=Scene+1')"> |
| <div class="p-4 bg-black bg-opacity-30 text-white"> |
| <p class="font-medium">Scene 1</p> |
| </div> |
| </div> |
| <div class="w-full md:w-2/3 p-6"> |
| <div class="flex items-start mb-4"> |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
| 1 |
| </div> |
| <div> |
| <p class="font-medium text-gray-800 mb-1">Introduction</p> |
| <p class="text-gray-600">Welcome to our product overview. Today we'll explore the key features that make our solution stand out in the market.</p> |
| </div> |
| </div> |
| <div class="flex space-x-3"> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-image mr-1"></i> Change Visual |
| </button> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-edit mr-1"></i> Edit Text |
| </button> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-trash-alt mr-1"></i> Remove |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="scene bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:border-indigo-300 transition-colors duration-300" data-scene="2"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="w-full md:w-1/3 storyboard-panel bg-indigo-50" style="background-image: url('https://placehold.co/600x400/e0e7ff/6366f1?text=Scene+2')"> |
| <div class="p-4 bg-black bg-opacity-30 text-white"> |
| <p class="font-medium">Scene 2</p> |
| </div> |
| </div> |
| <div class="w-full md:w-2/3 p-6"> |
| <div class="flex items-start mb-4"> |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
| 2 |
| </div> |
| <div> |
| <p class="font-medium text-gray-800 mb-1">Key Features</p> |
| <p class="text-gray-600">Our solution offers three powerful features: intuitive interface, real-time analytics, and seamless integration with your existing tools.</p> |
| </div> |
| </div> |
| <div class="flex space-x-3"> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-image mr-1"></i> Change Visual |
| </button> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-edit mr-1"></i> Edit Text |
| </button> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-trash-alt mr-1"></i> Remove |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="scene bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:border-indigo-300 transition-colors duration-300" data-scene="3"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="w-full md:w-1/3 storyboard-panel bg-indigo-50" style="background-image: url('https://placehold.co/600x400/e0e7ff/6366f1?text=Scene+3')"> |
| <div class="p-4 bg-black bg-opacity-30 text-white"> |
| <p class="font-medium">Scene 3</p> |
| </div> |
| </div> |
| <div class="w-full md:w-2/3 p-6"> |
| <div class="flex items-start mb-4"> |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
| 3 |
| </div> |
| <div> |
| <p class="font-medium text-gray-800 mb-1">Customer Benefits</p> |
| <p class="text-gray-600">By using our product, customers report a 40% increase in productivity and 30% reduction in operational costs within the first three months.</p> |
| </div> |
| </div> |
| <div class="flex space-x-3"> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-image mr-1"></i> Change Visual |
| </button> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-edit mr-1"></i> Edit Text |
| </button> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-trash-alt mr-1"></i> Remove |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="scene bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:border-indigo-300 transition-colors duration-300" data-scene="4"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="w-full md:w-1/3 storyboard-panel bg-indigo-50" style="background-image: url('https://placehold.co/600x400/e0e7ff/6366f1?text=Scene+4')"> |
| <div class="p-4 bg-black bg-opacity-30 text-white"> |
| <p class="font-medium">Scene 4</p> |
| </div> |
| </div> |
| <div class="w-full md:w-2/3 p-6"> |
| <div class="flex items-start mb-4"> |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
| 4 |
| </div> |
| <div> |
| <p class="font-medium text-gray-800 mb-1">Call to Action</p> |
| <p class="text-gray-600">Ready to experience these benefits for yourself? Visit our website today to start your free trial or schedule a demo with our team.</p> |
| </div> |
| </div> |
| <div class="flex space-x-3"> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-image mr-1"></i> Change Visual |
| </button> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-edit mr-1"></i> Edit Text |
| </button> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-trash-alt mr-1"></i> Remove |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mb-8"> |
| <button class="bg-white border border-indigo-600 text-indigo-600 px-4 py-2 rounded-lg hover:bg-indigo-50 transition-colors duration-300"> |
| <i class="fas fa-plus mr-2"></i> Add New Scene |
| </button> |
| </div> |
|
|
| <div class="flex justify-between"> |
| <button class="prev-step bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 transition-colors duration-300 font-medium"> |
| <i class="fas fa-arrow-left mr-2"></i> Back |
| </button> |
| <button class="next-step bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors duration-300 font-medium"> |
| Generate Final Video <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step4" class="step-content hidden"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Your Video is Ready!</h2> |
| |
| <div class="mb-8 bg-gray-50 rounded-xl p-8 text-center"> |
| <div class="max-w-2xl mx-auto"> |
| <div class="bg-black rounded-lg overflow-hidden mb-6"> |
| <div class="aspect-w-16 aspect-h-9"> |
| <div class="w-full h-64 bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-play text-4xl text-indigo-600"></i> |
| </div> |
| </div> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Product Overview Explainer</h3> |
| <p class="text-gray-600 mb-6">Duration: 1:45 | Created: Just now</p> |
| <div class="flex flex-wrap justify-center gap-4"> |
| <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors duration-300 font-medium"> |
| <i class="fas fa-download mr-2"></i> Download Video |
| </button> |
| <button class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 transition-colors duration-300 font-medium"> |
| <i class="fas fa-share-alt mr-2"></i> Share |
| </button> |
| <button class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 transition-colors duration-300 font-medium"> |
| <i class="fas fa-edit mr-2"></i> Edit Again |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mb-8"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Video Details</h3> |
| <div class="bg-white rounded-lg border border-gray-200 overflow-hidden"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">Title</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Product Overview Explainer</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">Duration</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1 minute 45 seconds</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">Resolution</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1080p (Full HD)</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">File Size</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">24.5 MB</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">Created</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Just now</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| <div class="flex justify-between"> |
| <button class="prev-step bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 transition-colors duration-300 font-medium"> |
| <i class="fas fa-arrow-left mr-2"></i> Back |
| </button> |
| <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors duration-300 font-medium"> |
| Create Another Video |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| let currentStep = 1; |
| const totalSteps = 4; |
| |
| |
| const dropZone = document.getElementById('dropZone'); |
| const fileInput = document.getElementById('fileInput'); |
| const uploadedFile = document.getElementById('uploadedFile'); |
| const fileName = document.getElementById('fileName'); |
| const fileSize = document.getElementById('fileSize'); |
| const removeFile = document.getElementById('removeFile'); |
| |
| dropZone.addEventListener('click', () => fileInput.click()); |
| |
| fileInput.addEventListener('change', function(e) { |
| if (this.files.length) { |
| const file = this.files[0]; |
| fileName.textContent = file.name; |
| fileSize.textContent = formatFileSize(file.size); |
| uploadedFile.style.display = 'flex'; |
| |
| |
| setTimeout(() => { |
| document.getElementById('generatedScript').textContent = |
| "Based on your document, we've created an engaging script for your explainer video. " + |
| "The video will start with an introduction to your product, followed by key features, " + |
| "customer benefits, and a strong call to action. The total duration will be approximately 1 minute 45 seconds."; |
| }, 1500); |
| } |
| }); |
| |
| removeFile.addEventListener('click', function(e) { |
| e.stopPropagation(); |
| fileInput.value = ''; |
| uploadedFile.style.display = 'none'; |
| document.getElementById('generatedScript').textContent = |
| "Your script will be automatically generated here after document processing. " + |
| "Our AI will analyze your content and create an engaging narrative for your explainer video."; |
| }); |
| |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropZone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropZone.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropZone.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| dropZone.classList.add('border-indigo-500'); |
| dropZone.classList.remove('border-gray-300'); |
| } |
| |
| function unhighlight() { |
| dropZone.classList.remove('border-indigo-500'); |
| dropZone.classList.add('border-gray-300'); |
| } |
| |
| |
| dropZone.addEventListener('drop', handleDrop, false); |
| |
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| fileInput.files = files; |
| fileInput.dispatchEvent(new Event('change')); |
| } |
| |
| function formatFileSize(bytes) { |
| if (bytes === 0) return '0 Bytes'; |
| const k = 1024; |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
| } |
| |
| |
| const nextButtons = document.querySelectorAll('.next-step'); |
| const prevButtons = document.querySelectorAll('.prev-step'); |
| |
| nextButtons.forEach(button => { |
| button.addEventListener('click', goToNextStep); |
| }); |
| |
| prevButtons.forEach(button => { |
| button.addEventListener('click', goToPrevStep); |
| }); |
| |
| function goToNextStep() { |
| if (currentStep < totalSteps) { |
| document.getElementById(`step${currentStep}`).classList.add('hidden'); |
| currentStep++; |
| document.getElementById(`step${currentStep}`).classList.remove('hidden'); |
| updateProgressBar(); |
| updateStepIndicators(); |
| } |
| } |
| |
| function goToPrevStep() { |
| if (currentStep > 1) { |
| document.getElementById(`step${currentStep}`).classList.add('hidden'); |
| currentStep--; |
| document.getElementById(`step${currentStep}`).classList.remove('hidden'); |
| updateProgressBar(); |
| updateStepIndicators(); |
| } |
| } |
| |
| function updateProgressBar() { |
| const progressPercentage = (currentStep / totalSteps) * 100; |
| document.querySelector('.progress-bar').style.width = `${progressPercentage}%`; |
| } |
| |
| function updateStepIndicators() { |
| |
| for (let i = 1; i <= totalSteps; i++) { |
| const indicator = document.querySelector(`.flex.justify-between.mb-2 div:nth-child(${i}) div`); |
| const label = document.querySelector(`.flex.justify-between.mb-2 div:nth-child(${i}) p`); |
| |
| if (i < currentStep) { |
| indicator.className = 'w-12 h-12 mx-auto rounded-full flex items-center justify-center bg-indigo-100 text-indigo-600 font-bold'; |
| label.className = 'mt-2 text-sm font-medium text-indigo-600'; |
| } else if (i === currentStep) { |
| indicator.className = 'w-12 h-12 mx-auto rounded-full flex items-center justify-center bg-indigo-600 text-white font-bold'; |
| label.className = 'mt-2 text-sm font-medium text-indigo-600'; |
| } else { |
| indicator.className = 'w-12 h-12 mx-auto rounded-full flex items-center justify-center bg-gray-200 text-gray-600 font-bold'; |
| label.className = 'mt-2 text-sm font-medium text-gray-500'; |
| } |
| } |
| } |
| |
| |
| const avatarOptions = document.querySelectorAll('.avatar-option'); |
| avatarOptions.forEach(option => { |
| option.addEventListener('click', function() { |
| avatarOptions.forEach(opt => { |
| opt.classList.remove('border-indigo-500', 'bg-indigo-50'); |
| opt.classList.add('border-transparent'); |
| }); |
| this.classList.add('border-indigo-500', 'bg-indigo-50'); |
| this.classList.remove('border-transparent'); |
| }); |
| }); |
| |
| |
| const voiceOptions = document.querySelectorAll('.voice-option'); |
| voiceOptions.forEach(option => { |
| option.addEventListener('click', function() { |
| voiceOptions.forEach(opt => { |
| opt.classList.remove('border-indigo-500', 'bg-indigo-50'); |
| opt.classList.add('border-gray-200'); |
| }); |
| this.classList.add('border-indigo-500', 'bg-indigo-50'); |
| this.classList.remove('border-gray-200'); |
| }); |
| }); |
| |
| |
| const storyboardContainer = document.getElementById('storyboardContainer'); |
| |
| |
| const scenes = document.querySelectorAll('.scene'); |
| scenes.forEach(scene => { |
| scene.setAttribute('draggable', 'true'); |
| |
| scene.addEventListener('dragstart', function() { |
| this.classList.add('opacity-50'); |
| }); |
| |
| scene.addEventListener('dragend', function() { |
| this.classList.remove('opacity-50'); |
| }); |
| }); |
| |
| storyboardContainer.addEventListener('dragover', function(e) { |
| e.preventDefault(); |
| const afterElement = getDragAfterElement(storyboardContainer, e.clientY); |
| const draggable = document.querySelector('.scene.opacity-50'); |
| if (afterElement == null) { |
| storyboardContainer.appendChild(draggable); |
| } else { |
| storyboardContainer.insertBefore(draggable, afterElement); |
| } |
| }); |
| |
| function getDragAfterElement(container, y) { |
| const draggableElements = [...container.querySelectorAll('.scene:not(.opacity-50)')]; |
| |
| return draggableElements.reduce((closest, child) => { |
| const box = child.getBoundingClientRect(); |
| const offset = y - box.top - box.height / 2; |
| if (offset < 0 && offset > closest.offset) { |
| return { offset: offset, element: child }; |
| } else { |
| return closest; |
| } |
| }, { offset: Number.NEGATIVE_INFINITY }).element; |
| } |
| }); |
| </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=moralec/explainer-video-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
