dc5d073374
Prior-session prep for the v0.6 Project Manager, checkpointed on the v0.6-projects branch as a clean base for the parallel builders: - P1 (src/types.ts): ProjectInfo + ProjectSessionRef contracts; Config gains projectRoots/projectScanDepth/projectScanTtlMs/projectDirtyCheck. - P3 (src/config.ts): parseBool + parseProjectRoots helpers; parse the 4 PROJECT_* env vars with defaults ([homeDir]/4/10000/true). - UI: public/style.css indigo -> Amber (#e3a64a) accent theme. - Docs: FEATURE_PROJECT_MANAGER.md (1:N session design), THEME.md, docs/mockups/ (final-amber.png is the locked visual). Typecheck (backend + web) green. No behavior change to runtime code yet; P2/P4/P5/P6 implement the feature on top of this.
133 lines
9.3 KiB
HTML
133 lines
9.3 KiB
HTML
<!doctype html>
|
||
<html lang="zh"><head><meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Palette compare</title>
|
||
<style>
|
||
:root{
|
||
--bg:#100f0d; --card:#1b1916; --border:rgba(255,255,255,.07);
|
||
--border-strong:rgba(255,255,255,.14);
|
||
--text:#ece9e3; --text-dim:#a8a299; --text-faint:#6f6a61;
|
||
--idle:#8b8a86; --red:#ff6b6b;
|
||
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
|
||
--ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
|
||
}
|
||
*{box-sizing:border-box}
|
||
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);padding:26px}
|
||
h2{font-weight:680;font-size:18px;margin:0 0 4px}
|
||
.lead{color:var(--text-faint);font-size:13px;margin:0 0 22px}
|
||
.row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
|
||
|
||
/* per-column palette via data-attr */
|
||
.col{display:flex;flex-direction:column;gap:12px}
|
||
.col[data-p="amber"] {--accent:#e3a64a;--accent-2:#c9892f;--soft:rgba(227,166,74,.15);--line:rgba(227,166,74,.38);--ink:#1a1305;--working:#e3a64a;--waiting:#7fb2ff00;--waiting:#d98b3a;--wait2:#ffd27a}
|
||
.col[data-p="copper"] {--accent:#e8743b;--accent-2:#c95a27;--soft:rgba(232,116,59,.15);--line:rgba(232,116,59,.38);--ink:#1c0e06;--working:#e8743b;--waiting:#e6b84e;--wait2:#ffcf6e}
|
||
.col[data-p="mono"] {--accent:#ece9e3;--accent-2:#bdb8ad;--soft:rgba(236,233,227,.10);--line:rgba(236,233,227,.30);--ink:#15130f;--working:#ece9e3;--waiting:#e3a64a;--wait2:#ffd27a}
|
||
.col[data-p="rose"] {--accent:#ef6f73;--accent-2:#cf5358;--soft:rgba(239,111,115,.15);--line:rgba(239,111,115,.38);--ink:#1c0809;--working:#ef6f73;--waiting:#e6b84e;--wait2:#ffcf6e}
|
||
|
||
.swatch{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
|
||
border:1px solid var(--border);background:var(--card)}
|
||
.swatch .chipc{width:22px;height:22px;border-radius:7px;background:var(--accent)}
|
||
.swatch .nm{font-weight:680;font-size:14px}
|
||
.swatch .hex{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-faint)}
|
||
|
||
.card{background:linear-gradient(180deg,var(--card),#161410);border:1px solid var(--line);
|
||
border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
|
||
box-shadow:0 12px 40px rgba(0,0,0,.5)}
|
||
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
|
||
background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.85}
|
||
.crow{display:flex;align-items:center;gap:8px}
|
||
.name{font-weight:680;font-size:14px}
|
||
.star{color:var(--waiting);font-size:12px}
|
||
.countbadge{margin-left:auto;font-size:10.5px;padding:3px 9px;border-radius:999px;
|
||
background:var(--soft);color:var(--accent);display:flex;align-items:center;gap:5px;font-weight:650}
|
||
.countbadge .d{width:6px;height:6px;border-radius:50%;background:var(--accent)}
|
||
.meta{display:flex;gap:6px;flex-wrap:wrap}
|
||
.chip{font-size:10.5px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);
|
||
color:var(--text-dim);font-family:var(--mono)}
|
||
.chip.dirty{color:var(--waiting);border-color:var(--line)}
|
||
.path{font-family:var(--mono);font-size:10.5px;color:var(--text-faint)}
|
||
.srow{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
|
||
background:rgba(255,255,255,.025);border:1px solid var(--border);position:relative}
|
||
.srow::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--rail)}
|
||
.srow.w{--rail:var(--working)} .srow.q{--rail:var(--waiting)} .srow.i{--rail:var(--idle)}
|
||
.st{width:8px;height:8px;border-radius:50%;margin-left:3px}
|
||
.st.w{background:var(--working);box-shadow:0 0 8px var(--working)}
|
||
.st.q{background:var(--waiting);box-shadow:0 0 8px var(--waiting)}
|
||
.st.i{background:var(--idle)}
|
||
.stitle{font-size:12.5px;font-weight:600}
|
||
.smeta{font-size:10.5px;color:var(--text-faint);font-family:var(--mono)}
|
||
.x{margin-left:auto;color:var(--text-faint);font-size:12px}
|
||
.actions{display:flex;gap:7px}
|
||
.btn{flex:1;text-align:center;font-size:11.5px;font-weight:680;padding:9px;border-radius:9px;
|
||
background:var(--accent);color:var(--ink)}
|
||
.btn.new{background:var(--soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--line)}
|
||
.ghost{padding:9px 12px;border-radius:9px;border:1px solid var(--border);color:var(--text-dim);font-size:11.5px}
|
||
</style></head>
|
||
<body>
|
||
<h2>选个强调色 — 同一张卡片，4 套配色（暖灰底不变，无蓝/紫/绿）</h2>
|
||
<p class="lead">working=强调色 · waiting=琥珀(闪) · idle=中性灰 · dirty=暖琥珀</p>
|
||
<div class="row">
|
||
|
||
<!-- AMBER -->
|
||
<div class="col" data-p="amber">
|
||
<div class="swatch"><span class="chipc"></span><span class="nm">琥珀金 Amber</span><span class="hex">#e3a64a</span></div>
|
||
<div class="card">
|
||
<div class="crow"><span class="star">★</span><span class="name">web-terminal</span><span class="countbadge"><span class="d"></span>3</span></div>
|
||
<div class="meta"><span class="chip">⎇ main</span><span class="chip dirty">dirty</span></div>
|
||
<div class="path">~/Documents/git/web-terminal</div>
|
||
<div class="srow w"><span class="st w"></span><span class="stitle">claude</span><span class="smeta">⚙ working</span><span class="x">✕</span></div>
|
||
<div class="srow q"><span class="st q"></span><span class="stitle">claude #2</span><span class="smeta">⏳ waiting</span><span class="x">✕</span></div>
|
||
<div class="srow i"><span class="st i"></span><span class="stitle">shell</span><span class="smeta">✓ idle</span><span class="x">✕</span></div>
|
||
<div class="actions"><span class="btn new">＋ New claude</span><span class="ghost">▾</span></div>
|
||
</div>
|
||
<div class="actions"><span class="btn">Open ▸ claude</span></div>
|
||
</div>
|
||
|
||
<!-- COPPER -->
|
||
<div class="col" data-p="copper">
|
||
<div class="swatch"><span class="chipc"></span><span class="nm">赤陶橙 Copper</span><span class="hex">#e8743b</span></div>
|
||
<div class="card">
|
||
<div class="crow"><span class="star">★</span><span class="name">web-terminal</span><span class="countbadge"><span class="d"></span>3</span></div>
|
||
<div class="meta"><span class="chip">⎇ main</span><span class="chip dirty">dirty</span></div>
|
||
<div class="path">~/Documents/git/web-terminal</div>
|
||
<div class="srow w"><span class="st w"></span><span class="stitle">claude</span><span class="smeta">⚙ working</span><span class="x">✕</span></div>
|
||
<div class="srow q"><span class="st q"></span><span class="stitle">claude #2</span><span class="smeta">⏳ waiting</span><span class="x">✕</span></div>
|
||
<div class="srow i"><span class="st i"></span><span class="stitle">shell</span><span class="smeta">✓ idle</span><span class="x">✕</span></div>
|
||
<div class="actions"><span class="btn new">＋ New claude</span><span class="ghost">▾</span></div>
|
||
</div>
|
||
<div class="actions"><span class="btn">Open ▸ claude</span></div>
|
||
</div>
|
||
|
||
<!-- MONO -->
|
||
<div class="col" data-p="mono">
|
||
<div class="swatch"><span class="chipc"></span><span class="nm">暖色单色 Mono</span><span class="hex">#ece9e3</span></div>
|
||
<div class="card">
|
||
<div class="crow"><span class="star">★</span><span class="name">web-terminal</span><span class="countbadge"><span class="d"></span>3</span></div>
|
||
<div class="meta"><span class="chip">⎇ main</span><span class="chip dirty">dirty</span></div>
|
||
<div class="path">~/Documents/git/web-terminal</div>
|
||
<div class="srow w"><span class="st w"></span><span class="stitle">claude</span><span class="smeta">⚙ working</span><span class="x">✕</span></div>
|
||
<div class="srow q"><span class="st q"></span><span class="stitle">claude #2</span><span class="smeta">⏳ waiting</span><span class="x">✕</span></div>
|
||
<div class="srow i"><span class="st i"></span><span class="stitle">shell</span><span class="smeta">✓ idle</span><span class="x">✕</span></div>
|
||
<div class="actions"><span class="btn new">＋ New claude</span><span class="ghost">▾</span></div>
|
||
</div>
|
||
<div class="actions"><span class="btn">Open ▸ claude</span></div>
|
||
</div>
|
||
|
||
<!-- ROSE -->
|
||
<div class="col" data-p="rose">
|
||
<div class="swatch"><span class="chipc"></span><span class="nm">玫瑰珊瑚 Rose</span><span class="hex">#ef6f73</span></div>
|
||
<div class="card">
|
||
<div class="crow"><span class="star">★</span><span class="name">web-terminal</span><span class="countbadge"><span class="d"></span>3</span></div>
|
||
<div class="meta"><span class="chip">⎇ main</span><span class="chip dirty">dirty</span></div>
|
||
<div class="path">~/Documents/git/web-terminal</div>
|
||
<div class="srow w"><span class="st w"></span><span class="stitle">claude</span><span class="smeta">⚙ working</span><span class="x">✕</span></div>
|
||
<div class="srow q"><span class="st q"></span><span class="stitle">claude #2</span><span class="smeta">⏳ waiting</span><span class="x">✕</span></div>
|
||
<div class="srow i"><span class="st i"></span><span class="stitle">shell</span><span class="smeta">✓ idle</span><span class="x">✕</span></div>
|
||
<div class="actions"><span class="btn new">＋ New claude</span><span class="ghost">▾</span></div>
|
||
</div>
|
||
<div class="actions"><span class="btn">Open ▸ claude</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
</body></html>
|