Update index.html

index.html

@@ -7,6 +7,64 @@
     <link rel="stylesheet" href="/static/css/style.css">
     <script src="/static/js/script.js" defer></script>
     <style>
+        /* Server Status Bereich */
+#server-status {
+    margin-top: 40px;
+    padding: 20px;
+    background-color: #f4f4f4;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+#server-status h2 {
+    font-size: 2rem;
+    color: #333;
+    margin-bottom: 15px;
+}
+
+#status-message {
+    font-size: 1.5rem;
+    color: #333;
+    font-weight: bold;
+}
+
+#server-status p {
+    font-size: 1rem;
+    color: #555;
+    margin-top: 10px;
+}
+
+#server-ip, #players-online, #motd {
+    font-size: 1.2rem;
+    color: #333;
+}
+
+#server-status p a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+#server-status p a:hover {
+    text-decoration: underline;
+}
+
+/* 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 {
             width: 100px;
@@ -111,7 +169,73 @@
         <img src="drmifo.jpg" alt="Dr. Mifo" class="owner-image">
         <p style="display: inline">Servus, ich stelle mich mal kurz vor und zwar bin ich der Dr.Mifo aka Jayden. Meine Hobbys/was ich gerne mache sind Youtube Videos drehen, Jugendfeuerwehr(JFW),Fahrrad fahren ,Mit Freunden irgend was unternehmen und noch vieles mehr. Mein Größter Wunsch auf Youtube ist irgendwann mal die 1 Mio. Abos zu schaffen. Ich aktzeptiere alle die auf meinen Kanal sind bzw. im Chat sind. Wenn ihr mir helfen wollt mein Traum zu Verwirklichen dann lasst gerne ein Abo da: </p><a style="display: inline" href="https://www.youtube.com/@DrMifo">Dr Mifo auf YouTube</a>
     </div>
-</section>        <br><br><br><br><br><br><br><br><br><br><br><br>
+</section>
+    <!-- Server Status Anzeige -->
+<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}`;
+
+    // Abrufen des Serverstatus
+    fetch(apiUrl)
+        .then(response => response.json())
+        .then(data => {
+            const statusMessageElement = document.getElementById('status-message');
+            const serverIpElement = document.getElementById('server-ip');
+            const playersOnlineElement = document.getElementById('players-online');
+            const motdElement = document.getElementById('motd');
+            
+            if (data.online) {
+                // Überprüfen, ob die MOTD das Wort "Wartung" enthält
+                const motdText = data.motd.clean.join(" "); // Kombiniere alle Zeilen der MOTD
+                if (motdText.toLowerCase().includes("wartung")) {
+                    // Wenn "Wartung" in der MOTD enthalten ist, wird der Server als offline angezeigt
+                    statusMessageElement.innerText = 'Server ist in Wartung!';
+                    statusMessageElement.classList.remove("online");
+                    statusMessageElement.classList.add("offline");
+                } 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
+                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>
+<br><br><br><br><br><br><br><br><br><br><br><br>
 
     <footer>
         <p>&copy; 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p>