Activity Buttons

public/css/index.css

@@ -224,6 +224,38 @@ ul {
 	color: #f0b232;
 }
 
+.activity-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	margin-top: 0.75rem;
+}
+
+.activity-button {
+	background-color: #5865f2;
+	color: white;
+	border: none;
+	border-radius: 3px;
+	padding: 0.5rem 1rem;
+	font-size: 0.9rem;
+	cursor: pointer;
+	text-decoration: none;
+	transition: background-color 0.2s ease;
+	display: inline-block;
+}
+
+.activity-button:hover {
+	background-color: #4752c4;
+	text-decoration: none;
+}
+
+.activity-button.disabled {
+	background-color: #4e5058;
+	cursor: default;
+	pointer-events: none;
+	opacity: 0.8;
+}
+
 @media (max-width: 600px) {
 	html {
 		font-size: clamp(14px, 2vw, 16px);
@@ -338,6 +370,17 @@ ul {
 		margin-top: 0.25rem;
 		width: 100%;
 	}
+
+	.activity-buttons {
+		justify-content: center;
+		margin-top: 0.5rem;
+		width: 100%;
+	}
+
+	.activity-button {
+		font-size: 0.85rem;
+		padding: 0.4rem 0.8rem;
+	}
 }
 
 /* readme :p */

public/js/index.js

@@ -156,6 +156,26 @@ function buildActivityHTML(activity) {
 			`
 			: "";
 
+	const activityButtons = activity.buttons && activity.buttons.length > 0
+		? `<div class="activity-buttons">
+			${activity.buttons.map((button, index) => {
+				const buttonLabel = typeof button === 'string' ? button : button.label;
+				let buttonUrl = null;
+				if (typeof button === 'object' && button.url) {
+					buttonUrl = button.url;
+				}
+				else if (index === 0 && activity.url) {
+					buttonUrl = activity.url;
+				}
+				if (buttonUrl) {
+					return `<a href="${buttonUrl}" class="activity-button" target="_blank" rel="noopener noreferrer">${buttonLabel}</a>`;
+				} else {
+					return `<span class="activity-button disabled">${buttonLabel}</span>`;
+				}
+			}).join('')}
+		</div>`
+		: '';
+
 	return `
 		<li class="activity">
 			${art ? `<img class="activity-art" src="${art}" alt="Art">` : ""}
@@ -166,6 +186,7 @@ function buildActivityHTML(activity) {
 				</div>
 				${activity.details ? `<div class="activity-detail">${activity.details}</div>` : ""}
 				${activity.state ? `<div class="activity-detail">${activity.state}</div>` : ""}
+				${activityButtons}
 				${progressBar}
 			</div>
 		</li>