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

---
 index.html | 117 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 61 insertions(+), 56 deletions(-)
diff --git a/index.html b/index.html
index 359e971..235a3e7 100644
--- a/index.html
+++ b/index.html
@@ -27,68 +27,73 @@
             margin-top: 20px;
         }
 
+        /* Der Container für die gesamte Seite */
+        #page-container {
+            transition: transform 1s ease-in-out;
+        }
+
         /* Stil für den zusammenfallenden Effekt der Seite */
         .collapsed {
-            transition: all 0.5s ease-in-out;
-            height: 0;
-            overflow: hidden;
-            transform: scale(0.5);
+            transform: translateY(100vh); /* Die Seite wird nach unten verschoben */
+            opacity: 0; /* Die Seite wird unsichtbar */
         }
     </style>
 </head>
 <body>
-    <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>
+    <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>
 
-    <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 => {
@@ -119,10 +124,10 @@
             tntGif.style.display = 'block';
             tntBlock.style.display = 'none';
 
-            // Nach 5 Sekunden das GIF verschwinden lassen und die Seite "fallen" lassen
+            // Nach 5 Sekunden das GIF verschwinden lassen und die Seite nach unten verschieben
             setTimeout(() => {
                 tntGif.style.display = 'none';
-                document.body.classList.add('collapsed'); // Seite "fällt zusammen"
+                document.getElementById('page-container').classList.add('collapsed'); // Seite "fällt nach unten"
             }, 5000);
 
             // Seite nach 10 Sekunden neu laden
