<svg xmlns="http://www.w3.org/2000/svg" id="discord-status-circle" viewBox="0 0 1792 1792" width="20">
  <path d="M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"></path>
</svg>
<p id="discord-status" style="text-transform: capitalize; margin-left: 2px;"></p>

const discordUserId = '<YOUR_DISCORD_ID>'; // replace <YOUR_DISCORD_ID> with your actual user id

// Define status colors
const statusColors = {
	online: '#43b581',
	idle: '#faa61a',
	dnd: '#f04747',
	offline: '#747f8d'
};

// Define status labels
const statusLabels = {
	online: 'Online',
	idle: 'Idle',
	dnd: 'Do not Disturb',
	offline: 'Offline'
};

// Make AJAX request to Lanyard API
const xhr = new XMLHttpRequest();
xhr.open('GET', `https://api.lanyard.rest/v1/users/${discordUserId}`);
xhr.onload = function() {
	if (xhr.status === 200) {
		const data = JSON.parse(xhr.responseText);
		const status = data.data.discord_status;

		const statusLabel = statusLabels[status] || status;
    	// Update HTML to display status and activity
		const statusCircle = document.getElementById('discord-status-circle');
    	statusCircle.setAttribute('fill', statusColors[status]); // set fill color based on status
    	document.getElementById('discord-status').textContent = statusLabel;
    } else {
    	console.error(error);
    }
};
xhr.send();