From ea9fe6494448e07de373c52a36c4ad1ffa514765 Mon Sep 17 00:00:00 2001
From: MrWhiff <elias_gew@hotmail.com>
Date: Fri, 12 Dec 2025 17:42:37 +0100
Subject: [PATCH] AstraOS Ver. 1.12: - Benachrichtigungen breite gefixt -
 Falsche farben gefixt

---
 AstraOS/Frontend/HTML/discord_bots.html       | 34 ------------------
 AstraOS/Frontend/HTML/sidebar.html            | 33 ++++++++---------
 AstraOS/Frontend/HTML/user_management.html    | 35 -------------------
 .../Frontend/HTML/view_user_age_details.html  | 34 ------------------
 4 files changed, 14 insertions(+), 122 deletions(-)

diff --git a/AstraOS/Frontend/HTML/discord_bots.html b/AstraOS/Frontend/HTML/discord_bots.html
index 03ed1b8..2f63c2f 100644
--- a/AstraOS/Frontend/HTML/discord_bots.html
+++ b/AstraOS/Frontend/HTML/discord_bots.html
@@ -17,40 +17,6 @@
 
 {% block content %}
 <div x-data="{ showUploadModal: false, showDeleteModal: false, botToDelete: null }">
-    <!-- FLASH MESSAGES -->
-    {% with messages = get_flashed_messages(with_categories=true) %}
-        {% if messages %}
-        <div class="toast-container">
-            {% for category, message in messages %}
-                <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
-                     x-transition:enter="toast transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0 translate-x-8"
-                     x-transition:enter-end="opacity-100 translate-x-0"
-                     x-transition:leave="toast transition ease-in duration-300"
-                     x-transition:leave-start="opacity-100"
-                     x-transition:leave-end="opacity-0"
-                     class="max-w-md 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>
-                        </div>
-                    </div>
-                </div>
-            {% endfor %}
-        </div>
-        {% endif %}
-    {% endwith %}
     <!-- HEADER -->
     <header class="flex justify-between items-center mb-10">
         <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Discord Bot Management</h2>
diff --git a/AstraOS/Frontend/HTML/sidebar.html b/AstraOS/Frontend/HTML/sidebar.html
index dc77905..3ead731 100644
--- a/AstraOS/Frontend/HTML/sidebar.html
+++ b/AstraOS/Frontend/HTML/sidebar.html
@@ -14,14 +14,12 @@
         ::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 4px; }
         ::-webkit-scrollbar-thumb:hover { background-color: #6b7280; }
 
-        /* Hintergrund / global - dunkler und etwas dichter */
+        /* Hintergrund / global (vereinheitlicht mit Referenz) */
         body {
-            background: radial-gradient(circle at top, #0f0f14, #050507 80%);
+            background: radial-gradient(circle at top, #1b1b26, #0a0a0f 70%);
             overflow-x: hidden;
             min-height: 100vh;
             color: #e6e6e6;
-            /* leichte overlay-Atmosphäre */
-            background-blend-mode: multiply;
         }
         .custom-checkbox-label {
             display: flex;
@@ -84,14 +82,13 @@
             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(6,182,212,0.35);
+            background: rgba(192,132,252,0.7);
         }
         #startup p {
             margin-top: 1rem;
@@ -115,17 +112,17 @@
             width: 4px;
             height: 4px;
             border-radius: 50%;
-            background: rgba(6,182,212,0.12); /* neue, dezente Akzentfarbe */
+            background: rgba(192, 132, 252, 0.2);
             animation: float 20s infinite linear;
         }
         .dot.maintenance {
-            background: rgba(14,165,233,0.12); /* leicht variiert im Wartungsmodus */
+            background: rgba(243, 156, 18, 0.2);
         }
         @keyframes float {
             0% { transform: translateY(100vh) scale(1); }
             100% { transform: translateY(-10vh) scale(1.5); }
         }
-        /* Breite, Abstand und Stacking für Benachrichtigungen (deutlich breiter) */
+        /* Benachrichtigungen: normale (schmale) Breite + Slide/Fade */
         .toast-container {
             position: fixed;
             top: 1.25rem;
@@ -135,29 +132,27 @@
             flex-direction: column;
             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 */
+        /* Einzelne Toasts: 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) */
+            max-width: 28rem; /* <- hier die "normale" Breite einstellen */
             box-sizing: border-box;
             word-break: break-word;
-            background: rgba(8,10,12,0.95); /* dunkler, leicht transparent */
+            background: rgba(8,10,12,0.95);
             border-radius: 0.5rem;
             border: 1px solid rgba(255,255,255,0.04);
-            /* Slide + Fade Animation (arbeitet mit Alpine/Tailwind x-transition Klassen) */
+            padding: 0.75rem 1rem;
+            /* Slide + Fade (zusätzlich zu Alpine/Tailwind x-transition) */
             transition: transform 0.32s cubic-bezier(.2,.9,.2,1), opacity 0.32s ease;
+            transform: translateX(0);
             opacity: 1;
         }
-        /* kleiner touch: Icon + Text vertikal zentriert */
-        .toast .flex-1 { display: block; }
-
+        /* Wenn ein Toast noch im "enter-start" Zustand ist (Tailwind-Klassen verwenden translate-x-8 / opacity-0),
+           sorgt die transition-Einstellung oben für sanftes Rein-/Rausrutschen. */
     </style>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     {% block head %}{% endblock %}
diff --git a/AstraOS/Frontend/HTML/user_management.html b/AstraOS/Frontend/HTML/user_management.html
index ae8c2f4..66e11c5 100644
--- a/AstraOS/Frontend/HTML/user_management.html
+++ b/AstraOS/Frontend/HTML/user_management.html
@@ -30,41 +30,6 @@
             </button>
         </header>
 
-        <!-- FLASH MESSAGES -->
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-            <div class="toast-container">
-                {% for category, message in messages %}
-                    <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
-                         x-transition:enter="toast transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0 translate-x-8"
-                         x-transition:enter-end="opacity-100 translate-x-0"
-                         x-transition:leave="toast transition ease-in duration-300"
-                         x-transition:leave-start="opacity-100"
-                         x-transition:leave-end="opacity-0"
-                         class="max-w-md 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>
-                            </div>
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
-            {% endif %}
-        {% endwith %}
-
         <!-- USER TABLE -->
         <div class="bg-black/40 rounded-xl backdrop-blur-lg overflow-hidden
                     {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
diff --git a/AstraOS/Frontend/HTML/view_user_age_details.html b/AstraOS/Frontend/HTML/view_user_age_details.html
index 777b30c..43af122 100644
--- a/AstraOS/Frontend/HTML/view_user_age_details.html
+++ b/AstraOS/Frontend/HTML/view_user_age_details.html
@@ -7,40 +7,6 @@
 
 {% block content %}
 <div x-data="{ showDeleteModal: false }">
-    <!-- FLASH MESSAGES -->
-    {% with messages = get_flashed_messages(with_categories=true) %}
-        {% if messages %}
-        <div class="toast-container">
-            {% for category, message in messages %}
-                <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
-                     x-transition:enter="toast transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0 translate-x-8"
-                     x-transition:enter-end="opacity-100 translate-x-0"
-                     x-transition:leave="toast transition ease-in duration-300"
-                     x-transition:leave-start="opacity-100"
-                     x-transition:leave-end="opacity-0"
-                     class="max-w-md 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>
-                        </div>
-                    </div>
-                </div>
-            {% endfor %}
-        </div>
-        {% endif %}
-    {% endwith %}
     <header class="flex justify-between items-center mb-6">
         <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Benutzerdetails</h2>
         <a href="{{ url_for('age_verification') }}" class="font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">