ParkingRobot/.superpowers/brainstorm/1612-1785939150/content/dashboard-style.html

<h2>A 布局：选择视觉风格</h2>
<p class="subtitle">图表颜色始终语义一致：当前轨迹为蓝色、上一轮为灰色、交接点为橙色、越界才使用红色。</p>

<style>
  .preview { border-radius:10px; padding:10px; min-height:245px; font-size:9px; }
  .top { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; border-radius:6px; margin-bottom:7px; }
  .layout { display:grid; grid-template-columns:1.45fr 1fr; gap:7px; }
  .box { border-radius:6px; padding:6px; }
  .big { min-height:125px; }
  .chart { height:100px; margin:7px 3px 0 12px; border-left:1px solid; border-bottom:1px solid; position:relative; overflow:hidden; }
  .path-old,.path-new { position:absolute; height:3px; left:4%; width:82%; top:57%; transform:rotate(-7deg); transform-origin:left; border-radius:2px; }
  .path-new { top:49%; }
  .dot { position:absolute; left:65%; top:38%; width:8px; height:8px; border-radius:50%; }
  .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:5px 0 7px; }
  .stat { border-radius:4px; padding:5px 2px; text-align:center; }
  .checks { line-height:1.8; }
  .tabs { display:flex; gap:5px; margin-top:7px; }
  .pill { border-radius:10px; padding:4px 8px; }
  .mini { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:6px; }
  .mini > div { border-radius:5px; padding:5px; height:33px; }

  .light { background:#f7f9fc; color:#27364a; border:1px solid #dce3ec; }
  .light .top { background:#ffffff; border:1px solid #e1e7ee; }
  .light .box,.light .mini>div { background:#fff; border:1px solid #dfe5ec; }
  .light .chart { border-color:#9baabd; background:linear-gradient(#f2f5f8 1px,transparent 1px),linear-gradient(90deg,#f2f5f8 1px,transparent 1px); background-size:22px 22px; }
  .light .path-old { background:#a6b0bc; }.light .path-new { background:#1668dc; }.light .dot { background:#f08c2e; }
  .light .stat { background:#eef3f8; }.light .pill { background:#e8edf3; }.light .pill.on { background:#1668dc;color:#fff; }

  .ink { background:#fbfaf6; color:#272521; border:1px solid #d5d0c5; }
  .ink .top { background:#efede6; border-bottom:2px solid #34312d; }
  .ink .box,.ink .mini>div { background:#fffef9; border:1px solid #cfc9bd; }
  .ink .chart { border-color:#4d4a45; background:linear-gradient(#ece8df 1px,transparent 1px),linear-gradient(90deg,#ece8df 1px,transparent 1px); background-size:22px 22px; }
  .ink .path-old { background:#9c978d; }.ink .path-new { background:#126782; }.ink .dot { background:#d97706; }
  .ink .stat { background:#f0ede6; }.ink .pill { background:#e8e4dc; }.ink .pill.on { background:#126782;color:#fff; }

  .night { background:#101419; color:#d8dee8; border:1px solid #303944; }
  .night .top { background:#191f27; border-bottom:1px solid #3b4653; }
  .night .box,.night .mini>div { background:#171c23; border:1px solid #343e49; }
  .night .chart { border-color:#657382; background:linear-gradient(#222a33 1px,transparent 1px),linear-gradient(90deg,#222a33 1px,transparent 1px); background-size:22px 22px; }
  .night .path-old { background:#6e7883; }.night .path-new { background:#58a6ff; }.night .dot { background:#f2a65a; }
  .night .stat { background:#222a33; }.night .pill { background:#252e38; }.night .pill.on { background:#2f81f7;color:#fff; }
  .good { color:#16815d; }.night .good { color:#56d49b; }
</style>

<div class="cards">
  <div class="card" data-choice="light" onclick="toggleSelect(this)">
    <div class="card-image"><div class="preview light">
      <div class="top"><b>轨迹规划观测台</b><span class="good">● 实时 · Cycle 128</span></div>
      <div class="layout"><div class="box big"><b>世界路径</b><div class="chart"><div class="path-old"></div><div class="path-new"></div><div class="dot"></div></div></div>
      <div><div class="box"><b>当前状态</b><div class="stats"><div class="stat">v<br>0.18</div><div class="stat">a<br>0.04</div><div class="stat">j<br>-0.12</div></div></div><div class="box checks" style="margin-top:7px"><b>交接检查</b><br><span class="good">✓ 非零滚动终点</span><br><span class="good">✓ 速度/加速度连续</span><br><span class="good">✓ Jerk 合规</span></div></div></div>
      <div class="tabs"><span class="pill on">LS / ST</span><span class="pill">曲率</span><span class="pill">v-a-j</span><span class="pill">历史</span></div><div class="mini"><div>L-S</div><div>T-S</div><div>T-V</div></div>
    </div></div><div class="card-body"><h3>1 · 清晰实验室（推荐）</h3><p>浅色、低饱和、高可读性，适合长时间观察、截图和报告。</p></div>
  </div>

  <div class="card" data-choice="paper" onclick="toggleSelect(this)">
    <div class="card-image"><div class="preview ink">
      <div class="top"><b>TRAJECTORY OBSERVATION</b><span class="good">LIVE / 128</span></div>
      <div class="layout"><div class="box big"><b>WORLD PATH</b><div class="chart"><div class="path-old"></div><div class="path-new"></div><div class="dot"></div></div></div>
      <div><div class="box"><b>STATE</b><div class="stats"><div class="stat">v<br>0.18</div><div class="stat">a<br>0.04</div><div class="stat">j<br>-0.12</div></div></div><div class="box checks" style="margin-top:7px"><b>HANDOFF</b><br><span class="good">PASS / rolling</span><br><span class="good">PASS / continuity</span><br><span class="good">PASS / jerk</span></div></div></div>
      <div class="tabs"><span class="pill on">LS / ST</span><span class="pill">CURVATURE</span><span class="pill">V-A-J</span><span class="pill">HISTORY</span></div><div class="mini"><div>L-S</div><div>T-S</div><div>T-V</div></div>
    </div></div><div class="card-body"><h3>2 · 工程图纸</h3><p>米白与墨色，接近论文/仪器输出，克制但稍显传统。</p></div>
  </div>

  <div class="card" data-choice="night" onclick="toggleSelect(this)">
    <div class="card-image"><div class="preview night">
      <div class="top"><b>轨迹规划观测台</b><span class="good">● 实时 · Cycle 128</span></div>
      <div class="layout"><div class="box big"><b>世界路径</b><div class="chart"><div class="path-old"></div><div class="path-new"></div><div class="dot"></div></div></div>
      <div><div class="box"><b>当前状态</b><div class="stats"><div class="stat">v<br>0.18</div><div class="stat">a<br>0.04</div><div class="stat">j<br>-0.12</div></div></div><div class="box checks" style="margin-top:7px"><b>交接检查</b><br><span class="good">✓ 非零滚动终点</span><br><span class="good">✓ 速度/加速度连续</span><br><span class="good">✓ Jerk 合规</span></div></div></div>
      <div class="tabs"><span class="pill on">LS / ST</span><span class="pill">曲率</span><span class="pill">v-a-j</span><span class="pill">历史</span></div><div class="mini"><div>L-S</div><div>T-S</div><div>T-V</div></div>
    </div></div><div class="card-body"><h3>3 · 石墨夜间</h3><p>中性深灰、低炫光；比上一版更克制，适合暗光车间。</p></div>
  </div>
</div>

<p class="subtitle">请点击一种风格；也可以回复“以 1 为基础，但……”。</p>