ba/index.html
2025-01-06 20:17:56 +01:00

182 lines
6.7 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>
/* 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>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: @DrMifo</p>
<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</section>
<footer>
<p>&copy; 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>