File size: 4,890 Bytes
50e7e0d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!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> |