mirror of
https://github.com/TheErrorExe/blockattack
synced 2025-09-04 04:21:13 +02:00
A lot of overall changes
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
parent
48e9fd499f
commit
6a639f80f5
53
404.html
53
404.html
@ -18,39 +18,56 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 Not Found - Blockattack</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/" style="display: flex; align-items: center; text-decoration: none;">
|
||||
<img src="/favicon.ico" alt="Blockattack Logo" style="width: 32px; height: 32px; margin-right: 8px;">
|
||||
<span style="font-size: 1.5rem; font-weight: bold; color: #333;">Blockattack</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/about.html">Über uns</a></li>
|
||||
<li><a href="/server.html">Server Info</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<header
|
||||
style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333;">
|
||||
<nav>
|
||||
<ul style="list-style: none; display: flex; margin: 0; padding: 0;">
|
||||
<li>
|
||||
<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;">
|
||||
<span style="font-size: 1.5rem; font-weight: bold;" class="textcolorgradient">Blockattack</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/about.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Über uns</a>
|
||||
</li>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p>
|
||||
<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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
57
about.html
57
about.html
@ -18,38 +18,57 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Über Blockattack</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/" style="display: flex; align-items: center; text-decoration: none;">
|
||||
<img src="/favicon.ico" alt="Blockattack Logo" style="width: 32px; height: 32px; margin-right: 8px;">
|
||||
<span style="font-size: 1.5rem; font-weight: bold; color: #333;">Blockattack</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/about.html">Über uns</a></li>
|
||||
<li><a href="/server.html">Server Info</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<header
|
||||
style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333;">
|
||||
<nav>
|
||||
<ul style="list-style: none; display: flex; margin: 0; padding: 0;">
|
||||
<li>
|
||||
<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;">
|
||||
<span style="font-size: 1.5rem; font-weight: bold;" class="textcolorgradient">Blockattack</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/about.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Über uns</a>
|
||||
</li>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p>
|
||||
<p>© 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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
392
index.html
392
index.html
@ -18,160 +18,40 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
|
||||
-->
|
||||
<!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="/" style="display: flex; align-items: center; text-decoration: none;">
|
||||
<img src="/favicon.ico" alt="Blockattack Logo" style="width: 32px; height: 32px; margin-right: 8px;">
|
||||
<span style="font-size: 1.5rem; font-weight: bold; color: #333;">Blockattack</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/about.html">Über uns</a></li>
|
||||
<li><a href="/server.html">Server Info</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<header
|
||||
style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333;">
|
||||
<nav>
|
||||
<ul style="list-style: none; display: flex; margin: 0; padding: 0;">
|
||||
<li>
|
||||
<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;">
|
||||
<span style="font-size: 1.5rem; font-weight: bold;" class="textcolorgradient">Blockattack</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/about.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Über uns</a>
|
||||
</li>
|
||||
<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">
|
||||
@ -182,21 +62,31 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
|
||||
</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>
|
||||
<table style="margin-left: auto; margin-right: auto;">
|
||||
<tr>
|
||||
<th>
|
||||
<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>
|
||||
</th>
|
||||
<th>
|
||||
<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>
|
||||
</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>
|
||||
<!-- Der TNT Block -->
|
||||
<section id="tnt-section">
|
||||
@ -207,101 +97,130 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
|
||||
|
||||
<section id="home">
|
||||
<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 -->
|
||||
<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>
|
||||
<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
|
||||
<script>
|
||||
// Minecraft Server Adresse
|
||||
const serverAddress = 'blockattack.fun'; // Ändere dies auf deine Serveradresse
|
||||
|
||||
// API URL
|
||||
const apiUrl = `https://api.mcsrvstat.us/3/${serverAddress}`;
|
||||
// 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!';
|
||||
// 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");
|
||||
} else {
|
||||
// Wenn der Server online ist und keine Wartung angezeigt wird
|
||||
statusMessageElement.innerText = 'Server ist Online!';
|
||||
statusMessageElement.classList.remove("offline");
|
||||
statusMessageElement.classList.add("online");
|
||||
|
||||
// Nur die IP anzeigen
|
||||
serverIpElement.innerText = `IP: ${data.ip}`;
|
||||
}
|
||||
|
||||
// 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");
|
||||
// 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>
|
||||
|
||||
// Nur die IP anzeigen
|
||||
serverIpElement.innerText = `IP: ${data.ip}`;
|
||||
}
|
||||
<section id="home" style="display: flex; justify-content: center; align-items: center; text-align: center;">
|
||||
<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
|
||||
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="text-align: center;">
|
||||
<h2>Regelwerk:</h2>
|
||||
<iframe
|
||||
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;">
|
||||
</iframe>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<p>© 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>
|
||||
<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>
|
||||
<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
|
||||
document.querySelectorAll('.card').forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
@ -361,4 +280,5 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
52
server.html
52
server.html
@ -18,27 +18,39 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Server Info</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/" style="display: flex; align-items: center; text-decoration: none;">
|
||||
<img src="/favicon.ico" alt="Blockattack Logo" style="width: 32px; height: 32px; margin-right: 8px;">
|
||||
<span style="font-size: 1.5rem; font-weight: bold; color: #333;">Blockattack</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/about.html">Über uns</a></li>
|
||||
<li><a href="/server.html">Server Info</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<header
|
||||
style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333;">
|
||||
<nav>
|
||||
<ul style="list-style: none; display: flex; margin: 0; padding: 0;">
|
||||
<li>
|
||||
<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;">
|
||||
<span style="font-size: 1.5rem; font-weight: bold;" class="textcolorgradient">Blockattack</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/about.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Über uns</a>
|
||||
</li>
|
||||
<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">
|
||||
@ -54,9 +66,15 @@ This Website was developed by TheErrorExe for Blockattack. TheErrorExe is and wi
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p>
|
||||
<p>© 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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@ -74,7 +74,9 @@ footer {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-size: 2.5em;
|
||||
color: #00d8ff;
|
||||
text-align: center;
|
||||
@ -97,8 +99,13 @@ body::after {
|
||||
}
|
||||
|
||||
@keyframes backgroundAnimation {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 100% 100%; }
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Abschnitte */
|
||||
@ -179,7 +186,8 @@ form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
input,
|
||||
textarea {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #00d8ff;
|
||||
@ -196,3 +204,220 @@ input[type="submit"] {
|
||||
input[type="submit"]:hover {
|
||||
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
93
team.html
@ -1,81 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blockattack - Team</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header
|
||||
style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333;">
|
||||
<nav>
|
||||
<ul>
|
||||
<ul style="list-style: none; display: flex; margin: 0; padding: 0;">
|
||||
<li>
|
||||
<a href="/" style="display: flex; align-items: center; text-decoration: none;">
|
||||
<img src="/favicon.ico" alt="Blockattack Logo" style="width: 32px; height: 32px; margin-right: 8px;">
|
||||
<span style="font-size: 1.5rem; font-weight: bold; color: #333;">Blockattack</span>
|
||||
<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;">
|
||||
<span style="font-size: 1.5rem; font-weight: bold;" class="textcolorgradient">Blockattack</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/about.html">Über uns</a></li>
|
||||
<li><a href="/server.html">Server Info</a></li>
|
||||
<li><a href="/about.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Über uns</a>
|
||||
</li>
|
||||
<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="team">
|
||||
@ -117,9 +74,15 @@
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p>
|
||||
<p>© 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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user