Dynamic server count on servers page

WHAT WAS DONE:
- Hero text now shows dynamic count from API
- 'Nine Minecraft experiences' → '[count] Minecraft experiences'
- Count updates when servers load

Signed-off-by: Claude (Chronicler #60) <claude@firefrostgaming.com>
This commit is contained in:
Claude (Chronicler #60)
2026-04-05 08:59:33 +00:00
parent 4a4afe92b8
commit 2f6764027e

View File

@@ -1,13 +1,13 @@
--- ---
layout: layouts/base.njk layout: layouts/base.njk
title: Our Servers title: Our Servers
description: Nine Minecraft experiences. One community built to last. All servers available to all subscribers. description: Minecraft experiences. One community built to last. All servers available to all subscribers.
--- ---
<!-- SERVERS PAGE - HERO --> <!-- SERVERS PAGE - HERO -->
<div style="padding: 100px 40px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%); text-align: center;"> <div style="padding: 100px 40px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%); text-align: center;">
<h1 style="font-size: 4rem; font-weight: 900; margin-bottom: 30px; color: #ffffff; text-shadow: 2px 2px 8px rgba(0,0,0,0.7);">Our Servers</h1> <h1 style="font-size: 4rem; font-weight: 900; margin-bottom: 30px; color: #ffffff; text-shadow: 2px 2px 8px rgba(0,0,0,0.7);">Our Servers</h1>
<p style="font-size: 1.5rem; color: #a8dadc; max-width: 900px; margin: 0 auto 40px; line-height: 1.8;">Nine Minecraft experiences. One community built to last.</p> <p style="font-size: 1.5rem; color: #a8dadc; max-width: 900px; margin: 0 auto 40px; line-height: 1.8;"><span id="server-count">Multiple</span> Minecraft experiences. One community built to last.</p>
<p style="font-size: 1.8rem; color: #FFD700; font-weight: 700;">All servers available to all subscribers</p> <p style="font-size: 1.8rem; color: #FFD700; font-weight: 700;">All servers available to all subscribers</p>
</div> </div>
@@ -36,6 +36,7 @@ description: Nine Minecraft experiences. One community built to last. All server
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const grid = document.getElementById('server-grid'); const grid = document.getElementById('server-grid');
const countEl = document.getElementById('server-count');
const WORKER_URL = 'https://servers-api.michael-b25.workers.dev'; const WORKER_URL = 'https://servers-api.michael-b25.workers.dev';
function fetchServers() { function fetchServers() {
@@ -47,6 +48,9 @@ document.addEventListener("DOMContentLoaded", () => {
return; return;
} }
// Update the count in the hero
countEl.textContent = data.servers.length;
grid.innerHTML = data.servers.map(server => { grid.innerHTML = data.servers.map(server => {
const isOnline = server.status === 'Online'; const isOnline = server.status === 'Online';
const statusColor = isOnline ? '#4ecdc4' : '#ff6b35'; const statusColor = isOnline ? '#4ecdc4' : '#ff6b35';