📝 "Refactor database files and UI components"

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);