nenn mich designer

static/neural-network-background.js

@@ -39,11 +39,10 @@ class NeuralNetworkBackground {
     this.connections = [];
     this.activeConnections = new Set();
     this.animationFrameId = null;
-    this.isDarkMode = true;
     this.isDestroying = false;
     
     // Farben - Lila Farbpalette
-    this.darkModeColors = {
+    this.colors = {
       background: '#040215',
       nodeColor: '#6a5498',
       nodePulse: '#9c7fe0',
@@ -51,15 +50,6 @@ class NeuralNetworkBackground {
       flowColor: '#b47fea'
     };
     
-    // Farben für Light Mode mit Lila-Akzenten
-    this.lightModeColors = {
-      background: '#f8f6fc',
-      nodeColor: '#6a5498',
-      nodePulse: '#9c7fe0',
-      connectionColor: '#7e70a5',
-      flowColor: '#a06cd5'
-    };
-    
     // Konfiguration
     this.config = {
       nodeCount: 80,            // Anzahl der Knoten
@@ -78,9 +68,6 @@ class NeuralNetworkBackground {
     
     // Event-Listener
     window.addEventListener('resize', this.resizeCanvas.bind(this));
-    document.addEventListener('darkModeToggled', (event) => {
-      this.isDarkMode = event.detail.isDark;
-    });
     
     console.log('Vereinfachter Neural Network Background initialized');
   }
@@ -279,7 +266,7 @@ class NeuralNetworkBackground {
   }
   
   render(now) {
-    const colors = this.isDarkMode ? this.darkModeColors : this.lightModeColors;
+    const colors = this.colors;
     const width = this.canvas.width / (window.devicePixelRatio || 1);
     const height = this.canvas.height / (window.devicePixelRatio || 1);
     
@@ -398,4 +385,8 @@ class NeuralNetworkBackground {
 // Initialisiert den Hintergrund, sobald die Seite geladen ist
 document.addEventListener('DOMContentLoaded', () => {
   window.neuralBackground = new NeuralNetworkBackground();
+  
+  // Sicherstellen, dass die Seite immer im Dark Mode ist
+  document.documentElement.classList.add('dark');
+  document.body.classList.add('dark');
 }); 

templates/base.html

@@ -59,6 +59,20 @@
                 800: '#0e1220',
                 900: '#0a0e19'
               }
+            },
+            keyframes: {
+              float: {
+                '0%, 100%': { transform: 'translateY(0)' },
+                '50%': { transform: 'translateY(-5px)' }
+              },
+              'bounce-slow': {
+                '0%, 100%': { transform: 'translateY(0)' },
+                '50%': { transform: 'translateY(-8px)' }
+              }
+            },
+            animation: {
+              float: 'float 3s ease-in-out infinite',
+              'bounce-slow': 'bounce-slow 2s ease-in-out infinite'
             }
           }
         }
@@ -306,25 +320,6 @@
 
                 <!-- Rechte Seite -->
                 <div class="flex items-center space-x-4">
-                    <!-- Dark Mode Toggle Switch -->
-                    <div class="flex items-center cursor-pointer" @click="toggleDarkMode">
-                        <div class="relative w-12 h-6">
-                            <input type="checkbox" id="darkModeToggle" class="sr-only" x-model="darkMode">
-                            <div class="block w-12 h-6 rounded-full transition-colors duration-300"
-                                 x-bind:class="darkMode ? 'bg-purple-800/50' : 'bg-gray-400/50'"></div>
-                            <div class="dot absolute left-1 top-1 w-4 h-4 rounded-full transition-transform duration-300 shadow-md"
-                                 x-bind:class="darkMode ? 'bg-purple-600 transform translate-x-6' : 'bg-white'"></div>
-                        </div>
-                        <div class="ml-3 hidden sm:block" 
-                             x-bind:class="darkMode ? 'text-white/90' : 'text-gray-700'">
-                            <span x-text="darkMode ? 'Dunkel' : 'Hell'"></span>
-                        </div>
-                        <div class="ml-2 sm:hidden" 
-                             x-bind:class="darkMode ? 'text-white/90' : 'text-gray-700'">
-                            <i class="fa-solid" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i>
-                        </div>
-                    </div>
-
                     <!-- Profil-Link oder Login -->
                     {% if current_user.is_authenticated %}
                     <div class="relative" x-data="{ open: false }">

templates/index.html

@@ -179,6 +179,12 @@
         <div class="text-center">
           <div class="text-3xl font-bold gradient-text mb-2 animate-float">Systades</div>
           <div class="text-lg text-gray-700 dark:text-gray-300">WISSEN VERNETZEN</div>
+          <!-- Animierte Pfeilspitze -->
+          <div class="mt-6 flex justify-center">
+            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-white animate-bounce-slow">
+              <path d="M10 12L0 2L2 0L10 8L18 0L20 2L10 12Z" fill="currentColor" fill-opacity="0.7"/>
+            </svg>
+          </div>
         </div>
       </div>
     </div>