Upload 4 files

public/app.js

@@ -0,0 +1,438 @@
+/* ── State ───────────────────────────────────────────────────────────────── */
+let token = sessionStorage.getItem('shellular_token') || null;
+let evtSource = null;
+let fullOutput   = '';
+let shellStatus  = 'stopped';
+let qrRendered   = false;
+
+/* ── DOM helpers ─────────────────────────────────────────────────────────── */
+const $ = (id) => document.getElementById(id);
+
+const loginPage     = $('login-page');
+const dashPage      = $('dashboard-page');
+const loginForm     = $('login-form');
+const keyInput      = $('key-input');
+const loginBtn      = $('login-btn');
+const loginLabel    = $('login-label');
+const loginSpinner  = $('login-spinner');
+const loginError    = $('login-error');
+const toggleVisBtn  = $('toggle-vis');
+const eyeOpen       = $('eye-open');
+const eyeClosed     = $('eye-closed');
+const statusBadge   = $('status-badge');
+const restartBtn    = $('restart-btn');
+const logoutBtn     = $('logout-btn');
+const clearLogBtn   = $('clear-log-btn');
+const qrLoading     = $('qr-loading');
+const qrReady       = $('qr-ready');
+const qrError       = $('qr-error');
+const qrErrorMsg    = $('qr-error-msg');
+const qrCanvas      = $('qr-canvas');
+const logPre        = $('log-pre');
+
+/* ── Routing ─────────────────────────────────────────────────────────────── */
+function showLogin() {
+  loginPage.classList.remove('hidden');
+  dashPage.classList.add('hidden');
+  keyInput.focus();
+}
+
+function showDashboard() {
+  loginPage.classList.add('hidden');
+  dashPage.classList.remove('hidden');
+  connectStream();
+  ensureShellularRunning(); // always start shellular, whether fresh login or returning session
+}
+
+/* ── Password visibility toggle ──────────────────────────────────────────── */
+toggleVisBtn.addEventListener('click', () => {
+  const isPassword = keyInput.type === 'password';
+  keyInput.type = isPassword ? 'text' : 'password';
+  eyeOpen.classList.toggle('hidden', isPassword);
+  eyeClosed.classList.toggle('hidden', !isPassword);
+});
+
+/* ── Login ───────────────────────────────────────────────────────────────── */
+loginForm.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const key = keyInput.value.trim();
+  if (!key) return;
+
+  loginBtn.disabled = true;
+  loginLabel.classList.add('hidden');
+  loginSpinner.classList.remove('hidden');
+  loginError.classList.add('hidden');
+
+  try {
+    const res = await fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      throw new Error(data.error || 'Login failed');
+    }
+
+    token = data.token;
+    sessionStorage.setItem('shellular_token', token);
+    keyInput.value = '';
+    showDashboard();
+  } catch (err) {
+    loginError.textContent = err.message;
+    loginError.classList.remove('hidden');
+  } finally {
+    loginBtn.disabled = false;
+    loginLabel.classList.remove('hidden');
+    loginSpinner.classList.add('hidden');
+  }
+});
+
+/* ── Logout ──────────────────────────────────────────────────────────────── */
+logoutBtn.addEventListener('click', async () => {
+  if (evtSource) { evtSource.close(); evtSource = null; }
+  await fetch('/api/logout', {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  }).catch(() => {});
+  token = null;
+  sessionStorage.removeItem('shellular_token');
+  fullOutput = '';
+  logPre.textContent = '';
+  qrPre.textContent = '';
+  showLogin();
+});
+
+/* ── SSE stream ──────────────────────────────────────────────────────────── */
+function connectStream() {
+  if (evtSource) { evtSource.close(); }
+
+  evtSource = new EventSource(`/api/stream?t=${Date.now()}`, {});
+
+  // EventSource doesn't support custom headers, so we pass the token
+  // as a cookie or query param workaround via a short-lived fetch first.
+  // Instead, we do: close the native EventSource approach and use fetch-based SSE.
+  evtSource.close();
+  evtSource = null;
+  startFetchSSE();
+}
+
+async function startFetchSSE() {
+  try {
+    const res = await fetch('/api/stream', {
+      headers: { Authorization: `Bearer ${token}` },
+      cache: 'no-store',
+    });
+
+    if (res.status === 401) {
+      sessionStorage.removeItem('shellular_token');
+      token = null;
+      showLogin();
+      return;
+    }
+
+    if (!res.ok || !res.body) {
+      setTimeout(startFetchSSE, 3000);
+      return;
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let partial = '';
+
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+
+      partial += decoder.decode(value, { stream: true });
+      const parts = partial.split('\n\n');
+      partial = parts.pop(); // keep incomplete last chunk
+
+      for (const part of parts) {
+        const line = part.trim();
+        if (!line.startsWith('data:')) continue;
+        try {
+          const payload = JSON.parse(line.slice(5).trim());
+          handleEvent(payload);
+        } catch { /* ignore parse errors */ }
+      }
+    }
+  } catch {
+    // Connection dropped — retry after 2s
+  }
+
+  setTimeout(startFetchSSE, 2000);
+}
+
+/* ── Event handler ───────────────────────────────────────────────────────── */
+function handleEvent(payload) {
+  if (payload.type === 'status') {
+    updateStatus(payload.status);
+  } else if (payload.type === 'output') {
+    appendOutput(payload.text);
+  } else if (payload.type === 'clear') {
+    fullOutput = '';
+    logPre.textContent = '';
+    qrRendered = false;
+    setQrState('loading');
+  }
+}
+
+/* ── Status display ──────────────────────────────────────────────────────── */
+function updateStatus(status) {
+  shellStatus = status;
+
+  const labels = {
+    running:  'Running',
+    starting: 'Starting',
+    retrying: 'Retrying…',
+    stopped:  'Stopped',
+    error:    'Error',
+  };
+  statusBadge.textContent = labels[status] || status;
+  statusBadge.className   = `badge badge-${status}`;
+
+  if (status === 'retrying') {
+    if (!qrRendered) setQrState('loading');
+    return; // keep showing the spinner while we wait
+  }
+
+  if (status === 'stopped' || status === 'error') {
+    if (!qrRendered) {
+      setQrState('error');
+      qrErrorMsg.textContent =
+        status === 'error'
+          ? 'Shellular failed to start. Check the output log for details.'
+          : 'Shellular stopped. Click "Try again" to restart.';
+    }
+  }
+
+  if (status === 'starting') {
+    if (!qrRendered) setQrState('loading');
+  }
+
+  // Once shellular is running, fetch the QR data and render it
+  if (status === 'running' && !qrRendered) {
+    fetchAndRenderQR();
+  }
+}
+
+/* ── QR state machine ────────────────────────────────────────────────────── */
+function setQrState(state) {
+  qrLoading.classList.toggle('hidden', state !== 'loading');
+  qrReady.classList.toggle('hidden', state !== 'ready');
+  qrError.classList.toggle('hidden', state !== 'error');
+}
+
+/* ── QR rendering ────────────────────────────────────────────────────────── */
+async function fetchAndRenderQR() {
+  for (let i = 0; i < 8; i++) {
+    await new Promise(r => setTimeout(r, i === 0 ? 1000 : 2500));
+    try {
+      const res = await authFetch('/api/shellular/qr-data');
+      if (!res || !res.ok) continue;
+      const json = await res.json();
+      const qrData = json.qrData;
+      if (!qrData) continue;
+
+      // Show the container FIRST so the div has real dimensions when QRCode renders
+      setQrState('ready');
+
+      // Wipe any previous render
+      qrCanvas.innerHTML = '';
+
+      new QRCode(qrCanvas, {
+        text:         qrData,
+        width:        220,
+        height:       220,
+        colorDark:    '#000000',
+        colorLight:   '#ffffff',
+        correctLevel: QRCode.CorrectLevel.M,
+      });
+      qrRendered = true;
+      return;
+    } catch (err) {
+      console.warn('fetchAndRenderQR attempt', i, err);
+    }
+  }
+  if (!qrRendered) {
+    setQrState('error');
+    qrErrorMsg.textContent = 'Could not render QR. Try restarting.';
+  }
+}
+
+/* ── Output processing ───────────────────────────────────────────────────── */
+function appendOutput(text) {
+  if (!text) return;
+  fullOutput += text;
+  logPre.textContent = fullOutput;
+  logPre.scrollTop = logPre.scrollHeight;
+
+  // Show manual registration card as soon as rate-limit message appears
+  if (text.includes('rate-limited') || text.includes('Registration rate-limited')) {
+    rateLimitCount++;
+    if (rateLimitCount >= 1) loadManualCard();
+  }
+}
+
+/* ── Controls ───────────────────────���────────────────────────────────────── */
+restartBtn.addEventListener('click', restartShellular);
+
+async function restartShellular() {
+  fullOutput = '';
+  logPre.textContent = '';
+  qrRendered = false;
+  setQrState('loading');
+  await authFetch('/api/shellular/restart', 'POST');
+}
+
+clearLogBtn.addEventListener('click', () => {
+  logPre.textContent = '';
+});
+
+async function authFetch(url, method = 'GET') {
+  const res = await fetch(url, {
+    method,
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (res.status === 401) {
+    token = null;
+    sessionStorage.removeItem('shellular_token');
+    showLogin();
+  }
+  return res;
+}
+
+/* ── Manual registration fallback ───────────────────────────────────────── */
+const manualCard      = $('manual-reg-card');
+const manualCurlCmd   = $('manual-curl-cmd');
+const manualHostInput = $('manual-host-id');
+const manualSubmitBtn = $('manual-submit-btn');
+const manualError     = $('manual-error');
+
+let rateLimitCount  = 0;
+let machineIdLoaded = false;
+
+async function loadManualCard() {
+  if (machineIdLoaded) { manualCard.classList.remove('hidden'); return; }
+  try {
+    const res = await fetch('/api/shellular/machine-id');
+    const { machineId } = await res.json();
+    const cmd = `curl -s -X POST "https://api.shellular.dev/register" -H "Content-Type: application/json" -d '{"machineId":"${machineId}","platform":"linux"}'`;
+    manualCurlCmd.textContent = cmd;
+    machineIdLoaded = true;
+    manualCard.classList.remove('hidden');
+  } catch { /* silent */ }
+}
+
+manualSubmitBtn.addEventListener('click', async () => {
+  const hostId = manualHostInput.value.trim();
+  if (!hostId) {
+    manualError.textContent = 'Please enter the hostId from the curl response.';
+    manualError.classList.remove('hidden');
+    return;
+  }
+  manualError.classList.add('hidden');
+  manualSubmitBtn.disabled = true;
+  manualSubmitBtn.textContent = 'Connecting…';
+
+  try {
+    const r = await fetch('/api/shellular/seed-host', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+      body: JSON.stringify({ hostId }),
+    });
+    const data = await r.json();
+    if (!r.ok) throw new Error(data.error || 'Failed');
+
+    manualCard.classList.add('hidden');
+    rateLimitCount = 0;
+    // shellular is restarting — clear output and show loading
+    fullOutput = '';
+    logPre.textContent = '';
+    qrRendered = false;
+    setQrState('loading');
+  } catch (err) {
+    manualError.textContent = err.message;
+    manualError.classList.remove('hidden');
+  } finally {
+    manualSubmitBtn.disabled = false;
+    manualSubmitBtn.textContent = 'Connect';
+  }
+});
+
+/* ── First-time setup panel ──────────────────────────────────────────────── */
+const setupCard  = $('setup-card');
+let setupDone    = false;  // true once panel is shown OR secrets are already seeded
+
+async function checkSetup() {
+  if (setupDone || !token) return;
+  try {
+    const r1 = await authFetch('/api/setup-status');
+    if (!r1 || !r1.ok) return;
+    const { seeded } = await r1.json();
+    if (seeded) { setupDone = true; return; } // secrets already saved
+
+    // Try to read credentials (shellular must have registered first)
+    const r2 = await authFetch('/api/shellular/credentials');
+    if (!r2 || !r2.ok) return; // not ready yet — poll will retry
+    const data = await r2.json();
+    if (!data.hostId) return;
+
+    // Populate and show the panel
+    $('val-host-id').textContent    = data.hostId;
+    $('val-machine-id').textContent = data.machineId;
+    $('val-key').textContent        = data.keyB64;
+    setupCard.classList.remove('hidden');
+    setupDone = true;
+  } catch { /* retry on next poll */ }
+}
+
+// Poll every 4 s so the panel appears as soon as credentials are available,
+// regardless of whether the QR has rendered yet.
+setInterval(checkSetup, 4000);
+
+// Copy-to-clipboard buttons
+document.addEventListener('click', (e) => {
+  const btn = e.target.closest('.btn-copy');
+  if (!btn) return;
+  const val = $( btn.dataset.target )?.textContent || '';
+  navigator.clipboard.writeText(val).then(() => {
+    btn.textContent = 'Copied!';
+    btn.classList.add('copied');
+    setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
+  });
+});
+
+/* ── Kick off shellular automatically after login ────────────────────────── */
+async function ensureShellularRunning() {
+  const res = await authFetch('/api/status');
+  if (!res) return;
+  const { running } = await res.json();
+  if (!running) {
+    await authFetch('/api/shellular/start', 'POST');
+  }
+}
+
+/* ── Init ────────────────────────────────────────────────────────────────── */
+// If we have a stored token, try to go straight to the dashboard
+if (token) {
+  fetch('/api/status', { headers: { Authorization: `Bearer ${token}` } })
+    .then((r) => {
+      if (r.status === 401) {
+        token = null;
+        sessionStorage.removeItem('shellular_token');
+        showLogin();
+      } else {
+        showDashboard();
+      }
+    })
+    .catch(() => showLogin());
+} else {
+  showLogin();
+}
+
+// Expose for inline onclick in HTML
+window.restartShellular = restartShellular;

public/index.html

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Shellular</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+  <!-- ── Login page ─────────────────────────────────────────── -->
+  <div id="login-page" class="page">
+    <div class="login-card">
+      <div class="brand">
+        <svg class="brand-icon" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="40" height="40" rx="10" fill="#00c4cc"/>
+          <path d="M8 14l8 6-8 6" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <line x1="20" y1="26" x2="32" y2="26" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
+        </svg>
+        <h1>Shellular</h1>
+      </div>
+      <p class="tagline">Enter your access key to get the QR code</p>
+
+      <form id="login-form" autocomplete="off">
+        <div class="field">
+          <label for="key-input">Access Key</label>
+          <div class="input-wrap">
+            <input
+              id="key-input"
+              type="password"
+              placeholder="••••••••••••"
+              autocomplete="current-password"
+              spellcheck="false"
+            />
+            <button type="button" id="toggle-vis" class="eye-btn" aria-label="Toggle visibility">
+              <svg id="eye-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                <circle cx="12" cy="12" r="3"/>
+              </svg>
+              <svg id="eye-closed" class="hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
+                <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
+                <line x1="1" y1="1" x2="23" y2="23"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <button type="submit" id="login-btn">
+          <span id="login-label">Login</span>
+          <span id="login-spinner" class="spinner hidden"></span>
+        </button>
+
+        <p id="login-error" class="error-msg hidden"></p>
+      </form>
+    </div>
+  </div>
+
+  <!-- ── Dashboard page ─────────────────────────────────────── -->
+  <div id="dashboard-page" class="page hidden">
+    <header class="topbar">
+      <div class="topbar-brand">
+        <svg class="brand-icon small" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="40" height="40" rx="10" fill="#00c4cc"/>
+          <path d="M8 14l8 6-8 6" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <line x1="20" y1="26" x2="32" y2="26" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
+        </svg>
+        <span>Shellular</span>
+      </div>
+      <div class="topbar-actions">
+        <span id="status-badge" class="badge badge-stopped">Stopped</span>
+        <button id="restart-btn" class="btn btn-secondary" title="Restart shellular">&#8635; Restart</button>
+        <button id="logout-btn" class="btn btn-ghost">Logout</button>
+      </div>
+    </header>
+
+    <main class="dashboard">
+
+      <!-- QR card -->
+      <section class="card qr-card">
+        <div class="card-header">
+          <h2>QR Code</h2>
+          <p>Scan with the <strong>Shellular app</strong> to connect your device</p>
+        </div>
+
+        <div id="qr-area" class="qr-area">
+          <!-- Loading state -->
+          <div id="qr-loading" class="qr-state">
+            <div class="loader"></div>
+            <p>Starting Shellular&hellip;</p>
+          </div>
+
+          <!-- QR code rendered on canvas via qrcode.js -->
+          <div id="qr-ready" class="qr-state hidden">
+            <div class="qr-frame">
+              <div id="qr-canvas"></div>
+            </div>
+            <p class="qr-hint">Point your Shellular app camera at the code above</p>
+          </div>
+
+          <!-- Error / stopped state -->
+          <div id="qr-error" class="qr-state hidden">
+            <p class="error-icon">&#9888;</p>
+            <p id="qr-error-msg">Shellular stopped unexpectedly.</p>
+            <button class="btn btn-primary" onclick="restartShellular()">Try again</button>
+          </div>
+        </div>
+      </section>
+
+      <!-- First-time setup card (hidden once secrets are saved) -->
+      <section id="setup-card" class="card setup-card hidden">
+        <div class="card-header">
+          <h2>&#9889; One-time Setup</h2>
+          <p>Save these as HF Secrets so restarts never need to re-register</p>
+        </div>
+        <div class="setup-body">
+          <p class="setup-intro">
+            Shellular just registered successfully. To make this permanent
+            (and avoid rate-limit errors after container restarts), add the
+            three secrets below to your Space:
+            <a href="https://huggingface.co/spaces/settings" target="_blank" class="setup-link">
+              Space Settings → Variables and secrets
+            </a>
+          </p>
+
+          <div class="secret-row">
+            <span class="secret-name">SHELLULAR_HOST_ID</span>
+            <code id="val-host-id" class="secret-val"></code>
+            <button class="btn-copy" data-target="val-host-id">Copy</button>
+          </div>
+          <div class="secret-row">
+            <span class="secret-name">SHELLULAR_MACHINE_ID</span>
+            <code id="val-machine-id" class="secret-val"></code>
+            <button class="btn-copy" data-target="val-machine-id">Copy</button>
+          </div>
+          <div class="secret-row">
+            <span class="secret-name">SHELLULAR_KEY</span>
+            <code id="val-key" class="secret-val"></code>
+            <button class="btn-copy" data-target="val-key">Copy</button>
+          </div>
+
+          <p class="setup-note">
+            After adding all three, restart this Space. This panel will disappear once the secrets are detected.
+          </p>
+        </div>
+      </section>
+
+      <!-- Manual registration fallback (shown when rate-limited) -->
+      <section id="manual-reg-card" class="card manual-card hidden">
+        <div class="card-header">
+          <h2>&#9888; Rate Limited — Manual Registration</h2>
+          <p>The shellular relay rejected automatic registration. Run one command from your terminal.</p>
+        </div>
+        <div class="manual-body">
+          <p class="manual-intro">
+            The Shellular registration API is temporarily rate-limiting this server's IP.
+            You can bypass it by registering from <strong>your own machine</strong> — it only takes 10 seconds.
+          </p>
+
+          <div class="manual-step">
+            <span class="step-num">1</span>
+            <div>
+              <p>Run this in your terminal (Mac / Linux / Windows WSL):</p>
+              <div class="code-block">
+                <code id="manual-curl-cmd">Loading…</code>
+                <button class="btn-copy" data-target="manual-curl-cmd">Copy</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="manual-step">
+            <span class="step-num">2</span>
+            <div>
+              <p>You'll get back something like <code class="inline-code">{"success":true,"data":{"hostId":"<strong>XXXX</strong>"}}</code></p>
+              <p>Paste the <strong>hostId</strong> value below and click <strong>Connect</strong>:</p>
+              <div class="manual-input-row">
+                <input id="manual-host-id" type="text" placeholder='e.g. M58FBHn3YzbN' spellcheck="false" />
+                <button id="manual-submit-btn" class="btn btn-primary manual-btn">Connect</button>
+              </div>
+              <p id="manual-error" class="error-msg hidden"></p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Log card -->
+      <section class="card log-card">
+        <div class="card-header">
+          <h2>Output</h2>
+          <button id="clear-log-btn" class="btn btn-ghost small">Clear</button>
+        </div>
+        <pre id="log-pre" class="log-pre"></pre>
+      </section>
+
+    </main>
+  </div>
+
+  <script src="qrcode.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>

public/qrcode.min.js

@@ -0,0 +1 @@
+var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,this.data=a,this.parsedData=[];for(var b=[],d=0,e=this.data.length;e>d;d++){var f=this.data.charCodeAt(d);f>65536?(b[0]=240|(1835008&f)>>>18,b[1]=128|(258048&f)>>>12,b[2]=128|(4032&f)>>>6,b[3]=128|63&f):f>2048?(b[0]=224|(61440&f)>>>12,b[1]=128|(4032&f)>>>6,b[2]=128|63&f):f>128?(b[0]=192|(1984&f)>>>6,b[1]=128|63&f):b[0]=f,this.parsedData=this.parsedData.concat(b)}this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function b(a,b){this.typeNumber=a,this.errorCorrectLevel=b,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}function i(a,b){if(void 0==a.length)throw new Error(a.length+"/"+b);for(var c=0;c<a.length&&0==a[c];)c++;this.num=new Array(a.length-c+b);for(var d=0;d<a.length-c;d++)this.num[d]=a[d+c]}function j(a,b){this.totalCount=a,this.dataCount=b}function k(){this.buffer=[],this.length=0}function m(){return"undefined"!=typeof CanvasRenderingContext2D}function n(){var a=!1,b=navigator.userAgent;return/android/i.test(b)&&(a=!0,aMat=b.toString().match(/android ([0-9]\.[0-9])/i),aMat&&aMat[1]&&(a=parseFloat(aMat[1]))),a}function r(a,b){for(var c=1,e=s(a),f=0,g=l.length;g>=f;f++){var h=0;switch(b){case d.L:h=l[f][0];break;case d.M:h=l[f][1];break;case d.Q:h=l[f][2];break;case d.H:h=l[f][3]}if(h>=e)break;c++}if(c>l.length)throw new Error("Too long data");return c}function s(a){var b=encodeURI(a).toString().replace(/\%[0-9a-fA-F]{2}/g,"a");return b.length+(b.length!=a?3:0)}a.prototype={getLength:function(){return this.parsedData.length},write:function(a){for(var b=0,c=this.parsedData.length;c>b;b++)a.put(this.parsedData[b],8)}},b.prototype={addData:function(b){var c=new a(b);this.dataList.push(c),this.dataCache=null},isDark:function(a,b){if(0>a||this.moduleCount<=a||0>b||this.moduleCount<=b)throw new Error(a+","+b);return this.modules[a][b]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var d=0;d<this.moduleCount;d++){this.modules[d]=new Array(this.moduleCount);for(var e=0;e<this.moduleCount;e++)this.modules[d][e]=null}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(a,c),this.typeNumber>=7&&this.setupTypeNumber(a),null==this.dataCache&&(this.dataCache=b.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,b){for(var c=-1;7>=c;c++)if(!(-1>=a+c||this.moduleCount<=a+c))for(var d=-1;7>=d;d++)-1>=b+d||this.moduleCount<=b+d||(this.modules[a+c][b+d]=c>=0&&6>=c&&(0==d||6==d)||d>=0&&6>=d&&(0==c||6==c)||c>=2&&4>=c&&d>=2&&4>=d?!0:!1)},getBestMaskPattern:function(){for(var a=0,b=0,c=0;8>c;c++){this.makeImpl(!0,c);var d=f.getLostPoint(this);(0==c||a>d)&&(a=d,b=c)}return b},createMovieClip:function(a,b,c){var d=a.createEmptyMovieClip(b,c),e=1;this.make();for(var f=0;f<this.modules.length;f++)for(var g=f*e,h=0;h<this.modules[f].length;h++){var i=h*e,j=this.modules[f][h];j&&(d.beginFill(0,100),d.moveTo(i,g),d.lineTo(i+e,g),d.lineTo(i+e,g+e),d.lineTo(i,g+e),d.endFill())}return d},setupTimingPattern:function(){for(var a=8;a<this.moduleCount-8;a++)null==this.modules[a][6]&&(this.modules[a][6]=0==a%2);for(var b=8;b<this.moduleCount-8;b++)null==this.modules[6][b]&&(this.modules[6][b]=0==b%2)},setupPositionAdjustPattern:function(){for(var a=f.getPatternPosition(this.typeNumber),b=0;b<a.length;b++)for(var c=0;c<a.length;c++){var d=a[b],e=a[c];if(null==this.modules[d][e])for(var g=-2;2>=g;g++)for(var h=-2;2>=h;h++)this.modules[d+g][e+h]=-2==g||2==g||-2==h||2==h||0==g&&0==h?!0:!1}},setupTypeNumber:function(a){for(var b=f.getBCHTypeNumber(this.typeNumber),c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[Math.floor(c/3)][c%3+this.moduleCount-8-3]=d}for(var c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[c%3+this.moduleCount-8-3][Math.floor(c/3)]=d}},setupTypeInfo:function(a,b){for(var c=this.errorCorrectLevel<<3|b,d=f.getBCHTypeInfo(c),e=0;15>e;e++){var g=!a&&1==(1&d>>e);6>e?this.modules[e][8]=g:8>e?this.modules[e+1][8]=g:this.modules[this.moduleCount-15+e][8]=g}for(var e=0;15>e;e++){var g=!a&&1==(1&d>>e);8>e?this.modules[8][this.moduleCount-e-1]=g:9>e?this.modules[8][15-e-1+1]=g:this.modules[8][15-e-1]=g}this.modules[this.moduleCount-8][8]=!a},mapData:function(a,b){for(var c=-1,d=this.moduleCount-1,e=7,g=0,h=this.moduleCount-1;h>0;h-=2)for(6==h&&h--;;){for(var i=0;2>i;i++)if(null==this.modules[d][h-i]){var j=!1;g<a.length&&(j=1==(1&a[g]>>>e));var k=f.getMask(b,d,h-i);k&&(j=!j),this.modules[d][h-i]=j,e--,-1==e&&(g++,e=7)}if(d+=c,0>d||this.moduleCount<=d){d-=c,c=-c;break}}}},b.PAD0=236,b.PAD1=17,b.createData=function(a,c,d){for(var e=j.getRSBlocks(a,c),g=new k,h=0;h<d.length;h++){var i=d[h];g.put(i.mode,4),g.put(i.getLength(),f.getLengthInBits(i.mode,a)),i.write(g)}for(var l=0,h=0;h<e.length;h++)l+=e[h].dataCount;if(g.getLengthInBits()>8*l)throw new Error("code length overflow. ("+g.getLengthInBits()+">"+8*l+")");for(g.getLengthInBits()+4<=8*l&&g.put(0,4);0!=g.getLengthInBits()%8;)g.putBit(!1);for(;;){if(g.getLengthInBits()>=8*l)break;if(g.put(b.PAD0,8),g.getLengthInBits()>=8*l)break;g.put(b.PAD1,8)}return b.createBytes(g,e)},b.createBytes=function(a,b){for(var c=0,d=0,e=0,g=new Array(b.length),h=new Array(b.length),j=0;j<b.length;j++){var k=b[j].dataCount,l=b[j].totalCount-k;d=Math.max(d,k),e=Math.max(e,l),g[j]=new Array(k);for(var m=0;m<g[j].length;m++)g[j][m]=255&a.buffer[m+c];c+=k;var n=f.getErrorCorrectPolynomial(l),o=new i(g[j],n.getLength()-1),p=o.mod(n);h[j]=new Array(n.getLength()-1);for(var m=0;m<h[j].length;m++){var q=m+p.getLength()-h[j].length;h[j][m]=q>=0?p.get(q):0}}for(var r=0,m=0;m<b.length;m++)r+=b[m].totalCount;for(var s=new Array(r),t=0,m=0;d>m;m++)for(var j=0;j<b.length;j++)m<g[j].length&&(s[t++]=g[j][m]);for(var m=0;e>m;m++)for(var j=0;j<b.length;j++)m<h[j].length&&(s[t++]=h[j][m]);return s};for(var c={MODE_NUMBER:1,MODE_ALPHA_NUM:2,MODE_8BIT_BYTE:4,MODE_KANJI:8},d={L:1,M:0,Q:3,H:2},e={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7},f={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(a){for(var b=a<<10;f.getBCHDigit(b)-f.getBCHDigit(f.G15)>=0;)b^=f.G15<<f.getBCHDigit(b)-f.getBCHDigit(f.G15);return(a<<10|b)^f.G15_MASK},getBCHTypeNumber:function(a){for(var b=a<<12;f.getBCHDigit(b)-f.getBCHDigit(f.G18)>=0;)b^=f.G18<<f.getBCHDigit(b)-f.getBCHDigit(f.G18);return a<<12|b},getBCHDigit:function(a){for(var b=0;0!=a;)b++,a>>>=1;return b},getPatternPosition:function(a){return f.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,b,c){switch(a){case e.PATTERN000:return 0==(b+c)%2;case e.PATTERN001:return 0==b%2;case e.PATTERN010:return 0==c%3;case e.PATTERN011:return 0==(b+c)%3;case e.PATTERN100:return 0==(Math.floor(b/2)+Math.floor(c/3))%2;case e.PATTERN101:return 0==b*c%2+b*c%3;case e.PATTERN110:return 0==(b*c%2+b*c%3)%2;case e.PATTERN111:return 0==(b*c%3+(b+c)%2)%2;default:throw new Error("bad maskPattern:"+a)}},getErrorCorrectPolynomial:function(a){for(var b=new i([1],0),c=0;a>c;c++)b=b.multiply(new i([1,g.gexp(c)],0));return b},getLengthInBits:function(a,b){if(b>=1&&10>b)switch(a){case c.MODE_NUMBER:return 10;case c.MODE_ALPHA_NUM:return 9;case c.MODE_8BIT_BYTE:return 8;case c.MODE_KANJI:return 8;default:throw new Error("mode:"+a)}else if(27>b)switch(a){case c.MODE_NUMBER:return 12;case c.MODE_ALPHA_NUM:return 11;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 10;default:throw new Error("mode:"+a)}else{if(!(41>b))throw new Error("type:"+b);switch(a){case c.MODE_NUMBER:return 14;case c.MODE_ALPHA_NUM:return 13;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 12;default:throw new Error("mode:"+a)}}},getLostPoint:function(a){for(var b=a.getModuleCount(),c=0,d=0;b>d;d++)for(var e=0;b>e;e++){for(var f=0,g=a.isDark(d,e),h=-1;1>=h;h++)if(!(0>d+h||d+h>=b))for(var i=-1;1>=i;i++)0>e+i||e+i>=b||(0!=h||0!=i)&&g==a.isDark(d+h,e+i)&&f++;f>5&&(c+=3+f-5)}for(var d=0;b-1>d;d++)for(var e=0;b-1>e;e++){var j=0;a.isDark(d,e)&&j++,a.isDark(d+1,e)&&j++,a.isDark(d,e+1)&&j++,a.isDark(d+1,e+1)&&j++,(0==j||4==j)&&(c+=3)}for(var d=0;b>d;d++)for(var e=0;b-6>e;e++)a.isDark(d,e)&&!a.isDark(d,e+1)&&a.isDark(d,e+2)&&a.isDark(d,e+3)&&a.isDark(d,e+4)&&!a.isDark(d,e+5)&&a.isDark(d,e+6)&&(c+=40);for(var e=0;b>e;e++)for(var d=0;b-6>d;d++)a.isDark(d,e)&&!a.isDark(d+1,e)&&a.isDark(d+2,e)&&a.isDark(d+3,e)&&a.isDark(d+4,e)&&!a.isDark(d+5,e)&&a.isDark(d+6,e)&&(c+=40);for(var k=0,e=0;b>e;e++)for(var d=0;b>d;d++)a.isDark(d,e)&&k++;var l=Math.abs(100*k/b/b-50)/5;return c+=10*l}},g={glog:function(a){if(1>a)throw new Error("glog("+a+")");return g.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;a>=256;)a-=255;return g.EXP_TABLE[a]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},h=0;8>h;h++)g.EXP_TABLE[h]=1<<h;for(var h=8;256>h;h++)g.EXP_TABLE[h]=g.EXP_TABLE[h-4]^g.EXP_TABLE[h-5]^g.EXP_TABLE[h-6]^g.EXP_TABLE[h-8];for(var h=0;255>h;h++)g.LOG_TABLE[g.EXP_TABLE[h]]=h;i.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var b=new Array(this.getLength()+a.getLength()-1),c=0;c<this.getLength();c++)for(var d=0;d<a.getLength();d++)b[c+d]^=g.gexp(g.glog(this.get(c))+g.glog(a.get(d)));return new i(b,0)},mod:function(a){if(this.getLength()-a.getLength()<0)return this;for(var b=g.glog(this.get(0))-g.glog(a.get(0)),c=new Array(this.getLength()),d=0;d<this.getLength();d++)c[d]=this.get(d);for(var d=0;d<a.getLength();d++)c[d]^=g.gexp(g.glog(a.get(d))+b);return new i(c,0).mod(a)}},j.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],j.getRSBlocks=function(a,b){var c=j.getRsBlockTable(a,b);if(void 0==c)throw new Error("bad rs block @ typeNumber:"+a+"/errorCorrectLevel:"+b);for(var d=c.length/3,e=[],f=0;d>f;f++)for(var g=c[3*f+0],h=c[3*f+1],i=c[3*f+2],k=0;g>k;k++)e.push(new j(h,i));return e},j.getRsBlockTable=function(a,b){switch(b){case d.L:return j.RS_BLOCK_TABLE[4*(a-1)+0];case d.M:return j.RS_BLOCK_TABLE[4*(a-1)+1];case d.Q:return j.RS_BLOCK_TABLE[4*(a-1)+2];case d.H:return j.RS_BLOCK_TABLE[4*(a-1)+3];default:return void 0}},k.prototype={get:function(a){var b=Math.floor(a/8);return 1==(1&this.buffer[b]>>>7-a%8)},put:function(a,b){for(var c=0;b>c;c++)this.putBit(1==(1&a>>>b-c-1))},getLengthInBits:function(){return this.length},putBit:function(a){var b=Math.floor(this.length/8);this.buffer.length<=b&&this.buffer.push(0),a&&(this.buffer[b]|=128>>>this.length%8),this.length++}};var l=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]],o=function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){function g(a,b){var c=document.createElementNS("http://www.w3.org/2000/svg",a);for(var d in b)b.hasOwnProperty(d)&&c.setAttribute(d,b[d]);return c}var b=this._htOption,c=this._el,d=a.getModuleCount();Math.floor(b.width/d),Math.floor(b.height/d),this.clear();var h=g("svg",{viewBox:"0 0 "+String(d)+" "+String(d),width:"100%",height:"100%",fill:b.colorLight});h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),c.appendChild(h),h.appendChild(g("rect",{fill:b.colorDark,width:"1",height:"1",id:"template"}));for(var i=0;d>i;i++)for(var j=0;d>j;j++)if(a.isDark(i,j)){var k=g("use",{x:String(i),y:String(j)});k.setAttributeNS("http://www.w3.org/1999/xlink","href","#template"),h.appendChild(k)}},a.prototype.clear=function(){for(;this._el.hasChildNodes();)this._el.removeChild(this._el.lastChild)},a}(),p="svg"===document.documentElement.tagName.toLowerCase(),q=p?o:m()?function(){function a(){this._elImage.src=this._elCanvas.toDataURL("image/png"),this._elImage.style.display="block",this._elCanvas.style.display="none"}function d(a,b){var c=this;if(c._fFail=b,c._fSuccess=a,null===c._bSupportDataURI){var d=document.createElement("img"),e=function(){c._bSupportDataURI=!1,c._fFail&&_fFail.call(c)},f=function(){c._bSupportDataURI=!0,c._fSuccess&&c._fSuccess.call(c)};return d.onabort=e,d.onerror=e,d.onload=f,d.src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",void 0}c._bSupportDataURI===!0&&c._fSuccess?c._fSuccess.call(c):c._bSupportDataURI===!1&&c._fFail&&c._fFail.call(c)}if(this._android&&this._android<=2.1){var b=1/window.devicePixelRatio,c=CanvasRenderingContext2D.prototype.drawImage;CanvasRenderingContext2D.prototype.drawImage=function(a,d,e,f,g,h,i,j){if("nodeName"in a&&/img/i.test(a.nodeName))for(var l=arguments.length-1;l>=1;l--)arguments[l]=arguments[l]*b;else"undefined"==typeof j&&(arguments[1]*=b,arguments[2]*=b,arguments[3]*=b,arguments[4]*=b);c.apply(this,arguments)}}var e=function(a,b){this._bIsPainted=!1,this._android=n(),this._htOption=b,this._elCanvas=document.createElement("canvas"),this._elCanvas.width=b.width,this._elCanvas.height=b.height,a.appendChild(this._elCanvas),this._el=a,this._oContext=this._elCanvas.getContext("2d"),this._bIsPainted=!1,this._elImage=document.createElement("img"),this._elImage.style.display="none",this._el.appendChild(this._elImage),this._bSupportDataURI=null};return e.prototype.draw=function(a){var b=this._elImage,c=this._oContext,d=this._htOption,e=a.getModuleCount(),f=d.width/e,g=d.height/e,h=Math.round(f),i=Math.round(g);b.style.display="none",this.clear();for(var j=0;e>j;j++)for(var k=0;e>k;k++){var l=a.isDark(j,k),m=k*f,n=j*g;c.strokeStyle=l?d.colorDark:d.colorLight,c.lineWidth=1,c.fillStyle=l?d.colorDark:d.colorLight,c.fillRect(m,n,f,g),c.strokeRect(Math.floor(m)+.5,Math.floor(n)+.5,h,i),c.strokeRect(Math.ceil(m)-.5,Math.ceil(n)-.5,h,i)}this._bIsPainted=!0},e.prototype.makeImage=function(){this._bIsPainted&&d.call(this,a)},e.prototype.isPainted=function(){return this._bIsPainted},e.prototype.clear=function(){this._oContext.clearRect(0,0,this._elCanvas.width,this._elCanvas.height),this._bIsPainted=!1},e.prototype.round=function(a){return a?Math.floor(1e3*a)/1e3:a},e}():function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){for(var b=this._htOption,c=this._el,d=a.getModuleCount(),e=Math.floor(b.width/d),f=Math.floor(b.height/d),g=['<table style="border:0;border-collapse:collapse;">'],h=0;d>h;h++){g.push("<tr>");for(var i=0;d>i;i++)g.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:'+e+"px;height:"+f+"px;background-color:"+(a.isDark(h,i)?b.colorDark:b.colorLight)+';"></td>');g.push("</tr>")}g.push("</table>"),c.innerHTML=g.join("");var j=c.childNodes[0],k=(b.width-j.offsetWidth)/2,l=(b.height-j.offsetHeight)/2;k>0&&l>0&&(j.style.margin=l+"px "+k+"px")},a.prototype.clear=function(){this._el.innerHTML=""},a}();QRCode=function(a,b){if(this._htOption={width:256,height:256,typeNumber:4,colorDark:"#000000",colorLight:"#ffffff",correctLevel:d.H},"string"==typeof b&&(b={text:b}),b)for(var c in b)this._htOption[c]=b[c];"string"==typeof a&&(a=document.getElementById(a)),this._android=n(),this._el=a,this._oQRCode=null,this._oDrawing=new q(this._el,this._htOption),this._htOption.text&&this.makeCode(this._htOption.text)},QRCode.prototype.makeCode=function(a){this._oQRCode=new b(r(a,this._htOption.correctLevel),this._htOption.correctLevel),this._oQRCode.addData(a),this._oQRCode.make(),this._el.title=a,this._oDrawing.draw(this._oQRCode),this.makeImage()},QRCode.prototype.makeImage=function(){"function"==typeof this._oDrawing.makeImage&&(!this._android||this._android>=3)&&this._oDrawing.makeImage()},QRCode.prototype.clear=function(){this._oDrawing.clear()},QRCode.CorrectLevel=d}();

public/style.css

@@ -0,0 +1,508 @@
+/* ── Reset & base ─────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:        #0d0f14;
+  --surface:   #161b25;
+  --surface2:  #1e2533;
+  --border:    #2a3347;
+  --accent:    #00c4cc;
+  --accent-dk: #009ba1;
+  --text:      #e2e8f0;
+  --muted:     #8896ab;
+  --error:     #ff5f6d;
+  --success:   #4ade80;
+  --warning:   #facc15;
+  --radius:    12px;
+  --radius-sm: 8px;
+  --font-mono: 'Cascadia Code', 'Fira Code', 'Courier New', Courier, monospace;
+}
+
+html, body {
+  height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Pages ────────────────────────────────────────────────────────────────── */
+.page { min-height: 100vh; }
+.hidden { display: none !important; }
+
+/* ── Login page ───────────────────────────────────────────────────────────── */
+#login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background:
+    radial-gradient(ellipse at 20% 60%, rgba(0,196,204,.08) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 20%, rgba(0,196,204,.05) 0%, transparent 50%),
+    var(--bg);
+}
+
+.login-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 40px 36px;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 24px 64px rgba(0,0,0,.5);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.brand h1 {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+
+.brand-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+.brand-icon.small { width: 28px; height: 28px; border-radius: 7px; }
+
+.tagline {
+  color: var(--muted);
+  font-size: 13.5px;
+  margin-bottom: 28px;
+}
+
+/* Form */
+.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
+
+.field label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--muted);
+  letter-spacing: .4px;
+  text-transform: uppercase;
+}
+
+.input-wrap { position: relative; display: flex; }
+
+.input-wrap input {
+  width: 100%;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 15px;
+  padding: 11px 44px 11px 14px;
+  outline: none;
+  transition: border-color .15s, box-shadow .15s;
+}
+
+.input-wrap input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(0,196,204,.15);
+}
+
+.input-wrap input::placeholder { color: var(--muted); opacity: .6; }
+
+.eye-btn {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  border-radius: 4px;
+  transition: color .15s;
+}
+.eye-btn:hover { color: var(--text); }
+.eye-btn svg { width: 18px; height: 18px; }
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 18px;
+  transition: background .15s, opacity .15s, transform .1s;
+  white-space: nowrap;
+  text-decoration: none;
+}
+.btn:active { transform: scale(.97); }
+.btn:disabled { opacity: .5; cursor: not-allowed; }
+
+.btn-primary, #login-btn {
+  background: var(--accent);
+  color: #0d0f14;
+  width: 100%;
+  padding: 12px;
+  font-size: 15px;
+  margin-top: 8px;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-weight: 700;
+  transition: background .15s, transform .1s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.btn-primary:hover, #login-btn:hover { background: var(--accent-dk); }
+.btn-primary:active, #login-btn:active { transform: scale(.98); }
+.btn-primary:disabled, #login-btn:disabled { opacity: .5; cursor: not-allowed; }
+
+.btn-secondary {
+  background: var(--surface2);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+.btn-secondary:hover { background: var(--border); }
+
+.btn-ghost {
+  background: transparent;
+  color: var(--muted);
+  border: none;
+  padding: 8px 12px;
+}
+.btn-ghost:hover { color: var(--text); background: var(--surface2); }
+.btn-ghost.small { font-size: 12px; padding: 4px 10px; }
+
+.error-msg {
+  color: var(--error);
+  font-size: 13px;
+  margin-top: 10px;
+  text-align: center;
+  min-height: 20px;
+}
+
+/* ── Spinner ──────────────────────────────────────────────────────────────── */
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(0,0,0,.25);
+  border-top-color: #0d0f14;
+  border-radius: 50%;
+  animation: spin .7s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ── Top bar ──────────────────────────────────────────────────────────────── */
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 24px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.topbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 700;
+  font-size: 16px;
+  letter-spacing: -0.3px;
+}
+
+.topbar-actions { display: flex; align-items: center; gap: 10px; }
+
+/* Status badge */
+.badge {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 20px;
+  letter-spacing: .3px;
+  text-transform: uppercase;
+}
+.badge-running  { background: rgba(74,222,128,.15); color: var(--success); }
+.badge-starting { background: rgba(250,204,21,.15);  color: var(--warning); }
+.badge-retrying { background: rgba(250,204,21,.15);  color: var(--warning); }
+.badge-stopped  { background: rgba(255,95,109,.12); color: var(--error); }
+.badge-error    { background: rgba(255,95,109,.12); color: var(--error); }
+
+/* ── Dashboard layout ────────────────────────────────────────────────────── */
+.dashboard {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  padding: 24px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+@media (max-width: 720px) {
+  .dashboard { grid-template-columns: 1fr; }
+}
+
+/* Setup card spans full width */
+.setup-card { grid-column: 1 / -1; }
+
+/* ── Card ─────────────────────────────────────────────────────────────────── */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 18px 20px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.card-header h2 {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.card-header p {
+  font-size: 13px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+/* ── QR area ──────────────────────────────────────────────────────────────── */
+.qr-area {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px 20px;
+  min-height: 300px;
+}
+
+.qr-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  text-align: center;
+}
+
+.qr-state p { color: var(--muted); font-size: 14px; }
+
+/* Animated loader ring */
+.loader {
+  width: 44px;
+  height: 44px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin .9s linear infinite;
+}
+
+/* QR frame — white bg so block chars are scannable */
+.qr-frame {
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 16px;
+  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
+  display: inline-block;
+}
+
+/* The critical styles: tiny monospace, tight lines, dark-on-white */
+#qr-pre {
+  font-family: var(--font-mono);
+  font-size: 7px;
+  line-height: 1;
+  color: #000000;
+  background: transparent;
+  white-space: pre;
+  display: block;
+  letter-spacing: 0;
+}
+
+.qr-hint {
+  font-size: 12px !important;
+  color: var(--muted) !important;
+}
+
+.error-icon {
+  font-size: 36px;
+  color: var(--error) !important;
+}
+
+/* ── Manual registration card ─────────────────────────────────────────────── */
+.manual-card { grid-column: 1 / -1; border-color: rgba(250,204,21,.3); }
+
+.manual-body { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 18px; }
+
+.manual-intro { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
+
+.manual-step {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+}
+.manual-step > div { display: flex; flex-direction: column; gap: 8px; flex: 1; }
+.manual-step p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
+
+.step-num {
+  width: 26px; height: 26px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #0d0f14;
+  font-size: 13px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.code-block {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  flex-wrap: wrap;
+}
+.code-block code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text);
+  flex: 1;
+  word-break: break-all;
+}
+
+.inline-code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 5px;
+}
+
+.manual-input-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.manual-input-row input {
+  flex: 1;
+  min-width: 180px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 14px;
+  padding: 9px 12px;
+  outline: none;
+  transition: border-color .15s;
+}
+.manual-input-row input:focus { border-color: var(--accent); }
+.manual-btn { padding: 9px 20px; }
+
+/* ── Setup card ───────────────────────────────────────────────────────────── */
+.setup-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
+
+.setup-intro { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
+
+.setup-link { color: var(--accent); text-decoration: none; }
+.setup-link:hover { text-decoration: underline; }
+
+.secret-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  flex-wrap: wrap;
+}
+
+.secret-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--accent);
+  min-width: 200px;
+  font-weight: 600;
+}
+
+.secret-val {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text);
+  flex: 1;
+  word-break: break-all;
+  min-width: 0;
+}
+
+.btn-copy {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 12px;
+  white-space: nowrap;
+  transition: background .15s, color .15s;
+  flex-shrink: 0;
+}
+.btn-copy:hover { background: var(--border); color: var(--text); }
+.btn-copy.copied { color: var(--success); border-color: var(--success); }
+
+.setup-note { font-size: 12px; color: var(--muted); font-style: italic; }
+
+/* ── Log ──────────────────────────────────────────────────────────────────── */
+.log-card { min-height: 300px; }
+
+.log-pre {
+  flex: 1;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--muted);
+  background: var(--bg);
+  padding: 16px;
+  overflow-y: auto;
+  max-height: 480px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+/* Scrollbar */
+.log-pre::-webkit-scrollbar { width: 6px; }
+.log-pre::-webkit-scrollbar-track { background: transparent; }
+.log-pre::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }