@allin-ai/agent-client 0.1.1 → 0.2.0

package/web/style.css

@@ -0,0 +1,484 @@
+/* 设计基线：dark-tech 单主题；单一强调色 emerald；统一 10px 圆角；
+   系统字体栈（零依赖，无外部资源）；动效仅 hover/feedback 过渡。 */
+
+:root {
+  color-scheme: dark;
+  --bg: #0a0f0d;
+  --bg-raised: #101815;
+  --bg-tint: rgba(52, 211, 153, 0.08);
+  --border: rgba(154, 168, 161, 0.18);
+  --border-strong: rgba(154, 168, 161, 0.34);
+  --text: #e7edea;
+  --text-dim: #93a39b;
+  --accent: #34d399;
+  --accent-ink: #06281c;
+  --danger: #f0a4a4;
+  --radius: 10px;
+  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  --sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--sans);
+  line-height: 1.7;
+}
+
+/* ---------- nav ---------- */
+
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  padding: 0 clamp(1rem, 4vw, 3rem);
+  background: rgba(10, 15, 13, 0.92);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--border);
+}
+
+.brand {
+  font-family: var(--mono);
+  font-size: 0.95rem;
+  color: var(--text);
+  text-decoration: none;
+}
+.brand::before {
+  content: "▮ ";
+  color: var(--accent);
+}
+
+.nav-links { display: flex; gap: 1.75rem; }
+.nav-links a {
+  color: var(--text-dim);
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: color 0.2s ease;
+}
+.nav-links a:hover { color: var(--text); }
+
+main {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 0 clamp(1rem, 4vw, 3rem);
+}
+
+/* ---------- hero ---------- */
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+  gap: clamp(2rem, 5vw, 4.5rem);
+  align-items: center;
+  min-height: calc(100dvh - 60px);
+  padding: 4rem 0 5rem;
+}
+
+.hero-copy h1 {
+  margin: 0;
+  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+}
+
+.subtext {
+  margin: 1.25rem 0 2rem;
+  max-width: 34em;
+  color: var(--text-dim);
+  font-size: 1rem;
+}
+
+.cta-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.65rem 1.4rem;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  font: inherit;
+  font-size: 0.95rem;
+  text-decoration: none;
+  cursor: pointer;
+  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
+}
+.btn:active { transform: translateY(1px); }
+
+.btn.primary {
+  background: var(--accent);
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+.btn.primary:hover { filter: brightness(1.08); }
+
+.btn.ghost {
+  border-color: var(--border-strong);
+  color: var(--text);
+}
+.btn.ghost:hover { border-color: var(--accent); }
+
+.btn.full { width: 100%; margin-top: 0.5rem; }
+
+/* hero terminal（真实命令，非截图） */
+
+.hero-terminal {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-raised);
+  overflow: hidden;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+}
+
+.term-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.55rem 0.9rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.term-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+.term-title {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  color: var(--text-dim);
+  flex: 1;
+}
+
+.copy-btn {
+  font: inherit;
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.15rem 0.6rem;
+  cursor: pointer;
+  transition: color 0.2s ease, border-color 0.2s ease;
+}
+.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
+
+.term-body {
+  margin: 0;
+  padding: 1.1rem 1.25rem 1.25rem;
+  font-family: var(--mono);
+  font-size: 0.83rem;
+  line-height: 1.9;
+  overflow-x: auto;
+  color: var(--text);
+}
+.term-body .c { color: var(--text-dim); }
+
+/* ---------- sections ---------- */
+
+.section { padding: 4.5rem 0; }
+.section > h2 {
+  margin: 0 0 2rem;
+  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
+  letter-spacing: -0.01em;
+}
+
+/* steps：编号行式，非等宽卡片 */
+
+.steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 1.5rem;
+}
+.steps li {
+  display: grid;
+  grid-template-columns: 3.5rem 1fr;
+  gap: 1.25rem;
+  align-items: start;
+}
+.step-no {
+  font-family: var(--mono);
+  font-size: 1.5rem;
+  color: var(--accent);
+  line-height: 1.2;
+}
+.steps h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
+.steps p { margin: 0; color: var(--text-dim); max-width: 62ch; }
+
+/* scenarios：场景块 = 说明行 + 代码块，区别于 steps/exports 的版式 */
+
+.scenario {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-raised);
+  margin-bottom: 1.1rem;
+  overflow: hidden;
+}
+.scenario-head {
+  display: grid;
+  grid-template-columns: 3rem 1fr;
+  gap: 1rem;
+  align-items: start;
+  padding: 1.1rem 1.25rem 0.25rem;
+}
+.scenario-head .step-no { font-size: 1.1rem; }
+.scenario-head h3 { margin: 0 0 0.3rem; font-size: 1.02rem; }
+.scenario-head p { margin: 0; color: var(--text-dim); font-size: 0.9rem; max-width: 62ch; }
+
+.code-block {
+  margin: 1rem 0 0;
+  padding: 1rem 1.25rem 1.15rem;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  line-height: 1.85;
+  overflow-x: auto;
+  color: var(--text);
+}
+.code-block .c { color: var(--text-dim); }
+
+/* ---------- exports ---------- */
+
+.exports-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.9rem;
+}
+.export-cell {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem 1.2rem;
+}
+.export-cell.tint { background: var(--bg-tint); border-color: rgba(52, 211, 153, 0.35); }
+.export-cell code {
+  font-family: var(--mono);
+  font-size: 0.88rem;
+  color: var(--accent);
+}
+.export-cell p { margin: 0.35rem 0 0; color: var(--text-dim); font-size: 0.9rem; }
+
+/* ---------- console ---------- */
+
+.console-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.console-head h2 { margin: 0; }
+
+/* 状态点为真实语义（SSE 连接状态），全页仅此一处 */
+.sse-status {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  color: var(--text-dim);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.sse-status::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-dim);
+}
+.sse-status[data-state="online"] { color: var(--accent); }
+.sse-status[data-state="online"]::before { background: var(--accent); }
+.sse-status[data-state="offline"] { color: var(--danger); }
+.sse-status[data-state="offline"]::before { background: var(--danger); }
+
+.hint { color: var(--text-dim); font-size: 0.88rem; margin: 0.75rem 0 0; }
+.error { color: var(--danger); }
+
+.console-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+  gap: 0.9rem;
+  margin-top: 1.5rem;
+}
+.console-left { display: grid; gap: 0.9rem; align-content: start; }
+
+.panel {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.1rem 1.25rem;
+  background: var(--bg-raised);
+}
+.panel h3 { margin: 0 0 0.85rem; font-size: 0.95rem; color: var(--text); }
+
+.client-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
+.client-list li {
+  font-family: var(--mono);
+  font-size: 0.82rem;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.client-list li.empty {
+  font-family: var(--sans);
+  color: var(--text-dim);
+  font-size: 0.88rem;
+}
+.client-list .state-on { color: var(--accent); }
+.client-list .state-off { color: var(--text-dim); }
+
+.field-label {
+  display: block;
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  margin: 0.75rem 0 0.3rem;
+}
+.field-label:first-of-type { margin-top: 0; }
+
+select, textarea {
+  display: block;
+  width: 100%;
+  font: inherit;
+  font-size: 0.9rem;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  padding: 0.5rem 0.65rem;
+}
+select:focus-visible, textarea:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+textarea { resize: vertical; font-family: var(--mono); font-size: 0.84rem; }
+textarea::placeholder { color: var(--text-dim); }
+
+.timeline-panel { display: flex; flex-direction: column; min-height: 320px; }
+.timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  overflow-y: auto;
+  max-height: 460px;
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  display: grid;
+  gap: 0.4rem;
+  align-content: start;
+}
+.timeline li { color: var(--text-dim); }
+.timeline li:first-child { color: var(--text); }
+.timeline li .t { color: var(--accent); }
+
+/* inventory tables：等宽字体 + 行分隔线，对齐面板内列表风格 */
+#inventory-platforms h4,
+#inventory-plugins h4 {
+  margin: 0.9rem 0 0.4rem;
+  font-size: 0.82rem;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+.inventory-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--mono);
+  font-size: 0.78rem;
+}
+.inventory-table th {
+  text-align: left;
+  color: var(--text-dim);
+  font-weight: 500;
+  padding: 0.3rem 0.5rem 0.3rem 0;
+  border-bottom: 1px solid var(--border-strong);
+}
+.inventory-table td {
+  padding: 0.3rem 0.5rem 0.3rem 0;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  word-break: break-all;
+}
+.inventory-table tr:last-child td { border-bottom: none; }
+.inventory-table .row-failed td { color: var(--danger); }
+.inventory-table .row-muted td { opacity: 0.5; }
+
+/* ---------- footer ---------- */
+
+.footer {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 2.5rem clamp(1rem, 4vw, 3rem) 3rem;
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-dim);
+  font-size: 0.85rem;
+  border-top: 1px solid var(--border);
+}
+
+/* ---------- login page ---------- */
+
+.login-wrap {
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  padding: 1.5rem;
+}
+
+.login-card {
+  width: min(26rem, 100%);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-raised);
+  padding: 2rem 2.2rem 2.2rem;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+}
+.login-card .brand { display: inline-block; margin-bottom: 1.5rem; }
+.login-card h1 { margin: 0 0 0.5rem; font-size: 1.5rem; letter-spacing: -0.01em; }
+.login-card .subtext { margin: 0 0 1.5rem; }
+
+.login-client {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg);
+  padding: 0.75rem 1rem;
+  margin-bottom: 1.25rem;
+}
+.login-client code {
+  font-family: var(--mono);
+  font-size: 0.9rem;
+  color: var(--accent);
+  word-break: break-all;
+}
+.login-card .cta-row { margin-top: 1.5rem; }
+.login-card .hint { margin: 0; }
+
+/* ---------- responsive ---------- */
+
+@media (max-width: 880px) {
+  .hero {
+    grid-template-columns: 1fr;
+    min-height: 0;
+    padding: 3rem 0 3.5rem;
+    gap: 2.25rem;
+  }
+  .exports-grid { grid-template-columns: 1fr; }
+  .console-grid { grid-template-columns: 1fr; }
+  .steps li { grid-template-columns: 2.5rem 1fr; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * { transition: none !important; }
+}