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"><link rel="stylesheet" href="design/notifications.css"><link rel="stylesheet" href="design/art-directions.css"><link rel="stylesheet" href="design/game-tools.css"></head>
<body>
<header class="masthead"><a href="index.html">HEX TRAILS<span>转转六角</span></a><span>DESIGN REVIEW / 04</span><a class="game-link" id="game-link" href="index.html">进入游戏 ↗</a></header>
<nav class="quick-review" aria-label="快速切换设计与主题"><label>设计 <select id="quick-design"></select></label><label>主题 <select id="quick-theme"></select></label><a href="#direction-picker">多选与审核 ↑</a><a href="#item-study">道具设计 ↓</a></nav>
<main>
<section class="direction-review" aria-label="设计方案审核">
  <div class="review-heading"><div><span class="eyebrow">ART DIRECTIONS / 4 × 5</span><h1>四种性格，同一段旅程。</h1><p>每套设计都有轻松、进阶、烧脑、挑战和每周挑战五种主题。切换查看，也可以同时保留多套。</p></div><a href="#preview">体验弯曲轨道 ↓</a></div>
  <div id="direction-picker" class="direction-picker"></div>
  <div class="review-summary-bar"><p id="review-summary" aria-live="polite"></p><button id="export-review">导出审核记录 ↓</button></div>
  <div id="direction-detail" class="direction-detail"></div>
</section>
<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">弯曲小盘 · 12 枚棋子</option><option value="5" selected>边长 6 · 91 格 · 24 枚棋子</option><option value="6">边长 7 · 127 格 · 32 枚棋子</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><div class="notice-slot"><div class="game-notice visible" id="phone-status" role="status" aria-live="polite" aria-atomic="true">点击棋子，沿轨道出发</div></div><canvas id="preview" aria-label="可点击棋子的真实规则演示棋盘"></canvas><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" class="game-tool" data-tool="undo"><span class="item-face" data-icon="undo"></span><b>撤销</b></button><button id="restart" class="game-tool" data-tool="restart"><span class="item-face" data-icon="restart"></span><b>重来</b></button><button id="hint" class="game-tool" data-tool="hint"><span class="item-face" 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="item-study" id="item-study"><div class="section-heading"><div><span class="eyebrow">GAME ITEMS / 功能与道具</span><h2>让道具一眼可辨。</h2></div><p>随上方设计切换 · 角标仅为未来状态示意</p></div><div class="item-study-content" id="item-study-content"></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>