Create switching.html

2026-06-01 09:35:48 -04:00
parent aadca794b4
commit 4a440dd465
1 changed files with 67 additions and 0 deletions
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Switching...</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: system-ui, sans-serif;
+      background: #0f0f0f;
+      color: #e0e0e0;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .card {
+      background: #1a1a1a;
+      border: 1px solid #2a2a2a;
+      border-radius: 16px;
+      padding: 2.5rem;
+      width: 420px;
+      text-align: center;
+    }
+    h1 { font-size: 1.2rem; font-weight: 500; margin-bottom: 1rem; }
+    .message { color: #888; font-size: 0.9rem; margin-bottom: 1.5rem; }
+    .spinner {
+      width: 32px; height: 32px;
+      border: 3px solid #333;
+      border-top-color: #4a9eff;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin: 0 auto;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .status { margin-top: 1rem; font-size: 0.8rem; color: #555; }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>Switching to {{ target }}...</h1>
+    <p class="message">{{ message }}</p>
+    <div class="spinner"></div>
+    <p class="status" id="status">Please wait...</p>
+  </div>
+  <script>
+    const target = "{{ target }}";
+    function poll() {
+      fetch("/status")
+        .then(r => r.json())
+        .then(data => {
+          document.getElementById("status").textContent = data.message;
+          if (!data.swapping && data.active === target) {
+            const urls = { chat: "https://chat.mydomain.com", images: "https://images.mydomain.com" };
+            // Extra delay for images stack — InvokeAI takes longer to be ready
+            const delay = target === "images" ? 8000 : 2000;
+            setTimeout(() => { window.location.href = urls[target]; }, delay);
+          } else {
+            setTimeout(poll, 1500);
+          }
+        })
+        .catch(() => setTimeout(poll, 2000));
+    }
+    poll();
+  </script>
+</body>
+</html>