From 387b43ccd5007532a5b0d2a203466fd51d4df828 Mon Sep 17 00:00:00 2001
From: TheErrorExe <161362055+TheErrorExe@users.noreply.github.com>
Date: Mon, 6 Jan 2025 19:39:57 +0100
Subject: [PATCH] Update index.html

---
 index.html | 154 +++++++++++++++++++++++++++++------------------------
 1 file changed, 84 insertions(+), 70 deletions(-)
diff --git a/index.html b/index.html
index 235a3e7..7b70c65 100644
--- a/index.html
+++ b/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>&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>
         // 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);
