|
|
<!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> |
