async function fetchAvatarData() { const apiKey = document.getElementById('apiKey').value.trim(); const resultContainer = document.getElementById('resultContainer'); const errorContainer = document.getElementById('errorContainer'); const fetchBtn = document.getElementById('fetchBtn'); // Clear previous results resultContainer.classList.add('hidden'); errorContainer.classList.add('hidden'); if (!apiKey) { showError('Please enter your X-Avatar-Key'); return; } try { // Show loading state fetchBtn.disabled = true; fetchBtn.innerHTML = ` Fetching...`; feather.replace(); // Mock API call - replace with your actual API endpoint const mockAvatar = { name: "Generated Avatar", imageUrl: "https://static.photos/abstract/200x200/" + Math.floor(Math.random() * 1000), details: "This is a mock response. Replace with actual API call.", id: Math.random().toString(36).substring(2, 9) }; // Simulate network delay await new Promise(resolve => setTimeout(resolve, 1000)); // Display results document.getElementById('avatarName').textContent = mockAvatar.name; document.getElementById('avatarDetails').textContent = mockAvatar.details; document.getElementById('avatarPreview').innerHTML = `${mockAvatar.name}`; resultContainer.classList.remove('hidden'); } catch (error) { showError(`Error: ${error.message}`); } finally { // Reset button fetchBtn.disabled = false; fetchBtn.innerHTML = ` Fetch Avatar Data`; feather.replace(); } } function showError(message) { const errorContainer = document.getElementById('errorContainer'); errorContainer.textContent = message; errorContainer.classList.remove('hidden'); }