51 lines
36 KiB
HTML
51 lines
36 KiB
HTML
<!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> |