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
|
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';
|
||||||
|
|||||||
Reference in New Issue
Block a user