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>