From ac99b90fdd0aff01faebcbf354acd7c9e0e7aaa3 Mon Sep 17 00:00:00 2001
From: "Claude (Chronicler #56)" <claude@firefrostgaming.com>
Date: Fri, 3 Apr 2026 05:10:54 +0000
Subject: [PATCH] feat: dynamic server status with Cloudflare Worker
 integration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WHAT WAS DONE:
Replaced static Minecraft servers section with dynamic real-time status
display powered by Cloudflare Workers + Pterodactyl Client API.

FEATURES IMPLEMENTED:
- Real-time server status (Online/Offline) with pulse animation
- Live player counts
- Auto-refresh every 60 seconds
- Graceful error handling
- NO IP addresses displayed (Discord-gated security)
- 'Join Discord' CTA for connection details

TECHNICAL DETAILS:
- Fetches from: https://servers-api.michael-b25.workers.dev
- Edge-cached (60 second TTL)
- Zero manual updates required
- IPs stripped at Worker level (never touch frontend)

SECURITY:
- Server IPs available only in Discord (Awakened+ tier)
- Drives community engagement and subscription conversion
- Prevents port scanning and unauthorized access

When servers added/removed in Pterodactyl, website auto-updates
within 60 seconds. Zero code changes needed.

Fire + Frost + Foundation = Where Love Builds Legacy 💙

Signed-off-by: Claude (Chronicler #56) <claude@firefrostgaming.com>
---
 servers.njk | 129 +++++++++++++++++++++++++++++++---------------------
 1 file changed, 76 insertions(+), 53 deletions(-)

diff --git a/servers.njk b/servers.njk
index 3e76097..bb595e4 100644
--- a/servers.njk
+++ b/servers.njk
@@ -11,68 +11,91 @@ description: Nine Minecraft experiences. One community built to last. All server
   <p style="font-size: 1.8rem; color: #FFD700; font-weight: 700;">All servers available to all subscribers</p>
 </div>
 
-<!-- MINECRAFT SERVERS -->
+<!-- MINECRAFT SERVERS - DYNAMIC -->
 <div style="padding: 100px 60px; background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);">
   <div style="max-width: 1400px; margin: 0 auto;">
     <div style="text-align: center; margin-bottom: 80px;">
-      <h2 style="font-size: 3rem; margin-bottom: 20px; color: #e8f4f8; font-weight: 800;">Minecraft Servers</h2>
-      <p style="font-size: 1.3rem; color: #a8dadc; line-height: 1.7;">From creative building to technical challenges - find your adventure.</p>
+      <h2 style="font-size: 3rem; margin-bottom: 20px; color: #e8f4f8; font-weight: 800;">Live Server Status</h2>
+      <p style="font-size: 1.3rem; color: #a8dadc; line-height: 1.7;">Real-time status for all Firefrost Gaming servers.</p>
     </div>
     
-    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 40px;">
-      
-      <!-- Stoneblock 4 - FROST -->
-      <div style="background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(78, 205, 196, 0.05) 100%); border: 2px solid #4ecdc4; border-radius: 15px; padding: 35px;">
-        <h3 style="color: #4ecdc4; font-size: 1.8rem; margin-bottom: 15px; font-weight: 700;">Stoneblock 4</h3>
-        <p style="color: #4ecdc4; font-size: 1.1rem; margin-bottom: 20px; font-weight: 600;">stoneblock4.firefrostgaming.com</p>
-        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 15px;">Trapped in stone. Build your way out using advanced tech mods and strategic thinking. Master automation to survive and thrive.</p>
-        <p style="color: #a8dadc; font-size: 0.95rem; font-style: italic;">Perfect for tech enthusiasts and automation lovers.</p>
-      </div>
-      
-      <!-- Society: Sunlit Valley - FIRE -->
-      <div style="background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%); border: 2px solid #ff6b35; border-radius: 15px; padding: 35px;">
-        <h3 style="color: #ff6b35; font-size: 1.8rem; margin-bottom: 15px; font-weight: 700;">Society: Sunlit Valley</h3>
-        <p style="color: #4ecdc4; font-size: 1.1rem; margin-bottom: 20px; font-weight: 600;">society.firefrostgaming.com</p>
-        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 15px;">Build your dream community in a peaceful valley. Focus on creativity, collaboration, and creating something beautiful together.</p>
-        <p style="color: #a8dadc; font-size: 0.95rem; font-style: italic;">Perfect for builders and community creators.</p>
-      </div>
-      
-      <!-- All The Mods 10 - ARCANE -->
-      <div style="background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%); border: 2px solid #A855F7; border-radius: 15px; padding: 35px;">
-        <h3 style="color: #A855F7; font-size: 1.8rem; margin-bottom: 15px; font-weight: 700;">All The Mods 10</h3>
-        <p style="color: #4ecdc4; font-size: 1.1rem; margin-bottom: 20px; font-weight: 600;">atm10.firefrostgaming.com</p>
-        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 15px;">Kitchen sink modpack with everything you could want. Explore tech, magic, exploration, and more in one massive experience.</p>
-        <p style="color: #a8dadc; font-size: 0.95rem; font-style: italic;">Perfect for veteran modded players.</p>
-      </div>
-      
-      <!-- All the Mods 10: To the Sky - FROST -->
-      <div style="background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(78, 205, 196, 0.05) 100%); border: 2px solid #4ecdc4; border-radius: 15px; padding: 35px;">
-        <h3 style="color: #4ecdc4; font-size: 1.8rem; margin-bottom: 15px; font-weight: 700;">All the Mods 10: To the Sky</h3>
-        <p style="color: #4ecdc4; font-size: 1.1rem; margin-bottom: 20px; font-weight: 600;">atm10tts.firefrostgaming.com</p>
-        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 15px;">Skyblock meets ATM10. Start with nothing and build an empire in the void using advanced mods and careful planning.</p>
-        <p style="color: #a8dadc; font-size: 0.95rem; font-style: italic;">Perfect for skyblock veterans seeking a challenge.</p>
-      </div>
-      
-      <!-- All the Mons - ARCANE -->
-      <div style="background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%); border: 2px solid #A855F7; border-radius: 15px; padding: 35px;">
-        <h3 style="color: #A855F7; font-size: 1.8rem; margin-bottom: 15px; font-weight: 700;">All the Mons</h3>
-        <p style="color: #4ecdc4; font-size: 1.1rem; margin-bottom: 20px; font-weight: 600;">atmons.firefrostgaming.com</p>
-        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 15px;">Catch, train, and battle Pokémon in a vibrant world. Community-focused gameplay with familiar mechanics and friendly competition.</p>
-        <p style="color: #a8dadc; font-size: 0.95rem; font-style: italic;">Perfect for Pokémon fans and collectors.</p>
-      </div>
-      
-      <!-- Mythcraft 5 - FIRE -->
-      <div style="background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%); border: 2px solid #ff6b35; border-radius: 15px; padding: 35px;">
-        <h3 style="color: #ff6b35; font-size: 1.8rem; margin-bottom: 15px; font-weight: 700;">Mythcraft 5</h3>
-        <p style="color: #4ecdc4; font-size: 1.1rem; margin-bottom: 20px; font-weight: 600;">mythcraft5.firefrostgaming.com</p>
-        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 15px;">Magic and adventure await. Explore a world of spells, quests, and legendary creatures in this community-driven fantasy experience.</p>
-        <p style="color: #a8dadc; font-size: 0.95rem; font-style: italic;">Perfect for RPG enthusiasts and adventurers.</p>
-      </div>
-      
+    <div id="server-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 40px;">
+      <p style="color: #a8dadc; text-align: center; font-size: 1.2rem;">Connecting to the fleet...</p>
+    </div>
+
+    <!-- Discord Access Notice -->
+    <div style="margin-top: 60px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%); border: 2px solid #A855F7; border-radius: 15px; padding: 40px; text-align: center;">
+      <div style="font-size: 2.5rem; margin-bottom: 15px;">🔒</div>
+      <h3 style="color: #A855F7; font-size: 1.8rem; margin-bottom: 15px; font-weight: 700;">Server IPs Available in Discord</h3>
+      <p style="color: #e8f4f8; font-size: 1.2rem; line-height: 1.7; margin-bottom: 25px;">Connection details are available to Awakened+ subscribers in our Discord community.</p>
+      <a href="/discord" style="display: inline-block; background: linear-gradient(135deg, #A855F7 0%, #4ECDC4 100%); color: white; padding: 18px 45px; text-decoration: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; transition: transform 0.3s;">Join Discord →</a>
     </div>
   </div>
 </div>
 
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+  const grid = document.getElementById('server-grid');
+  const WORKER_URL = 'https://servers-api.michael-b25.workers.dev';
+
+  function fetchServers() {
+    fetch(WORKER_URL)
+      .then(res => res.json())
+      .then(data => {
+        if (data.error || !data.servers || data.servers.length === 0) {
+          grid.innerHTML = `<p style="color: #ff6b35; text-align: center; font-size: 1.2rem;">Unable to connect to server status. Please try again later.</p>`;
+          return;
+        }
+
+        grid.innerHTML = data.servers.map(server => {
+          const isOnline = server.status === 'Online';
+          const statusColor = isOnline ? '#4ecdc4' : '#ff6b35';
+          const playerText = isOnline ? `${server.players} Players` : 'Offline';
+          
+          return `
+            <div style="background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(78, 205, 196, 0.05) 100%); border: 2px solid ${statusColor}; border-radius: 15px; padding: 35px;">
+              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+                <h3 style="color: #e8f4f8; font-size: 1.8rem; font-weight: 700; margin: 0;">${server.name}</h3>
+                <span class="status-badge ${server.status.toLowerCase()}" style="background: ${isOnline ? 'rgba(78, 205, 196, 0.2)' : 'rgba(255, 107, 53, 0.2)'}; color: ${statusColor}; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                  ${isOnline ? '<span class="pulse-dot"></span>' : ''} ${server.status}
+                </span>
+              </div>
+              <p style="color: #a8dadc; font-size: 1rem; margin-bottom: 15px;">${server.description || 'Minecraft Server'}</p>
+              <p style="color: ${statusColor}; font-size: 1.1rem; font-weight: 600;">${playerText}</p>
+            </div>
+          `;
+        }).join('');
+      })
+      .catch(err => {
+        grid.innerHTML = `<p style="color: #ff6b35; text-align: center; font-size: 1.2rem;">Connection error. Please check back shortly.</p>`;
+      });
+  }
+
+  // Initial fetch
+  fetchServers();
+  
+  // Auto-refresh every 60 seconds
+  setInterval(fetchServers, 60000);
+});
+</script>
+
+<style>
+.pulse-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: #4ecdc4;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(78, 205, 196, 0.7); }
+  70% { box-shadow: 0 0 0 6px rgba(78, 205, 196, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(78, 205, 196, 0); }
+}
+</style>
+
 <!-- SPECIAL SERVICES -->
 <div style="padding: 100px 60px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);">
   <div style="max-width: 1400px; margin: 0 auto;">