add badges and fix clan tags, and readme issue

public/css/index.css

@@ -26,7 +26,7 @@ body {
 }
 
 .hidden {
-	display: none;
+	display: none !important;
 }
 
 .activity-header.hidden {
@@ -63,6 +63,28 @@ body {
 	border-radius: 50%;
 }
 
+.badges {
+	max-width: 700px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 0.3rem;
+	flex-wrap: wrap;
+	margin-top: 0.5rem;
+	padding: 0.5rem;
+	background-color: var(--card-bg);
+	border-radius: 10px;
+	border: 1px solid var(--border-color);
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.badge {
+	width: 26px;
+	height: 26px;
+	border-radius: 50%;
+}
+
 .decoration {
 	position: absolute;
 	top: -18px;
@@ -143,7 +165,11 @@ body {
 	align-items: center;
 	justify-content: center;
 	gap: 0.3rem;
-	padding: 0.2rem 0.3rem;
+	padding: .4rem 0.5rem;
+
+	text-align: center;
+	align-items: center;
+	justify-content: center;
 }
 
 .clan-badge img {
@@ -154,7 +180,7 @@ body {
 }
 
 .clan-badge span {
-	font-size: 1rem;
+	font-size: .9rem;
 	color: var(--text-color);
 	margin: 0;
 
@@ -409,6 +435,14 @@ ul {
 		align-items: center;
 	}
 
+	.badges {
+		max-width: 100%;
+		border-radius: 0;
+		border: none;
+		background-color: transparent;
+		margin-top: 0;
+	}
+
 	.avatar-status-wrapper {
 		flex-direction: column;
 		align-items: center;
@@ -548,7 +582,7 @@ ul {
 	border-radius: 8px;
 	border: 1px solid var(--border-color);
 
-	margin-top: 2rem;
+	margin-top: 1rem;
 
 	box-sizing: border-box;
 	overflow: hidden;
@@ -626,7 +660,8 @@ ul {
 
 @media (max-width: 600px) {
 	.readme {
-		width: 100%;
+		max-width: 100%;
+		min-width: 100%;
 		padding: 1rem;
 
 		margin-top: 1rem;

public/js/index.js

@@ -84,6 +84,7 @@ setInterval(updateElapsedAndProgress, 1000);
 const head = document.querySelector("head");
 const userId = head?.dataset.userId;
 let instanceUri = head?.dataset.instanceUri;
+let badgeURL = head?.dataset.badgeUrl;
 
 if (userId && instanceUri) {
 	if (!instanceUri.startsWith("http")) {
@@ -276,6 +277,79 @@ function buildActivityHTML(activity) {
 	`;
 }
 
+if (badgeURL && badgeURL !== "null" && userId) {
+	if (!badgeURL.startsWith("http")) {
+		badgeURL = `https://${badgeURL}`;
+	}
+
+	if (!badgeURL.endsWith("/")) {
+		badgeURL += "/";
+	}
+
+	async function loadBadges(userId, options = {}) {
+		const {
+			services = [],
+			seperated = false,
+			cache = true,
+			targetId = "badges",
+		} = options;
+
+		const params = new URLSearchParams();
+		if (services.length) params.set("services", services.join(","));
+		if (seperated) params.set("seperated", "true");
+		if (!cache) params.set("cache", "false");
+
+		const url = `${badgeURL}${userId}?${params.toString()}`;
+		const target = document.getElementById(targetId);
+		if (!target) return;
+
+		target.classList.add("hidden");
+
+		try {
+			const res = await fetch(url);
+			const json = await res.json();
+
+			if (!res.ok || !json.badges) {
+				target.textContent = "Failed to load badges.";
+				return;
+			}
+
+			const badges = Array.isArray(json.badges)
+				? json.badges
+				: Object.values(json.badges).flat();
+
+			if (badges.length === 0) {
+				target.innerHTML = "";
+				target.classList.add("hidden");
+				return;
+			}
+
+			target.innerHTML = "";
+			for (const badge of badges) {
+				const img = document.createElement("img");
+				img.src = badge.badge;
+				img.alt = badge.tooltip;
+				img.title = badge.tooltip;
+				img.className = "badge";
+				target.appendChild(img);
+			}
+
+			target.classList.remove("hidden");
+		} catch (err) {
+			console.error(err);
+			target.innerHTML = "";
+			target.classList.add("hidden");
+		}
+	}
+
+	loadBadges(userId, {
+		services: [],
+		seperated: false,
+		cache: true,
+		targetId: "badges",
+	});
+}
+
 function updatePresence(data) {
 	const avatarWrapper = document.querySelector(".avatar-wrapper");
 	const statusIndicator = avatarWrapper?.querySelector(".status-indicator");