captsa add alert

static/css/styles.css

@@ -35,6 +35,37 @@ header h1 {
 .conn-badge.online  { background: #1a4a1a; color: #6fcf6f; }
 .conn-badge.offline { background: #4a1a1a; color: #cf6f6f; }
 
+/* ---- Captcha alert banner ---- */
+#captcha-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: #5a0a0a;
+  border-bottom: 2px solid #ff4444;
+  padding: 10px 24px;
+  font-size: 0.9rem;
+  color: #ffaaaa;
+  animation: captchaPulse 1.2s ease-in-out infinite;
+}
+#captcha-banner span:first-child { font-size: 1.2rem; flex-shrink: 0; }
+#captcha-banner span:nth-child(2) { flex: 1; font-weight: 500; }
+#captcha-dismiss {
+  background: #ff4444;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 5px 12px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+#captcha-dismiss:hover { background: #cc2222; }
+@keyframes captchaPulse {
+  0%, 100% { background: #5a0a0a; }
+  50%       { background: #7a1010; }
+}
+
 .layout {
   display: grid;
   grid-template-columns: 320px 1fr;

static/js/api.js

@@ -172,3 +172,31 @@ window.cancelCommand = async function(id) {
   await fetch(`/dashboard/commands/${id}`, { method: 'DELETE' });
   window.fetchLog();
 };
+
+window.fetchCaptchaStatus = async function() {
+  try {
+    const res  = await fetch('/dashboard/captcha-status');
+    const data = await res.json();
+    const banner = document.getElementById('captcha-banner');
+    if (!banner) return;
+    
+    if (data.captcha_active) {
+      // Only show it if the user hasn't explicitly clicked 'close' for this specific alert
+      if (banner.dataset.dismissed !== '1') {
+        banner.style.display = 'flex';
+      }
+    } else {
+      // Captcha cleared from the game - hide banner and reset dismiss state for next time
+      banner.style.display = 'none';
+      banner.dataset.dismissed = '0';
+    }
+  } catch (e) {}
+};
+
+window.dismissCaptchaBanner = function() {
+  const banner = document.getElementById('captcha-banner');
+  if (banner) {
+    banner.style.display = 'none';
+    banner.dataset.dismissed = '1';
+  }
+};

static/js/app.js

@@ -6,7 +6,9 @@ window.addEventListener('DOMContentLoaded', () => {
   window.fetchTowns();
   window.fetchLog();
   window.fetchClientStatus();
-  setInterval(window.fetchTowns,        window.POLL_INTERVAL);
-  setInterval(window.fetchLog,          window.POLL_INTERVAL);
-  setInterval(window.fetchClientStatus, window.POLL_INTERVAL);
+  window.fetchCaptchaStatus();
+  setInterval(window.fetchTowns,          window.POLL_INTERVAL);
+  setInterval(window.fetchLog,            window.POLL_INTERVAL);
+  setInterval(window.fetchClientStatus,   window.POLL_INTERVAL);
+  setInterval(window.fetchCaptchaStatus,  5000); // check every 5s
 });