From 2d2125bd4e9d69f67e99314ae78b675e521889b5 Mon Sep 17 00:00:00 2001
From: Akamaru <Akamaru92@live.de>
Date: Sun, 2 Mar 2025 20:38:13 +0100
Subject: [PATCH] Index: Darkmode und Footer

---
 index.html | 146 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 132 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 5b6979f..e4c4baf 100644
--- a/index.html
+++ b/index.html
@@ -14,17 +14,62 @@
 	<!-- Umami Tracking -->
     <script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="index"></script>
     <style>
+        :root {
+            --primary-color: #7F006E;
+            --secondary-color: #FF7FED;
+            --bg-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+            --text-color: #2c3e50;
+            --tool-bg: rgba(255, 255, 255, 0.9);
+            --shadow-color: rgba(0, 0, 0, 0.1);
+            --footer-color: rgba(255, 255, 255, 0.8);
+        }
+
+        .dark-mode {
+            --bg-gradient: linear-gradient(135deg, #4A0040 0%, #CC65B5 100%);
+            --text-color: #ffffff;
+            --tool-bg: rgba(45, 45, 45, 0.9);
+            --shadow-color: rgba(0, 0, 0, 0.3);
+            --footer-color: rgba(0, 0, 0, 0.8);
+        }
+
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f0f0f0;
+            background-image: var(--bg-gradient);
+            background-attachment: fixed;
+            color: var(--text-color);
             margin: 0;
-            padding: 20px;
+            padding: 20px 20px 60px;
+            min-height: 100vh;
+            position: relative;
+            line-height: 1.6;
+        }
+
+        .theme-toggle {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: var(--tool-bg);
+            border: none;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            cursor: pointer;
+            box-shadow: 0 2px 4px var(--shadow-color);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2em;
+            transition: all 0.3s ease;
+        }
+
+        .theme-toggle:hover {
+            transform: scale(1.1);
         }
 
         h1 {
             text-align: center;
-            color: #2c3e50;
-            margin-bottom: 40px;
+            margin: 40px 0;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
         }
 
         .tools-grid {
@@ -36,34 +81,69 @@
         }
 
         .tool-bubble {
-            background: white;
+            background: var(--tool-bg);
             border-radius: 15px;
             padding: 20px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            transition: transform 0.2s ease;
+            box-shadow: 0 4px 6px var(--shadow-color);
+            transition: all 0.3s ease;
             text-decoration: none;
             color: inherit;
+            backdrop-filter: blur(5px);
         }
 
         .tool-bubble:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+            transform: translateY(-5px) scale(1.02);
+            box-shadow: 0 8px 15px var(--shadow-color);
         }
 
         .tool-title {
-            color: #7f006e;
+            color: var(--primary-color);
             margin: 0 0 10px 0;
             font-size: 1.4em;
+            font-weight: 600;
+            text-shadow: 2px 2px 4px rgba(255, 127, 237, 0.33);
+        }
+
+        .dark-mode .tool-title {
+            color: #CC65B5;
+            text-shadow: 2px 2px 6px rgba(255, 127, 237, 0.66);
         }
 
         .tool-description {
-            color: #666;
-            margin: 0 0 10px 0;
-            line-height: 1.5;
+            color: var(--text-color);
+            margin: 0;
+            opacity: 0.9;
+        }
+
+        footer {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 15px;
+            text-align: center;
+            font-size: 0.9em;
+            background: var(--footer-color);
+            backdrop-filter: blur(5px);
+        }
+
+        footer a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+            transition: opacity 0.3s ease;
+        }
+
+        footer a:hover {
+            opacity: 0.8;
+            text-decoration: underline;
         }
     </style>
 </head>
 <body>
+    <!-- Hinzugefügter Theme-Toggle-Button -->
+    <button class="theme-toggle" onclick="toggleTheme()">🌙</button>
+    
     <h1>PonyWave Tools</h1>
     
     <div class="tools-grid">
@@ -120,5 +200,43 @@
             <p class="tool-description">Lass es Emoji regnen!</p>
         </a>
     </div>
+
+    <footer>
+        <div>
+            <a href="https://git.ponywave.de/Akamaru/PonyWave-Tools" target="_blank">Source Code</a> | 
+            © <span id="currentYear"></span> Akamaru | 
+            Made with ❤️ by DeepSeek
+        </div>
+    </footer>
+
+    <script>
+        // Dark Mode Toggle
+        function toggleTheme() {
+            document.body.classList.toggle('dark-mode');
+            const btn = document.querySelector('.theme-toggle');
+            btn.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';
+            
+            // Speichern der Präferenz
+            const isDark = document.body.classList.contains('dark-mode');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        }
+
+        // Theme initialisieren
+        function initTheme() {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const savedTheme = localStorage.getItem('theme');
+            
+            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+                document.body.classList.add('dark-mode');
+                document.querySelector('.theme-toggle').textContent = '☀️';
+            }
+            
+            // Jahr aktualisieren
+            document.getElementById('currentYear').textContent = new Date().getFullYear();
+        }
+
+        // Beim Laden ausführen
+        initTheme();
+    </script>
 </body>
-</html>
+</html>
\ No newline at end of file