📚 Improved database optimization & CSS refinements 🎉

backend/static/css/ui-refinements.min.css

@@ -0,0 +1 @@
+.dark-mode-toggle{position:relative;width:44px;height:24px;padding:0;background:#e2e8f0;border:none;border-radius:12px;cursor:pointer;transition:background-color 0.3s ease;overflow:hidden;}.dark .dark-mode-toggle{background:#1e293b;}.dark-mode-toggle:hover{background:#cbd5e1;}.dark .dark-mode-toggle:hover{background:#334155;}.dark-mode-toggle-slider{position:absolute;top:2px;left:2px;width:20px;height:20px;background:white;border-radius:50%;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,0.1);}.dark .dark-mode-toggle-slider{transform:translateX(20px);background:#475569;}.dark-mode-toggle-icon{font-size:12px;color:#f59e0b;transition:opacity 0.2s ease;}.dark .dark-mode-toggle-icon.sun{opacity:0;}.dark .dark-mode-toggle-icon.moon{opacity:1;color:#60a5fa;}.notification-simple{background:white;border:1px solid #e5e7eb;border-radius:8px;padding:12px 16px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 3px rgba(0,0,0,0.1);transition:opacity 0.2s ease,transform 0.2s ease;}.dark .notification-simple{background:#1f2937;border-color:#374151;}.notification-simple.notification-enter{opacity:0;transform:translateX(100%);}.notification-simple.notification-enter-active{opacity:1;transform:translateX(0);}.notification-simple.notification-exit{opacity:0;transform:translateX(100%);}.notification-content{display:flex;align-items:center;gap:12px;flex:1;}.notification-icon{font-size:18px;width:20px;text-align:center;}.notification-icon.success{color:#10b981;}.notification-icon.error{color:#ef4444;}.notification-icon.warning{color:#f59e0b;}.notification-icon.info{color:#3b82f6;}.notification-message{font-size:14px;color:#374151;}.dark .notification-message{color:#e5e7eb;}.notification-close{background:none;border:none;color:#9ca3af;cursor:pointer;font-size:20px;line-height:1;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color 0.2s ease;}.notification-close:hover{background-color:#f3f4f6;color:#6b7280;}.dark .notification-close:hover{background-color:#374151;color:#d1d5db;}.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:simple-spin 0.8s linear infinite;}@keyframes simple-spin{to{transform:rotate(360deg);}}.skeleton{background:#f3f4f6;background-image:linear-gradient(90deg,#f3f4f6 0%,#e5e7eb 50%,#f3f4f6 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:4px;}.dark .skeleton{background:#374151;background-image:linear-gradient(90deg,#374151 0%,#4b5563 50%,#374151 100%);}@keyframes skeleton-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}.skeleton-text{height:16px;margin-bottom:8px;border-radius:4px;}.skeleton-title{height:24px;width:60%;margin-bottom:12px;border-radius:4px;}.skeleton-button{height:40px;width:120px;border-radius:6px;}.hover-lift{transition:transform 0.2s ease,box-shadow 0.2s ease;}.hover-lift:hover{transform:translateY(-2px);box-shadow:0 4px 6px rgba(0,0,0,0.1);}.hover-scale{transition:transform 0.2s ease;}.hover-scale:hover{transform:scale(1.02);}.fade-in{animation:fadeIn 0.3s ease-in;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.btn-press{transition:transform 0.1s ease;}.btn-press:active{transform:scale(0.98);}.status-pulse{position:relative;}.status-pulse::before{content:'';position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:currentColor;opacity:0.3;transform:translate(-50%,-50%);animation:subtle-pulse 2s ease-in-out infinite;}@keyframes subtle-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.3;}50%{transform:translate(-50%,-50%) scale(1.2);opacity:0;}}.progress-bar{height:4px;background:#e5e7eb;border-radius:2px;overflow:hidden;}.progress-bar-fill{height:100%;background:#3b82f6;transition:width 0.3s ease;}.nav-item i{font-size:18px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;}.mobile-nav-item i{font-size:18px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;}

backend/static/js/simple-notifications.js

@@ -0,0 +1,92 @@
+/**
+ * Simple Notification System - Clean and functional
+ */
+
+(function() {
+    'use strict';
+
+    // Notification container
+    let notificationContainer = null;
+
+    // Initialize notification system
+    function initNotifications() {
+        if (!notificationContainer) {
+            notificationContainer = document.createElement('div');
+            notificationContainer.id = 'simple-notifications';
+            notificationContainer.className = 'fixed top-4 right-4 z-50 space-y-2 max-w-sm';
+            document.body.appendChild(notificationContainer);
+        }
+    }
+
+    // Show notification
+    window.showNotification = function(message, type = 'info', duration = 5000) {
+        initNotifications();
+
+        // Create notification element
+        const notification = document.createElement('div');
+        notification.className = 'notification-simple notification-enter fade-in';
+        
+        // Icon mapping
+        const icons = {
+            success: 'fa-check-circle',
+            error: 'fa-exclamation-circle',
+            warning: 'fa-exclamation-triangle',
+            info: 'fa-info-circle'
+        };
+
+        // Build notification HTML
+        notification.innerHTML = `
+            <div class="notification-content">
+                <i class="fas ${icons[type]} notification-icon ${type}"></i>
+                <span class="notification-message">${message}</span>
+            </div>
+            <button class="notification-close" aria-label="Schließen">
+                <i class="fas fa-times"></i>
+            </button>
+        `;
+
+        // Add to container
+        notificationContainer.appendChild(notification);
+
+        // Animate in
+        setTimeout(() => {
+            notification.classList.remove('notification-enter');
+            notification.classList.add('notification-enter-active');
+        }, 10);
+
+        // Close button handler
+        const closeBtn = notification.querySelector('.notification-close');
+        closeBtn.addEventListener('click', () => removeNotification(notification));
+
+        // Auto remove after duration
+        if (duration > 0) {
+            setTimeout(() => removeNotification(notification), duration);
+        }
+
+        return notification;
+    };
+
+    // Remove notification
+    function removeNotification(notification) {
+        notification.classList.add('notification-exit');
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 200);
+    }
+
+    // Convenience methods
+    window.notifySuccess = (message, duration) => showNotification(message, 'success', duration);
+    window.notifyError = (message, duration) => showNotification(message, 'error', duration);
+    window.notifyWarning = (message, duration) => showNotification(message, 'warning', duration);
+    window.notifyInfo = (message, duration) => showNotification(message, 'info', duration);
+
+    // Replace existing toast system if present
+    if (typeof window.showToast === 'function') {
+        window.showToast = function(message, type, duration) {
+            showNotification(message, type, duration);
+        };
+    }
+
+})();

backend/static/js/simple-notifications.min.js

@@ -0,0 +1 @@
+(function(){'use strict';let notificationContainer = null;function initNotifications(){if(!notificationContainer){notificationContainer = document.createElement('div');notificationContainer.id = 'simple-notifications';notificationContainer.className = 'fixed top-4 right-4 z-50 space-y-2 max-w-sm';document.body.appendChild(notificationContainer);}}window.showNotification = function(message,type = 'info',duration = 5000){initNotifications();const notification = document.createElement('div');notification.className = 'notification-simple notification-enter fade-in';const icons ={success:'fa-check-circle',error:'fa-exclamation-circle',warning:'fa-exclamation-triangle',info:'fa-info-circle'};notification.innerHTML = ` <div class="notification-content"> <i class="fas ${icons[type]}notification-icon ${type}"></i> <span class="notification-message">${message}</span> </div> <button class="notification-close" aria-label="Schließen"> <i class="fas fa-times"></i> </button> `;notificationContainer.appendChild(notification);setTimeout(()=>{notification.classList.remove('notification-enter');notification.classList.add('notification-enter-active');},10);const closeBtn = notification.querySelector('.notification-close');closeBtn.addEventListener('click',()=> removeNotification(notification));if(duration > 0){setTimeout(()=> removeNotification(notification),duration);}return notification;};function removeNotification(notification){notification.classList.add('notification-exit');setTimeout(()=>{if(notification.parentNode){notification.parentNode.removeChild(notification);}},200);}window.notifySuccess =(message,duration)=> showNotification(message,'success',duration);window.notifyError =(message,duration)=> showNotification(message,'error',duration);window.notifyWarning =(message,duration)=> showNotification(message,'warning',duration);window.notifyInfo =(message,duration)=> showNotification(message,'info',duration);if(typeof window.showToast === 'function'){window.showToast = function(message,type,duration){showNotification(message,type,duration);};}})();