|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Help - AvatarSync Studio</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-12 max-w-4xl"> |
|
|
<header class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2">How to Use AvatarSync Studio</h1> |
|
|
<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 p-8 mb-8"> |
|
|
<div class="space-y-8"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4"> |
|
|
<i data-feather="upload" class="text-indigo-500 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">1. Upload Your Media</h3> |
|
|
<p class="text-gray-600">Start by uploading an image file for your avatar and an audio file that you want to sync with. Supported formats: JPG, PNG for images; MP3, WAV for audio.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4"> |
|
|
<i data-feather="sliders" class="text-indigo-500 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">2. Customize Your Animation</h3> |
|
|
<p class="text-gray-600">Choose from different animation styles, adjust colors, and tweak motion intensity. Preview how your avatar will move in real-time.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4"> |
|
|
<i data-feather="zap" class="text-indigo-500 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">3. Generate Your Avatar</h3> |
|
|
<p class="text-gray-600">Click the generate button to create your animated avatar. Processing time depends on the length of your audio.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4"> |
|
|
<i data-feather="download" class="text-indigo-500 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">4. Download & Share</h3> |
|
|
<p class="text-gray-600">Once processed, download your animated avatar as a video or GIF, or share it directly to social media platforms.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-xl p-8"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Tips for Best Results</h2> |
|
|
<ul class="space-y-3 text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i> |
|
|
<span>Use high-quality images (minimum 500x500 pixels) for clearer animations</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i> |
|
|
<span>For best lip-sync results, use clear vocal audio without background music</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i> |
|
|
<span>Experiment with different motion intensities to find your preferred style</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i> |
|
|
<span>Save your project if you want to make changes later</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-8"> |
|
|
<a href="index.html" class="inline-flex items-center text-indigo-500 hover:text-indigo-700 font-medium"> |
|
|
<i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> Back to AvatarSync Studio |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
