update AI page

views/chat.ejs

@@ -73,68 +73,76 @@
             border-radius: 5px;
         }
 
-        .alert {
-            margin-top: 10px;
-            text-align: center;
-            /* Center the text content */
-            display: flex;
-            /* Make sure the alert is a flex container */
-            justify-content: center;
-            /* Center flex items horizontally */
-            align-items: center;
-            /* Center flex items vertically (if needed) */
+        /* Ensure transparent background for the alert's parent container */
+        #success-alert,
+        #error-alert {
+            background-color: transparent;
+            /* Remove any background color */
         }
 
-        /* Success Alert - Blue Theme */
+        /* Success Alert - Blue Theme with no extra background */
         .alert-success {
             background-color: #007bff;
-            /* Blue background similar to your button */
+            /* Blue background for success */
             color: white;
-            /* White text */
             border: none;
-            /* Remove border */
             padding: 10px 20px;
-            /* Padding for spacing */
             border-radius: 5px;
-            /* Rounded corners */
             text-align: center;
-            /* Center text */
             display: flex;
-            /* Flex layout */
             justify-content: center;
-            /* Center horizontally */
             align-items: center;
-            /* Center vertically */
+            opacity: 0;
+            /* Start hidden */
+            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
         }
 
         /* Error Alert - Maroon Red Theme */
         .alert-danger {
             background-color: #800000;
-            /* Maroon red background */
+            /* Red background for error */
             color: white;
-            /* White text */
             border: none;
-            /* Remove border */
             padding: 10px 20px;
-            /* Padding for spacing */
             border-radius: 5px;
-            /* Rounded corners */
             text-align: center;
-            /* Center text */
             display: flex;
-            /* Flex layout */
             justify-content: center;
-            /* Center horizontally */
             align-items: center;
-            /* Center vertically */
+            opacity: 0;
+            /* Start hidden */
+            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
         }
 
+        /* Common alert styles */
         /* Common alert styles */
         .alert {
-            margin-top: 10px;
-            /* Add margin at the top */
-            font-size: 14px;
-            /* Adjust the font size for readability */
+            position: fixed;
+            top: 20px;
+            /* Adjust to your preferred vertical location */
+            left: 45%;
+            /* This centers the alert horizontally */
+            transform: translateX(-50%);
+            /* This ensures the alert is exactly centered */
+            z-index: 9999;
+            /* Ensure it stays on top */
+            opacity: 0;
+            /* Start hidden */
+            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+        }
+
+        /* Fade in animation */
+        .alert.fade-in {
+            opacity: 1;
+            transform: translateY(0);
+            animation: fadeSlideIn 0.5s forwards;
+        }
+
+        /* Fade out animation */
+        .alert.fade-out {
+            opacity: 0;
+            transform: translateY(-20px);
+            animation: fadeSlideOut 0.5s forwards;
         }
 
         .message.user {
@@ -226,6 +234,46 @@
             background-color: #555;
             /* Darker shade on hover */
         }
+
+        /* Add animations for the alerts */
+        @keyframes fadeSlideIn {
+            0% {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes fadeSlideOut {
+            0% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+
+            100% {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+        }
+
+        /* Success Alert with fade-in and slide-down animation */
+        .alert {
+            opacity: 0;
+            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            animation: fadeSlideIn 0.5s forwards;
+        }
+
+        /* Add class for fading out when alert is being removed */
+        .alert.fade-out {
+            animation: fadeSlideOut 0.5s forwards;
+        }
     </style>
 </head>
 
@@ -435,14 +483,21 @@
             return markdown;
         }
 
-        // Displays an alert message
+        // Displays an alert message with animation
         function displayAlert(type, message) {
             const alertElement = document.getElementById(`${type}-alert`);
             alertElement.textContent = message;
-            alertElement.style.display = 'block';
+            alertElement.style.display = 'flex'; // Show the alert
+            alertElement.classList.remove('fade-out'); // Remove fade-out class if present
+            alertElement.style.opacity = '1'; // Ensure it's fully visible
+
+            // Automatically hide the alert after 3 seconds with animation
             setTimeout(() => {
-                alertElement.style.display = 'none';
-            }, 3000);
+                alertElement.classList.add('fade-out'); // Add fade-out class to trigger animation
+                setTimeout(() => {
+                    alertElement.style.display = 'none'; // Hide after animation finishes
+                }, 500); // Match this time to the animation duration
+            }, 3000); // Show the alert for 3 seconds before hiding
         }
 
         // Handles error responses based on status code