mirror of
https://github.com/TheErrorExe/blockattack
synced 2025-09-05 21:11:00 +02:00
331 lines
11 KiB
HTML
331 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Blockattack - Minecraft Server</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<script src="/static/js/script.js" defer></script>
|
|
<style>
|
|
/* 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;
|
|
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;
|
|
height: 100px;
|
|
background-image: url('tnt-explode.png');
|
|
background-size: cover;
|
|
cursor: pointer;
|
|
margin-top: 20px;
|
|
transition: background 0.5s ease-in-out; /* Übergang beim Wechsel der Bilder */
|
|
}
|
|
|
|
/* Stil für das GIF */
|
|
.tnt-gif {
|
|
display: none;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-size: cover;
|
|
cursor: pointer;
|
|
margin-top: 20px;
|
|
background-image: url('tnt-explode.gif');
|
|
background-size: cover;
|
|
}
|
|
|
|
/* Stil für das Verstecken der Elemente */
|
|
.hidden {
|
|
visibility: hidden;
|
|
}
|
|
/* Stil für den Bereich über den Owner */
|
|
#about-owner {
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.owner-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.owner-image {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/about.html">Über uns</a></li>
|
|
<li><a href="/server.html">Server Info</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<section id="home">
|
|
<h1>Willkommen auf Blockattack</h1>
|
|
<p>Der beste Minecraft Server von Dr. Mifo!</p>
|
|
<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="features">
|
|
<h2>Warum Blockattack?</h2>
|
|
<div class="card" data-feature="Gebietsclaiming">
|
|
<img src="/image1.jpg" alt="Feature 1">
|
|
<h3>Gebietsclaiming</h3>
|
|
<p>Schütze dein Land vor anderen Spielern und baue es aus.</p>
|
|
</div>
|
|
<div class="card" data-feature="PVP-Kämpfe">
|
|
<img src="/image2.jpg" alt="Feature 2">
|
|
<h3>PVP-Kämpfe</h3>
|
|
<p>Tritt in spannenden Kämpfen gegen andere Spieler an!</p>
|
|
</div>
|
|
<div class="card" data-feature="Events">
|
|
<img src="/image3.jpg" alt="Feature 3">
|
|
<h3>Events</h3>
|
|
<p>Erlebe regelmäßige Events und spannende Abenteuer.</p>
|
|
</div>
|
|
</section>
|
|
<!-- Der TNT Block -->
|
|
<section id="tnt-section">
|
|
<h2>Klick auf das TNT</h2>
|
|
<div id="tnt" class="tnt-block" onclick="triggerTNT()"></div>
|
|
<div id="tntGif" class="tnt-gif"></div>
|
|
</section>
|
|
|
|
<section id="home">
|
|
<br>
|
|
<iframe src="https://discord.com/widget?id=1220023443391643830&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
|
|
<br>
|
|
<br>
|
|
</section>
|
|
<section id="about-owner">
|
|
<h2>Über den Owner: Dr. Mifo</h2>
|
|
<div class="owner-info">
|
|
<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>
|
|
<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>© 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p>
|
|
<br>
|
|
<a href="/privacy.html" style="display: inline;">Privacy</a><p style="display: inline;"> | </p><a href="/terms.html" style="display: inline;">Terms of Service</a>
|
|
</footer>
|
|
<script>
|
|
// Hardcodierte Beschreibungen für jedes Feature
|
|
document.querySelectorAll('.card').forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
const featureName = card.getAttribute('data-feature');
|
|
switch (featureName) {
|
|
case "Gebietsclaiming":
|
|
alert("Claime ganz einfach ein Gebiet mit /f claim und baue dein eigenes Land.");
|
|
break;
|
|
case "PVP-Kämpfe":
|
|
alert("Mach Kämpfe gegen andere Spieler des Blockattack Servers!");
|
|
break;
|
|
case "Events":
|
|
alert("Beteilige dich bei Events!");
|
|
break;
|
|
default:
|
|
alert("Feature nicht gefunden.");
|
|
}
|
|
});
|
|
});
|
|
|
|
// TNT-Trigger und Animationsfunktion
|
|
function triggerTNT() {
|
|
const tntBlock = document.getElementById('tnt');
|
|
const tntGif = document.getElementById('tntGif');
|
|
const allElements = document.querySelectorAll('body *:not(#tntGif)'); // Alle Elemente außer dem GIF
|
|
|
|
// Spiele den TNT Boom Sound ab
|
|
const boomSound = new Audio('tnt-boom.mp3');
|
|
boomSound.play();
|
|
|
|
// Ersetze das PNG durch das GIF
|
|
tntBlock.style.backgroundImage = "url('tnt-explode.gif')";
|
|
tntGif.style.display = 'block'; // Zeige das GIF an
|
|
|
|
// Verstecke alle anderen Elemente nach 4 Sekunden
|
|
setTimeout(() => {
|
|
allElements.forEach(el => {
|
|
el.classList.add('hidden');
|
|
});
|
|
}, 4000);
|
|
|
|
// Nach 4 Sekunden das PNG wiederherstellen und das GIF entfernen
|
|
setTimeout(() => {
|
|
tntBlock.style.backgroundImage = "url('tnt-explode.png')";
|
|
tntGif.style.display = 'none'; // Entferne das GIF
|
|
|
|
// Neuladen der Seite
|
|
location.reload();
|
|
}, 12000); // Warte 12 Sekunden (4s Sound + 7s Unsichtbarkeit + 1s GIF Anzeige)
|
|
|
|
// Nach 11 Sekunden alle Elemente wieder sichtbar machen
|
|
setTimeout(() => {
|
|
allElements.forEach(el => {
|
|
el.classList.remove('hidden');
|
|
});
|
|
}, 11000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|