From 8a4fd94b6ce21389dc8aa0a2cef1bbc83ed0f9aa Mon Sep 17 00:00:00 2001
From: Krzak <admin@krzak.org>
Date: Wed, 19 Nov 2025 10:34:29 +0100
Subject: [PATCH] status widget

---
 mc.html | 383 ++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 330 insertions(+), 53 deletions(-)
diff --git a/mc.html b/mc.html
index 8730f7d..ca63e08 100644
--- a/mc.html
+++ b/mc.html
@@ -1,56 +1,333 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <title>Krzak.org - Minecraft</title>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="/styles.css" />
-        <script src="/refresh.js"></script>
-        <script src="/animations.js"></script>
-    </head>
-    <body>
-        <div class="container fade-in">
-            <h1 class="slide-down">
-                <span class="icon">
-                    <img src="/icon.svg" alt="krzak.org" />
-                </span>
-                Krzak.org
-            </h1>
-            <p>
-                <h3>Instrukcja</h3>
-                <ol>
-                    <li>
-                        Zainstalujcie fabric 1.21.10
-                    </li>
-                    <li>
-                        Zainstalujcie moda AutoModpack
-                    </li>
-                    <li>
-                        Dołączcie na krzak.org i, kiedy o to zapyta, wklejcie tekst z pliku automodpack_fingerprint.txt
-                    </li>
-                </ol>
-                <h3>Polecam też dodać nasz resourcepack</h3>
-                <h3>Do skinów polecam ely.by jak ktoś nie ma premium (nie musi)</h3>
-            </p>
-            <ul>
-                <li class="slide-up" style="animation-delay: 0.1s">
-                    <a href="">
-                        <strong>IP</strong>
-                        <span>krzak.org</span>
-                    </a>
-                </li>
-                <li class="slide-up" style="animation-delay: 0.15s">
-                    <a href="/mc/automodpack_fingerprint.txt">
-                        <strong>Fingerprint</strong>
-                        <span>automodpack_fingerprint.txt</span>
-                    </a>
-                </li>
-                <li class="slide-up" style="animation-delay: 0.2s">
-                    <a href="/mc/pack.zip">
-                        <strong>resourcepack</strong>
-                    </a>
-                </li>
-            </ul>
+<html lang="en">
+
+<head>
+    <title>Krzak.org - Minecraft</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/styles.css" />
+    <style>
+        .server-status-widget {
+            background: var(--link-bg);
+            border-radius: 16px;
+            padding: 24px;
+            border: 1px solid var(--container-border);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
+            margin: 24px 0;
+            transition: all 0.3s ease;
+        }
+
+        .status-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .status-title {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: var(--link-color);
+        }
+
+        .status-indicator {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        .status-indicator.online {
+            background-color: #4ade80;
+            box-shadow: 0 0 12px #4ade80;
+        }
+
+        .status-indicator.offline {
+            background-color: #f87171;
+            box-shadow: 0 0 12px #f87171;
+            animation: none;
+        }
+
+        @keyframes pulse {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.7;
+                transform: scale(1.1);
+            }
+        }
+
+        .status-info {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 16px;
+            margin-bottom: 16px;
+        }
+
+        .info-card {
+            background: rgba(42, 26, 94, 0.4);
+            border-radius: 12px;
+            padding: 16px;
+            border: 1px solid rgba(244, 162, 97, 0.3);
+        }
+
+        .info-label {
+            font-size: 0.85rem;
+            color: var(--subtitle-color);
+            margin-bottom: 6px;
+            font-weight: 500;
+        }
+
+        .info-value {
+            font-size: 1.3rem;
+            color: var(--text-color);
+            font-weight: 600;
+        }
+
+        .server-motd {
+            background: rgba(42, 26, 94, 0.4);
+            border-radius: 12px;
+            padding: 16px;
+            border: 1px solid rgba(244, 162, 97, 0.3);
+            font-family: 'Courier New', monospace;
+            color: var(--text-color);
+            font-size: 0.95rem;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+
+        .last-updated {
+            font-size: 0.8rem;
+            color: var(--subtitle-color);
+            text-align: right;
+            margin-top: 12px;
+            opacity: 0.8;
+        }
+
+        .loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            color: var(--subtitle-color);
+            padding: 20px;
+        }
+
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(244, 162, 97, 0.3);
+            border-top-color: var(--link-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        .error-message {
+            color: #f87171;
+            text-align: center;
+            padding: 20px;
+            background: rgba(248, 113, 113, 0.1);
+            border-radius: 12px;
+            border: 1px solid rgba(248, 113, 113, 0.3);
+        }
+
+        .players-list {
+            margin-top: 8px;
+            font-size: 0.9rem;
+            color: var(--subtitle-color);
+            line-height: 1.5;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container fade-in">
+        <h1 class="slide-down">
+            <span class="icon">
+                <img src="/icon.svg" alt="krzak.org" />
+            </span>
+            Krzak.org - Minecraft
+        </h1>
+
+        <div class="server-status-widget slide-up" style="animation-delay: 0.1s" id="statusWidget">
+            <div class="loading">
+                <div class="spinner"></div>
+                <span>Loading server status...</span>
+            </div>
         </div>
-    </body>
+
+        <div class="slide-up" style="animation-delay: 0.2s">
+            <h3>Instrukcja</h3>
+            <ol>
+                <li>Zainstalujcie fabric 1.21.10</li>
+                <li>Zainstalujcie moda AutoModpack</li>
+                <li>Dołączcie na krzak.org i, kiedy o to zapyta, wklejcie tekst z pliku automodpack_fingerprint.txt</li>
+            </ol>
+            <h3>Polecam też dodać nasz resourcepack</h3>
+            <h3>Do skinów polecam ely.by jak ktoś nie ma premium (nie musi)</h3>
+        </div>
+
+        <ul>
+            <li class="slide-up" style="animation-delay: 0.3s">
+                <a href="">
+                    <strong>IP</strong>
+                    <span>krzak.org</span>
+                </a>
+            </li>
+            <li class="slide-up" style="animation-delay: 0.35s">
+                <a href="/mc/automodpack_fingerprint.txt">
+                    <strong>Fingerprint</strong>
+                    <span>automodpack_fingerprint.txt</span>
+                </a>
+            </li>
+            <li class="slide-up" style="animation-delay: 0.4s">
+                <a href="/mc/pack.zip">
+                    <strong>resourcepack</strong>
+                </a>
+            </li>
+        </ul>
+
+        <br />
+        <ul>
+            <li class="slide-up" style="animation-delay: 0.45s">
+                <a href="/">
+                    <strong>Back</strong>
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <!-- Back to top button -->
+    <button id="back-to-top" class="back-to-top" aria-label="Back to top" title="Back to top">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="18 15 12 9 6 15"></polyline>
+        </svg>
+    </button>
+
+    <script src="/refresh.js"></script>
+    <script src="/animations.js"></script>
+    <script>
+        const SERVER_ADDRESS = 'krzak.org';
+        const REFRESH_INTERVAL = 30000; // 30 seconds
+
+        async function fetchServerStatus() {
+            try {
+                const response = await fetch(`https://api.mcsrvstat.us/3/${SERVER_ADDRESS}`);
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                console.error('Error fetching server status:', error);
+                return null;
+            }
+        }
+
+        function formatMOTD(motd) {
+            if (!motd) return 'No MOTD available';
+
+            if (typeof motd === 'object' && motd.clean) {
+                return Array.isArray(motd.clean) ? motd.clean.join('\n') : motd.clean;
+            }
+
+            if (Array.isArray(motd)) {
+                return motd.join('\n');
+            }
+
+            return motd;
+        }
+
+        function renderStatus(data) {
+            const widget = document.getElementById('statusWidget');
+
+            if (!data || !data.online) {
+                widget.innerHTML = `
+                    <div class="status-header">
+                        <div class="status-title">
+                            <div class="status-indicator offline"></div>
+                            Server Status
+                        </div>
+                    </div>
+                    <div class="error-message">
+                        Server is currently offline or unreachable
+                    </div>
+                    <div class="last-updated">
+                        Last checked: ${new Date().toLocaleTimeString()}
+                    </div>
+                `;
+                return;
+            }
+
+            const playersOnline = data.players?.online || 0;
+            const playersMax = data.players?.max || 0;
+            const version = data.version || 'Unknown';
+            const motd = formatMOTD(data.motd);
+            const playersList = data.players?.list || [];
+
+            widget.innerHTML = `
+                <div class="status-header">
+                    <div class="status-title">
+                        <div class="status-indicator online"></div>
+                        Server Status
+                    </div>
+                </div>
+                <div class="status-info">
+                    <div class="info-card">
+                        <div class="info-label">Players Online</div>
+                        <div class="info-value">${playersOnline} / ${playersMax}</div>
+                        ${playersList.length > 0 ? `
+                            <div class="players-list">
+                                ${playersList.slice(0, 10).join(', ')}${playersList.length > 10 ? '...' : ''}
+                            </div>
+                        ` : ''}
+                    </div>
+                    <div class="info-card">
+                        <div class="info-label">Version</div>
+                        <div class="info-value" style="font-size: 1.1rem;">${version}</div>
+                    </div>
+                    <div class="info-card">
+                        <div class="info-label">Server Address</div>
+                        <div class="info-value" style="font-size: 1rem;">${SERVER_ADDRESS}</div>
+                    </div>
+                </div>
+                ${motd ? `
+                    <div class="server-motd">${motd}</div>
+                ` : ''}
+                <div class="last-updated">
+                    Last updated: ${new Date().toLocaleTimeString()}
+                </div>
+            `;
+        }
+
+        async function updateStatus() {
+            const data = await fetchServerStatus();
+            renderStatus(data);
+        }
+
+        // Initial load
+        updateStatus();
+
+        // Auto-refresh every 30 seconds
+        setInterval(updateStatus, REFRESH_INTERVAL);
+    </script>
+</body>
+
 </html>
\ No newline at end of file
