📚 Improved database optimization & CSS refinements 🎉

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);
+        };
+    }
+
+})();