HexTrails/design-showcase.html

<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HEX TRAILS · 色彩与离场设计</title><link rel="stylesheet" href="design/showcase.css"></head>
<body>
<header class="masthead"><a href="index.html">HEX TRAILS<span>转转六角</span></a><span>ART DIRECTION / 02</span><a class="game-link" id="game-link" href="index.html">进入游戏 ↗</a></header>
<main>
<section class="intro"><div><div class="eyebrow">COLORFUL WORLDS. FOCUSED PLAY.</div><h1>每一关，<br>都有自己的颜色。</h1><p>12 种棋子色彩，5 套关卡氛围。<br>同一棋盘，对照 4、7、9、12 色。</p></div><div class="intro-note"><span>01 / COLOR SYSTEM</span><p>选择下方主题，比较同一棋盘的不同配色。</p><div class="theme-tabs" id="theme-tabs" aria-label="关卡主题"></div></div></section>
<section class="density-section"><div class="section-heading"><div><div class="eyebrow">COLOR DENSITY STUDY</div><h2>七色，会不会更好玩？</h2></div><p>点击任一棋盘，在下方体验对应色数；布局保持一致。</p></div><div class="density-grid" id="density-grid"></div></section>
<div class="board-size-control"><label>棋盘规模 <select id="board-size"><option value="regular">常规对照</option><option value="5" selected>边长 6 · 91 格 · 42 枚棋子</option><option value="6">边长 7 · 127 格 · 60 枚棋子</option></select></label><span>双指缩放 · 放大后拖动 · 电脑可用 Ctrl/Command + 滚轮</span></div>
<section class="studio" aria-label="主题和动效互动展示">
<div class="theme-story"><div class="eyebrow" id="scene-label"></div><h2 id="scene-name"></h2><p id="scene-description"></p><div class="color-spec"><span>环境色</span><b id="background-value"></b><i id="background-chip"></i></div><div class="palette-title">本关棋子 <span id="palette-count"></span></div><div class="local-palette" id="local-palette"></div><p class="small-note">颜色只表达个性，不改变路线或碰撞规则。<br>难度同时保留文字标识。</p><a id="play-theme" href="index.html">用这套主题玩一关 ↗</a></div>
<div class="phone" id="phone"><div class="phone-top"><button class="icon-button" id="reset" aria-label="选择关卡" data-icon="grid"></button><div><strong>LEVEL 01</strong><span id="phone-label"></span></div><button class="icon-button" id="next-theme" aria-label="设置" data-icon="gear"></button></div><div class="moves"><span>剩余步数</span><strong id="moves">11</strong></div><canvas id="preview" aria-label="可点击棋子的真实规则演示棋盘"></canvas><div class="phone-status" id="phone-status" aria-live="polite">点击棋子，沿轨道出发</div><div class="rotations"><button id="left"><span data-icon="left"></span><b>左转</b></button><button id="right"><span data-icon="right"></span><b>右转</b></button></div><div class="phone-tools"><button id="undo"><span data-icon="undo"></span><b>撤销</b></button><button id="restart"><span data-icon="restart"></span><b>重来</b></button><button id="hint"><span data-icon="bulb"></span><b>提示</b></button></div></div>
<div class="motion-story"><div class="eyebrow">02 / EXIT CHOREOGRAPHY</div><h2>离开，也有回响。</h2><p>沿轨道出发，冲出边缘。<br>短尾迹跟随，同色六角碎片轻轻散开。</p><ol><li><b>01</b><div><strong>沿轨道滑行</strong><span>保留完整路线，读得懂运动。</span></div></li><li><b>02</b><div><strong>出口收束</strong><span>在棋盘边缘缩小，留下短尾迹。</span></div></li><li><b>03</b><div><strong>六角余韵</strong><span>6 枚同色碎片，向外展开后消失。</span></div></li></ol><button class="demo-button" id="demo">播放离场效果 <span>↗</span></button><label class="slow"><input type="checkbox" id="slow"> 慢速观察 ×0.4</label><p class="motion-status" id="motion-status" aria-live="polite">可反复播放，也可直接操作棋盘。</p><p class="small-note">系统开启减少动态效果时，关闭尾迹和碎片。</p></div>
</section>
<section class="theme-collection"><div class="section-heading"><div><div class="eyebrow">03 / ONE JOURNEY, FIVE MOODS</div><h2>从浅湾，到午夜。</h2></div><p>主线按难度自动匹配 · 每周挑战拥有独立主题</p></div><div class="theme-grid" id="theme-grid"></div><p class="collection-note">每周挑战展示为美术主题预览；这里的棋盘使用现有主线关卡。</p></section>
<section class="pigment-section"><div class="section-heading"><div><div class="eyebrow">04 / THE PIGMENT LIBRARY</div><h2>更多颜色，更有分寸。</h2></div><p>全局 12 色 · 单关开放 4 / 7 / 9 / 12 色 · 离场效果沿用棋子本色</p></div><div class="pigment-grid" id="pigment-grid"></div><div class="rules"><p><b>环境低饱和</b>背景营造关卡情绪，让棋子保持主角。</p><p><b>单关有取舍</b>以七色为默认起点，更多颜色也保持统一形状与箭头。</p><p><b>交互有秩序</b>工具统一蓝灰，主操作保持紫色。</p></div></section>
</main><footer>HEX TRAILS / DESIGN STUDY 02<span>实时 Canvas · 与游戏共用渲染与碰撞规则</span><a href="Design.html">查看设计规范 ↗</a></footer>
<dialog class="study-dialog" id="study-dialog"><div id="study-dialog-content"></div><button id="study-close">关闭</button></dialog>
<script type="module" src="src/showcase.js"></script></body></html>