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 =
`
`;
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');
}