Add toast notification with gradient colors

static/index.html

@@ -1158,127 +1158,176 @@
         }
 
         /* ============================================ */
-        /* WELCOME POPUP - CPU Warning */
+        /* NOTIFICATION TOAST - Bottom Left */
         /* ============================================ */
-        .welcome-popup-overlay {
+        .notification-toast {
             position: fixed;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.7);
-            backdrop-filter: blur(8px);
-            display: flex;
-            align-items: center;
-            justify-content: center;
+            bottom: 24px;
+            left: 24px;
+            background: var(--bg-primary);
+            border-radius: 16px;
+            padding: 16px 20px;
+            max-width: 380px;
             z-index: 9999;
             opacity: 0;
             visibility: hidden;
-            transition: all 0.4s ease;
+            transform: translateY(20px) scale(0.95);
+            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 255, 255, 0.3);
         }
 
-        .welcome-popup-overlay.show {
+        .notification-toast.show {
             opacity: 1;
             visibility: visible;
+            transform: translateY(0) scale(1);
         }
 
-        .welcome-popup {
-            background: linear-gradient(135deg, rgba(30, 58, 95, 0.95) 0%, rgba(45, 140, 190, 0.9) 50%, rgba(64, 201, 201, 0.85) 100%);
-            border-radius: 24px;
-            padding: 32px;
-            width: 90%;
-            max-width: 480px;
-            text-align: center;
-            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5),
-                0 0 40px rgba(64, 201, 201, 0.3),
-                inset 0 1px 0 rgba(255, 255, 255, 0.2);
-            transform: scale(0.8) translateY(20px);
-            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-            border: 1px solid rgba(255, 255, 255, 0.15);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .welcome-popup::before {
+        /* Animated glowing border */
+        .notification-toast::before {
             content: '';
             position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
-            pointer-events: none;
+            inset: -2px;
+            border-radius: 18px;
+            padding: 2px;
+            background: linear-gradient(90deg, #1e3a5f, #2d8cbe, #40c9c9, #2d8cbe, #1e3a5f);
+            background-size: 300% 100%;
+            animation: border-glow 3s linear infinite;
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            z-index: -1;
+        }
+
+        @keyframes border-glow {
+            0% {
+                background-position: 0% 50%;
+            }
+
+            100% {
+                background-position: 300% 50%;
+            }
         }
 
-        .welcome-popup-overlay.show .welcome-popup {
-            transform: scale(1) translateY(0);
+        .toast-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
         }
 
-        .welcome-popup-emoji {
-            font-size: 56px;
-            margin-bottom: 16px;
-            animation: bounce-emoji 2s infinite ease-in-out;
+        .toast-title {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 16px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #1e3a5f 0%, #2d8cbe 50%, #40c9c9 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
-        @keyframes bounce-emoji {
+        .toast-icon {
+            width: 20px;
+            height: 20px;
+            animation: pulse-icon 2s infinite ease-in-out;
+        }
+
+        @keyframes pulse-icon {
 
             0%,
             100% {
-                transform: translateY(0);
+                opacity: 1;
+                transform: scale(1);
             }
 
             50% {
-                transform: translateY(-10px);
+                opacity: 0.7;
+                transform: scale(0.9);
             }
         }
 
-        .welcome-popup-title {
-            font-size: 24px;
-            font-weight: 700;
-            color: white;
-            margin-bottom: 12px;
-            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+        .toast-close {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 6px;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
-        .welcome-popup-message {
-            font-size: 15px;
-            color: rgba(255, 255, 255, 0.9);
-            line-height: 1.6;
-            margin-bottom: 24px;
+        .toast-close:hover {
+            background: var(--bg-hover);
+            color: var(--text-primary);
         }
 
-        .welcome-popup-highlight {
-            background: rgba(255, 255, 255, 0.15);
-            padding: 12px 16px;
-            border-radius: 12px;
-            margin-bottom: 24px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
+        .toast-message {
+            font-size: 14px;
+            color: var(--text-primary);
+            line-height: 1.6;
+            margin-bottom: 14px;
         }
 
-        .welcome-popup-highlight span {
-            color: #FFD700;
-            font-weight: 600;
+        .toast-message strong {
+            background: linear-gradient(135deg, #2d8cbe 0%, #40c9c9 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
         }
 
-        .welcome-popup-btn {
-            background: white;
-            color: #1e3a5f;
+        .toast-btn {
+            background: linear-gradient(135deg, #1e3a5f 0%, #2d8cbe 50%, #40c9c9 100%);
+            color: white;
             border: none;
-            padding: 14px 48px;
-            border-radius: 50px;
-            font-size: 16px;
+            padding: 12px 24px;
+            border-radius: 10px;
+            font-size: 14px;
             font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+            width: 100%;
         }
 
-        .welcome-popup-btn:hover {
+        .toast-btn:hover {
+            filter: brightness(1.15);
             transform: translateY(-2px);
-            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+            box-shadow: 0 4px 20px rgba(45, 140, 190, 0.4);
         }
 
-        .welcome-popup-footer {
-            margin-top: 20px;
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.6);
+        .toast-progress {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 3px;
+            background: linear-gradient(90deg, #00FFFF, #00D4FF);
+            border-radius: 0 0 16px 16px;
+            animation: progress-shrink 10s linear forwards;
+        }
+
+        @keyframes progress-shrink {
+            from {
+                width: 100%;
+            }
+
+            to {
+                width: 0%;
+            }
+        }
+
+        /* Mobile Responsive */
+        @media (max-width: 480px) {
+            .notification-toast {
+                left: 12px;
+                right: 12px;
+                bottom: 12px;
+                max-width: none;
+            }
         }
     </style>
 </head>
@@ -1435,24 +1484,31 @@
         </div>
     </div>
 
-    <!-- Welcome Popup - CPU Warning -->
-    <div class="welcome-popup-overlay" id="welcomePopup">
-        <div class="welcome-popup">
-            <div class="welcome-popup-emoji">🧠</div>
-            <h2 class="welcome-popup-title">Welcome to Krish Mind!</h2>
-            <p class="welcome-popup-message">
-                I'm your AI assistant, created by Krish CS. I'm running on Hugging Face's free tier to keep this service
-                accessible to everyone.
-            </p>
-            <div class="welcome-popup-highlight">
-                ⚡ <span>Please Note:</span> Responses may take <span>15-30 seconds</span> due to limited CPU resources.
-                Thank you for your patience!
+    <!-- Notification Toast - Bottom Left -->
+    <div class="notification-toast" id="notificationToast">
+        <div class="toast-header">
+            <div class="toast-title">
+                <svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="#2d8cbe" stroke-width="2.5">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="12" y1="8" x2="12" y2="12"></line>
+                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                </svg>
+                Heads Up!
             </div>
-            <button class="welcome-popup-btn" onclick="closeWelcomePopup()">
-                Got it, Let's Chat! 🚀
+            <button class="toast-close" onclick="closeToast()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
             </button>
-            <p class="welcome-popup-footer">Powered by Llama 3 • Fine-tuned for Krish Mind</p>
         </div>
+        <p class="toast-message">
+            Responses may be <strong>slow</strong> due to limited CPU resources. Thank you for your patience!
+        </p>
+        <button class="toast-btn" onclick="closeToast()">
+            Let's Chat!
+        </button>
+        <div class="toast-progress"></div>
     </div>
 
     <script>
@@ -1500,19 +1556,31 @@
                 }
             });
 
-            // Show welcome popup on page load
-            showWelcomePopup();
+            // Show notification toast on page load
+            showToast();
         });
 
-        // Welcome Popup Functions
-        function showWelcomePopup() {
-            setTimeout(() => {
-                document.getElementById('welcomePopup').classList.add('show');
-            }, 300);
-        }
+        // Toast Notification Functions
+        let toastTimeout = null;
 
-        function closeWelcomePopup() {
-            document.getElementById('welcomePopup').classList.remove('show');
+        function showToast() {
+            const toast = document.getElementById('notificationToast');
+            setTimeout(() => {
+                toast.classList.add('show');
+                // Auto-dismiss after 10 seconds
+                toastTimeout = setTimeout(() => {
+                    closeToast();
+                }, 10000);
+            }, 500);
+        }
+
+        function closeToast() {
+            const toast = document.getElementById('notificationToast');
+            toast.classList.remove('show');
+            if (toastTimeout) {
+                clearTimeout(toastTimeout);
+                toastTimeout = null;
+            }
         }
 
         // Theme toggle