It appears that you've made several updates to your project's codebase and logs. Here's a summary of the changes:

2025-06-12 10:16:58 +02:00
parent 2bf4e0e6c0
commit 07e9a7607d
1131 changed files with 3958 additions and 1 deletions
--- a/backend/static/css/navbar-improved.css
+++ b/backend/static/css/navbar-improved.css
@ -0,0 +1,487 @@
+/* =============================================
+   SIMPLIFIED RESPONSIVE NAVBAR - MYP PLATFORM
+   ============================================= */
+
+/* CSS Variables für einfache Anpassung */
+:root {
+    --navbar-height: 4rem;
+    --navbar-bg: rgba(255, 255, 255, 0.85);
+    --navbar-border: rgba(209, 213, 219, 0.3);
+    --navbar-blur: 12px;
+    --nav-item-gap: clamp(0.25rem, 1vw, 0.75rem);
+    --nav-item-padding: clamp(0.5rem, 2vw, 1rem);
+    --mobile-menu-height: calc(100vh - var(--navbar-height));
+}
+
+.dark {
+    --navbar-bg: rgba(15, 23, 42, 0.85);
+    --navbar-border: rgba(51, 65, 85, 0.3);
+}
+
+/* Basis Navbar - Simplified */
+.navbar {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    width: 100%;
+    height: var(--navbar-height);
+    background: var(--navbar-bg);
+    backdrop-filter: blur(var(--navbar-blur));
+    -webkit-backdrop-filter: blur(var(--navbar-blur));
+    border-bottom: 1px solid var(--navbar-border);
+    transition: all 0.2s ease;
+}
+
+/* Navbar Scroll State */
+.navbar.scrolled {
+    --navbar-height: 3.5rem;
+    --navbar-bg: rgba(255, 255, 255, 0.95);
+    --navbar-blur: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.dark .navbar.scrolled {
+    --navbar-bg: rgba(15, 23, 42, 0.95);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* Container mit flexibler Breite */
+.navbar > div {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 clamp(0.75rem, 3vw, 2rem);
+    max-width: 100%;
+}
+
+/* Navbar Brand - Flexible Größe */
+.navbar-brand {
+    display: flex;
+    align-items: center;
+    gap: clamp(0.5rem, 2vw, 0.75rem);
+    text-decoration: none;
+    flex-shrink: 0;
+}
+
+.navbar-brand svg {
+    width: clamp(1.25rem, 4vw, 1.75rem);
+    height: clamp(1.25rem, 4vw, 1.75rem);
+}
+
+.navbar-brand span {
+    font-size: clamp(0.75rem, 2vw, 1rem);
+}
+
+/* Desktop Navigation - Simplified */
+.navbar-menu-new {
+    display: none;
+    align-items: center;
+    gap: var(--nav-item-gap);
+    padding: 0.25rem;
+    flex: 1;
+    justify-content: center;
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.navbar-menu-new::-webkit-scrollbar {
+    display: none;
+}
+
+@media (min-width: 1024px) {
+    .navbar-menu-new {
+        display: flex;
+    }
+}
+
+/* Navigation Items - Simplified */
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: var(--nav-item-padding);
+    border-radius: 0.5rem;
+    color: rgb(100, 116, 139);
+    text-decoration: none;
+    font-size: clamp(0.8rem, 1.5vw, 0.875rem);
+    font-weight: 500;
+    white-space: nowrap;
+    transition: all 0.15s ease;
+}
+
+.dark .nav-item {
+    color: rgb(148, 163, 184);
+}
+
+.nav-item:hover,
+.nav-item.active {
+    background: rgba(59, 130, 246, 0.1);
+    color: rgb(59, 130, 246);
+}
+
+.dark .nav-item:hover,
+.dark .nav-item.active {
+    background: rgba(59, 130, 246, 0.2);
+    color: rgb(96, 165, 250);
+}
+
+/* Mobile Menu Button - Größere Touch Target */
+#mobileMenuToggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+#mobileMenuToggle:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.dark #mobileMenuToggle:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+@media (min-width: 1024px) {
+    #mobileMenuToggle {
+        display: none;
+    }
+}
+
+/* Mobile Menu - Fullscreen Simplified */
+.mobile-menu-new {
+    position: fixed;
+    top: var(--navbar-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--navbar-bg);
+    backdrop-filter: blur(var(--navbar-blur));
+    -webkit-backdrop-filter: blur(var(--navbar-blur));
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.mobile-menu-new.active {
+    transform: translateX(0);
+}
+
+/* Mobile Navigation Container */
+.mobile-menu-new nav {
+    padding: 1rem 0;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Mobile Navigation Items - Größere Touch Targets */
+.mobile-nav-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem clamp(1rem, 4vw, 2rem);
+    color: rgb(71, 85, 105);
+    text-decoration: none;
+    font-size: clamp(0.9rem, 3vw, 1rem);
+    font-weight: 500;
+    transition: background-color 0.15s ease;
+    min-height: 3rem;
+}
+
+.dark .mobile-nav-item {
+    color: rgb(148, 163, 184);
+}
+
+.mobile-nav-item:active {
+    background: rgba(59, 130, 246, 0.1);
+}
+
+.mobile-nav-item.active {
+    background: rgba(59, 130, 246, 0.05);
+    color: rgb(37, 99, 235);
+    border-left: 3px solid rgb(37, 99, 235);
+}
+
+.dark .mobile-nav-item.active {
+    background: rgba(59, 130, 246, 0.1);
+    color: rgb(96, 165, 250);
+    border-left-color: rgb(96, 165, 250);
+}
+
+/* Icons - Consistent Sizing */
+.nav-item i,
+.nav-item svg,
+.mobile-nav-item i,
+.mobile-nav-item svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+}
+
+/* Rechte Navbar Sektion - Flexible */
+.navbar .flex.items-center.space-x-2 {
+    gap: clamp(0.5rem, 2vw, 1rem);
+}
+
+/* Dark Mode Toggle - Simplified */
+.dark-mode-toggle {
+    position: relative;
+    width: 2.5rem;
+    height: 1.5rem;
+    background: rgb(229, 231, 235);
+    border-radius: 0.75rem;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    transition: background-color 0.2s ease;
+}
+
+.dark .dark-mode-toggle {
+    background: rgb(71, 85, 105);
+}
+
+.dark-mode-toggle-slider {
+    position: absolute;
+    top: 0.125rem;
+    left: 0.125rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.dark .dark-mode-toggle-slider {
+    transform: translateX(1rem);
+}
+
+/* User & Notification Buttons - Consistent Sizing */
+#notificationToggle,
+#user-menu-button {
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Dropdowns - Simplified */
+#notificationDropdown,
+#user-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 0.5rem;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--navbar-border);
+    border-radius: 0.75rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    min-width: min(20rem, 90vw);
+    max-width: 90vw;
+}
+
+.dark #notificationDropdown,
+.dark #user-dropdown {
+    background: rgba(15, 23, 42, 0.98);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+/* Responsive Font Sizes */
+@media (max-width: 640px) {
+    .navbar-brand .text-xs {
+        display: none;
+    }
+    
+    #notificationDropdown,
+    #user-dropdown {
+        position: fixed;
+        left: 1rem;
+        right: 1rem;
+        width: auto;
+    }
+}
+
+/* Landscape Mobile Optimization */
+@media (max-height: 500px) and (orientation: landscape) {
+    :root {
+        --navbar-height: 3rem;
+    }
+    
+    .mobile-nav-item {
+        min-height: 2.5rem;
+        padding: 0.75rem clamp(1rem, 4vw, 2rem);
+    }
+}
+
+/* Tablet Optimization */
+@media (min-width: 768px) and (max-width: 1023px) {
+    .navbar-menu-new {
+        display: flex;
+        gap: 0.25rem;
+    }
+    
+    .nav-item {
+        font-size: 0.8rem;
+        padding: 0.5rem 0.75rem;
+    }
+    
+    .nav-item span {
+        display: none;
+    }
+    
+    .nav-item i,
+    .nav-item svg {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+}
+
+/* Ultra-Wide Screens */
+@media (min-width: 1920px) {
+    .navbar > div {
+        max-width: 1920px;
+        margin: 0 auto;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .navbar {
+        position: relative;
+        box-shadow: none;
+    }
+    
+    #mobileMenuToggle,
+    .mobile-menu-new {
+        display: none !important;
+    }
+}
+
+/* Performance Optimizations */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* Touch Device Optimizations */
+@media (hover: none) and (pointer: coarse) {
+    .nav-item:hover {
+        background: transparent;
+    }
+    
+    .mobile-nav-item {
+        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1);
+    }
+}
+
+/* High DPI Screens */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .navbar {
+        border-bottom-width: 0.5px;
+    }
+}
+
+/* Remove all duplicate glassmorphism effects */
+.navbar::before,
+.navbar::after,
+.glass-nav,
+.glass-navbar {
+    display: none !important;
+}
+
+/* Ensure smooth scrolling on mobile */
+.mobile-menu-new {
+    -webkit-overflow-scrolling: touch;
+}
+
+/* Dynamic Viewport Units für bessere Mobile-Anpassung */
+@supports (height: 100dvh) {
+    :root {
+        --mobile-menu-height: calc(100dvh - var(--navbar-height));
+    }
+    
+    .mobile-menu-new {
+        height: calc(100dvh - var(--navbar-height));
+        max-height: calc(100dvh - var(--navbar-height));
+    }
+}
+
+/* Flexible Container für alle Bildschirmgrößen */
+.navbar .max-w-7xl {
+    width: 100%;
+    max-width: none;
+}
+
+/* Auto-Layout für sehr kleine Screens */
+@media (max-width: 360px) {
+    :root {
+        --navbar-height: 3.5rem;
+    }
+    
+    .navbar-brand span {
+        display: none;
+    }
+    
+    .navbar-brand svg {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+    
+    .nav-item {
+        padding: 0.5rem;
+        font-size: 0.75rem;
+    }
+}
+
+/* Notch/Safe Area Support für moderne Smartphones */
+@supports (padding: max(0px)) {
+    .navbar {
+        padding-top: max(0px, env(safe-area-inset-top));
+    }
+    
+    .mobile-menu-new {
+        padding-bottom: max(1rem, env(safe-area-inset-bottom));
+    }
+}
+
+/* Flexbox Fallbacks für ältere Browser */
+.navbar > div {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+}
+
+/* Smooth Transitions für alle interaktiven Elemente */
+.navbar *:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+.navbar *:focus-visible {
+    outline: 2px solid rgb(59, 130, 246);
+    outline-offset: 2px;
+    border-radius: 0.25rem;
+} 
--- a/backend/static/js/navbar-mobile.js
+++ b/backend/static/js/navbar-mobile.js
@ -0,0 +1,115 @@
+/**
+ * Simplified Mobile Navigation Handler
+ * Minimaler Code für maximale Performance
+ */
+class SimpleMobileNav {
+    constructor() {
+        this.toggle = document.getElementById('mobileMenuToggle');
+        this.menu = document.getElementById('mobileMenu');
+        this.navbar = document.querySelector('.navbar');
+        this.isOpen = false;
+        
+        this.init();
+    }
+    
+    init() {
+        if (!this.toggle || !this.menu) return;
+        
+        // Toggle Button
+        this.toggle.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggleMenu();
+        });
+        
+        // Close on outside click
+        document.addEventListener('click', (e) => {
+            if (this.isOpen && !this.menu.contains(e.target)) {
+                this.closeMenu();
+            }
+        });
+        
+        // Close on ESC
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && this.isOpen) {
+                this.closeMenu();
+            }
+        });
+        
+        // Close on resize to desktop
+        let resizeTimer;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+                if (window.innerWidth >= 1024 && this.isOpen) {
+                    this.closeMenu();
+                }
+            }, 250);
+        });
+        
+        // Simple scroll effect
+        let lastScroll = 0;
+        window.addEventListener('scroll', () => {
+            const currentScroll = window.pageYOffset;
+            
+            // Add/remove scrolled class
+            if (currentScroll > 50) {
+                this.navbar.classList.add('scrolled');
+            } else {
+                this.navbar.classList.remove('scrolled');
+            }
+            
+            lastScroll = currentScroll;
+        }, { passive: true });
+    }
+    
+    toggleMenu() {
+        this.isOpen ? this.closeMenu() : this.openMenu();
+    }
+    
+    openMenu() {
+        this.isOpen = true;
+        this.menu.classList.remove('hidden');
+        
+        // Force reflow
+        this.menu.offsetHeight;
+        
+        this.menu.classList.add('active');
+        this.toggle.setAttribute('aria-expanded', 'true');
+        
+        // Update icon
+        const path = this.toggle.querySelector('svg path');
+        if (path) path.setAttribute('d', 'M6 18L18 6M6 6l12 12');
+        
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+    }
+    
+    closeMenu() {
+        this.isOpen = false;
+        this.menu.classList.remove('active');
+        this.toggle.setAttribute('aria-expanded', 'false');
+        
+        // Update icon
+        const path = this.toggle.querySelector('svg path');
+        if (path) path.setAttribute('d', 'M4 6h16M4 12h16M4 18h16');
+        
+        // Restore body scroll
+        document.body.style.overflow = '';
+        
+        // Hide after transition
+        setTimeout(() => {
+            if (!this.isOpen) {
+                this.menu.classList.add('hidden');
+            }
+        }, 200);
+    }
+}
+
+// Initialize on DOM ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        window.mobileNav = new SimpleMobileNav();
+    });
+} else {
+    window.mobileNav = new SimpleMobileNav();
+}