| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AvatarSync Studio - Create Animated Avatars</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| overflow-x: hidden; |
| } |
| |
| .dropzone { |
| border: 2px dashed #9CA3AF; |
| transition: all 0.3s ease; |
| } |
| |
| .dropzone.active { |
| border-color: #4F46E5; |
| background-color: rgba(79, 70, 229, 0.05); |
| } |
| |
| .theme-selector input:checked + label { |
| border-color: #4F46E5; |
| box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); |
| } |
| |
| .color-picker { |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| width: 40px; |
| height: 40px; |
| border: none; |
| cursor: pointer; |
| border-radius: 50%; |
| padding: 0; |
| } |
| |
| .color-picker::-webkit-color-swatch { |
| border-radius: 50%; |
| border: 2px solid white; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| } |
| |
| #previewCanvas { |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| border-radius: 12px; |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .animation-preview { |
| transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); |
| } |
| |
| .animation-preview:hover { |
| transform: scale(1.05); |
| } |
| |
| .tooltip { |
| visibility: hidden; |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| |
| .has-tooltip:hover .tooltip { |
| visibility: visible; |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div> |
| |
| |
| <div class="container mx-auto px-4 py-12 max-w-6xl"> |
| |
| <header class="text-center mb-12"> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">AvatarSync Studio</h1> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Transform your image and audio into a personalized animated avatar with synchronized movements</p> |
| <div class="flex justify-center mt-4"> |
| <div class="w-16 h-1 bg-indigo-500 rounded-full"></div> |
| </div> |
| </header> |
| |
| |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden mb-12"> |
| |
| <div class="flex justify-between items-center px-8 py-4 border-b"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center">1</div> |
| <span class="font-medium text-indigo-600">Upload Media</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center">2</div> |
| <span class="font-medium text-gray-500">Customize</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center">3</div> |
| <span class="font-medium text-gray-500">Generate</span> |
| </div> |
| </div> |
| |
| |
| <div class="p-8"> |
| |
| <div id="step1" class=""> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Upload Your Media</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> |
| |
| <div class="space-y-4"> |
| <h3 class="text-lg font-medium text-gray-700 flex items-center"> |
| <i data-feather="image" class="mr-2"></i> Avatar Image |
| </h3> |
| <div class="dropzone rounded-lg p-8 text-center cursor-pointer" id="imageDropzone"> |
| <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i> |
| <p class="text-gray-500 mb-2">Drag & drop your image here</p> |
| <p class="text-sm text-gray-400">or click to browse files</p> |
| <input type="file" id="imageInput" accept="image/*" class="hidden"> |
| </div> |
| <div class="flex justify-center"> |
| <button id="clearImageBtn" class="text-sm text-gray-500 hover:text-gray-700 flex items-center" disabled> |
| <i data-feather="trash-2" class="w-4 h-4 mr-1"></i> Clear |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-4"> |
| <h3 class="text-lg font-medium text-gray-700 flex items-center"> |
| <i data-feather="music" class="mr-2"></i> Audio Track |
| </h3> |
| <div class="dropzone rounded-lg p-8 text-center cursor-pointer" id="audioDropzone"> |
| <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i> |
| <p class="text-gray-500 mb-2">Drag & drop your audio file here</p> |
| <p class="text-sm text-gray-400">or click to browse files</p> |
| <input type="file" id="audioInput" accept="audio/*" class="hidden"> |
| </div> |
| <div class="flex justify-center"> |
| <button id="clearAudioBtn" class="text-sm text-gray-500 hover:text-gray-700 flex items-center" disabled> |
| <i data-feather="trash-2" class="w-4 h-4 mr-1"></i> Clear |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-end"> |
| <button id="nextStep1Btn" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-lg flex items-center disabled:opacity-50" disabled> |
| Next <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="step2" class="hidden"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Customize Your Animation</h2> |
| |
| <div class="bg-gray-100 rounded-xl p-4 mb-6"> |
| <canvas id="previewCanvas" class="w-full h-64 md:h-96 mx-auto"></canvas> |
| </div> |
| |
| <div class="bg-gray-100 rounded-xl p-4"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-gray-700">Audio Timeline</span> |
| <button id="playPauseBtn" class="text-indigo-500 hover:text-indigo-700"> |
| <i data-feather="play" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div class="relative h-2 bg-gray-300 rounded-full"> |
| <div id="progressBar" class="absolute top-0 left-0 h-full bg-indigo-500 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Customization</h3> |
| |
| |
| <div class="mb-6"> |
| <h4 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Color Scheme</h4> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-sm text-gray-600 mb-1">Primary Color</label> |
| <input type="color" class="color-picker" value="#4F46E5" id="primaryColor"> |
| </div> |
| <div> |
| <label class="block text-sm text-gray-600 mb-1">Secondary Color</label> |
| <input type="color" class="color-picker" value="#EC4899" id="secondaryColor"> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <h4 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Theme Style</h4> |
| <div class="grid grid-cols-3 gap-2"> |
| <div> |
| <input type="radio" name="theme" id="theme-light" value="light" class="hidden" checked> |
| <label for="theme-light" class="theme-selector block p-2 border rounded-lg cursor-pointer text-center"> |
| <div class="w-full h-16 bg-gradient-to-br from-gray-100 to-gray-200 rounded-md mb-1"></div> |
| <span class="text-xs">Light</span> |
| </label> |
| </div> |
| <div> |
| <input type="radio" name="theme" id="theme-dark" value="dark" class="hidden"> |
| <label for="theme-dark" class="theme-selector block p-2 border rounded-lg cursor-pointer text-center"> |
| <div class="w-full h-16 bg-gradient-to-br from-gray-800 to-gray-900 rounded-md mb-1"></div> |
| <span class="text-xs">Dark</span> |
| </label> |
| </div> |
| <div> |
| <input type="radio" name="theme" id="theme-neon" value="neon" class="hidden"> |
| <label for="theme-neon" class="theme-selector block p-2 border rounded-lg cursor-pointer text-center"> |
| <div class="w-full h-16 bg-gradient-to-br from-purple-900 to-pink-600 rounded-md mb-1"></div> |
| <span class="text-xs">Neon</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <h4 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Animation Style</h4> |
| <select class="w-full px-3 py-2 text-gray-700 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option>3D Cartoon</option> |
| <option>2D Minimal</option> |
| <option>Realistic</option> |
| <option>Anime Style</option> |
| <option>Pixel Art</option> |
| </select> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <h4 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Motion Intensity</h4> |
| <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="motionRange"> |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> |
| <span>Subtle</span> |
| <span>Dynamic</span> |
| </div> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <h4 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Sync Options</h4> |
| <div class="space-y-2"> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" class="rounded text-indigo-500" checked> |
| <span>Sync to Beat</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" class="rounded text-indigo-500" checked> |
| <span>Lip Sync</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" class="rounded text-indigo-500"> |
| <span>Head Movement</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" class="rounded text-indigo-500" checked> |
| <span>Hand Gestures</span> |
| </label> |
| </div> |
| </div> |
| |
| <div class="flex justify-between"> |
| <button id="backStep2Btn" class="text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg flex items-center"> |
| <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> Back |
| </button> |
| <button id="nextStep2Btn" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-lg flex items-center"> |
| Next <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="step3" class="hidden"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Generate Your Animated Avatar</h2> |
| |
| <div class="bg-gray-100 rounded-xl p-8 text-center mb-8"> |
| <div id="processingAnimation" class="flex justify-center mb-4"> |
| <div class="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div> |
| </div> |
| <h3 class="text-xl font-medium text-gray-800 mb-2">Processing Your Animation</h3> |
| <p class="text-gray-600 max-w-md mx-auto">We're synchronizing your avatar with the audio and applying your customizations. This may take a few moments.</p> |
| <div class="w-full bg-gray-300 rounded-full h-2.5 mt-6"> |
| <div id="progressBar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| |
| <div id="resultSection" class="hidden"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> |
| <div class="bg-gray-100 rounded-xl p-4"> |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Preview</h3> |
| <div class="animation-preview bg-white rounded-lg overflow-hidden shadow-md"> |
| <video id="resultVideo" class="w-full" controls></video> |
| </div> |
| </div> |
| <div class="space-y-6"> |
| <div> |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Export Options</h3> |
| <div class="grid grid-cols-2 gap-4"> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 rounded-lg flex flex-col items-center justify-center"> |
| <i data-feather="download" class="w-6 h-6 mb-2"></i> |
| <span>Download Video</span> |
| </button> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 rounded-lg flex flex-col items-center justify-center"> |
| <i data-feather="image" class="w-6 h-6 mb-2"></i> |
| <span>Download GIF</span> |
| </button> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Share</h3> |
| <div class="flex space-x-3"> |
| <button class="bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-full"> |
| <i data-feather="facebook" class="w-5 h-5"></i> |
| </button> |
| <button class="bg-pink-500 hover:bg-pink-600 text-white p-3 rounded-full"> |
| <i data-feather="instagram" class="w-5 h-5"></i> |
| </button> |
| <button class="bg-blue-400 hover:bg-blue-500 text-white p-3 rounded-full"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </button> |
| <button class="bg-gray-800 hover:bg-gray-900 text-white p-3 rounded-full"> |
| <i data-feather="share-2" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Save Project</h3> |
| <div class="flex items-center space-x-4"> |
| <input type="text" placeholder="Project Name" class="flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| <button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg"> |
| Save |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="flex justify-center space-x-4"> |
| <button id="newProjectBtn" class="bg-white border border-indigo-500 text-indigo-500 hover:bg-indigo-50 px-6 py-2 rounded-lg flex items-center"> |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> Create New |
| </button> |
| <button id="helpBtn" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-lg flex items-center"> |
| <i data-feather="help-circle" class="w-4 h-4 mr-2"></i> How to Use |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-16"> |
| <h2 class="text-2xl font-semibold text-gray-800 text-center mb-8">Features</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow"> |
| <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="sliders" class="text-indigo-500 w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-800 mb-2">Advanced Customization</h3> |
| <p class="text-gray-600">Fine-tune colors, themes, and animation styles to match your brand or personal style.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow"> |
| <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="zap" class="text-indigo-500 w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-800 mb-2">Real-time Sync</h3> |
| <p class="text-gray-600">Perfect synchronization between audio and avatar movements for natural-looking animations.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow"> |
| <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="download" class="text-indigo-500 w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-800 mb-2">Multiple Formats</h3> |
| <p class="text-gray-600">Export as high-quality video or GIF for use on any platform or device.</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <footer class="text-center text-gray-600 text-sm"> |
| <p>© 2023 AvatarSync Studio. All rights reserved.</p> |
| <p class="mt-1">Made with <i data-feather="heart" class="w-4 h-4 inline text-red-500"></i> for content creators</p> |
| </footer> |
| </div> |
| |
| <script> |
| |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x4f46e5, |
| backgroundColor: 0xf5f7fa, |
| size: 0.8 |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const imageDropzone = document.getElementById('imageDropzone'); |
| const audioDropzone = document.getElementById('audioDropzone'); |
| const imageInput = document.getElementById('imageInput'); |
| const audioInput = document.getElementById('audioInput'); |
| const clearImageBtn = document.getElementById('clearImageBtn'); |
| const clearAudioBtn = document.getElementById('clearAudioBtn'); |
| const nextStep1Btn = document.getElementById('nextStep1Btn'); |
| |
| let hasImage = false; |
| let hasAudio = false; |
| |
| |
| imageDropzone.addEventListener('click', () => imageInput.click()); |
| imageInput.addEventListener('change', handleImageFile); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| imageDropzone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| imageDropzone.addEventListener(eventName, highlightImage, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| imageDropzone.addEventListener(eventName, unhighlightImage, false); |
| }); |
| |
| imageDropzone.addEventListener('drop', handleImageDrop, false); |
| |
| |
| audioDropzone.addEventListener('click', () => audioInput.click()); |
| audioInput.addEventListener('change', handleAudioFile); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| audioDropzone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| audioDropzone.addEventListener(eventName, highlightAudio, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| audioDropzone.addEventListener(eventName, unhighlightAudio, false); |
| }); |
| |
| audioDropzone.addEventListener('drop', handleAudioDrop, false); |
| |
| |
| clearImageBtn.addEventListener('click', clearImage); |
| clearAudioBtn.addEventListener('click', clearAudio); |
| |
| nextStep1Btn.addEventListener('click', goToStep2); |
| document.getElementById('backStep2Btn').addEventListener('click', goToStep1); |
| document.getElementById('nextStep2Btn').addEventListener('click', goToStep3); |
| document.getElementById('newProjectBtn').addEventListener('click', resetAll); |
| document.getElementById('helpBtn').addEventListener('click', showHelp); |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| function highlightImage() { |
| imageDropzone.classList.add('active'); |
| } |
| |
| function unhighlightImage() { |
| imageDropzone.classList.remove('active'); |
| } |
| |
| function highlightAudio() { |
| audioDropzone.classList.add('active'); |
| } |
| |
| function unhighlightAudio() { |
| audioDropzone.classList.remove('active'); |
| } |
| |
| function handleImageDrop(e) { |
| const dt = e.dataTransfer; |
| const file = dt.files[0]; |
| handleImageFile({ target: { files: [file] } }); |
| } |
| |
| function handleAudioDrop(e) { |
| const dt = e.dataTransfer; |
| const file = dt.files[0]; |
| handleAudioFile({ target: { files: [file] } }); |
| } |
| |
| function handleImageFile(e) { |
| const file = e.target.files[0]; |
| if (file && file.type.match('image.*')) { |
| const reader = new FileReader(); |
| |
| reader.onload = function(e) { |
| imageDropzone.innerHTML = ` |
| <div class="flex flex-col items-center"> |
| <img src="${e.target.result}" class="h-32 object-contain mb-2" alt="Preview"> |
| <p class="text-sm text-gray-600">${file.name}</p> |
| </div> |
| `; |
| hasImage = true; |
| clearImageBtn.disabled = false; |
| checkNextButton(); |
| }; |
| |
| reader.readAsDataURL(file); |
| } |
| } |
| |
| function handleAudioFile(e) { |
| const file = e.target.files[0]; |
| if (file && file.type.match('audio.*')) { |
| const reader = new FileReader(); |
| |
| reader.onload = function(e) { |
| audioDropzone.innerHTML = ` |
| <div class="flex flex-col items-center"> |
| <i data-feather="music" class="w-12 h-12 mx-auto text-indigo-400 mb-3"></i> |
| <p class="text-sm text-gray-600 truncate w-full">${file.name}</p> |
| </div> |
| `; |
| feather.replace(); |
| hasAudio = true; |
| clearAudioBtn.disabled = false; |
| checkNextButton(); |
| }; |
| |
| reader.readAsDataURL(file); |
| } |
| } |
| |
| function clearImage() { |
| imageDropzone.innerHTML = ` |
| <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i> |
| <p class="text-gray-500 mb-2">Drag & drop your image here</p> |
| <p class="text-sm text-gray-400">or click to browse files</p> |
| `; |
| feather.replace(); |
| imageInput.value = ''; |
| hasImage = false; |
| clearImageBtn.disabled = true; |
| checkNextButton(); |
| } |
| |
| function clearAudio() { |
| audioDropzone.innerHTML = ` |
| <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i> |
| <p class="text-gray-500 mb-2">Drag & drop your audio file here</p> |
| <p class="text-sm text-gray-400">or click to browse files</p> |
| `; |
| feather.replace(); |
| audioInput.value = ''; |
| hasAudio = false; |
| clearAudioBtn.disabled = true; |
| checkNextButton(); |
| } |
| |
| function checkNextButton() { |
| nextStep1Btn.disabled = !(hasImage && hasAudio); |
| } |
| |
| function goToStep2() { |
| document.getElementById('step1').classList.add('hidden'); |
| document.getElementById('step2').classList.remove('hidden'); |
| |
| |
| setTimeout(() => { |
| const canvas = document.getElementById('previewCanvas'); |
| const ctx = canvas.getContext('2d'); |
| |
| |
| canvas.width = canvas.offsetWidth; |
| canvas.height = canvas.offsetHeight; |
| |
| |
| ctx.fillStyle = '#4F46E5'; |
| ctx.beginPath(); |
| ctx.arc(canvas.width/2, canvas.height/2, 80, 0, Math.PI * 2); |
| ctx.fill(); |
| |
| ctx.fillStyle = '#ffffff'; |
| ctx.beginPath(); |
| ctx.arc(canvas.width/2 - 30, canvas.height/2 - 20, 10, 0, Math.PI * 2); |
| ctx.arc(canvas.width/2 + 30, canvas.height/2 - 20, 10, 0, Math.PI * 2); |
| ctx.fill(); |
| |
| ctx.beginPath(); |
| ctx.arc(canvas.width/2, canvas.height/2 + 20, 30, 0, Math.PI); |
| ctx.strokeStyle = '#ffffff'; |
| ctx.lineWidth = 3; |
| ctx.stroke(); |
| }, 300); |
| } |
| |
| function goToStep1() { |
| document.getElementById('step2').classList.add('hidden'); |
| document.getElementById('step1').classList.remove('hidden'); |
| } |
| |
| function goToStep3() { |
| document.getElementById('step2').classList.add('hidden'); |
| document.getElementById('step3').classList.remove('hidden'); |
| |
| |
| const progressBar = document.getElementById('progressBar'); |
| const processingAnimation = document.getElementById('processingAnimation'); |
| const resultSection = document.getElementById('resultSection'); |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += 5; |
| progressBar.style.width = `${progress}%`; |
| |
| if (progress >= 100) { |
| clearInterval(interval); |
| processingAnimation.classList.add('hidden'); |
| resultSection.classList.remove('hidden'); |
| |
| |
| const resultVideo = document.getElementById('resultVideo'); |
| resultVideo.src = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"; |
| resultVideo.load(); |
| } |
| }, 200); |
| } |
| function showHelp() { |
| alert("How to use AvatarSync Studio:\n\n1. Upload an image (your avatar) and an audio file\n2. Customize the animation style and colors\n3. Generate your animated avatar\n4. Download or share your creation!"); |
| } |
| |
| function resetAll() { |
| document.getElementById('step3').classList.add('hidden'); |
| document.getElementById('step1').classList.remove('hidden'); |
| document.getElementById('processingAnimation').classList.remove('hidden'); |
| document.getElementById('resultSection').classList.add('hidden'); |
| document.getElementById('progressBar').style.width = '0%'; |
| |
| clearImage(); |
| clearAudio(); |
| } |
| |
| |
| document.getElementById('playPauseBtn').addEventListener('click', function() { |
| const icon = this.querySelector('i'); |
| if (icon.dataset.feather === 'play') { |
| icon.dataset.feather = 'pause'; |
| feather.replace(); |
| |
| } else { |
| icon.dataset.feather = 'play'; |
| feather.replace(); |
| |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
