рабочий вариант, но скороть 10 МБит

2026-05-22 21:46:49 +03:00
parent 469fa0e860
commit 20d361a886
280 changed files with 954890 additions and 18524 deletions
@@ -3,10 +3,89 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Панель Secure Access Fabric</title>
+    <title>Панель управления фермой</title>
+    <style>
+      :root { color: #172019; background: #eef0ea; font-family: system-ui, "Segoe UI", sans-serif; }
+      * { box-sizing: border-box; }
+      body { margin: 0; }
+      main { max-width: 1180px; margin: 0 auto; padding: 20px; }
+      header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 14px; align-items: stretch; margin-bottom: 12px; }
+      h1 { margin: 0; font-size: 1.65rem; letter-spacing: 0; }
+      h2 { margin: 0 0 8px; font-size: 1rem; }
+      p { margin: 0; color: #667064; line-height: 1.45; }
+      .hero, .identity, .panel { border: 1px solid #1a271b26; border-radius: 8px; background: #fffdf5; padding: 14px; }
+      .hero { display: grid; align-content: space-between; min-height: 180px; }
+      .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
+      .pill { display: inline-flex; width: fit-content; border-radius: 8px; padding: .24rem .5rem; font-size: .74rem; font-weight: 850; background: #36556c1a; color: #36556c; }
+      .good { color: #236c4a; background: #2f6f4f1f; }
+      .warn { color: #9a5b1c; background: #b86f2324; }
+      form { display: grid; gap: 10px; }
+      label { display: grid; gap: 6px; color: #667064; font-size: .78rem; font-weight: 850; }
+      input, select, button { min-height: 38px; border: 1px solid #1a271b26; border-radius: 8px; padding: .5rem .65rem; color: #172019; background: #fff; font: inherit; }
+      button { border-color: #2f6f4f; background: #2f6f4f; color: #fffaf0; font-weight: 850; cursor: pointer; }
+      .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+      .panel { min-height: 120px; }
+      .panel strong { display: block; margin-bottom: 4px; }
+      .panel span { color: #667064; font-size: .84rem; }
+      .footer { margin-top: 12px; color: #667064; font-size: .82rem; }
+      @media (max-width: 860px) { main { padding: 10px; } header, .grid { grid-template-columns: 1fr; } }
+    </style>
  </head>
  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <main>
+      <header>
+        <section class="hero">
+          <div>
+            <h1>Панель управления фермой</h1>
+            <p>Рабочая консоль для идентификации оператора, обзора узлов, обновлений, QUIC fabric, веб-контроля и аудита.</p>
+          </div>
+          <div class="badges">
+            <span class="pill good">HTML5</span>
+            <span class="pill good">HTMX-lite</span>
+            <span class="pill">серверные расчеты</span>
+            <span class="pill warn">внутри фермы QUIC fabric</span>
+          </div>
+        </section>
+        <section class="identity">
+          <h2>Идентификация оператора</h2>
+          <form id="admin-form" action="/api/v1/ui/admin" method="get">
+            <label>
+              ID пользователя
+              <input id="actor-user-id" name="actor_user_id" autocomplete="username" required placeholder="uuid оператора" />
+            </label>
+            <label>
+              Область входа
+              <select name="scope">
+                <option value="farm">ферма</option>
+                <option value="cluster">кластер</option>
+                <option value="organization">организация</option>
+              </select>
+            </label>
+            <button type="submit">Открыть консоль</button>
+          </form>
+        </section>
+      </header>
+      <section class="grid">
+        <div class="panel"><strong>Узлы</strong><span>живость, версии, heartbeat, роли, детали обновлений.</span></div>
+        <div class="panel"><strong>Fabric</strong><span>визуальная работа связей, service channels, readiness и политики восстановления.</span></div>
+        <div class="panel"><strong>Веб-контроль</strong><span>настройка admin-ingress и public-ingress как workloads фермы.</span></div>
+        <div class="panel"><strong>Обновления</strong><span>массовые signed update hints, релизы, статусы и rollback-контуры.</span></div>
+        <div class="panel"><strong>Аналитика</strong><span>маршруты, rebuild health, access telemetry, активные каналы.</span></div>
+        <div class="panel"><strong>Аудит</strong><span>операторские действия, изменения политик, события восстановления.</span></div>
+      </section>
+      <div class="footer">ID сохраняется только в локальном профиле браузера для быстрого повторного входа.</div>
+    </main>
+    <script>
+      (() => {
+        const input = document.getElementById("actor-user-id");
+        const form = document.getElementById("admin-form");
+        if (!input || !form) return;
+        const stored = localStorage.getItem("rap.webAdmin.actorUserId");
+        if (stored) input.value = stored;
+        form.addEventListener("submit", () => {
+          if (input.value.trim()) localStorage.setItem("rap.webAdmin.actorUserId", input.value.trim());
+        });
+      })();
+    </script>
  </body>
 </html>