File size: 3,883 Bytes
5c17346 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Avatar API Fetcher</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-100 min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
<h1 class="text-3xl font-bold text-gray-800 mb-6">Avatar API Fetcher</h1>
<div class="mb-8">
<h2 class="text-xl font-semibold text-gray-700 mb-4">How to Fetch with X-Avatar-Key</h2>
<div class="bg-gray-50 p-4 rounded-lg">
<ol class="list-decimal pl-5 space-y-3 text-gray-700">
<li>First, obtain your API key from the avatar service provider</li>
<li>Include the X-Avatar-Key in your request headers</li>
<li>Make a GET request to the API endpoint</li>
<li>Process the response data</li>
</ol>
</div>
</div>
<div class="space-y-6">
<div>
<label for="apiKey" class="block text-sm font-medium text-gray-700 mb-1">X-Avatar-Key</label>
<input type="text" id="apiKey" placeholder="Enter your API key"
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<button id="fetchBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-center gap-2">
<i data-feather="download"></i>
Fetch Avatar Data
</button>
<div id="resultContainer" class="hidden mt-4 p-4 bg-gray-50 rounded-lg">
<div class="flex items-center gap-4">
<div id="avatarPreview" class="w-20 h-20 rounded-full bg-gray-200 overflow-hidden"></div>
<div>
<h3 id="avatarName" class="font-medium text-gray-800"></h3>
<p id="avatarDetails" class="text-sm text-gray-600"></p>
</div>
</div>
</div>
<div id="errorContainer" class="hidden mt-4 p-4 bg-red-50 text-red-700 rounded-lg"></div>
</div>
<div class="mt-8 border-t pt-6">
<h3 class="text-lg font-medium text-gray-800 mb-3">Example Code</h3>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-md overflow-x-auto text-sm">
<code>
async function fetchAvatarData(apiKey) {
const response = await fetch('https://api.avatar-service.com/v1/avatar', {
headers: {
'X-Avatar-Key': apiKey,
'Content-Type': 'application/json'
}
});
if (!response.ok) throw new Error('Failed to fetch');
return await response.json();
}
</code>
</pre>
</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>
feather.replace();
document.getElementById('fetchBtn').addEventListener('click', fetchAvatarData);
</script>
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
</body>
</html> |