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

Update index.html

Browse Source
This commit is contained in:
TheErrorExe 2025-01-06 19:39:57 +01:00 committed by GitHub
parent d0ff49df62
commit 387b43ccd5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 84 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
index.html
View File

@ -15,6 +15,7 @@
background-size: cover; background-size: cover;
cursor: pointer; cursor: pointer;
margin-top: 20px; margin-top: 20px;
z-index: 999;
} }
/* Stil für das GIF */ /* Stil für das GIF */
@ -25,75 +26,90 @@
background-size: cover; background-size: cover;
cursor: pointer; cursor: pointer;
margin-top: 20px; margin-top: 20px;
z-index: 999;
} }
/* Der Container für die gesamte Seite */ /* Alle Elemente der Seite sollen unabhängig voneinander positioniert werden */
#page-container { body, html {
transition: transform 1s ease-in-out; overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
background-color: #f0f0f0;
position: relative;
} }
/* Stil für den zusammenfallenden Effekt der Seite */ .falling {
.collapsed { position: absolute;
transform: translateY(100vh); /* Die Seite wird nach unten verschoben */ transition: all 1s ease-in-out;
opacity: 0; /* Die Seite wird unsichtbar */ animation: fall 2s forwards;
}
/* Fall-Animation */
@keyframes fall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100vh);
}
} }
</style> </style>
</head> </head>
<body> <body>
<div id="page-container"> <header>
<header> <nav>
<nav> <ul>
<ul> <li><a href="/">Home</a></li>
<li><a href="/">Home</a></li> <li><a href="/about.html">Über uns</a></li>
<li><a href="/about.html">Über uns</a></li> <li><a href="/server.html">Server Info</a></li>
<li><a href="/server.html">Server Info</a></li> </ul>
</ul> </nav>
</nav> </header>
</header>
<section id="home"> <section id="home">
<h1>Willkommen auf Blockattack</h1> <h1>Willkommen auf Blockattack</h1>
<p>Der beste Minecraft Server von Dr. Mifo!</p> <p>Der beste Minecraft Server von Dr. Mifo!</p>
<p>Verbinde dich jetzt: <strong>blockattack.fun</strong></p> <p>Verbinde dich jetzt: <strong>blockattack.fun</strong></p>
<p><em>Jetzt die neuesten Features wie das Claimen von Gebieten ausprobieren!</em></p> <p><em>Jetzt die neuesten Features wie das Claimen von Gebieten ausprobieren!</em></p>
</section> </section>
<section id="features"> <section id="features">
<h2>Warum Blockattack?</h2> <h2>Warum Blockattack?</h2>
<div class="card" data-feature="Gebietsclaiming"> <div class="card" data-feature="Gebietsclaiming">
<img src="/image1.jpg" alt="Feature 1"> <img src="/image1.jpg" alt="Feature 1">
<h3>Gebietsclaiming</h3> <h3>Gebietsclaiming</h3>
<p>Schütze dein Land vor anderen Spielern und baue es aus.</p> <p>Schütze dein Land vor anderen Spielern und baue es aus.</p>
</div> </div>
<div class="card" data-feature="PVP-Kämpfe"> <div class="card" data-feature="PVP-Kämpfe">
<img src="/image2.jpg" alt="Feature 2"> <img src="/image2.jpg" alt="Feature 2">
<h3>PVP-Kämpfe</h3> <h3>PVP-Kämpfe</h3>
<p>Tritt in spannenden Kämpfen gegen andere Spieler an!</p> <p>Tritt in spannenden Kämpfen gegen andere Spieler an!</p>
</div> </div>
<div class="card" data-feature="Events"> <div class="card" data-feature="Events">
<img src="/image3.jpg" alt="Feature 3"> <img src="/image3.jpg" alt="Feature 3">
<h3>Events</h3> <h3>Events</h3>
<p>Erlebe regelmäßige Events und spannende Abenteuer.</p> <p>Erlebe regelmäßige Events und spannende Abenteuer.</p>
</div> </div>
</section> </section>
<!-- Der TNT Block --> <!-- Der TNT Block -->
<section id="tnt-section"> <section id="tnt-section">
<h2>Klick auf das TNT</h2> <h2>Klick auf das TNT</h2>
<div id="tnt" class="tnt-block" onclick="triggerTNT()"></div> <div id="tnt" class="tnt-block" onclick="triggerTNT()"></div>
<div id="tntGif" class="tnt-gif" style="background-image: url('tnt-explode.gif');"></div> <div id="tntGif" class="tnt-gif" style="background-image: url('tnt-explode.gif');"></div>
</section> </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>
<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>
<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>
<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>
</div>
<script> <script>
// Hardcodierte Beschreibungen für jedes Feature // Hardcodierte Beschreibungen für jedes Feature
document.querySelectorAll('.card').forEach(card => { document.querySelectorAll('.card').forEach(card => {
@ -117,20 +133,18 @@
// TNT-Trigger und Animationsfunktion // TNT-Trigger und Animationsfunktion
function triggerTNT() { function triggerTNT() {
const tntBlock = document.getElementById('tnt'); const elements = document.querySelectorAll('header, section, footer, .card, .tnt-block, .tnt-gif');
const tntGif = document.getElementById('tntGif');
// Zeige das GIF // Zeige das GIF
const tntGif = document.getElementById('tntGif');
tntGif.style.display = 'block'; tntGif.style.display = 'block';
tntBlock.style.display = 'none';
// Alle Seiten-Elemente fallen lassen
elements.forEach(el => {
el.classList.add('falling');
});
// Nach 5 Sekunden das GIF verschwinden lassen und die Seite nach unten verschieben // Nach 10 Sekunden die Seite neu laden
setTimeout(() => {
tntGif.style.display = 'none';
document.getElementById('page-container').classList.add('collapsed'); // Seite "fällt nach unten"
}, 5000);
// Seite nach 10 Sekunden neu laden
setTimeout(() => { setTimeout(() => {
location.reload(); location.reload();
}, 10000); }, 10000);