Add dashboard PWA shell and status UX

2026-04-27 10:53:27 +09:00
parent 76b0ab754b
commit d7fe6fa13a
11 changed files with 681 additions and 7 deletions
--- a/apps/dashboard/public/offline.html
+++ b/apps/dashboard/public/offline.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
+    <meta name="theme-color" content="#2b3726" />
+    <title>EJClaw Offline</title>
+    <style>
+      :root {
+        color-scheme: light;
+        font-family:
+          Avenir Next,
+          Segoe UI Variable,
+          Noto Sans KR,
+          ui-sans-serif,
+          sans-serif;
+        background: #f3efe4;
+        color: #1c211c;
+      }
+
+      body {
+        display: grid;
+        min-height: 100vh;
+        margin: 0;
+        place-items: center;
+        background:
+          radial-gradient(
+            circle at 20% 18%,
+            rgba(191, 95, 44, 0.2),
+            transparent 26rem
+          ),
+          linear-gradient(135deg, #f4ead5, #edf1df);
+      }
+
+      main {
+        width: min(420px, calc(100% - 32px));
+        padding: 24px;
+        border: 1px solid rgba(43, 55, 38, 0.16);
+        border-radius: 28px;
+        background: rgba(255, 250, 240, 0.86);
+        box-shadow: 0 24px 70px rgba(44, 39, 25, 0.16);
+      }
+
+      span {
+        color: #8f351b;
+        font-size: 12px;
+        font-weight: 850;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+      }
+
+      h1 {
+        margin: 8px 0;
+        font-size: 30px;
+        letter-spacing: -0.05em;
+      }
+
+      p {
+        margin: 0 0 18px;
+        color: #6d735f;
+        line-height: 1.45;
+      }
+
+      button {
+        min-height: 44px;
+        padding: 0 18px;
+        border: 0;
+        border-radius: 999px;
+        color: #fffaf0;
+        background: linear-gradient(135deg, #bf5f2c, #8f351b);
+        font: inherit;
+        font-weight: 900;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <span>EJClaw</span>
+      <h1>Offline</h1>
+      <p>네트워크가 복구되면 대시보드를 다시 불러옵니다.</p>
+      <button type="button" onclick="window.location.reload()">Retry</button>
+    </main>
+  </body>
+</html>