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:
@@ -1,13 +1,13 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
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 -->
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -36,6 +36,7 @@ description: Nine Minecraft experiences. One community built to last. All server
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const grid = document.getElementById('server-grid');
|
||||
const countEl = document.getElementById('server-count');
|
||||
const WORKER_URL = 'https://servers-api.michael-b25.workers.dev';
|
||||
|
||||
function fetchServers() {
|
||||
@@ -47,6 +48,9 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the count in the hero
|
||||
countEl.textContent = data.servers.length;
|
||||
|
||||
grid.innerHTML = data.servers.map(server => {
|
||||
const isOnline = server.status === 'Online';
|
||||
const statusColor = isOnline ? '#4ecdc4' : '#ff6b35';
|
||||
|
||||
Reference in New Issue
Block a user