Add attractive welcome popup with CPU warning

static/index.html

@@ -1156,6 +1156,130 @@
         ::-webkit-scrollbar-thumb:hover {
             background: var(--text-muted);
         }
+
+        /* ============================================ */
+        /* WELCOME POPUP - CPU Warning */
+        /* ============================================ */
+        .welcome-popup-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.4s ease;
+        }
+
+        .welcome-popup-overlay.show {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .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 {
+            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;
+        }
+
+        .welcome-popup-overlay.show .welcome-popup {
+            transform: scale(1) translateY(0);
+        }
+
+        .welcome-popup-emoji {
+            font-size: 56px;
+            margin-bottom: 16px;
+            animation: bounce-emoji 2s infinite ease-in-out;
+        }
+
+        @keyframes bounce-emoji {
+
+            0%,
+            100% {
+                transform: translateY(0);
+            }
+
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+
+        .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);
+        }
+
+        .welcome-popup-message {
+            font-size: 15px;
+            color: rgba(255, 255, 255, 0.9);
+            line-height: 1.6;
+            margin-bottom: 24px;
+        }
+
+        .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);
+        }
+
+        .welcome-popup-highlight span {
+            color: #FFD700;
+            font-weight: 600;
+        }
+
+        .welcome-popup-btn {
+            background: white;
+            color: #1e3a5f;
+            border: none;
+            padding: 14px 48px;
+            border-radius: 50px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .welcome-popup-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+        }
+
+        .welcome-popup-footer {
+            margin-top: 20px;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.6);
+        }
     </style>
 </head>
 
@@ -1311,6 +1435,26 @@
         </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!
+            </div>
+            <button class="welcome-popup-btn" onclick="closeWelcomePopup()">
+                Got it, Let's Chat! 🚀
+            </button>
+            <p class="welcome-popup-footer">Powered by Llama 3 • Fine-tuned for Krish Mind</p>
+        </div>
+    </div>
+
     <script>
         // State
         let serverUrl = ''; // Empty = relative URL (works on HF Spaces or any host)
@@ -1355,8 +1499,22 @@
                     document.getElementById('sendBtn').disabled = !e.target.value.trim();
                 }
             });
+
+            // Show welcome popup on page load
+            showWelcomePopup();
         });
 
+        // Welcome Popup Functions
+        function showWelcomePopup() {
+            setTimeout(() => {
+                document.getElementById('welcomePopup').classList.add('show');
+            }, 300);
+        }
+
+        function closeWelcomePopup() {
+            document.getElementById('welcomePopup').classList.remove('show');
+        }
+
         // Theme toggle
         function toggleTheme() {
             const current = document.documentElement.getAttribute('data-theme');