From 4fc95986bf888375737f26596a23283dcf2269f2 Mon Sep 17 00:00:00 2001
From: MrWhiff <elias_gew@hotmail.com>
Date: Fri, 12 Dec 2025 17:39:08 +0100
Subject: [PATCH] =?UTF-8?q?AstraOS=20Ver.=201.12:=20-=20Lade=20animation?=
 =?UTF-8?q?=20wieder=20hinzugef=C3=BCgt=20-=20Background=20animation=20wie?=
 =?UTF-8?q?der=20hinzugef=C3=BCgt=20-=20Benachrichtigungen=20gefixt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AstraOS/Frontend/HTML/sidebar.html | 168 +++++++++++++++++------------
 1 file changed, 98 insertions(+), 70 deletions(-)

diff --git a/AstraOS/Frontend/HTML/sidebar.html b/AstraOS/Frontend/HTML/sidebar.html
index c91aa2e..dc77905 100644
--- a/AstraOS/Frontend/HTML/sidebar.html
+++ b/AstraOS/Frontend/HTML/sidebar.html
@@ -6,28 +6,22 @@
     <title>{% block title %}AstraOS{% endblock %}</title>
     <link rel="icon" href="{{ url_for('static', filename='AstraOS_Logo.png') }}" type="image/png">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <style>
         /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #111827;
-        }
-        ::-webkit-scrollbar-thumb {
-            background-color: #4b5563;
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background-color: #6b7280;
-        }
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: #0a0a0f; }
+        ::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background-color: #6b7280; }
 
+        /* Hintergrund / global - dunkler und etwas dichter */
         body {
-            background: radial-gradient(circle at top, #1b1b26, #0a0a0f 70%);
+            background: radial-gradient(circle at top, #0f0f14, #050507 80%);
             overflow-x: hidden;
             min-height: 100vh;
+            color: #e6e6e6;
+            /* leichte overlay-Atmosphäre */
+            background-blend-mode: multiply;
         }
         .custom-checkbox-label {
             display: flex;
@@ -90,13 +84,14 @@
             height: 64px;
             position: relative;
         }
+        /* Startup-Blur: andere Akzentfarbe (z.B. teal) */
         #star .blur {
             position: absolute;
             inset: 0;
             border-radius: 50%;
             filter: blur(12px);
             opacity: 0.7;
-            background: rgba(192,132,252,0.7);
+            background: rgba(6,182,212,0.35);
         }
         #startup p {
             margin-top: 1rem;
@@ -120,33 +115,68 @@
             width: 4px;
             height: 4px;
             border-radius: 50%;
-            background: rgba(192, 132, 252, 0.2);
+            background: rgba(6,182,212,0.12); /* neue, dezente Akzentfarbe */
             animation: float 20s infinite linear;
         }
         .dot.maintenance {
-            background: rgba(243, 156, 18, 0.2);
+            background: rgba(14,165,233,0.12); /* leicht variiert im Wartungsmodus */
         }
         @keyframes float {
             0% { transform: translateY(100vh) scale(1); }
             100% { transform: translateY(-10vh) scale(1.5); }
         }
+        /* Breite, Abstand und Stacking für Benachrichtigungen (deutlich breiter) */
         .toast-container {
             position: fixed;
-            top: 1.5rem;
-            right: 1.5rem;
-            z-index: 9999;
+            top: 1.25rem;
+            right: 1.25rem;
+            z-index: 99999;
             display: flex;
             flex-direction: column;
-            gap: 0.75rem;
+            gap: 0.6rem;
+            align-items: flex-end;
+            width: auto;
+            pointer-events: none;
+            padding-left: 0.5rem;
+            max-width: calc(100% - 3rem);
         }
+        /* Einzelne Toast-Boxen: normale Desktop-Breite (~28rem), mobil volle Breite */
         .toast {
             transform-origin: top right;
+            pointer-events: auto;
+            width: 100%;
+            max-width: 28rem; /* "normale" Breite (ändern bei Bedarf) */
+            box-sizing: border-box;
+            word-break: break-word;
+            background: rgba(8,10,12,0.95); /* dunkler, leicht transparent */
+            border-radius: 0.5rem;
+            border: 1px solid rgba(255,255,255,0.04);
+            /* Slide + Fade Animation (arbeitet mit Alpine/Tailwind x-transition Klassen) */
+            transition: transform 0.32s cubic-bezier(.2,.9,.2,1), opacity 0.32s ease;
+            opacity: 1;
         }
+        /* kleiner touch: Icon + Text vertikal zentriert */
+        .toast .flex-1 { display: block; }
+
     </style>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     {% block head %}{% endblock %}
 </head>
-<body class="bg-gray-900 text-gray-200 font-sans antialiased">
+<body class="text-white flex flex-col min-h-screen font-sans antialiased">
+    <!-- Loading Screen überall (vereinheitlicht) -->
+    <div id="startup">
+        <div id="star">
+            <div class="blur"></div>
+            <svg class="relative z-10" viewBox="0 0 100 100">
+                <path d="M50 5 L63 40 L95 50 L63 60 L50 95 L37 60 L5 50 L37 40 Z" fill="#c084fc"/>
+                <path d="M50 28 L58 45 L76 50 L58 55 L50 72 L42 55 L24 50 L42 45 Z" fill="#fff" opacity="0.9"/>
+            </svg>
+        </div>
+        <p>AstraOS</p>
+    </div>
+
+    <!-- Animierter Hintergrund überall -->
+    <div class="animated-bg"></div>
     <div class="flex h-screen overflow-hidden">
         <!-- Sidebar -->
         <aside class="fixed top-0 left-0 w-64 h-screen bg-black/40 border-r p-6 backdrop-blur-lg flex flex-col flex-shrink-0 z-20
@@ -281,7 +311,7 @@
         </aside>
 
         <div class="ml-64 flex-1 flex flex-col min-h-screen">
-            <!-- FLASH MESSAGES -->
+            <!-- FLASH MESSAGES (zentral, breit, non-overlap) -->
             {% with messages = get_flashed_messages(with_categories=true) %}
                 {% if messages %}
                 <div class="toast-container" x-data>
@@ -293,21 +323,19 @@
                              x-transition:leave="toast transition ease-in duration-300"
                              x-transition:leave-start="opacity-100"
                              x-transition:leave-end="opacity-0"
-                             class="max-w-lg w-full bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else ('blue' if category == 'info' else 'gray')) }}-500/40">
-                            <div class="p-4">
-                                <div class="flex items-start">
-                                    <div class="flex-shrink-0">
-                                        {% if category == 'success' %}
-                                            <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                                        {% elif category == 'danger' %}
-                                            <svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                                        {% else %}
-                                            <svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                                        {% endif %}
-                                    </div>
-                                    <div class="ml-3 w-0 flex-1 pt-0.5">
-                                        <p class="text-sm font-medium text-gray-100">{{ message }}</p>
-                                    </div>
+                             class="toast bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else ('blue' if category == 'info' else 'gray')) }}-500/40 p-4">
+                            <div class="flex items-start gap-3">
+                                <div class="flex-shrink-0">
+                                    {% if category == 'success' %}
+                                        <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                    {% elif category == 'danger' %}
+                                        <svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                    {% else %}
+                                        <svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                    {% endif %}
+                                </div>
+                                <div class="flex-1">
+                                    <p class="text-sm font-medium text-gray-100">{{ message }}</p>
                                 </div>
                             </div>
                         </div>
@@ -341,36 +369,36 @@
     <script src="{{ url_for('static', filename='JAVASCRIPT/main.js') }}"></script>
     <script>
     gsap.to("#star", {
-        rotation: 360,
-        duration: 1.2,
-        ease: "power1.inOut",
-        repeat: -1
-    });
-    gsap.to("#star", { scale: 1.2, duration: 0.8, yoyo: true, repeat: -1, ease: "power1.inOut" });
-    setTimeout(() => {
-        gsap.to("#startup", {
-            opacity: 0,
-            duration: 0.3,
-            onComplete: () => {
-                document.getElementById("startup").style.display = "none";
-                gsap.to("#mainContent", { opacity: 1, duration: 0.1 });
-            }
-        });
-    }, 400);
-    const bg = document.querySelector('.animated-bg');
-    if (bg) {
-        for (let i = 0; i < 50; i++) {
-            const dot = document.createElement('div');
-            dot.classList.add('dot');
-            if (document.body.classList.contains('maintenance-active')) {
-                dot.classList.add('maintenance');
-            }
-            dot.style.left = `${Math.random() * 100}vw`;
-            dot.style.animationDelay = `${Math.random() * -20}s`;
-            dot.style.animationDuration = `${20 + Math.random() * 10}s`;
-            bg.appendChild(dot);
-        }
-    }
+         rotation: 360,
+         duration: 1.2,
+         ease: "power1.inOut",
+         repeat: -1
+     });
+     gsap.to("#star", { scale: 1.2, duration: 0.8, yoyo: true, repeat: -1, ease: "power1.inOut" });
+     setTimeout(() => {
+         gsap.to("#startup", {
+             opacity: 0,
+             duration: 0.3,
+             onComplete: () => {
+                 document.getElementById("startup").style.display = "none";
+                 gsap.to("#mainContent", { opacity: 1, duration: 0.1 });
+             }
+         });
+     }, 400);
+     const bg = document.querySelector('.animated-bg');
+     if (bg) {
+         for (let i = 0; i < 50; i++) {
+             const dot = document.createElement('div');
+             dot.classList.add('dot');
+             if (document.body.classList.contains('maintenance-active')) {
+                 dot.classList.add('maintenance');
+             }
+             dot.style.left = `${Math.random() * 100}vw`;
+             dot.style.animationDelay = `${Math.random() * -20}s`;
+             dot.style.animationDuration = `${20 + Math.random() * 10}s`;
+             bg.appendChild(dot);
+         }
+     }
     </script>
     {% if maintenance_active %}
     <script>document.body.classList.add('maintenance-active');</script>