Update Status

Update the server status, with the better https://mcstatus.io API
This commit is contained in:
gmrrh 2025-01-09 19:24:35 +01:00
parent 6a639f80f5
commit c2c06223cd
2 changed files with 76 additions and 103 deletions

View File

@ -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 playersOnlineElement = document.getElementById('players-online');
const motdElement = document.getElementById('motd');
const serverInfoElement = document.getElementById('server-info');
const loadingSpinner = document.getElementById('loading-spinner');
// 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
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");
}
statusMessageElement.innerText = 'Server ist Online!';
statusMessageElement.classList.remove("offline");
statusMessageElement.classList.add("online");
document.getElementById('players-online').innerHTML = `<span><strong>Spielerzahl:</strong> ${data.players.online} / ${data.players.max}</span>`;
document.getElementById('motd').innerHTML = `<span><strong>MOTD:</strong> ${data.motd.html}</span>`;
document.getElementById('version').innerHTML = `<span><strong>Version:</strong> ${data.version.name_clean}</span>`;
// 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}`;
document.getElementById('host').innerHTML = `<span>${data.ip_address}</span>`;
}
// 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>

View File

@ -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;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px;
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 {
font-size: 2rem;
color: #333;
margin-bottom: 15px;
.online {
color: #28a745;
}
#status-message {
font-size: 1.5rem;
color: #333;
font-weight: bold;
.offline {
color: #dc3545;
}
#server-status p {
font-size: 1rem;
#server-info {
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,
#players-online,
#motd {
font-size: 1.2rem;
color: #333;
#loading-spinner {
text-align: center;
font-size: 18px;
}
#server-status p a {
color: #007bff;
text-decoration: none;
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
#server-status p a:hover {
text-decoration: underline;
@keyframes spin {
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 {