TheErrorExe/ba
1
0
Fork 0
mirror of https://github.com/TheErrorExe/blockattack synced 2025-09-05 13:01:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

A lot of overall changes

Browse Source 
Changes in code readability
   - moving css into styles.css
   - indend the code correctly
Animated Logo Text
Added Serverrules
Overall improvement withe centering of the elements
Added Copy Server IP Button
Added Better Footer
This commit is contained in:
gmrrh 2025-01-09 18:58:52 +01:00
parent 48e9fd499f
commit 6a639f80f5
6 changed files with 521 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
404.html
View File

@ -18,39 +18,56 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Not Found - Blockattack</title> <title>404 Not Found - Blockattack</title>
<link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/css/style.css">
</head> </head>
<body> <body>
<header> <header
<nav> style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333;">
<ul> <nav>
<li> <ul style="list-style: none; display: flex; margin: 0; padding: 0;">
<a href="/" style="display: flex; align-items: center; text-decoration: none;"> <li>
<img src="/favicon.ico" alt="Blockattack Logo" style="width: 32px; height: 32px; margin-right: 8px;"> <a href="/" style="display: flex; align-items: center; text-decoration: none; color: #fff;">
<span style="font-size: 1.5rem; font-weight: bold; color: #333;">Blockattack</span> <img src="/favicon.ico" alt="Blockattack Logo"
</a> style="width: 32px; height: 32px; margin-right: 8px;">
</li> <span style="font-size: 1.5rem; font-weight: bold;" class="textcolorgradient">Blockattack</span>
<li><a href="/about.html">Über uns</a></li> </a>
<li><a href="/server.html">Server Info</a></li> </li>
</ul> <li><a href="/about.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Über uns</a>
</nav> </li>
</header> <li><a href="/server.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Server
Info</a></li>
</ul>
</nav>
<div>
<button id="copy-ip-btn"
style="background-color: #007bff; color: #fff; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer; font-size: 1rem;">
Server IP kopieren
</button>
</div>
</header>
<section id="about"> <section id="about">
<h2>404 - Nicht Gefunden</h2> <h2>404 - Nicht Gefunden</h2>
<p>Die von dir angegebene Webseite wurde nicht gefunden. Prüfe die Schreibweise der URL oder versuch es später nochmal. Wenn du auf etwas geklickt hast und diese Seite erscheint, kontaktiere: theerrorexe@gmail.com oder auf Discord: theerrorexe</p> <p>Die von dir angegebene Webseite wurde nicht gefunden. Prüfe die Schreibweise der URL oder versuch es später
nochmal. Wenn du auf etwas geklickt hast und diese Seite erscheint, kontaktiere: theerrorexe@gmail.com oder
auf Discord: theerrorexe</p>
</section> </section>
<footer> <footer>
<p>&copy; 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p> <p>&copy; 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe
</p>
<br> <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> <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> </footer>
</body> </body>
</html>
</html>

57
about.html
View File

@ -18,38 +18,57 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Über Blockattack</title> <title>Über Blockattack</title>
<link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/css/style.css">
</head> </head>
<body> <body>
<header> <header
<nav> style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333;">
<ul> <nav>
<li> <ul style="list-style: none; display: flex; margin: 0; padding: 0;">
<a href="/" style="display: flex; align-items: center; text-decoration: none;"> <li>
<img src="/favicon.ico" alt="Blockattack Logo" style="width: 32px; height: 32px; margin-right: 8px;"> <a href="/" style="display: flex; align-items: center; text-decoration: none; color: #fff;">
<span style="font-size: 1.5rem; font-weight: bold; color: #333;">Blockattack</span> <img src="/favicon.ico" alt="Blockattack Logo"
</a> style="width: 32px; height: 32px; margin-right: 8px;">
</li> <span style="font-size: 1.5rem; font-weight: bold;" class="textcolorgradient">Blockattack</span>
<li><a href="/about.html">Über uns</a></li> </a>
<li><a href="/server.html">Server Info</a></li> </li>
</ul> <li><a href="/about.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Über uns</a>
</nav> </li>
</header> <li><a href="/server.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Server
Info</a></li>
</ul>
</nav>
<div>
<button id="copy-ip-btn"
style="background-color: #007bff; color: #fff; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer; font-size: 1rem;">
Server IP kopieren
</button>
</div>
</header>
<section id="about"> <section id="about">
<h2>Über Dr. Mifo und Blockattack</h2> <h2>Über Dr. Mifo und Blockattack</h2>
<p>Blockattack ist ein Minecraft Server, betrieben von YouTuber Dr. Mifo (@DrMifo). Hier kannst du nicht nur spannende Abenteuer erleben, sondern auch dein eigenes Land claimen, dich gegen andere Spieler verteidigen und viele weitere coole Features entdecken!</p> <p>Blockattack ist ein Minecraft Server, betrieben von YouTuber Dr. Mifo (@DrMifo). Hier kannst du nicht nur
spannende Abenteuer erleben, sondern auch dein eigenes Land claimen, dich gegen andere Spieler verteidigen
und viele weitere coole Features entdecken!</p>
</section> </section>
<footer> <footer>
<p>&copy; 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p> <p>&copy; BlockAttack 2025</p>
<p>Gehostet auf <a href="https://mine-server.org" target="_blank"
style="color: inherit; text-decoration: inherit;">mine-server.org</a></p>
<p>Website von <a href="https://errexe.xyz" target="_blank"
style="color: inherit; text-decoration: inherit;">TheErrorExe</a></p>
<br> <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> <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> </footer>
</body> </body>
</html>
</html>

392
index.html
View File

@ -18,160 +18,40 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockattack - Minecraft Server</title> <title>Blockattack - Minecraft Server</title>
<link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/css/style.css">
<script src="/static/js/script.js" defer></script> <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> </head>
<body> <body>
<header> <header
<nav> style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333;">
<ul> <nav>
<li> <ul style="list-style: none; display: flex; margin: 0; padding: 0;">
<a href="/" style="display: flex; align-items: center; text-decoration: none;"> <li>
<img src="/favicon.ico" alt="Blockattack Logo" style="width: 32px; height: 32px; margin-right: 8px;"> <a href="/" style="display: flex; align-items: center; text-decoration: none; color: #fff;">
<span style="font-size: 1.5rem; font-weight: bold; color: #333;">Blockattack</span> <img src="/favicon.ico" alt="Blockattack Logo"
</a> style="width: 32px; height: 32px; margin-right: 8px;">
</li> <span style="font-size: 1.5rem; font-weight: bold;" class="textcolorgradient">Blockattack</span>
<li><a href="/about.html">Über uns</a></li> </a>
<li><a href="/server.html">Server Info</a></li> </li>
</ul> <li><a href="/about.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Über uns</a>
</nav> </li>
</header> <li><a href="/server.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Server
Info</a></li>
</ul>
</nav>
<div>
<button id="copy-ip-btn"
style="background-color: #007bff; color: #fff; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer; font-size: 1rem;">
Server IP kopieren
</button>
</div>
</header>
<section id="home"> <section id="home">
@ -182,21 +62,31 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
</section> </section>
<section id="features"> <section id="features">
<h2>Warum Blockattack?</h2> <h2>Warum Blockattack?</h2>
<div class="card" data-feature="Gebietsclaiming"> <table style="margin-left: auto; margin-right: auto;">
<img src="/image1.jpg" alt="Feature 1"> <tr>
<h3>Gebietsclaiming</h3> <th>
<p>Schütze dein Land vor anderen Spielern und baue es aus.</p> <div class="card" data-feature="Gebietsclaiming">
</div> <img src="/image1.jpg" alt="Feature 1">
<div class="card" data-feature="PVP-Kämpfe"> <h3>Gebietsclaiming</h3>
<img src="/image2.jpg" alt="Feature 2"> <p>Schütze dein Land vor anderen Spielern und baue es aus.</p>
<h3>PVP-Kämpfe</h3> </div>
<p>Tritt in spannenden Kämpfen gegen andere Spieler an!</p> </th>
</div> <th>
<div class="card" data-feature="Events"> <div class="card" data-feature="PVP-Kämpfe">
<img src="/image3.jpg" alt="Feature 3"> <img src="/image2.jpg" alt="Feature 2">
<h3>Events</h3> <h3>PVP-Kämpfe</h3>
<p>Erlebe regelmäßige Events und spannende Abenteuer.</p> <p>Tritt in spannenden Kämpfen gegen andere Spieler an!</p>
</div> </div>
</th>
<th>
<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>
</th>
</tr>
</table>
</section> </section>
<!-- Der TNT Block --> <!-- Der TNT Block -->
<section id="tnt-section"> <section id="tnt-section">
@ -207,101 +97,130 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
<section id="home"> <section id="home">
<br> <br>
<iframe src="https://discord.com/widget?id=1220023443391643830&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe> <iframe src="https://discord.com/widget?id=1220023443391643830&theme=dark" width="350" height="500"
allowtransparency="true" frameborder="0"></iframe>
<!-- a onclick="discord()" style="color: blue; text-decoration: underline;">Trete den Discord bei</a --> <!-- a onclick="discord()" style="color: blue; text-decoration: underline;">Trete den Discord bei</a -->
<br> <br>
<br> <br>
</section> </section>
<section id="about-owner"> <section id="about-owner">
<h2>Über den Owner: Dr. Mifo</h2> <h2>Über den Owner: Dr. Mifo</h2>
<div class="owner-info"> <div class="owner-info">
<img src="drmifo.jpg" alt="Dr. Mifo" class="owner-image"> <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> <p style="display: inline">Servus, ich stelle mich mal kurz vor und zwar bin ich der Dr.Mifo aka Jayden.
</div> Meine Hobbys/was ich gerne mache sind Youtube Videos drehen, Jugendfeuerwehr(JFW),Fahrrad fahren ,Mit
</section> Freunden irgend was unternehmen und noch vieles mehr. Mein Größter Wunsch auf Youtube ist irgendwann mal
<section id="server-status"> die 1 Mio. Abos zu schaffen. Ich aktzeptiere alle die auf meinen Kanal sind bzw. im Chat sind. Wenn ihr
<h2>Server Status</h2> mir helfen wollt mein Traum zu Verwirklichen dann lasst gerne ein Abo da: </p><a style="display: inline"
<p id="status-message">Lade Serverstatus...</p> href="https://www.youtube.com/@DrMifo">Dr Mifo auf YouTube</a>
<p id="server-ip" style="display:none;"></p> </div>
<p id="players-online" style="display:none;"></p> </section>
<p id="motd" style="display:none;"></p> <section id="server-status">
</section> <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> <script>
// Minecraft Server Adresse // Minecraft Server Adresse
const serverAddress = 'blockattack.fun'; // Ändere dies auf deine Serveradresse const serverAddress = 'blockattack.fun'; // Ändere dies auf deine Serveradresse
// API URL // API URL
const apiUrl = `https://api.mcsrvstat.us/3/${serverAddress}`; const apiUrl = `https://api.mcsrvstat.us/3/${serverAddress}`;
// Abrufen des Serverstatus // Abrufen des Serverstatus
fetch(apiUrl) fetch(apiUrl)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
const statusMessageElement = document.getElementById('status-message'); const statusMessageElement = document.getElementById('status-message');
const serverIpElement = document.getElementById('server-ip'); const serverIpElement = document.getElementById('server-ip');
const playersOnlineElement = document.getElementById('players-online'); const playersOnlineElement = document.getElementById('players-online');
const motdElement = document.getElementById('motd'); const motdElement = document.getElementById('motd');
if (data.online) { if (data.online) {
// Überprüfen, ob die MOTD das Wort "Wartung" enthält // Überprüfen, ob die MOTD das Wort "Wartung" enthält
const motdText = data.motd.clean.join(" "); // Kombiniere alle Zeilen der MOTD const motdText = data.motd.clean.join(" "); // Kombiniere alle Zeilen der MOTD
if (motdText.toLowerCase().includes("wartung")) { if (motdText.toLowerCase().includes("wartung")) {
// Wenn "Wartung" in der MOTD enthalten ist, wird der Server als offline angezeigt // Wenn "Wartung" in der MOTD enthalten ist, wird der Server als offline angezeigt
statusMessageElement.innerText = 'Server ist in Wartung!'; 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.remove("online");
statusMessageElement.classList.add("offline"); statusMessageElement.classList.add("offline");
} else {
// Wenn der Server online ist und keine Wartung angezeigt wird // Nur die IP anzeigen
statusMessageElement.innerText = 'Server ist Online!'; serverIpElement.innerText = `IP: ${data.ip}`;
statusMessageElement.classList.remove("offline");
statusMessageElement.classList.add("online");
} }
// Server-IP und Spieleranzahl anzeigen // Zeige die Informationen an
serverIpElement.innerText = `IP: ${data.ip}`; serverIpElement.style.display = 'block';
playersOnlineElement.innerText = `Spieler Online: ${data.players.online} / ${data.players.max}`; playersOnlineElement.style.display = 'block';
motdElement.innerText = `MOTD: ${data.motd.clean.join(' ')}`; motdElement.style.display = 'block';
} else { })
// Server ist offline .catch(error => {
statusMessageElement.innerText = 'Server ist Offline!'; // Fehler beim Abrufen der Daten
statusMessageElement.classList.remove("online"); document.getElementById('status-message').innerText = 'Fehler beim Abrufen des Serverstatus.';
statusMessageElement.classList.add("offline"); console.error('Fehler:', error);
});
</script>
// Nur die IP anzeigen <section id="home" style="display: flex; justify-content: center; align-items: center; text-align: center;">
serverIpElement.innerText = `IP: ${data.ip}`; <div>
} <h2>Das Server Team</h2>
<a href="/team.html"
style="display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; text-align: center;">
Lerne das Team kennen
</a>
</div>
</section>
// Zeige die Informationen an <section id="home" style="text-align: center;">
serverIpElement.style.display = 'block'; <h2>Regelwerk:</h2>
playersOnlineElement.style.display = 'block'; <iframe
motdElement.style.display = 'block'; src="https://docs.google.com/document/d/e/2PACX-1vRjeS7oBU-82XRG8_Y9ljyabfJZYdtK5DYc98NktlVFXRph9iRMukgSvMkd1Kx5Hhy5g4vXRdnjN6Gv/pub?embedded=true"
}) style="border: none; width: 100%; height: 600px; max-width: 100%; margin-left: auto; margin-right: auto;">
.catch(error => { </iframe>
// Fehler beim Abrufen der Daten </section>
document.getElementById('status-message').innerText = 'Fehler beim Abrufen des Serverstatus.';
console.error('Fehler:', error);
});
</script>
<section id="home">
<h2>Regelwerk (ich muss noch einen admin fragen einbettung zu aktivieren sorry)</h2>
<iframe src="https://docs.google.com/document/d/e/PLACEHOLDER/pub?embedded=true" width="100%" height="500" frameborder="0"></iframe>
</section>
<section id="home"> <br><br><br><br><br><br><br><br><br><br><br><br>
<h2>Lerne das Team kennen</h2>
<a href="/team.html" style="display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; text-align: center;">Lerne das Team kennen</a>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br>
<footer> <footer>
<p>&copy; 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p> <p>&copy; BlockAttack 2025</p>
<p>Gehostet auf <a href="https://mine-server.org" target="_blank"
style="color: inherit; text-decoration: inherit;">mine-server.org</a></p>
<p>Website von <a href="https://errexe.xyz" target="_blank"
style="color: inherit; text-decoration: inherit;">TheErrorExe</a></p>
<br> <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> <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> </footer>
<script> <script>
//Folgendes fügt die kopieren funktionalität des IP Adresse Button hinzu
document.getElementById("copy-ip-btn").addEventListener("click", function () {
const serverIP = "blockattack.fun"; // Beispiel IP-Adresse
navigator.clipboard.writeText(serverIP).then(function () {
alert("Server IP wurde kopiert!\nDer Port für Bedrock ist 25515\nViel Spaß 😃🥰");
}).catch(function (err) {
console.error("Fehler beim Kopieren der IP: ", err);
});
});
// Hardcodierte Beschreibungen für jedes Feature // Hardcodierte Beschreibungen für jedes Feature
document.querySelectorAll('.card').forEach(card => { document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', () => { card.addEventListener('click', () => {
@ -361,4 +280,5 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
} }
</script> </script>
</body> </body>
</html>
</html>

52
server.html
View File

@ -18,27 +18,39 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Info</title> <title>Server Info</title>
<link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/css/style.css">
</head> </head>
<body> <body>
<header> <header
<nav> style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333;">
<ul> <nav>
<li> <ul style="list-style: none; display: flex; margin: 0; padding: 0;">
<a href="/" style="display: flex; align-items: center; text-decoration: none;"> <li>
<img src="/favicon.ico" alt="Blockattack Logo" style="width: 32px; height: 32px; margin-right: 8px;"> <a href="/" style="display: flex; align-items: center; text-decoration: none; color: #fff;">
<span style="font-size: 1.5rem; font-weight: bold; color: #333;">Blockattack</span> <img src="/favicon.ico" alt="Blockattack Logo"
</a> style="width: 32px; height: 32px; margin-right: 8px;">
</li> <span style="font-size: 1.5rem; font-weight: bold;" class="textcolorgradient">Blockattack</span>
<li><a href="/about.html">Über uns</a></li> </a>
<li><a href="/server.html">Server Info</a></li> </li>
</ul> <li><a href="/about.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Über uns</a>
</nav> </li>
</header> <li><a href="/server.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Server
Info</a></li>
</ul>
</nav>
<div>
<button id="copy-ip-btn"
style="background-color: #007bff; color: #fff; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer; font-size: 1rem;">
Server IP kopieren
</button>
</div>
</header>
<section id="server"> <section id="server">
@ -54,9 +66,15 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
</section> </section>
<footer> <footer>
<p>&copy; 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p> <p>&copy; BlockAttack 2025</p>
<p>Gehostet auf <a href="https://mine-server.org" target="_blank"
style="color: inherit; text-decoration: inherit;">mine-server.org</a></p>
<p>Website von <a href="https://errexe.xyz" target="_blank"
style="color: inherit; text-decoration: inherit;">TheErrorExe</a></p>
<br> <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> <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> </footer>
</body> </body>
</html>
</html>

233
static/css/style.css
View File

@ -74,7 +74,9 @@ footer {
bottom: 0; bottom: 0;
} }
h1, h2, h3 { h1,
h2,
h3 {
font-size: 2.5em; font-size: 2.5em;
color: #00d8ff; color: #00d8ff;
text-align: center; text-align: center;
@ -97,8 +99,13 @@ body::after {
} }
@keyframes backgroundAnimation { @keyframes backgroundAnimation {
0% { background-position: 0 0; } 0% {
100% { background-position: 100% 100%; } background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
} }
/* Abschnitte */ /* Abschnitte */
@ -179,7 +186,8 @@ form {
margin-top: 20px; margin-top: 20px;
} }
input, textarea { input,
textarea {
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
border: 1px solid #00d8ff; border: 1px solid #00d8ff;
@ -196,3 +204,220 @@ input[type="submit"] {
input[type="submit"]:hover { input[type="submit"]:hover {
background-color: #009cba; background-color: #009cba;
} }
/* 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;
}
.textcolorgradient {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-family: sans-serif;
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(90deg,
var(--color-one),
var(--color-two),
var(--color-one)) 0 0 / var(--bg-size) 100%;
color: transparent;
background-clip: text;
}
#team {
margin-top: 40px;
}
.team-member {
background: rgba(0, 0, 0, 0.3);
margin: 20px;
padding: 20px;
border-radius: 8px;
text-align: center;
width: 300px;
display: inline-block;
vertical-align: top;
transition: transform 0.3s, background 0.3s;
}
.team-member:hover {
transform: scale(1.05);
background: rgba(0, 0, 0, 0.5);
}
.team-member img {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
margin-bottom: 15px;
}
.team-member h3 {
color: #fff;
font-size: 1.5em;
margin-bottom: 10px;
}
.team-member p {
color: #aaa;
font-size: 1.1em;
}
#team-empty {
color: #fff;
font-size: 1.5em;
text-align: center;
margin-top: 50px;
}
/* Flexbox für die Team-Mitglieder */
#team-members {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
.textcolorgradient {
animation: move-bg 8s linear infinite;
}
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
}

93
team.html
View File

@ -1,81 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockattack - Team</title> <title>Blockattack - Team</title>
<link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/css/style.css">
<script src="/static/js/script.js" defer></script> <script src="/static/js/script.js" defer></script>
<style>
#team {
margin-top: 40px;
}
.team-member {
background: rgba(0, 0, 0, 0.3);
margin: 20px;
padding: 20px;
border-radius: 8px;
text-align: center;
width: 300px;
display: inline-block;
vertical-align: top;
transition: transform 0.3s, background 0.3s;
}
.team-member:hover {
transform: scale(1.05);
background: rgba(0, 0, 0, 0.5);
}
.team-member img {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
margin-bottom: 15px;
}
.team-member h3 {
color: #fff;
font-size: 1.5em;
margin-bottom: 10px;
}
.team-member p {
color: #aaa;
font-size: 1.1em;
}
#team-empty {
color: #fff;
font-size: 1.5em;
text-align: center;
margin-top: 50px;
}
/* Flexbox für die Team-Mitglieder */
#team-members {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
</head> </head>
<body> <body>
<header> <header
style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333;">
<nav> <nav>
<ul> <ul style="list-style: none; display: flex; margin: 0; padding: 0;">
<li> <li>
<a href="/" style="display: flex; align-items: center; text-decoration: none;"> <a href="/" style="display: flex; align-items: center; text-decoration: none; color: #fff;">
<img src="/favicon.ico" alt="Blockattack Logo" style="width: 32px; height: 32px; margin-right: 8px;"> <img src="/favicon.ico" alt="Blockattack Logo"
<span style="font-size: 1.5rem; font-weight: bold; color: #333;">Blockattack</span> style="width: 32px; height: 32px; margin-right: 8px;">
<span style="font-size: 1.5rem; font-weight: bold;" class="textcolorgradient">Blockattack</span>
</a> </a>
</li> </li>
<li><a href="/about.html">Über uns</a></li> <li><a href="/about.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Über uns</a>
<li><a href="/server.html">Server Info</a></li> </li>
<li><a href="/server.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Server
Info</a></li>
</ul> </ul>
</nav> </nav>
<div>
<button id="copy-ip-btn"
style="background-color: #007bff; color: #fff; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer; font-size: 1rem;">
Server IP kopieren
</button>
</div>
</header> </header>
<section id="team"> <section id="team">
@ -117,9 +74,15 @@
</section> </section>
<footer> <footer>
<p>&copy; 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p> <p>&copy; BlockAttack 2025</p>
<p>Gehostet auf <a href="https://mine-server.org" target="_blank"
style="color: inherit; text-decoration: inherit;">mine-server.org</a></p>
<p>Website von <a href="https://errexe.xyz" target="_blank"
style="color: inherit; text-decoration: inherit;">TheErrorExe</a></p>
<br> <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> <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> </footer>
</body> </body>
</html>
</html>