AstraOS Ver. 1.13.2:

- Animation gefixt

AstraOS/Frontend/HTML/sidebar.html

@@ -347,4 +347,67 @@
             </footer>
         </div>
     </div>
-    <!-- ...existing code... -->
+    <!-- LOGOUT BUTTON -->
+    <a href="{{ url_for('logout') }}" class="fixed bottom-6 left-6 text-white font-bold py-3 px-5 rounded-full shadow-lg transition-all backdrop-blur-sm flex items-center gap-2 z-30
+        {% if maintenance_active %}
+            bg-yellow-600/50 hover:bg-yellow-500/80 hover:shadow-yellow-500/40 border border-yellow-500/20
+        {% else %}
+            bg-purple-600/50 hover:bg-purple-500/80 hover:shadow-purple-500/40 border border-purple-500/20
+        {% endif %}">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+        </svg>
+        <span>Logout</span>
+    </a>
+
+
+    <script src="{{ url_for('static', filename='JAVASCRIPT/main.js') }}"></script>
+    {% if maintenance_active %}
+    <script>document.body.classList.add('maintenance-active');</script>
+    {% endif %}
+
+    <script>
+    // GSAP Animationen und Ladebildschirm-Logik
+    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: () => {
+                const startupElement = document.getElementById("startup");
+                if (startupElement) {
+                    startupElement.style.display = "none";
+                }
+                const mainContent = document.getElementById("mainContent");
+                if(mainContent) {
+                    gsap.to(mainContent, { opacity: 1, duration: 0.1 });
+                }
+            }
+        });
+    }, 400);
+
+    // Animierter Hintergrund
+    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>
+</body>
+</html>