Download index.html from moralec/explainer-video-generator: direct link, hf CLI and curl.
- Browser
- Download file 42.5 kB
-
https://huggingface.co/spaces/moralec/explainer-video-generator/resolve/main/index.html
- Command line
-
hf download hf://spaces/moralec/explainer-video-generator/index.html
-
curl -L -o index.html https://huggingface.co/spaces/moralec/explainer-video-generator/resolve/main/index.html
42.5 kB
| <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 --> | |
| <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> | |
| <!-- Progress Bar --> | |
| <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> | |
| <!-- Wizard Content --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 mb-8 fade-in"> | |
| <!-- Step 1: Document Upload and Script Creation --> | |
| <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> | |
| <!-- Step 2: Avatar and Voice Selection --> | |
| <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> | |
| <!-- Step 3: Storyboard Creation --> | |
| <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"> | |
| <!-- Scene 1 --> | |
| <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> | |
| <!-- Scene 2 --> | |
| <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> | |
| <!-- Scene 3 --> | |
| <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> | |
| <!-- Scene 4 --> | |
| <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> | |
| <!-- Step 4: Final Video --> | |
| <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() { | |
| // Current step tracking | |
| let currentStep = 1; | |
| const totalSteps = 4; | |
| // File upload functionality | |
| 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'; | |
| // Simulate script generation after file upload | |
| 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."; | |
| }); | |
| // Prevent default drag behaviors | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropZone.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| // Highlight drop zone when item is dragged over it | |
| ['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'); | |
| } | |
| // Handle dropped files | |
| 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]; | |
| } | |
| // Step navigation | |
| 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() { | |
| // Reset all indicators | |
| 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'; | |
| } | |
| } | |
| } | |
| // Avatar selection | |
| 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'); | |
| }); | |
| }); | |
| // Voice selection | |
| 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'); | |
| }); | |
| }); | |
| // Scene reordering (simplified - would need a proper drag-and-drop library for full implementation) | |
| const storyboardContainer = document.getElementById('storyboardContainer'); | |
| // Make scenes draggable (simplified implementation) | |
| 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> |