mirror of
https://github.com/TheErrorExe/blockattack
synced 2025-09-05 21:11:00 +02:00
Update index.html
This commit is contained in:
TheErrorExe
GitHub
parent
d0ff49df62
commit
387b43ccd5
154
index.html
154
index.html
@ -15,6 +15,7 @@
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* Stil für das GIF */
|
||||
@ -25,75 +26,90 @@
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* Der Container für die gesamte Seite */
|
||||
#page-container {
|
||||
transition: transform 1s ease-in-out;
|
||||
/* Alle Elemente der Seite sollen unabhängig voneinander positioniert werden */
|
||||
body, html {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
background-color: #f0f0f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Stil für den zusammenfallenden Effekt der Seite */
|
||||
.collapsed {
|
||||
transform: translateY(100vh); /* Die Seite wird nach unten verschoben */
|
||||
opacity: 0; /* Die Seite wird unsichtbar */
|
||||
.falling {
|
||||
position: absolute;
|
||||
transition: all 1s ease-in-out;
|
||||
animation: fall 2s forwards;
|
||||
}
|
||||
|
||||
/* Fall-Animation */
|
||||
@keyframes fall {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-container">
|
||||
<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>
|
||||
<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" style="background-image: url('tnt-explode.gif');"></div>
|
||||
</section>
|
||||
<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" style="background-image: url('tnt-explode.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>
|
||||
<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>
|
||||
|
||||
<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>© 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>
|
||||
// Hardcodierte Beschreibungen für jedes Feature
|
||||
document.querySelectorAll('.card').forEach(card => {
|
||||
@ -117,20 +133,18 @@
|
||||
|
||||
// TNT-Trigger und Animationsfunktion
|
||||
function triggerTNT() {
|
||||
const tntBlock = document.getElementById('tnt');
|
||||
const tntGif = document.getElementById('tntGif');
|
||||
|
||||
const elements = document.querySelectorAll('header, section, footer, .card, .tnt-block, .tnt-gif');
|
||||
|
||||
// Zeige das GIF
|
||||
const tntGif = document.getElementById('tntGif');
|
||||
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
|
||||
setTimeout(() => {
|
||||
tntGif.style.display = 'none';
|
||||
document.getElementById('page-container').classList.add('collapsed'); // Seite "fällt nach unten"
|
||||
}, 5000);
|
||||
|
||||
// Seite nach 10 Sekunden neu laden
|
||||
// Nach 10 Sekunden die Seite neu laden
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 10000);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user