From d8ff84c774f00f8d715cf84abcd761c8316659d4 Mon Sep 17 00:00:00 2001
From: TheErrorExe <error.exe@outlook.de>
Date: Mon, 17 Feb 2025 21:09:23 +0100
Subject: [PATCH] f

---
 bilder.html | 128 ++++++++++++++++++++++++++++++++--------------------
 1 file changed, 79 insertions(+), 49 deletions(-)
diff --git a/bilder.html b/bilder.html
index 63a34d8..9a7d665 100644
--- a/bilder.html
+++ b/bilder.html
@@ -7,28 +7,44 @@
     <link rel="stylesheet" href="https://www.blockattack.fun/static/css/style.css">
     <script src="/static/js/script.js" defer></script>
     <script>
-        document.getElementById("copy-ip-btn").addEventListener("click", function () {
-            const serverIP = "blockattack.fun";
-            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);
+        document.addEventListener("DOMContentLoaded", function () {
+            document.getElementById("copy-ip-btn").addEventListener("click", function () {
+                const serverIP = "blockattack.fun";
+                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);
+                });
             });
         });
     </script>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html, body {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
         .gallery {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             gap: 10px;
             padding: 20px;
         }
+
         .gallery img {
             width: 100%;
             height: auto;
             cursor: pointer;
             border-radius: 5px;
         }
+
         .modal {
             display: none;
             position: fixed;
@@ -41,10 +57,12 @@
             justify-content: center;
             align-items: center;
         }
+
         .modal img {
             max-width: 90%;
             max-height: 90%;
         }
+
         .close {
             position: absolute;
             top: 20px;
@@ -53,35 +71,44 @@
             color: white;
             cursor: pointer;
         }
+
+        #galerie {
+            flex: 1;
+        }
+
+        footer {
+            text-align: center;
+            background-color: #333;
+            color: white;
+            padding: 10px;
+            margin-top: auto;
+        }
     </style>
 </head>
 <body>
-    <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>
-            <li><a href="/server.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Server
-                    Info</a></li>
-            <li><a href="/news.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Neuigkeiten</a></li>
-                            <li><a href="/guide.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Beitrittsguide</a></li>
-                            <li><a href="/bilder.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Bildergalerie</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>
+    <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="/server.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Server Info</a></li>
+                <li><a href="/news.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Neuigkeiten</a></li>
+                <li><a href="/guide.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Beitrittsguide</a></li>
+                <li><a href="/bilder.html" style="text-decoration: none; color: #fff; margin-left: 20px;">Bildergalerie</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="galerie">
         <h1 style="text-align: center; color: #00d8ff;">Bildergalerie von Blockattack</h1>
         <div class="gallery">
@@ -89,37 +116,40 @@
             <img src="/galerie-img/2.png" alt="Bild 2" onclick="openModal(this.src)">
             <img src="/galerie-img/3.png" alt="Bild 3" onclick="openModal(this.src)">
             <img src="/galerie-img/4.png" alt="Bild 4" onclick="openModal(this.src)">
-            <img src="/galerie-img/5.png" alt="Bild 4" onclick="openModal(this.src)">
-            <img src="/galerie-img/6.png" alt="Bild 4" onclick="openModal(this.src)">
-            <img src="/galerie-img/7.png" alt="Bild 4" onclick="openModal(this.src)">
-            <img src="/galerie-img/8.png" alt="Bild 4" onclick="openModal(this.src)">
-            <img src="/galerie-img/9.png" alt="Bild 4" onclick="openModal(this.src)">
-            <img src="/galerie-img/10.png" alt="Bild 4" onclick="openModal(this.src)">
-            <img src="/galerie-img/11.png" alt="Bild 4" onclick="openModal(this.src)">
-            <br><br><br>
+            <img src="/galerie-img/5.png" alt="Bild 5" onclick="openModal(this.src)">
+            <img src="/galerie-img/6.png" alt="Bild 6" onclick="openModal(this.src)">
+            <img src="/galerie-img/7.png" alt="Bild 7" onclick="openModal(this.src)">
+            <img src="/galerie-img/8.png" alt="Bild 8" onclick="openModal(this.src)">
+            <img src="/galerie-img/9.png" alt="Bild 9" onclick="openModal(this.src)">
+            <img src="/galerie-img/10.png" alt="Bild 10" onclick="openModal(this.src)">
+            <img src="/galerie-img/11.png" alt="Bild 11" onclick="openModal(this.src)">
         </div>
     </section>
+
     <div class="modal" id="modal" onclick="closeModal()">
         <span class="close">&times;</span>
         <img id="modal-img">
     </div>
+
+    <footer>
+        <p>&copy; 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>
+        <p style="display: inline;"> und <a href="https://github.com/GomorrhaDev" target="_blank" style="color: inherit; text-decoration: inherit;">GomorrhaDev</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>
+    </footer>
+
     <script>
         function openModal(src) {
             document.getElementById("modal").style.display = "flex";
             document.getElementById("modal-img").src = src;
         }
+
         function closeModal() {
             document.getElementById("modal").style.display = "none";
         }
     </script>
-    <footer>
-        <p>&copy; 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>
-        <p style="display: inline;"> und <a href="https://github.com/GomorrhaDev" target="_blank" style="color: inherit; text-decoration: inherit; display: inline;">GomorrhaDev</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>
-    </footer>
 </body>
 </html>
