feat: fix alert css

app.py

@@ -312,27 +312,41 @@ def close_modal():
 # JS for Copying text and Toggling Modal
 js_head = """
 <script>
+function showToast(message, type) {
+    // Create Toast Element
+    const toast = document.createElement("div");
+    toast.className = "toast";
+    toast.innerText = message;
+    
+    // Color Logic
+    if (type === 'error') {
+        toast.style.backgroundColor = "#EF4444"; // Red
+        toast.style.color = "#FFFFFF";
+    } else {
+        toast.style.backgroundColor = "#10B981"; // Green
+        toast.style.color = "#FFFFFF";
+    }
+    
+    document.body.appendChild(toast);
+    
+    // Remove after animation/timeout
+    setTimeout(() => {
+        toast.classList.add('hiding');
+        // Wait for fadeOut animation to finish before removing
+        toast.addEventListener('animationend', () => toast.remove());
+    }, 2500);
+}
+
 function copyToClipboard(text) {
     if (!text) {
-        alert("No caption to copy!");
+        showToast("No caption to copy!", "error");
         return;
     }
     
     navigator.clipboard.writeText(text).then(function() {
-        const toast = document.createElement("div");
-        toast.innerText = "Caption Copied!";
-        toast.style.position = "fixed";
-        toast.style.bottom = "20px";
-        toast.style.right = "20px";
-        toast.style.backgroundColor = "#10B981";
-        toast.style.color = "#FFFFFF";
-        toast.style.padding = "10px 20px";
-        toast.style.borderRadius = "5px";
-        toast.style.zIndex = "9999";
-        toast.style.boxShadow = "0 4px 6px rgba(0,0,0,0.1)";
-        document.body.appendChild(toast);
-        setTimeout(() => toast.remove(), 2000);
+        showToast("Caption Copied!", "success");
     }, function(err) {
+        showToast("Failed to copy", "error");
         console.error('Async: Could not copy text: ', err);
     });
 }
@@ -353,28 +367,57 @@ body { background-color: #111827; }
 }
 .loading-box { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
 
+@keyframes slideUpFadeIn {
+    from { opacity: 0; transform: translate(-50%, 100%); }
+    to { opacity: 1; transform: translate(-50%, 0); }
+}
+
+@keyframes fadeOutSlideDown {
+    from { opacity: 1; transform: translate(-50%, 0); }
+    to { opacity: 0; transform: translate(-50%, 100%); }
+}
+
+.toast {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translate(-50%, 0); /* Center horizontally */
+    padding: 12px 24px;
+    border-radius: 8px;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    font-weight: 500;
+    animation: slideUpFadeIn 0.5s ease forwards;
+}
+
+.toast.hiding {
+    animation: fadeOutSlideDown 0.5s ease forwards;
+}
+
 /* Modal Floating Style */
 .modal-container {
     position: fixed !important;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     background-color: rgba(0,0,0,0.8);
     z-index: 9999;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    backdrop-filter: blur(5px);
+    backdrop-filter: blur(3px);
 }
 .modal-content-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    
     background-color: #1F2937;
-    padding: 30px;
+    padding: 25px;
     border: 1px solid #374151;
-    border-radius: 10px;
+    border-radius: 12px;
     width: 90%;
-    max-width: 600px;
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+    max-width: 450px; /* Smaller width as requested */
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     color: #F3F4F6;
 }
 code {