ltcai 0.1.9 → 0.1.16

package/static/admin.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <title>Lattice AI Admin</title>
     <link rel="manifest" href="/manifest.json">
-    <meta name="theme-color" content="#2d5a3d">
+    <meta name="theme-color" content="#282a36">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png">
@@ -15,21 +15,22 @@
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 
         :root {
-            --bg: #0e1110;
-            --panel: #171b19;
-            --panel-2: #1d2220;
-            --panel-3: #232a26;
-            --text: #f3f1e8;
-            --muted: #b7b5ab;
-            --faint: #7c8078;
-            --accent: #42d39a;
-            --accent-2: #d8a54a;
+            --bg: #282a36;
+            --panel: #222431;
+            --panel-2: #2f3142;
+            --panel-3: #3a3d52;
+            --text: #f7f7f2;
+            --muted: #c4c8d8;
+            --faint: #8d93ab;
+            --accent: #a77cff;
+            --accent-2: #20b8aa;
+            --accent-3: #f1c86d;
             --danger: #e47a73;
-            --border: rgba(243,241,232,0.1);
-            --border-strong: rgba(243,241,232,0.18);
-            --shadow: 0 24px 70px rgba(0,0,0,0.34);
-            --radius: 14px;
-            --radius-sm: 10px;
+            --border: rgba(218,225,255,0.13);
+            --border-strong: rgba(218,225,255,0.23);
+            --shadow: 0 24px 70px rgba(5,7,12,0.36);
+            --radius: 8px;
+            --radius-sm: 8px;
         }
 
         * { box-sizing: border-box; }
@@ -39,8 +40,9 @@
             font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
             color: var(--text);
             background:
-                linear-gradient(180deg, rgba(255,255,255,0.018), transparent 28%),
-                linear-gradient(135deg, #101211 0%, #0d100f 52%, #141514 100%);
+                radial-gradient(circle at 52% 28%, rgba(167,124,255,0.13), transparent 34%),
+                radial-gradient(circle at 84% 78%, rgba(32,184,170,0.08), transparent 28%),
+                linear-gradient(135deg, #292b38 0%, #242632 52%, #2f3040 100%);
         }
 
         body::before {
@@ -49,9 +51,11 @@
             inset: 0;
             pointer-events: none;
             background:
-                linear-gradient(rgba(243,241,232,0.032) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(243,241,232,0.022) 1px, transparent 1px);
-            background-size: 46px 46px;
+                radial-gradient(circle, rgba(247,247,242,0.58) 1px, transparent 1.8px),
+                linear-gradient(rgba(157,177,255,0.12) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(157,177,255,0.08) 1px, transparent 1px);
+            background-size: 82px 82px, 46px 46px, 46px 46px;
+            background-position: 16px 18px, 0 0, 0 0;
             mask-image: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.08));
         }
 
@@ -70,7 +74,7 @@
             gap: 16px;
             padding: 22px 28px;
             border-bottom: 1px solid rgba(243,241,232,0.08);
-            background: rgba(15,17,16,0.84);
+            background: rgba(33,35,48,0.84);
             backdrop-filter: blur(20px);
             position: sticky;
             top: 0;
@@ -88,8 +92,8 @@
             width: 42px;
             height: 42px;
             border-radius: 12px;
-            background: linear-gradient(135deg, #42d39a, #d8a54a);
-            color: #0c120f;
+            background: radial-gradient(circle at 35% 30%, #ffffff 0 16%, #a77cff 17% 62%, #5b6cff 100%);
+            color: #171926;
             display: grid;
             place-items: center;
             font-size: 20px;
@@ -122,7 +126,7 @@
             border: 1px solid var(--border);
             background: rgba(255,255,255,0.03);
             color: var(--text);
-            border-radius: 999px;
+            border-radius: 8px;
             padding: 10px 14px;
             font: inherit;
             font-size: 13px;
@@ -136,14 +140,14 @@
         }
 
         .btn:hover {
-            border-color: rgba(66,211,154,0.28);
-            background: rgba(66,211,154,0.08);
+            border-color: rgba(167,124,255,0.32);
+            background: rgba(167,124,255,0.10);
             color: var(--accent);
         }
 
         .btn.primary {
-            background: rgba(66,211,154,0.1);
-            border-color: rgba(66,211,154,0.22);
+            background: rgba(167,124,255,0.12);
+            border-color: rgba(167,124,255,0.28);
         }
 
         .btn.danger:hover {
@@ -165,8 +169,8 @@
             border: 1px solid var(--border);
             border-radius: calc(var(--radius) + 2px);
             background:
-                linear-gradient(135deg, rgba(66,211,154,0.09), rgba(216,165,74,0.05)),
-                rgba(23,27,25,0.9);
+                linear-gradient(135deg, rgba(167,124,255,0.12), rgba(32,184,170,0.06)),
+                rgba(34,36,49,0.88);
             box-shadow: var(--shadow);
             padding: 20px 22px;
             display: flex;
@@ -191,8 +195,8 @@
         }
 
         .session-card {
-            border: 1px solid rgba(66,211,154,0.16);
-            background: rgba(66,211,154,0.06);
+            border: 1px solid rgba(167,124,255,0.2);
+            background: rgba(167,124,255,0.08);
             color: var(--text);
             border-radius: 12px;
             padding: 12px 14px;
@@ -232,7 +236,7 @@
         .summary-card {
             border: 1px solid var(--border);
             border-radius: var(--radius);
-            background: rgba(24,28,26,0.94);
+            background: rgba(34,36,49,0.9);
             box-shadow: var(--shadow);
             padding: 16px 16px 15px;
             min-width: 0;
@@ -270,7 +274,7 @@
         .panel {
             border: 1px solid var(--border);
             border-radius: var(--radius);
-            background: rgba(23,27,25,0.96);
+            background: rgba(34,36,49,0.9);
             box-shadow: var(--shadow);
             overflow: hidden;
             min-width: 0;
@@ -324,9 +328,9 @@
         input, textarea {
             width: 100%;
             border: 1px solid var(--border);
-            background: var(--panel-2);
+            background: rgba(20,22,31,0.72);
             color: var(--text);
-            border-radius: 10px;
+            border-radius: 8px;
             padding: 10px 12px;
             font: inherit;
             font-size: 13px;
@@ -339,8 +343,8 @@
         }
 
         input:focus, textarea:focus {
-            border-color: rgba(66,211,154,0.45);
-            box-shadow: 0 0 0 3px rgba(66,211,154,0.06);
+            border-color: rgba(167,124,255,0.45);
+            box-shadow: 0 0 0 3px rgba(167,124,255,0.08);
         }
 
         .toolbar {
@@ -378,7 +382,7 @@
 
         .tag.high { border-color: rgba(228,122,115,0.34); color: #ffbdb8; }
         .tag.medium { border-color: rgba(216,165,74,0.34); color: #f1d39e; }
-        .tag.low { border-color: rgba(66,211,154,0.34); color: #9be7cd; }
+        .tag.low { border-color: rgba(32,184,170,0.34); color: #8be9df; }
 
         .two-col {
             display: grid;
@@ -572,9 +576,9 @@
             position: absolute;
             top: calc(100% + 6px);
             right: 0;
-            background: #1a1f1d;
-            border: 1px solid rgba(255,255,255,0.1);
-            border-radius: 10px;
+            background: #222431;
+            border: 1px solid rgba(218,225,255,0.14);
+            border-radius: 8px;
             padding: 4px;
             min-width: 130px;
             z-index: 100;
@@ -588,7 +592,7 @@
             font-size: 13px;
             color: var(--muted);
         }
-        .lang-option:hover { background: rgba(255,255,255,0.06); color: var(--text); }
+        .lang-option:hover { background: rgba(167,124,255,0.10); color: var(--text); }
         .lang-option.active { color: var(--accent); font-weight: 600; }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
@@ -794,13 +798,13 @@
                 <div class="panel-body">
                     <div style="display:flex;gap:8px;align-items:center;">
                         <input id="invite-link-input" type="text" readonly
-                            style="flex:1;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#f8fafc;padding:8px 12px;font-size:13px;outline:none;">
+                            style="flex:1;background:rgba(20,22,31,0.72);border:1px solid rgba(218,225,255,0.14);border-radius:8px;color:#f7f7f2;padding:8px 12px;font-size:13px;outline:none;">
                         <button onclick="copyInviteLink()" id="copy-invite-btn"
-                            style="background:#6366f1;color:#fff;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font-size:13px;white-space:nowrap;transition:opacity .15s;">
+                            style="background:#a77cff;color:#171926;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font-size:13px;white-space:nowrap;transition:opacity .15s;font-weight:700;">
                             <span data-i18n="btn_copy">복사</span>
                         </button>
                     </div>
-                    <div id="invite-gate-info" style="font-size:12px;color:#94a3b8;margin-top:8px;"></div>
+                    <div id="invite-gate-info" style="font-size:12px;color:#8d93ab;margin-top:8px;"></div>
                 </div>
             </section>