| <!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> |
