📝 "Refactor database files and UI components"

backend/app/static/css/input.css

@@ -790,9 +790,11 @@
   left: 0 !important;
   right: 0 !important;
   /* Verstärktes Glassmorphism Design */
-  background: rgba(255, 255, 255, 0.15) !important;
+  --navbar-blur: 40px;
-  backdrop-filter: blur(40px) saturate(200%) brightness(110%) contrast(105%) !important;
+  --navbar-opacity: 0.15;
-  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(110%) contrast(105%) !important;
+  background: rgba(255, 255, 255, var(--navbar-opacity, 0.15)) !important;
+  backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important;
+  -webkit-backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important;
   box-shadow: 
     0 8px 32px rgba(0, 0, 0, 0.12),
     0 2px 8px rgba(0, 0, 0, 0.08),
@@ -803,9 +805,10 @@
 }
 
 .dark .navbar {
-  background: rgba(0, 0, 0, 0.25) !important;
+  --navbar-dark-opacity: 0.25;
-  backdrop-filter: blur(45px) saturate(180%) brightness(120%) contrast(115%) !important;
+  background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.25)) !important;
-  -webkit-backdrop-filter: blur(45px) saturate(180%) brightness(120%) contrast(115%) !important;
+  backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;
+  -webkit-backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;
   box-shadow: 
     0 8px 32px rgba(0, 0, 0, 0.4),
     0 2px 8px rgba(0, 0, 0, 0.3),
@@ -816,9 +819,11 @@
 
 /* Navbar Scroll-Effekt */
 .navbar.scrolled {
-  background: rgba(255, 255, 255, 0.25) !important;
+  --navbar-blur: 50px;
-  backdrop-filter: blur(50px) saturate(220%) brightness(115%) contrast(110%) !important;
+  --navbar-opacity: 0.25;
-  -webkit-backdrop-filter: blur(50px) saturate(220%) brightness(115%) contrast(110%) !important;
+  background: rgba(255, 255, 255, var(--navbar-opacity, 0.25)) !important;
+  backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important;
+  -webkit-backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important;
   box-shadow: 
     0 12px 40px rgba(0, 0, 0, 0.15),
     0 4px 12px rgba(0, 0, 0, 0.1),
@@ -827,9 +832,10 @@
 }
 
 .dark .navbar.scrolled {
-  background: rgba(0, 0, 0, 0.35) !important;
+  --navbar-dark-opacity: 0.35;
-  backdrop-filter: blur(55px) saturate(200%) brightness(125%) contrast(120%) !important;
+  background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.35)) !important;
-  -webkit-backdrop-filter: blur(55px) saturate(200%) brightness(125%) contrast(120%) !important;
+  backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;
+  -webkit-backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;
   box-shadow: 
     0 12px 40px rgba(0, 0, 0, 0.5),
     0 4px 12px rgba(0, 0, 0, 0.4),
@@ -856,6 +862,7 @@
     0 6px 20px rgba(0, 0, 0, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.2),
     0 0 0 1px rgba(255, 255, 255, 0.05);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .dark .navbar-menu-new {
@@ -873,6 +880,26 @@
   display: none;
 }
 
+/* Glassmorphism Hover-Animation für Navbar-Menu */
+.navbar-menu-new:hover {
+  backdrop-filter: blur(35px) saturate(190%) brightness(112%);
+  -webkit-backdrop-filter: blur(35px) saturate(190%) brightness(112%);
+  box-shadow: 
+    0 8px 25px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+  transform: translateY(-1px);
+}
+
+.dark .navbar-menu-new:hover {
+  backdrop-filter: blur(40px) saturate(170%) brightness(120%);
+  -webkit-backdrop-filter: blur(40px) saturate(170%) brightness(120%);
+  box-shadow: 
+    0 8px 25px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
 .nav-item {
   @apply flex items-center space-x-1.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-300;
   color: rgba(15, 23, 42, 0.85);
@@ -886,6 +913,7 @@
     inset 0 1px 0 rgba(255, 255, 255, 0.15);
   position: relative;
   overflow: hidden;
+  animation: nav-item-entrance 0.6s ease-out;
 }
 
 /* Glassmorphism Hover-Effekt */
@@ -904,6 +932,25 @@
   left: 100%;
 }
 
+/* Zusätzlicher Glitter-Effekt */
+.nav-item::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.1) 30deg, transparent 60deg);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  animation: rotate 3s linear infinite;
+}
+
+.nav-item:hover::after {
+  opacity: 1;
+}
+
 .dark .nav-item {
   color: rgba(255, 255, 255, 0.85);
   background: rgba(0, 0, 0, 0.15);
@@ -951,6 +998,7 @@
     inset 0 1px 0 rgba(255, 255, 255, 0.5),
     0 0 0 1px rgba(59, 130, 246, 0.3);
   transform: translateY(-1px);
+  animation: nav-item-active-glow 2s ease-in-out infinite alternate;
 }
 
 .dark .nav-item.active {
@@ -965,6 +1013,81 @@
     0 0 0 1px rgba(59, 130, 246, 0.2);
 }
 
+/* Animationen für Glassmorphism-Effekte */
+@keyframes nav-item-entrance {
+  0% {
+    opacity: 0;
+    transform: translateY(10px) scale(0.95);
+    backdrop-filter: blur(5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    backdrop-filter: blur(15px) saturate(140%);
+  }
+}
+
+@keyframes nav-item-active-glow {
+  0% {
+    box-shadow: 
+      0 12px 24px rgba(0, 0, 0, 0.15),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5),
+      0 0 0 1px rgba(59, 130, 246, 0.3);
+  }
+  100% {
+    box-shadow: 
+      0 16px 32px rgba(0, 0, 0, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.6),
+      0 0 0 2px rgba(59, 130, 246, 0.5);
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Glassmorphism-Partikel-Effekt */
+.navbar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+  opacity: 0;
+  animation: glassmorphism-particles 8s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.dark .navbar::before {
+  background: 
+    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+}
+
+@keyframes glassmorphism-particles {
+  0%, 100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+
 /* Dark Mode Toggle - Kompakteres Design */
 .dark-mode-toggle-new {
   @apply relative p-2 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer;

backend/app/static/js/ui-components.js

@@ -1083,6 +1083,147 @@
         }
     }
     
+    /**
+     * Navbar Scroll Manager - Glassmorphism Effekte beim Scrollen
+     */
+    class NavbarScrollManager {
+        constructor() {
+            this.navbar = document.querySelector('.navbar');
+            this.isScrolled = false;
+            this.scrollThreshold = 50; // Ab wie vielen Pixeln der Effekt aktiviert wird
+            this.ticking = false; // Für requestAnimationFrame Optimierung
+            
+            this.init();
+        }
+        
+        /**
+         * Scroll-Handler mit Performance-Optimierung
+         */
+        handleScroll() {
+            if (!this.ticking) {
+                requestAnimationFrame(() => {
+                    this.updateNavbar();
+                    this.ticking = false;
+                });
+                this.ticking = true;
+            }
+        }
+        
+        /**
+         * Navbar basierend auf Scroll-Position aktualisieren
+         */
+        updateNavbar() {
+            if (!this.navbar) return;
+            
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const shouldBeScrolled = scrollTop > this.scrollThreshold;
+            
+            if (shouldBeScrolled !== this.isScrolled) {
+                this.isScrolled = shouldBeScrolled;
+                
+                if (this.isScrolled) {
+                    this.navbar.classList.add('scrolled');
+                    this.navbar.style.transform = 'translateY(0)';
+                } else {
+                    this.navbar.classList.remove('scrolled');
+                }
+                
+                // Event für andere Komponenten auslösen
+                window.dispatchEvent(new CustomEvent('navbarScrolled', { 
+                    detail: { isScrolled: this.isScrolled, scrollTop }
+                }));
+            }
+        }
+        
+        /**
+         * Sanfte Navbar-Animation beim Scrollen nach oben/unten
+         */
+        handleDirectionalScroll() {
+            let lastScrollTop = 0;
+            
+            return () => {
+                if (!this.navbar) return;
+                
+                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                
+                if (scrollTop > lastScrollTop && scrollTop > this.scrollThreshold) {
+                    // Scrollen nach unten - Navbar ausblenden
+                    this.navbar.style.transform = 'translateY(-100%)';
+                } else {
+                    // Scrollen nach oben - Navbar einblenden
+                    this.navbar.style.transform = 'translateY(0)';
+                }
+                
+                lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+            };
+        }
+        
+        /**
+         * Parallax-Effekt für die Navbar
+         */
+        applyParallaxEffect() {
+            if (!this.navbar) return;
+            
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const parallaxSpeed = 0.5;
+            const yPos = -(scrollTop * parallaxSpeed);
+            
+            // Nur bei größeren Bildschirmen anwenden
+            if (window.innerWidth > 768) {
+                this.navbar.style.transform = `translateY(${yPos}px)`;
+            }
+        }
+        
+        /**
+         * Glassmorphism-Intensität basierend auf Scroll-Position
+         */
+        updateGlassmorphismIntensity() {
+            if (!this.navbar) return;
+            
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const maxScroll = 200; // Maximale Scroll-Distanz für vollen Effekt
+            const intensity = Math.min(scrollTop / maxScroll, 1);
+            
+            // CSS Custom Properties für dynamische Blur-Werte
+            const blurValue = 40 + (intensity * 20); // Von 40px zu 60px
+            const opacityValue = 0.15 + (intensity * 0.2); // Von 0.15 zu 0.35
+            
+            this.navbar.style.setProperty('--navbar-blur', `${blurValue}px`);
+            this.navbar.style.setProperty('--navbar-opacity', opacityValue);
+        }
+        
+        /**
+         * Navbar-Manager initialisieren
+         */
+        init() {
+            if (!this.navbar) {
+                console.log('ℹ️ Navbar nicht gefunden - Scroll-Effekte deaktiviert');
+                return;
+            }
+            
+            console.log('🌊 Navbar Scroll Manager erfolgreich initialisiert');
+            
+            // CSS Custom Properties initialisieren
+            this.navbar.style.setProperty('--navbar-blur', '40px');
+            this.navbar.style.setProperty('--navbar-opacity', '0.15');
+            
+            // Event Listener für Scroll-Events
+            window.addEventListener('scroll', this.handleScroll.bind(this), { passive: true });
+            
+            // Optionale erweiterte Effekte (können aktiviert werden)
+            // const directionalScroll = this.handleDirectionalScroll();
+            // window.addEventListener('scroll', directionalScroll, { passive: true });
+            
+            // Resize-Handler für responsive Anpassungen
+            window.addEventListener('resize', () => {
+                this.updateNavbar();
+            });
+            
+            // Initialer Status setzen
+            this.updateNavbar();
+        }
+    }
+    
     // Initialisierung aller UI-Komponenten
     document.addEventListener('DOMContentLoaded', function() {
         // Toast-Manager
@@ -1109,6 +1250,9 @@
         // Connection Status Manager
         window.MYP.UI.connectionStatus = new ConnectionStatusManager();
         
+        // Navbar Scroll Manager für Glassmorphism-Effekte
+        window.MYP.UI.navbarScroll = new NavbarScrollManager();
+        
         // Convenience-Methoden
         window.showToast = (message, type, duration) => window.MYP.UI.toast.show(message, type, duration);
         window.showModal = (modalId, options) => window.MYP.UI.modal.open(modalId, options);