02-exploration-visual-designs.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>空状态 — 四种视觉方向</title>
  <style>
    :root {
      --ivory:    #FAF9F5;
      --slate:    #141413;
      --clay:     #D97757;
      --oat:      #E3DACC;
      --olive:    #788C5D;
      --gray-150: #F0EEE6;
      --gray-300: #D1CFC5;
      --gray-500: #87867F;
      --gray-700: #3D3D3A;
      --white:    #FFFFFF;

      --serif: ui-serif, Georgia, 'Times New Roman', serif;
      --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      --mono:  ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: var(--sans);
      background: var(--ivory);
      color: var(--gray-700);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      padding-bottom: 96px;
    }

    /* ---------- sticky toolbar ---------- */

    .toolbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--ivory);
      border-bottom: 1.5px solid var(--gray-300);
      padding: 14px 32px;
      display: flex;
      align-items: center;
      gap: 18px;
      font-size: 13px;
    }

    .toolbar .title {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.04em;
      color: var(--gray-500);
      margin-right: auto;
    }

    .toolbar .field {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .toolbar .field > span {
      color: var(--gray-700);
      font-weight: 500;
    }

    .seg {
      display: inline-flex;
      border: 1.5px solid var(--gray-300);
      border-radius: 8px;
      overflow: hidden;
      background: var(--white);
    }

    .seg label {
      padding: 6px 14px;
      cursor: pointer;
      font-size: 13px;
      color: var(--gray-700);
      user-select: none;
    }

    .seg label + label {
      border-left: 1.5px solid var(--gray-300);
    }

    .seg input { display: none; }

    .seg input:checked + span {
      color: var(--slate);
      font-weight: 600;
    }

    .seg label:has(input:checked) {
      background: var(--oat);
    }

    /* ---------- page header ---------- */

    .page {
      max-width: 1240px;
      margin: 0 auto;
      padding: 48px 32px 0;
    }

    header.page-head {
      max-width: 720px;
      margin-bottom: 40px;
    }

    .eyebrow {
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gray-500);
      margin-bottom: 12px;
    }

    h1 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 38px;
      line-height: 1.15;
      color: var(--slate);
      margin-bottom: 18px;
      letter-spacing: -0.01em;
    }

    .prompt-box {
      background: var(--gray-150);
      border: 1.5px solid var(--gray-300);
      border-radius: 12px;
      padding: 16px 20px;
      font-size: 14.5px;
    }

    .prompt-box .label {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--gray-500);
      display: block;
      margin-bottom: 6px;
    }

    /* ---------- artboard grid ---------- */

    .board {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    @media (max-width: 960px) {
      .board { grid-template-columns: 1fr; }
    }

    .artboard {
      background: var(--white);
      border: 1.5px solid var(--gray-300);
      border-radius: 12px;
      padding: 20px;
      position: relative;
    }

    .tag {
      position: absolute;
      top: 14px;
      left: 14px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.02em;
      background: var(--oat);
      color: var(--slate);
      padding: 4px 10px;
      border-radius: 8px;
      z-index: 2;
    }

    .stage {
      height: 280px;
      border-radius: 8px;
      border: 1.5px solid var(--gray-300);
      background: var(--ivory);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      transition: background 0.15s, border-color 0.15s;
      overflow: hidden;
    }

    .stage.dark {
      background: var(--slate);
      border-color: var(--slate);
    }

    .rationale {
      margin-top: 16px;
      font-size: 13px;
      color: var(--gray-500);
      line-height: 1.5;
    }

    /* =========================================================
       Empty-state variants — each scoped under .es-*
       Theme tokens flip when .stage.dark is present.
       ========================================================= */

    .stage        { --fg: var(--slate); --muted: var(--gray-500); --line: var(--gray-300); --panel: var(--white); }
    .stage.dark   { --fg: #F0EEE6;      --muted: #9C9A93;         --line: #3D3D3A;         --panel: #1F1E1B;     }

    /* ---- A · Minimal ---- */

    .es-a {
      text-align: center;
      max-width: 300px;
    }
    .es-a h3 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 19px;
      color: var(--fg);
      margin-bottom: 6px;
    }
    .es-a p {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 18px;
    }
    .es-a .btn {
      display: inline-block;
      font-size: 13px;
      color: var(--fg);
      border: 1.5px solid var(--line);
      border-radius: 8px;
      padding: 8px 16px;
      background: transparent;
    }

    /* ---- B · Illustrated ---- */

    .es-b {
      text-align: center;
      max-width: 320px;
    }
    .es-b svg {
      display: block;
      margin: 0 auto 18px;
    }
    .es-b h3 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 19px;
      color: var(--fg);
      margin-bottom: 6px;
    }
    .es-b p {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 16px;
    }
    .es-b .btn {
      display: inline-block;
      font-size: 13px;
      font-weight: 500;
      color: var(--white);
      background: var(--clay);
      border-radius: 8px;
      padding: 8px 16px;
    }
    .stage.dark .es-b .btn { color: var(--slate); background: var(--oat); }

    /* ---- C · Playful ---- */

    .es-c {
      text-align: center;
      max-width: 300px;
    }
    .es-c .float {
      width: 56px;
      height: 56px;
      margin: 0 auto 20px;
      position: relative;
      animation: bob 3.2s ease-in-out infinite;
    }
    .es-c .float .card {
      position: absolute;
      inset: 0;
      border-radius: 10px;
      background: var(--panel);
      border: 1.5px solid var(--line);
    }
    .es-c .float .card:nth-child(1) { transform: rotate(-8deg) translate(-6px, 4px); opacity: 0.5; }
    .es-c .float .card:nth-child(2) { transform: rotate( 6deg) translate( 6px, 2px); opacity: 0.75; }
    .es-c .float .card:nth-child(3) { background: var(--oat); border-color: var(--oat); }
    .stage.dark .es-c .float .card:nth-child(3) { background: var(--clay); border-color: var(--clay); }
    .es-c .shadow {
      width: 44px;
      height: 8px;
      margin: -8px auto 22px;
      border-radius: 50%;
      background: rgba(0,0,0,0.12);
      filter: blur(2px);
      animation: shadow 3.2s ease-in-out infinite;
    }
    .stage.dark .es-c .shadow { background: rgba(0,0,0,0.5); }
    .es-c h3 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 19px;
      color: var(--fg);
      margin-bottom: 6px;
    }
    .es-c p {
      font-size: 13px;
      color: var(--muted);
    }

    @keyframes bob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }
    @keyframes shadow {
      0%, 100% { transform: scaleX(1);   opacity: 0.9; }
      50%      { transform: scaleX(0.8); opacity: 0.5; }
    }

    /* ---- D · Instructional ---- */

    .es-d {
      width: 100%;
      max-width: 360px;
    }
    .es-d h3 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 18px;
      color: var(--fg);
      margin-bottom: 14px;
    }
    .es-d ol {
      list-style: none;
      counter-reset: step;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .es-d li {
      counter-increment: step;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: var(--panel);
      border: 1.5px solid var(--line);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--fg);
    }
    .es-d li::before {
      content: counter(step);
      font-family: var(--mono);
      font-size: 11px;
      flex: 0 0 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--oat);
      color: var(--slate);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }
    .es-d li span { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="title">Acme · design exploration</div>
    <div class="field">
      <span>背景：</span>
      <div class="seg" id="bg-seg">
        <label><input type="radio" name="bg" value="light" checked><span>浅色</span></label>
        <label><input type="radio" name="bg" value="dark"><span>深色</span></label>
      </div>
    </div>
  </div>

  <div class="page">

    <header class="page-head">
      <div class="eyebrow">探索 · 空状态</div>
      <h1>“还没有任务”状态的四种视觉方向</h1>
      <div class="prompt-box">
        <span class="label">提示词</span>
        为空状态组件探索四种视觉方向。分别实时渲染出来，
        以便比较各自的调性、信息密度，以及在浅色和深色背景下的表现。
      </div>
    </header>

    <section class="board">

      <!-- ================= A — 极简 ================= -->
      <article class="artboard">
        <span class="tag">A — 极简</span>
        <div class="stage">
          <div class="es-a">
            <h3>还没有任务</h3>
            <p>创建任务后，它会出现在这里。</p>
            <span class="btn">新建任务</span>
          </div>
        </div>
        <p class="rationale">
          纯文字排版，一个低调的操作按钮。感觉沉稳自信，
          假设周围界面已经有足够的个性表达。
        </p>
      </article>

      <!-- ================= B — 配图 ================= -->
      <article class="artboard">
        <span class="tag">B — 配图</span>
        <div class="stage">
          <div class="es-b">
            <svg width="120" height="90" viewBox="0 0 120 90" aria-hidden="true">
              <rect x="14" y="20" width="72" height="54" rx="8"
                    fill="var(--panel)" stroke="var(--line)" stroke-width="1.5"/>
              <rect x="34" y="10" width="72" height="54" rx="8"
                    fill="var(--oat)"/>
              <line x1="46" y1="26" x2="92" y2="26"
                    stroke="var(--slate)" stroke-width="2" stroke-linecap="round"/>
              <line x1="46" y1="38" x2="80" y2="38"
                    stroke="var(--slate)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
              <circle cx="98" cy="60" r="12" fill="var(--clay)"/>
              <path d="M98 55 v10 M93 60 h10"
                    stroke="white" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <h3>创建你的第一个列表</h3>
            <p>将相关工作分组，进度自动汇总。</p>
            <span class="btn">创建任务</span>
          </div>
        </div>
        <p class="rationale">
          一个小几何插图吸引视线，直观解释了对象模型（列表包含任务），
          无需大段文字说明。
        </p>
      </article>

      <!-- ================= C — 活泼 ================= -->
      <article class="artboard">
        <span class="tag">C — 活泼</span>
        <div class="stage">
          <div class="es-c">
            <div class="float">
              <div class="card"></div>
              <div class="card"></div>
              <div class="card"></div>
            </div>
            <div class="shadow"></div>
            <h3>一身轻松</h3>
            <p>享受这份清闲，或者添加点事情动起来。</p>
          </div>
        </div>
        <p class="rationale">
          一叠轻轻晃动的卡片给静态页面增添了生气。动效足够微妙，
          可以无限循环而不会让人觉得烦。
        </p>
      </article>

      <!-- ================= D — 引导 ================= -->
      <article class="artboard">
        <span class="tag">D — 引导</span>
        <div class="stage">
          <div class="es-d">
            <h3>设置这个项目</h3>
            <ol>
              <li>
                创建你的第一个任务
                <span>给它一个名称和负责人。</span>
              </li>
              <li>
                添加截止日期
                <span>Acme 会把它显示在时间线上。</span>
              </li>
              <li>
                邀请一位队友
                <span>共享项目自动保持同步。</span>
              </li>
            </ol>
          </div>
        </div>
        <p class="rationale">
          把空状态当作引导流程。信息密度更高，但每一行都可操作，
          最适合用户初次使用产品而不仅仅是初次进入某个视图的场景。
        </p>
      </article>

    </section>
  </div>

  <script>
    const stages = document.querySelectorAll('.stage');
    document.getElementById('bg-seg').addEventListener('change', (e) => {
      const dark = e.target.value === 'dark';
      stages.forEach((s) => s.classList.toggle('dark', dark));
    });
  </script>
</body>
</html>