File size: 8,321 Bytes
53920de 479a01e c897412 53920de 479a01e 53920de ca5f958 53920de | 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 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documentation | AutoCaption Magic</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<custom-navbar></custom-navbar>
<main class="flex-grow container mx-auto px-4 py-12">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-12">
<h1 class="text-4xl font-bold text-primary-500 mb-4">Documentation</h1>
<p class="text-lg text-gray-600">Learn how to get the most out of AutoCaption Magic</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-primary-100 p-3 rounded-full mr-4">
<i data-feather="book-open" class="w-6 h-6 text-primary-500"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">Getting Started</h2>
</div>
<p class="text-gray-600 mb-4">Learn how to quickly set up and start generating captions for your LoRA training datasets.</p>
<a href="#" class="text-primary-500 font-medium inline-flex items-center">Read Guide <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-primary-100 p-3 rounded-full mr-4">
<i data-feather="settings" class="w-6 h-6 text-primary-500"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">Advanced Settings</h2>
</div>
<p class="text-gray-600 mb-4">Explore all configuration options to fine-tune your caption generation results.</p>
<a href="#" class="text-primary-500 font-medium inline-flex items-center">Read Guide <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-primary-100 p-3 rounded-full mr-4">
<i data-feather="layers" class="w-6 h-6 text-primary-500"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">Batch Processing</h2>
</div>
<p class="text-gray-600 mb-4">Learn how to efficiently process multiple datasets at once with batch mode.</p>
<a href="#" class="text-primary-500 font-medium inline-flex items-center">Read Guide <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-primary-100 p-3 rounded-full mr-4">
<i data-feather="code" class="w-6 h-6 text-primary-500"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">API Reference</h2>
</div>
<p class="text-gray-600 mb-4">Integrate AutoCaption Magic into your workflow with our comprehensive API documentation.</p>
<a href="#" class="text-primary-500 font-medium inline-flex items-center">Read Guide <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-primary-100 p-3 rounded-full mr-4">
<i data-feather="alert-triangle" class="w-6 h-6 text-primary-500"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">Troubleshooting</h2>
</div>
<p class="text-gray-600 mb-4">Solutions to common issues and how to get help when you need it.</p>
<a href="#" class="text-primary-500 font-medium inline-flex items-center">Read Guide <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-primary-100 p-3 rounded-full mr-4">
<i data-feather="help-circle" class="w-6 h-6 text-primary-500"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">FAQ</h2>
</div>
<p class="text-gray-600 mb-4">Answers to frequently asked questions about AutoCaption Magic.</p>
<a href="#" class="text-primary-500 font-medium inline-flex items-center">Read Guide <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
</div>
</div>
</div>
<div class="mt-16 bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Still need help?</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold text-gray-700 mb-4">Contact Support</h3>
<p class="text-gray-600 mb-4">Our team is here to help you with any questions or issues you might have.</p>
<button class="px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg shadow-sm transition duration-300 inline-flex items-center">
<i data-feather="mail" class="w-4 h-4 mr-2"></i>
Email Support
</button>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-700 mb-4">Community Forum</h3>
<p class="text-gray-600 mb-4">Join our community of users to share tips, ask questions, and get help.</p>
<button class="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-lg shadow-sm transition duration-300 inline-flex items-center">
<i data-feather="users" class="w-4 h-4 mr-2"></i>
Visit Forum
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
});
</script>
</body>
</html> |