Update Status

Update the server status, with the better https://mcstatus.io API

index.html

@@ -60,6 +60,18 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
         <p>Verbinde dich jetzt: <strong>blockattack.fun</strong></p>
         <p><em>Jetzt die neuesten Features wie das Claimen von Gebieten ausprobieren!</em></p>
     </section>
+    <section id="server-status">
+        <h2>Server Status</h2>
+        <div id="status-message">Lade Serverstatus...</div>
+        <div id="server-info" style="display:none;">
+            <p id="players-online"><span></span></p>
+            <p id="motd"><span></span></p>
+            <p id="version"><span></span></p>
+        </div>
+        <div id="loading-spinner" style="display:block;">
+            <span class="loader"></span> Server wird überprüft...
+        </div>
+    </section>
     <section id="features">
         <h2>Warum Blockattack?</h2>
         <table style="margin-left: auto; margin-right: auto;">
@@ -115,69 +127,50 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
                 href="https://www.youtube.com/@DrMifo">Dr Mifo auf YouTube</a>
         </div>
     </section>
-    <section id="server-status">
-        <h2>Server Status</h2>
-        <p id="status-message">Lade Serverstatus...</p>
-        <p id="server-ip" style="display:none;"></p>
-        <p id="players-online" style="display:none;"></p>
-        <p id="motd" style="display:none;"></p>
-    </section>
 
     <script>
         // Minecraft Server Adresse
         const serverAddress = 'blockattack.fun'; // Ändere dies auf deine Serveradresse
 
         // API URL
-        const apiUrl = `https://api.mcsrvstat.us/3/${serverAddress}`;
+        const apiUrl = `https://api.mcstatus.io/v2/status/java/${serverAddress}`;
 
         // Abrufen des Serverstatus
         fetch(apiUrl)
             .then(response => response.json())
             .then(data => {
                 const statusMessageElement = document.getElementById('status-message');
-                const serverIpElement = document.getElementById('server-ip');
+                const serverInfoElement = document.getElementById('server-info');
-                const playersOnlineElement = document.getElementById('players-online');
+                const loadingSpinner = document.getElementById('loading-spinner');
-                const motdElement = document.getElementById('motd');
 
+                // Zeige die Ladeanzeige und verstecke sie nach dem Abrufen
+                loadingSpinner.style.display = 'none';
+                serverInfoElement.style.display = 'block';
+
+                // Überprüfen, ob der Server online ist
                 if (data.online) {
-                    // Überprüfen, ob die MOTD das Wort "Wartung" enthält
+                    statusMessageElement.innerText = 'Server ist Online!';
-                    const motdText = data.motd.clean.join(" "); // Kombiniere alle Zeilen der MOTD
+                    statusMessageElement.classList.remove("offline");
-                    if (motdText.toLowerCase().includes("wartung")) {
+                    statusMessageElement.classList.add("online");
-                        // Wenn "Wartung" in der MOTD enthalten ist, wird der Server als offline angezeigt
+
-                        statusMessageElement.innerText = 'Server ist in Wartung!';
+                    document.getElementById('players-online').innerHTML = `<span><strong>Spielerzahl:</strong> ${data.players.online} / ${data.players.max}</span>`;
-                        statusMessageElement.classList.remove("online");
+                    document.getElementById('motd').innerHTML = `<span><strong>MOTD:</strong> ${data.motd.html}</span>`;
-                        statusMessageElement.classList.add("offline");
+                    document.getElementById('version').innerHTML = `<span><strong>Version:</strong> ${data.version.name_clean}</span>`;
-                    } else {
-                        // Wenn der Server online ist und keine Wartung angezeigt wird
-                        statusMessageElement.innerText = 'Server ist Online!';
-                        statusMessageElement.classList.remove("offline");
-                        statusMessageElement.classList.add("online");
-                    }
 
-                    // Server-IP und Spieleranzahl anzeigen
-                    serverIpElement.innerText = `IP: ${data.ip}`;
-                    playersOnlineElement.innerText = `Spieler Online: ${data.players.online} / ${data.players.max}`;
-                    motdElement.innerText = `MOTD: ${data.motd.clean.join(' ')}`;
                 } else {
-                    // Server ist offline
                     statusMessageElement.innerText = 'Server ist Offline!';
                     statusMessageElement.classList.remove("online");
                     statusMessageElement.classList.add("offline");
 
-                    // Nur die IP anzeigen
+                    document.getElementById('host').innerHTML = `<span>${data.ip_address}</span>`;
-                    serverIpElement.innerText = `IP: ${data.ip}`;
                 }
-
-                // Zeige die Informationen an
-                serverIpElement.style.display = 'block';
-                playersOnlineElement.style.display = 'block';
-                motdElement.style.display = 'block';
             })
             .catch(error => {
                 // Fehler beim Abrufen der Daten
                 document.getElementById('status-message').innerText = 'Fehler beim Abrufen des Serverstatus.';
                 console.error('Fehler:', error);
             });
+
     </script>
 
     <section id="home" style="display: flex; justify-content: center; align-items: center; text-align: center;">
@@ -198,7 +191,6 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
         </iframe>
     </section>
 
-
     <br><br><br><br><br><br><br><br><br><br><br><br>
 
     <footer>

static/css/style.css

@@ -206,90 +206,71 @@ input[type="submit"]:hover {
 }
 
 /* Server Status Bereich */
-#online-players {
-    margin-top: 20px;
-}
-
-#players-list {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-#players-list .player {
-    margin: 10px;
-    text-align: center;
-}
-
-#players-list .player img {
-    border-radius: 50%;
-}
-
-#players-list .player span {
-    display: block;
-    margin-top: 5px;
-    font-weight: bold;
-}
-
 #server-status {
-    margin-top: 40px;
+    font-family: 'Arial', sans-serif;
     padding: 20px;
-    background-color: #f4f4f4;
+    background-color: rgba(0, 0, 0, 0.3);
-    border-radius: 8px;
+    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border: 2px solid #ccc;
+    max-width: 600px;
+    margin: 0 auto;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+#status-message {
     text-align: center;
+    font-size: 20px;
+    margin-bottom: 20px;
 }
 
-#server-status h2 {
+.online {
-    font-size: 2rem;
+    color: #28a745;
-    color: #333;
-    margin-bottom: 15px;
 }
 
-#status-message {
+.offline {
-    font-size: 1.5rem;
+    color: #dc3545;
-    color: #333;
-    font-weight: bold;
 }
 
-#server-status p {
+#server-info {
-    font-size: 1rem;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#server-info p {
+    text-align: center;
+    font-size: 16px;
+    margin: 10px 0;
+}
+
+#server-info strong {
     color: #555;
-    margin-top: 10px;
 }
 
-#server-ip,
+#loading-spinner {
-#players-online,
+    text-align: center;
-#motd {
+    font-size: 18px;
-    font-size: 1.2rem;
-    color: #333;
 }
 
-#server-status p a {
+.loader {
-    color: #007bff;
+    border: 4px solid #f3f3f3;
-    text-decoration: none;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 1s linear infinite;
 }
 
-#server-status p a:hover {
+@keyframes spin {
-    text-decoration: underline;
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
-/* Farbliche Unterschiede für den Status */
-#status-message {
-    font-size: 1.5rem;
-    color: #ffffff;
-    padding: 10px;
-    border-radius: 5px;
-}
-
-#status-message.online {
-    background-color: #28a745;
-    /* Grün für Online */
-}
-
-#status-message.offline {
-    background-color: #dc3545;
-    /* Rot für Offline */
-}
 
 /* Stil für den TNT-Block */
 .tnt-block {