Files

51 lines
36 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>柔和积木 · 视觉样张 v1.0</title>
<style>
:root{--background:#F7F5F1;--surface:#FFFEFC;--surfaceRaised:#FFFFFF;--surfaceMuted:#EEEBE6;--divider:#D5D0C9;--cellFace:#E5E3E1;--cellDepth:#C5C0CB;--cellBoundary:#817B88;--ink:#292638;--inkSecondary:#66616F;--inkTertiary:#716A78;--onPrimary:#FFFFFF;--primary:#6558F5;--primaryPressed:#5245D6;--primaryDepth:#4B3AC8;--primarySoft:#EDEAFF;--selectedInk:#5245D6;--primaryEdgeLight:#A49BFF;--danger:#C74350;--dangerDepth:#9E2F3A;--dangerSoft:#FBEAED;--dangerInk:#8B2632;--hint:#966000;--hintSoft:#FFF0D2;--hintInk:#664400;--wallInk:#3B3547;--wallStripe:#D7B35B;--focus:#6558F5;--overlay:#292638;color-scheme:light;font-family:"Nunito","Noto Sans SC","PingFang SC","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--background);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}a{color:var(--selectedInk)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button:disabled{cursor:default}.wrap{max-width:1160px;margin:auto;padding:44px 28px 64px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--inkSecondary)}h1{font-size:40px;line-height:1.2;letter-spacing:-.04em;margin:12px 0 18px}h2{font-size:26px;line-height:1.3;margin:0 0 16px}h3{font-size:18px;line-height:26px;margin:0 0 12px}p{font-size:16px;line-height:1.65;margin:8px 0 16px}.lead{max-width:750px;color:var(--inkSecondary)}nav{display:flex;gap:16px;flex-wrap:wrap;padding:20px 0 28px}nav a{text-decoration:none;font-size:14px}section{padding:30px 0;border-top:1px solid var(--divider);scroll-margin-top:20px}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.note{font-size:13px;line-height:20px;color:var(--inkSecondary)}.hero-mark{display:flex;align-items:center;gap:20px}.brand-tiles{position:relative;width:86px;height:86px;flex:none}.brand-tiles span{position:absolute;display:grid;place-items:center;background:var(--primary);color:var(--onPrimary);font-size:24px;font-weight:800;box-shadow:0 3px 0 var(--primaryDepth);border-radius:11px;width:36px;height:36px}.brand-tiles span:nth-child(2){left:43px}.brand-tiles span:nth-child(3){left:43px;top:43px}.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:18px 14px}.swatch>div{height:62px;border:1px solid var(--cellBoundary);border-radius:12px;margin-bottom:8px}.swatch strong,.swatch code,.swatch span{display:block;font-size:12px;line-height:18px;overflow-wrap:anywhere}.swatch code{font-size:13px}.swatch span{color:var(--inkSecondary)}.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:30px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:14px 8px;border-bottom:1px solid var(--divider);vertical-align:middle}th{font-weight:600;color:var(--inkSecondary);font-size:12px}td:first-child{white-space:nowrap}.numeric-set{padding:26px;background:var(--surface);border-radius:20px}.numeric-line{font-size:38px;font-weight:800;letter-spacing:.02em;margin-bottom:10px}.unit{font-variant-numeric:tabular-nums}.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.state{background:var(--surface);padding:18px;border-radius:20px;text-align:center}.state svg{height:90px;width:100%;overflow:visible}.state strong{display:block;font-size:14px;margin-top:12px}.state .note{margin-top:4px}.screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}.screen-label{font-size:13px;margin-bottom:12px;color:var(--inkSecondary)}.phone{background:var(--background);border:1px solid var(--divider);border-radius:28px;max-width:375px;min-height:650px;margin:auto;padding:22px 18px 18px;box-shadow:0 10px 24px #2926380b;display:flex;flex-direction:column;color:var(--ink)}.phone h3{font-size:24px;line-height:32px;letter-spacing:-.03em}.phone-top{height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px}.small-icon{border:0;border-radius:16px;background:var(--surfaceMuted);color:var(--ink);width:48px;height:48px;font-size:22px;flex:none}.level-title{text-align:center;font-size:22px;font-weight:800}.level-title small{display:block;font-size:12px;color:var(--inkSecondary);font-weight:500}.remaining{font-size:14px;font-weight:600;min-width:65px;text-align:right}.progress{height:4px;border-radius:4px;background:var(--surfaceMuted);margin:16px 0}.progress>i{display:block;width:30%;height:100%;background:var(--primary);border-radius:4px}.tutorial{text-align:center;font-size:16px;line-height:24px;padding:9px 0;color:var(--inkSecondary);min-height:46px}.board{width:100%;max-width:270px;margin:auto;min-height:300px;display:grid;align-items:center}.board svg{width:100%;height:auto;overflow:visible;display:block}.gesture{text-align:center;font-size:13px;line-height:18px;color:var(--inkSecondary);margin:18px 0 12px}.actions{display:flex;gap:8px}.action{min-height:56px;flex:1;padding:8px 2px;background:var(--surfaceMuted);color:var(--ink);border:0;border-radius:16px;box-shadow:0 2px 0 var(--cellDepth);font-size:16px;font-weight:700;display:grid;place-content:center;text-align:center}.action .symbol{font-size:19px;line-height:22px}.primary-button{background:var(--primary);color:var(--onPrimary);box-shadow:0 2px 0 var(--primaryDepth);font-size:16px;min-height:56px;border:0;border-radius:16px;padding:12px 18px;font-weight:700;width:100%}.primary-button:active,.action:active{transform:translateY(1px);box-shadow:0 1px 0 var(--primaryDepth)}.big-heading{font-size:30px!important;line-height:38px!important;margin-top:20px!important}.pack-heading{display:flex;justify-content:space-between;font-size:16px;font-weight:700;margin:22px 0 12px}.pack-heading span{font-size:13px;font-weight:500;color:var(--inkSecondary)}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.level-cell{height:50px;border-radius:12px;background:var(--cellFace);border:1.25px solid var(--cellBoundary);color:var(--ink);font-size:20px;font-weight:800;box-shadow:0 2px 0 var(--cellDepth)}.level-cell.done{background:var(--primarySoft);color:var(--selectedInk);border-color:var(--selectedInk)}.level-cell.current{background:var(--primary);color:var(--onPrimary);border-color:var(--primaryDepth)}.level-cell.locked{color:var(--inkSecondary);font-size:14px;background:var(--surfaceMuted);border-color:var(--divider);box-shadow:none}.phone .bottom{margin-top:auto;padding-top:26px}.setting-row{min-height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--divider);font-size:14px;gap:12px}.setting-row input{accent-color:var(--primary);width:24px;height:24px;margin:10px;flex:none}.setting-note{font-size:13px;color:var(--inkSecondary);line-height:20px;padding:12px 0}.setting-block{padding:12px;background:var(--surface);border-radius:16px;margin-top:16px}.setting-block strong{font-size:14px}.danger-link{min-height:48px;color:var(--dangerInk);background:transparent;border:0;font-size:14px;text-align:left}.controls{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.control{min-height:44px;border:1px solid var(--cellBoundary);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:12px;font-size:14px}.control[aria-pressed=true]{background:var(--primary);color:var(--onPrimary);border-color:var(--primary)}.live{min-height:22px;font-size:13px;line-height:20px;color:var(--inkSecondary)}.component-card{background:var(--surface);border-radius:20px;padding:24px}.motion-tile{width:88px;height:88px;display:grid;place-items:center;color:var(--onPrimary);background:var(--primary);box-shadow:0 3px 0 var(--primaryDepth);border-radius:14px;font-weight:800;font-size:32px;position:relative;flex:none}.motion-stage{display:flex;gap:24px;align-items:center;min-height:110px}.motion-wall{width:94px;height:94px;position:relative;flex:none}.motion-wall .rod{position:absolute;left:41px;top:11px;width:12px;height:62px;background:repeating-linear-gradient(135deg,var(--wallInk) 0px,var(--wallInk) 8px,var(--wallStripe) 8px,var(--wallStripe) 13px);border:1.5px solid var(--wallInk);border-radius:5px;transform-origin:6px 36px;transform:rotate(0deg)}.motion-wall .pivot{position:absolute;left:39px;top:39px;width:16px;height:16px;border:2px solid var(--wallInk);border-radius:50%;background:var(--wallStripe)}.motion-wall .rod.moving{transition:transform 120ms cubic-bezier(.22,1,.36,1)}.press-run{animation:press-in 200ms cubic-bezier(.22,1,.36,1)}@keyframes press-in{0%{transform:translateY(0);box-shadow:0 3px 0 var(--primaryDepth)}35%{transform:translateY(2px) scale(.98);box-shadow:0 1px 0 var(--primaryDepth)}100%{transform:translateY(0);box-shadow:0 3px 0 var(--primaryDepth)}}.hex-demo{height:180px;background:var(--background);display:grid;place-items:center;border-radius:16px}.hex-demo svg{width:210px;max-width:100%;height:160px}.sheet-demo{background:var(--surface);padding:24px;border-radius:24px;box-shadow:0 10px 22px #2926380b}.sheet-demo h3{font-size:24px;line-height:32px}.sheet-actions{display:flex;gap:10px;margin-top:20px}.sheet-actions button{flex:1;min-height:52px;border:0;border-radius:16px;font-size:16px;font-weight:700}.sheet-actions .cancel{background:var(--surfaceMuted);color:var(--ink)}.sheet-actions .confirm{background:var(--danger);color:var(--onPrimary)}.toast-demo{background:var(--ink);color:#fff;padding:12px 16px;border-radius:14px;font-size:14px;line-height:20px;margin-top:20px}.material-list{font-size:14px;line-height:1.8;padding-left:20px}.footer-note{padding-top:30px;border-top:1px solid var(--divider);margin-top:40px;color:var(--inkSecondary);font-size:13px;line-height:20px}@media(max-width:1050px){.swatches{grid-template-columns:repeat(4,1fr)}.screens{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:1fr}.screens>div:last-child{max-width:375px;width:100%}}@media(max-width:660px){.wrap{padding:28px 16px 44px}h1{font-size:32px}.hero-mark{gap:14px}.brand-tiles{transform:scale(.8);transform-origin:left center;width:70px}.spec-grid{grid-template-columns:repeat(2,1fr)}.screens{grid-template-columns:1fr}.screens>div:last-child{max-width:none}.swatches{gap:18px 10px}.swatch>div{height:50px}.numeric-line{font-size:30px}.phone{min-height:640px}.control{padding:8px 10px}.motion-stage{gap:14px}}@media(prefers-reduced-motion:reduce){.press-run{animation:none!important}.moving{transition:none!important}}@media print{body{background:white}.wrap{max-width:none;padding:0}nav,.controls,.motion-buttons{display:none}.screens{grid-template-columns:repeat(2,1fr)}section{break-inside:auto}.phone,.state,.component-card,.swatch{break-inside:avoid}.swatches{grid-template-columns:repeat(4,1fr)}*{print-color-adjust:exact;-webkit-print-color-adjust:exact}.footer-note{break-inside:avoid}}
</style></head><body><main class="wrap">
<div class="eyebrow">NUMBERSWIPE / ART DIRECTION / V1.0 PROPOSAL</div><div class="hero-mark"><div class="brand-tiles" aria-hidden="true"><span>1</span><span>2</span><span>3</span></div><h1>柔和积木<br>清楚,也愿意触摸</h1></div>
<p class="lead">正俯视 · 哑光面 · 暖白与蓝紫 · 轻厚度。数字和邻接始终优先。本页是设计规范样张,不是完整游戏;按钮仅切换局部演示状态。</p>
<p class="note">2026-10-21 · 字体文件尚未随样张打包,显示使用本机可用回退;正式 Nunito / Noto Sans SC 字形需接入后验收。<a href="../../2026-10-21_美术设计-柔和积木-report.md">阅读完整报告</a> · <a href="tokens.json">查看设计令牌</a></p>
<nav aria-label="样张目录"><a href="#palette">配色</a><a href="#type">字阶</a><a href="#states">积木状态</a><a href="#pages">页面</a><a href="#motion">动效</a><a href="#details">墙与组件</a><a href="#contrast">对比校验</a></nav>
<section id="palette"><div class="section-head"><h2>配色:柔和的是材质,清楚的是信息</h2><span class="note">实色 / sRGB</span></div><div class="swatches"><div class="swatch"><div style="background:#F7F5F1" aria-label="暖白背景 #F7F5F1"></div><strong>暖白背景</strong><code>#F7F5F1</code><span>background</span></div><div class="swatch"><div style="background:#FFFEFC" aria-label="卡片表面 #FFFEFC"></div><strong>卡片表面</strong><code>#FFFEFC</code><span>surface</span></div><div class="swatch"><div style="background:#EEEBE6" aria-label="次级表面 #EEEBE6"></div><strong>次级表面</strong><code>#EEEBE6</code><span>surfaceMuted</span></div><div class="swatch"><div style="background:#E5E3E1" aria-label="未走块面 #E5E3E1"></div><strong>未走块面</strong><code>#E5E3E1</code><span>cellFace</span></div><div class="swatch"><div style="background:#817B88" aria-label="结构轮廓 #817B88"></div><strong>结构轮廓</strong><code>#817B88</code><span>cellBoundary</span></div><div class="swatch"><div style="background:#C5C0CB" aria-label="块底厚度 #C5C0CB"></div><strong>块底厚度</strong><code>#C5C0CB</code><span>cellDepth</span></div><div class="swatch"><div style="background:#292638" aria-label="关键文字 #292638"></div><strong>关键文字</strong><code>#292638</code><span>ink</span></div><div class="swatch"><div style="background:#66616F" aria-label="辅助文字 #66616F"></div><strong>辅助文字</strong><code>#66616F</code><span>inkSecondary</span></div><div class="swatch"><div style="background:#716A78" aria-label="三级文字 #716A78"></div><strong>三级文字</strong><code>#716A78</code><span>inkTertiary</span></div><div class="swatch"><div style="background:#6558F5" aria-label="路径主紫 #6558F5"></div><strong>路径主紫</strong><code>#6558F5</code><span>primary</span></div><div class="swatch"><div style="background:#5245D6" aria-label="按压深紫 #5245D6"></div><strong>按压深紫</strong><code>#5245D6</code><span>primaryPressed</span></div><div class="swatch"><div style="background:#EDEAFF" aria-label="淡紫底 #EDEAFF"></div><strong>淡紫底</strong><code>#EDEAFF</code><span>primarySoft</span></div><div class="swatch"><div style="background:#C74350" aria-label="错误面 #C74350"></div><strong>错误面</strong><code>#C74350</code><span>danger</span></div><div class="swatch"><div style="background:#966000" aria-label="提示环 #966000"></div><strong>提示环</strong><code>#966000</code><span>hint</span></div><div class="swatch"><div style="background:#3B3547" aria-label="墙身 #3B3547"></div><strong>墙身</strong><code>#3B3547</code><span>wallInk</span></div><div class="swatch"><div style="background:#D7B35B" aria-label="墙内条纹 #D7B35B"></div><strong>墙内条纹</strong><code>#D7B35B</code><span>wallStripe</span></div></div></section>
<section id="type"><h2>字体与字阶</h2><div class="two-col"><div class="table-wrap"><table><thead><tr><th>角色</th><th>字号实样</th><th>字号 / 行高 / 字重</th></tr></thead><tbody><tr><td>display</td><td><span style="font-size:30px;line-height:38px;font-weight:800">一步,一块</span></td><td>30 / 38 / 800</td></tr><tr><td>pageTitle</td><td><span style="font-size:24px;line-height:32px;font-weight:700">数字一笔</span></td><td>24 / 32 / 700</td></tr><tr><td>section</td><td><span style="font-size:18px;line-height:26px;font-weight:700">出口的选择</span></td><td>18 / 26 / 700</td></tr><tr><td>body</td><td><span style="font-size:16px;line-height:24px;font-weight:500">从 1 开始,走遍每一块</span></td><td>16 / 24 / 500</td></tr><tr><td>button</td><td><span style="font-size:16px;line-height:24px;font-weight:700">继续挑战</span></td><td>16 / 24 / 700</td></tr><tr><td>label</td><td><span style="font-size:14px;line-height:20px;font-weight:600">剩余 8 格</span></td><td>14 / 20 / 600</td></tr><tr><td>caption</td><td><span style="font-size:13px;line-height:18px;font-weight:500">点已走格,可退回</span></td><td>13 / 18 / 500</td></tr><tr><td>micro</td><td><span style="font-size:12px;line-height:16px;font-weight:500">入门 · 第 8 关</span></td><td>12 / 16 / 500</td></tr></tbody></table></div><div><div class="numeric-set"><div class="eyebrow">数字建议:NUNITO 800</div><div class="numeric-line unit">1 2 3 4 5</div><div class="numeric-line unit">6 7 8 9 0</div><div class="numeric-line unit">11 17 18 21</div><p class="note">本页按本机字体显示。正式样板需检查1/7、3/8、6/9、两位数测宽及中文回退。</p></div><ul class="material-list"><li>UI正文16D,关键教学16D,微型信息不低于12D。</li><li>u=60:一位数31.2D;两位数27.6D。</li><li>大格数字仍按单位格节距计算,不按面积放大。</li><li>中文500/600/700;数字800,正文不全加粗。</li></ul></div></div></section>
<section id="states"><h2>积木状态:同一种材质,不同的规则信息</h2><div class="spec-grid" id="state-grid"></div><p class="note">下沿默认2D,未走结构边1.25D。示例角标“8”表示原要求,错误面内“7”表示当前步号。材质阴影不能独自承担轮廓识别。</p></section>
<section id="pages"><div class="section-head"><h2>页面样张</h2><span class="note">展示用状态 · 非真实存档</span></div><div class="screens">
<div><div class="screen-label">选关 · 小尺寸预览采用4列</div><article class="phone" aria-label="选关设计样张"><div class="phone-top"><span class="eyebrow">NUMBERSWIPE</span><button class="small-icon" type="button" aria-label="设置示例" data-info="设置页面样张在右侧;本页不修改游戏设置。">⚙</button></div><h3 class="big-heading">数字一笔</h3><p class="note">按步数,一笔走遍每一块</p><div class="progress" aria-label="示例进度3/10"><i></i></div><div class="note">入门包 · 已完成 3 / 10</div><div class="pack-heading">入门<span>学会看见出口</span></div><div class="level-grid"><button type="button" class="level-cell done" data-info="关卡已完成,示例展示完成态。" aria-label="第1关,已完成">1✓</button><button type="button" class="level-cell done" data-info="关卡已完成,示例展示完成态。" aria-label="第2关,已完成">2✓</button><button type="button" class="level-cell done" data-info="关卡已完成,示例展示完成态。" aria-label="第3关,已完成">3✓</button><button type="button" class="level-cell current" data-info="当前关示例;本页不启动真实游戏。">4</button><button type="button" class="level-cell " data-info="关卡状态仅用于设计展示。">5</button><button type="button" class="level-cell " data-info="关卡状态仅用于设计展示。">6</button><button type="button" class="level-cell " data-info="关卡状态仅用于设计展示。">7</button><button type="button" class="level-cell " data-info="关卡状态仅用于设计展示。">8</button><button type="button" class="level-cell " data-info="关卡状态仅用于设计展示。">9</button><button type="button" class="level-cell " data-info="关卡状态仅用于设计展示。">10</button><button type="button" class="level-cell locked" data-info="关卡状态仅用于设计展示。">未解锁</button><button type="button" class="level-cell locked" data-info="关卡状态仅用于设计展示。">未解锁</button></div><div class="setting-note">示例网格4列仅用于缩略样张;正式375D页面推荐5列,按触区和边距计算。</div><div class="bottom"><button class="primary-button" type="button" data-info="继续按钮样张,真实关号由存档读取。">继续 · 1–4</button></div></article></div>
<div><div class="screen-label">对局 · 保留三个真实动作角色</div><article class="phone" aria-label="数字对局设计样张"><div class="phone-top"><button type="button" class="small-icon" aria-label="返回示例" data-info="返回选关的视觉入口;不跳转真实游戏。">‹</button><div class="level-title">1–8<small>入门 · 出口的选择</small></div><div class="remaining" id="remaining">剩余 8 格</div></div><div class="progress" aria-label="示例包进度"><i style="width:80%"></i></div><div class="tutorial">大格,也只算一步</div><div class="board" id="main-board"></div><div class="gesture">按住滑动 · 点已走格回退</div><div class="actions"><button type="button" class="action" id="reset-board"><span class="symbol" aria-hidden="true">↻</span>重开</button><button type="button" class="action" id="reveal-board"><span class="symbol" aria-hidden="true">+</span>补数字</button><button type="button" class="action" id="hint-board"><span class="symbol" aria-hidden="true">↱</span>指路</button></div></article></div>
<div><div class="screen-label">设置 · 拟新增能力须真实接入</div><article class="phone" aria-label="设置设计样张"><div class="phone-top"><span class="eyebrow">偏好设置</span><button class="small-icon" type="button" aria-label="关闭设置示例" data-info="关闭入口示例;本页不覆盖棋盘。">×</button></div><h3 style="margin-top:24px">按你的节奏</h3><label class="setting-row">声音<input type="checkbox" checked aria-label="示例声音开关"></label><label class="setting-row">触感<input type="checkbox" checked aria-label="示例触感开关"></label><label class="setting-row">减弱动态<input type="checkbox" id="reduce-motion" aria-label="减弱下方演示动态"></label><label class="setting-row">加强对比<input type="checkbox" id="high-contrast" aria-label="加强本页盘面轮廓"></label><div class="setting-block"><strong>静音,也能看清每一步</strong><p class="setting-note">错误保留条件标记,墙保留杆形与条纹;声音和触感都只是辅助。</p></div><div class="bottom"><button class="danger-link" type="button" data-info="清除进度应显示独立确认面板;本页不会清除任何数据。">清除全部进度…</button><p class="note">本页设置只影响演示,不写入游戏。</p></div></article></div>
</div><div class="controls" aria-label="对局状态展示"><button class="control" type="button" data-mode="idle" aria-pressed="false">起手前</button><button class="control" type="button" data-mode="path" aria-pressed="true">已走三步</button><button class="control" type="button" data-mode="error" aria-pressed="false">步号冲突</button><button class="control" type="button" data-mode="hint" aria-pressed="false">提示外圈</button><button class="control" type="button" data-mode="complete" aria-pressed="false">完整路线</button></div><div id="page-status" class="live" aria-live="polite">真实关卡1-8的视觉状态演示;不包含输入求解器。</div></section>
<section id="motion"><h2>特效:轻按压,快确认,机构不失真</h2><div class="two-col"><div class="component-card"><div class="motion-stage"><div class="motion-tile" id="press-tile">3</div><div><h3>落格按压</h3><p class="note">200ms;厚度短暂降低;不改变逻辑命中。</p></div></div><button class="control" id="play-press" type="button">播放一次按压</button></div><div class="component-card"><div class="motion-stage"><div class="motion-wall" role="img" aria-label="转墙外形与旋转方向示例"><span class="rod" id="spinner-rod"></span><span class="pivot"></span></div><div><h3>转墙120°</h3><p class="note">120ms单调旋转;非时间机关,不循环。</p></div></div><button class="control" id="play-turn" type="button">演示走一步</button><button class="control" id="undo-turn" type="button">演示撤销一步</button></div></div><p class="note">这是动作外观示例,不是六边规则模拟。减少动态时,按压不动、转墙直接切到目标角度。</p><div class="table-wrap"><table><thead><tr><th>时长</th><th>用途</th><th>表现限制</th></tr></thead><tbody><tr><td>120ms</td><td>按下、桥厚度增长、转墙</td><td>不排长队,不阻塞输入</td></tr><tr><td>200ms</td><td>局部回弹、面板进入</td><td>轻位移,无夸张果冻</td></tr><tr><td>320ms</td><td>错误短反馈、完成收束</td><td>不全屏闪白、不盖数字</td></tr><tr><td>500ms</td><td>完成路线停留</td><td>保留完整解供玩家看清</td></tr></tbody></table></div></section>
<section id="details"><h2>组件与信息层级</h2><div class="two-col"><div class="sheet-demo"><h3>清除全部进度?</h3><p>这会移除本机已完成的关卡记录。此处只展示确认样式,不执行清除。</p><div class="sheet-actions"><button type="button" class="cancel" data-info="已取消示例;没有游戏数据变化。">取消</button><button type="button" class="confirm" data-info="确认按钮仅是样张,没有清除任何数据。">清除进度</button></div><div class="toast-demo">示例提示:已回到第 3 步,可以换个方向。</div></div><div class="component-card"><h3>材质执行要点</h3><ul class="material-list"><li>顶面纯色;需要渐变时重新验对比。</li><li>底沿2D,接触阴影≤8%,模糊≤6D。</li><li>整体描边一次,异形内部不留拼接线。</li><li>连桥覆盖接缝和连接处描线,不连无关邻格。</li><li>墙高于路径;琥珀提示外圈不掩盖墙。</li><li>过关保持主紫面,仅边缘/光带收束。</li></ul><div class="hex-demo" id="hex-demo" role="img" aria-label="柔和六边积木与共边墙示例"></div></div></div></section>
<section id="contrast"><h2>计算过的颜色配对</h2><p class="note">19组目标配对通过;3组诊断单独列出。阈值用原始浮点值判断,表中只显示两位小数;这不等于所有动态或透明合成状态都已验收。</p><div class="table-wrap"><table><thead><tr><th>配对</th><th>对比度</th><th>结果</th></tr></thead><tbody><tr><td>主文字/背景</td><td>13.50 : 1</td><td>通过</td></tr><tr><td>辅助文字/背景</td><td>5.50 : 1</td><td>通过</td></tr><tr><td>三级文字/背景</td><td>4.78 : 1</td><td>通过</td></tr><tr><td>线索数字/未走格</td><td>11.48 : 1</td><td>通过</td></tr><tr><td>路径数字/紫面</td><td>4.92 : 1</td><td>通过</td></tr><tr><td>路径数字/按压紫面</td><td>6.60 : 1</td><td>通过</td></tr><tr><td>错误数字/错误面</td><td>4.83 : 1</td><td>通过</td></tr><tr><td>错误说明/淡红底</td><td>7.47 : 1</td><td>通过</td></tr><tr><td>提示文字/淡琥珀底</td><td>7.80 : 1</td><td>通过</td></tr><tr><td>格边/格面</td><td>3.20 : 1</td><td>通过</td></tr><tr><td>格边/背景</td><td>3.77 : 1</td><td>通过</td></tr><tr><td>提示环/背景</td><td>4.86 : 1</td><td>通过</td></tr><tr><td>提示环/未走格</td><td>4.13 : 1</td><td>通过</td></tr><tr><td>墙身/墙条纹</td><td>5.87 : 1</td><td>通过</td></tr><tr><td>墙身/未走格</td><td>9.19 : 1</td><td>通过</td></tr><tr><td>焦点/表面</td><td>4.88 : 1</td><td>通过</td></tr><tr><td>选中项文字/淡紫底</td><td>5.60 : 1</td><td>通过</td></tr><tr><td>辅助文字/二级面</td><td>5.04 : 1</td><td>通过</td></tr><tr><td>已走线索环/路径面</td><td>4.17 : 1</td><td>通过</td></tr><tr><td>未走格面/背景(诊断,边界另保证)</td><td>1.18 : 1</td><td>诊断</td></tr><tr><td>旧错误色白字(诊断)</td><td>3.91 : 1</td><td>诊断</td></tr><tr><td>旧过关亮面白字(诊断)</td><td>3.67 : 1</td><td>诊断</td></tr></tbody></table></div></section>
<div class="footer-note">这是设计提案与离线样张。未改变真实游戏、存档、字体资产或商业设置。完整的尺寸、页面、反馈、跨平台映射、性能、交付及验收要求见报告正文。<br>字体建议与本机实际显示可能不同;正式字体接入后须再检查字形、测宽及缺字。</div>
</main><script>
const colors={"background":"#F7F5F1","surface":"#FFFEFC","surfaceRaised":"#FFFFFF","surfaceMuted":"#EEEBE6","divider":"#D5D0C9","cellFace":"#E5E3E1","cellDepth":"#C5C0CB","cellBoundary":"#817B88","ink":"#292638","inkSecondary":"#66616F","inkTertiary":"#716A78","onPrimary":"#FFFFFF","primary":"#6558F5","primaryPressed":"#5245D6","primaryDepth":"#4B3AC8","primarySoft":"#EDEAFF","selectedInk":"#5245D6","primaryEdgeLight":"#A49BFF","danger":"#C74350","dangerDepth":"#9E2F3A","dangerSoft":"#FBEAED","dangerInk":"#8B2632","hint":"#966000","hintSoft":"#FFF0D2","hintInk":"#664400","wallInk":"#3B3547","wallStripe":"#D7B35B","focus":"#6558F5","overlay":"#292638"};
const cellData=[{"id":"a","x":1,"y":0,"w":1,"h":1,"clue":1},{"id":"b","x":1,"y":1,"w":1,"h":1},{"id":"c","x":0,"y":2,"w":1,"h":1},{"id":"B","x":1,"y":2,"w":2,"h":2},{"id":"d","x":3,"y":2,"w":1,"h":1},{"id":"e","x":0,"y":3,"w":1,"h":1},{"id":"f","x":3,"y":3,"w":1,"h":1},{"id":"g","x":0,"y":4,"w":1,"h":1},{"id":"h","x":1,"y":4,"w":1,"h":1,"clue":8},{"id":"i","x":2,"y":4,"w":1,"h":1},{"id":"j","x":3,"y":4,"w":1,"h":1}];
const correct=['a','b','B','d','f','j','i','h','g','e','c'];
let mode='path',strong=false,reveal=false;
const board=document.getElementById('main-board'),status=document.getElementById('page-status');
function shared(a,b){if(a.x+a.w===b.x||b.x+b.w===a.x){const x=(a.x+a.w===b.x?b.x:a.x)*60,y=(Math.max(a.y,b.y)+Math.min(a.y+a.h,b.y+b.h))/2*60;return {x:x-4,y:y-13.8,w:8,h:27.6};}const y=(a.y+a.h===b.y?b.y:a.y)*60,x=(Math.max(a.x,b.x)+Math.min(a.x+a.w,b.x+b.w))/2*60;return{x:x-13.8,y:y-4,w:27.6,h:8};}
function svgRect(x,y,w,h,fill,stroke='',line=0,rx=10){return '<rect x="'+x+'" y="'+y+'" width="'+w+'" height="'+h+'" rx="'+rx+'" fill="'+fill+'"'+(stroke?' stroke="'+stroke+'" stroke-width="'+line+'"':'')+'/>';}
function text(x,y,label,fill,size=31.2){return '<text x="'+x+'" y="'+y+'" fill="'+fill+'" font-size="'+size+'" font-weight="800" text-anchor="middle" dominant-baseline="central">'+label+'</text>';}
function renderBoard(){let path=mode==='idle'?[]:mode==='error'?['a','b','B','c','e','g','h']:mode==='complete'?correct:correct.slice(0,3);let s='<svg viewBox="0 0 240 300" role="img" aria-label="真实关卡1-8的视觉状态"><title>真实关卡1-8</title>';const byId=new Map(cellData.map(c=>[c.id,c]));for(const c of cellData){let fill=path.includes(c.id)||c.id==='a'?colors.primary:colors.cellFace;if(mode==='error'&&c.id==='h')fill=colors.danger;let depth=fill===colors.primary?colors.primaryDepth:fill===colors.danger?colors.dangerDepth:colors.cellDepth;let stroke=fill===colors.cellFace?colors.cellBoundary:fill===colors.danger?colors.dangerDepth:colors.primaryDepth;let x=c.x*60+3,y=c.y*60+3,w=c.w*60-6,h=c.h*60-6;s+=svgRect(x,y+2,w,h,depth)+svgRect(x,y,w,h,fill,stroke,strong?2:1.25);if(c.clue || (reveal&&c.id==='d'))s+=svgRect(x+3,y+3,w-6,h-6,'none',path.includes(c.id)||c.id==='a'?colors.primarySoft:colors.ink,2,7);}
for(let i=1;i<path.length;i++){const r=shared(byId.get(path[i-1]),byId.get(path[i]));s+=svgRect(r.x,r.y,r.w,r.h,colors.primary,'',0,0);}
for(const c of cellData){let step=path.indexOf(c.id)+1;let label=step>0?step:c.clue??(reveal&&c.id==='d'?4:'');if(label!==''){const filled=step>0||c.id==='a';s+=text(c.x*60+30,c.y*60+30,label,filled?colors.onPrimary:colors.ink,label>=10?27.6:31.2);}if(mode==='error'&&c.id==='h'){s+='<circle cx="'+(c.x*60+48)+'" cy="'+(c.y*60+10)+'" r="10" fill="'+colors.ink+'"/>'+text(c.x*60+48,c.y*60+10,'8',colors.onPrimary,12);}}
if(mode==='hint')s+=svgRect(181,121,58,58,'none',colors.hint,3,12);s+='</svg>';board.innerHTML=s;document.getElementById('remaining').textContent=mode==='complete'?'完成':('剩余 '+(11-path.length)+' 格');document.querySelectorAll('[data-mode]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.mode===mode)));}
function stateSvg(kind){const error=kind==='错误',visited=['已走','当前末端','已走线索','已走奇偶','错误','完成'].includes(kind),fill=error?colors.danger:visited?colors.primary:colors.cellFace,depth=error?colors.dangerDepth:visited?colors.primaryDepth:colors.cellDepth;let s='<svg viewBox="0 0 100 96" role="img" aria-label="'+kind+'状态样本">'+svgRect(14,13,72,72,depth)+svgRect(14,11,72,72,fill,visited?depth:colors.cellBoundary,1.25,12);if(['固定线索','奇偶','已走线索'].includes(kind))s+=svgRect(18,15,64,64,'none',visited?colors.primarySoft:colors.ink,2,9);if(kind==='提示')s+=svgRect(9,6,82,82,'none',colors.hint,3,15);if(kind==='当前末端')s+=svgRect(21,18,58,58,'none',colors.primarySoft,2,8);const label=kind==='奇偶'?'偶':kind==='错误'?'7':kind==='已走奇偶'?'6':kind==='未走'?'':kind==='完成'?'11':'8';if(label)s+=text(50,kind==='已走奇偶'?39:47,label,visited?colors.onPrimary:colors.ink,31);if(kind==='已走奇偶')s+=text(50,66,'偶',colors.onPrimary,12);if(error)s+='<circle cx="81" cy="17" r="11" fill="'+colors.ink+'"/>'+text(81,17,'8',colors.onPrimary,12);return s+'</svg>';}
document.getElementById('state-grid').innerHTML=['未走','固定线索','奇偶','已走','当前末端','已走线索','已走奇偶','错误','提示','完成'].map(k=>'<div class="state">'+stateSvg(k)+'<strong>'+k+'</strong></div>').join('');
document.querySelectorAll('[data-mode]').forEach(b=>b.addEventListener('click',()=>{mode=b.dataset.mode;reveal=false;renderBoard();status.textContent='当前为“'+b.textContent+'”视觉示例,不写入真实游戏。';}));
document.querySelectorAll('[data-info]').forEach(b=>b.addEventListener('click',()=>status.textContent=b.dataset.info));
document.getElementById('reset-board').addEventListener('click',()=>{mode='idle';reveal=false;renderBoard();status.textContent='示例已重开,起点着色只作起手提示,尚未计步。';});
document.getElementById('reveal-board').addEventListener('click',()=>{mode='path';reveal=true;renderBoard();status.textContent='示例补出第4步;仅演示补数的普通线索外观。';});
document.getElementById('hint-board').addEventListener('click',()=>{mode='hint';renderBoard();status.textContent='示例圈出下一步位置;真实提示仍应由对应玩法提供。';});
document.getElementById('high-contrast').addEventListener('change',e=>{strong=e.target.checked;renderBoard();status.textContent='仅示例轮廓加粗,不改变规则。';});
const pressTile=document.getElementById('press-tile'),rod=document.getElementById('spinner-rod');let turns=0;function reduced(){return document.getElementById('reduce-motion').checked||matchMedia('(prefers-reduced-motion: reduce)').matches;}
document.getElementById('play-press').addEventListener('click',()=>{pressTile.classList.remove('press-run');if(!reduced()){void pressTile.offsetWidth;pressTile.classList.add('press-run');}status.textContent=reduced()?'减弱动态:状态确认保留,取消按压运动。':'播放一次200ms按压,无持续循环。';});
function turn(delta){turns+=delta;rod.classList.toggle('moving',!reduced());rod.style.transform='rotate('+(turns*120)+'deg)';status.textContent='转墙外观示例:累计'+turns+'步;'+(reduced()?'直接对齐。':'120ms旋转。');}
document.getElementById('play-turn').addEventListener('click',()=>turn(1));document.getElementById('undo-turn').addEventListener('click',()=>turn(-1));
document.getElementById('reduce-motion').addEventListener('change',()=>{pressTile.classList.remove('press-run');rod.classList.toggle('moving',!reduced());});
const hexes=[{x:70,y:48,fill:colors.primary,label:'1'},{x:126,y:48,fill:colors.cellFace,label:''},{x:98,y:96,fill:colors.cellFace,label:'8'}];let hex='<svg viewBox="0 0 200 150"><title>六边形材质与共边墙外观示意,非完整题目</title>';for(const c of hexes){const pts=[-90,-30,30,90,150,210].map(d=>{const a=d*Math.PI/180;return[c.x+32*Math.cos(a),c.y+32*Math.sin(a)]});hex+='<polygon points="'+pts.map(p=>p[0]+','+(p[1]+2)).join(' ')+'" fill="'+colors.cellDepth+'"/><polygon points="'+pts.map(p=>p.join(',')).join(' ')+'" fill="'+c.fill+'" stroke="'+colors.cellBoundary+'" stroke-width="1.25"/>'+text(c.x,c.y,c.label,c.fill===colors.primary?colors.onPrimary:colors.ink,24);}hex+='<line x1="98" y1="32" x2="98" y2="64" stroke="'+colors.wallInk+'" stroke-width="7" stroke-linecap="round"/><line x1="98" y1="35" x2="98" y2="61" stroke="'+colors.wallStripe+'" stroke-dasharray="4 5" stroke-width="3"/><circle cx="98" cy="32" r="5" fill="'+colors.wallStripe+'" stroke="'+colors.wallInk+'" stroke-width="2"/></svg>';document.getElementById('hex-demo').innerHTML=hex;
renderBoard();
</script></body></html>