Upload files to "/"

frieda.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Frieda Gallery</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        body {
+            background: #000000;
+            color: #ffffff;
+            font-size: 13px;
+            cursor: url('https://media.discordapp.net/attachments/1233881524550635650/1546076832699256884/image.png?ex=6aa9ac81&is=6aa85b01&hm=9a208d5235c5703de928e316f560bd1473bf2a9617e98c574800378950137950&=&format=webp&quality=lossless'), auto;
+        }
+
+        .main-container {
+            width: 800px;
+            margin: 25px auto;
+            position: relative;
+        }
+
+        .box {
+            background-color: rgba(35, 35, 35, 0.75);
+            border: 2px solid #000000;
+            margin-bottom: 15px;
+            box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(3px);
+        }
+
+        .box-header {
+            background-color: rgba(10, 10, 10, 0.9);
+            color: #dddddd;
+            font-weight: bold;
+            padding: 4px 8px;
+            font-size: 14px;
+            border-bottom: 1px solid #444444;
+        }
+
+        .box-body {
+            padding: 10px;
+            color: #ffffff;
+        }
+
+        .back-link {
+            display: inline-block;
+            margin-bottom: 15px;
+            color: #ffffff;
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        .back-link:hover {
+            text-decoration: underline;
+            color: #cccccc;
+        }
+
+        .pics-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 8px;
+            background: rgba(0, 0, 0, 0.6);
+            padding: 6px;
+        }
+
+        .pics-grid img {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+            opacity: 1;
+            cursor: pointer;
+            border: 1px solid #444;
+            transition: transform 0.2s ease, border-color 0.2s ease;
+        }
+
+        .pics-grid img:hover {
+            transform: scale(1.02);
+            border-color: #ffffff;
+        }
+
+        .lightbox-modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.9);
+            backdrop-filter: blur(5px);
+            justify-content: center;
+            align-items: center;
+        }
+
+        .lightbox-modal img {
+            max-width: 90%;
+            max-height: 90%;
+            border: 2px solid #ffffff;
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+            object-fit: contain;
+        }
+
+        .lightbox-close {
+            position: absolute;
+            top: 20px;
+            right: 30px;
+            color: #ffffff;
+            font-size: 35px;
+            font-weight: bold;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .lightbox-close:hover {
+            color: #aaaaaa;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="main-container">
+        <a href="index.html" class="back-link">← back to main</a>
+
+        <div class="box">
+            <div class="box-header">Frieda Gallery</div>
+            <div class="box-body">
+                <div class="pics-grid">
+                    <img src="frieda1.png" alt="Frieda 1" onclick="openLightbox(this.src)">
+                    <img src="frieda2.png" alt="Frieda 2" onclick="openLightbox(this.src)">
+                    <img src="frieda3.png" alt="Frieda 3" onclick="openLightbox(this.src)">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="lightboxModal" class="lightbox-modal" onclick="closeLightbox()">
+        <span class="lightbox-close">&times;</span>
+        <img id="lightboxImg" src="" alt="Enlarged Image">
+    </div>
+
+    <script>
+        function openLightbox(src) {
+            document.getElementById('lightboxImg').src = src;
+            document.getElementById('lightboxModal').style.display = 'flex';
+        }
+
+        function closeLightbox() {
+            document.getElementById('lightboxModal').style.display = 'none';
+        }
+    </script>
+
+</body>
+</html>