Tea Brand Site｜纯静态新中式品牌官网生成器
> v1.2.0 更新：
> 1. 游戏画面修复：相机改为每帧跟随角色（camX = player.x - PLAYER_SCREEN_X 在每帧逻辑更新中执行），
> 修复了「画面不随角色移动、角色跑出屏幕」的问题；
> 2. 问卷独立成页：q1~q6 问卷从首页迁出，独立为 survey.html（页面名「问卷调查」），
> 首页保留入口横幅跳转，5 页之间全部可通过统一导航互跳；
> 3. 新增配图命名规范：每个页面配图按「页面名.jpg」命名（首页.jpg / 产品.jpg / 关于我们.jpg / 问卷.jpg / 游戏.jpg）。
>
> v1.1.0 更新：game3.html 由「见缝插茶叶」点格玩法整体重写为「茶山跑酷」横版闯关游戏
> （跳跃 / 二段跳 / 滑铲 + 碰撞 + 多关卡 + 生命 + 粒子特效 + 视差背景 + WebAudio 合成音效）；
> 页面显示名统一为「游戏」，不再使用 game3.0 这类版本号。
Overview
本技能用于生成一套纯静态、离线可用、双击即可在浏览器打开的品牌官网（4 个 HTML 文件）。
默认主题为「新中式国风 · 老字号茶叶品牌」，但同一套结构与规范可直接套用于其他品牌（替换文案与配色即可）。
核心特征：
- 5 个页面：index.html、product.html、about.html、survey.html、game3.html
- 统一顶部导航（首页 / 产品 / 关于我们 / 问卷调查 / 互动小游戏），任意页面可互跳（相对路径）
- survey.html 为独立问卷页，承载 q1~q6 共 6 题（页内提交，不逐题跳转）；首页放入口横幅
- game3.html 为「茶山跑酷」横版闯关小游戏：相机每帧跟随角色，跳跃 / 二段跳 / 滑铲躲避障碍与茶坑，每关固定 15 片茶叶
- CSS / JS 全部内嵌，原生 JavaScript，无任何外部依赖
- 中文注释、未压缩、排版清晰，方便后续手工修改
硬性要求（不可违反，逐条核对）
生成时必须逐条满足以下要求，任意一条不满足即为不合格：
- 恰好 5 个网页文件，文件名必须精确为：
index.html、product.html、about.html、survey.html、game3.html - 统一顶部导航栏，菜单项固定为：首页 / 产品 / 关于我们 / 问卷调查 / 互动小游戏。
四个页面顶部导航完全一致，任意页面之间都能互相跳转，跳转必须使用相对路径（如href="product.html"），
不得使用绝对路径、不得使用http://、file://或服务器路由。 survey.html为独立的问卷调查页（页面名「问卷调查」），承载题目编号q1到q6，共 6 道题。
题目在survey.html同一页面内展示与提交（JS 拦截表单，不逐题跳转），
绝对禁止把q1~q6逐题拆成独立网页（不得生成q1.html之类的文件）。
index.html首页只放问卷入口横幅（<a href="survey.html">跳转按钮），不内嵌问卷本体。game3.html的页面标题固定为「游戏」（茶山跑酷横版闯关小游戏），禁止写版本号（如 game3.0），游戏规则：
- 玩法为横版跑酷闯关：角色自动向前奔跑，玩家用跳跃 / 二段跳 / 滑铲躲避地面障碍、
茶坑、悬空茶蝶与必须滑铲钻过的茶幡，一路采茶，跑到终点「茶棚」即过关；
- 每一关的茶叶数量固定为 15 片（不随关卡增减，这是硬性数字约束）；
跑到茶棚即通关，集齐 15 片则升级为「圆满通关」并额外加分；
- 关卡难度通过奔跑速度、地形复杂度、障碍种类与密度递进，绝不允许改动茶叶数量；
- 该页面必须保留全站统一导航栏，可以跳回网站其他页面（不得做成孤立页面或独立新窗口）。
- 相机必须每帧跟随角色：在每帧逻辑更新中执行camX = player.x - PLAYER_SCREEN_X，
严禁只在关卡初始化时设置一次（否则画面静止、角色跑出屏幕，属重大缺陷）；
- 技术实现：内嵌<canvas>+ 原生 JS（requestAnimationFrame），
不引用任何外部素材（图形全部由 Canvas 绘制，音效由 WebAudio 实时合成）。- 图片的
img标签代码由用户提供后原样放入：
不要修改图片代码格式、不要改动src、不要增删属性、不要替换图片地址。
在用户提供图片代码之前，图片位置一律使用注释占位并注明文件名：
<!-- 在此粘贴用户提供的图片代码（首页.jpg：首页主视觉大图） -->。
每个页面至少一个配图位，配图文件按「页面名.jpg」命名：
首页 →首页.jpg；产品 →产品.jpg；关于我们 →关于我们.jpg；问卷 →问卷.jpg；游戏 →游戏.jpg。
同一页面多张配图追加序号（首页2.jpg、首页3.jpg…）。 - 样式风格：新中式国风、老字号茶叶品牌调性；优先电脑端 1920 布局。
CSS、JS 全部内嵌在 HTML 文件内部，禁止外部单独.css/.js文件；
使用原生 JavaScript，保证离线可用（不得引用 CDN、字体外链、外网 script/style）。 - 代码带上中文注释，排版清晰，方便后续修改，不要压缩代码（保留换行与缩进）。
- 禁止事项：
- 不要服务器、不要 php、不要 node、不要任何后端或构建工具
- 不要把问卷q1~q6拆成独立跳转页面
- 不要擅自改写用户提供的图片代码
- 不要引入任何外部 CSS/JS/字体/图片网络资源（保证离线可开）
工作流
第 1 步：确认输入
生成前确认两点（若用户未说明则使用默认值）：
- 品牌信息：品牌名、主营品类、主打卖点（默认按「老字号茶叶」示例填写）
- 图片代码：用户若已提供 img 标签代码 → 原样嵌入；若未提供 → 全部用 <!-- 在此粘贴用户提供的图片代码 --> 占位
第 2 步：生成 4 个页面
严格按 references/site-spec.md 中的规范生成。
建议先复制 assets/example-site/ 下的 4 个文件作为骨架，再按品牌信息替换文案与配色：
- index.html：Hero 主视觉 + 品牌故事摘要 + 问卷入口横幅（跳转 survey.html）
- product.html：产品栅格卡片（名称 / 等级 / 卖点 / 价格）
- about.html：品牌沿革、制茶工艺、荣誉资质
- survey.html：独立问卷页（页面名「问卷调查」，承载 q1~q6，页内提交并展示结果）
- game3.html：页面标题固定为「游戏」的茶山跑酷横版闯关小游戏
（跳跃 / 二段跳 / 滑铲 · 相机每帧跟随角色 · 每关固定 15 片茶叶 · 含计分 / 生命 / 关卡进度条 / 过关 / 重玩）
第 3 步：自检（交付前必须逐项确认）
- [ ] 文件恰好 5 个，文件名完全正确
- [ ] 5 个页面顶部导航一致（含「问卷调查」项），相对路径互相可跳转
- [ ]
survey.html含q1~q6六道题，本页内完成提交与结果展示；index.html只放入口横幅；无q1.html之类逐题页 - [ ]
game3.html页面标题为「游戏」（不得出现 game3.0 之类的版本号），保留全站导航，是可操作的横版跑酷（跳跃 / 二段跳 / 滑铲 + 碰撞 + 多关卡），且每关茶叶数恒为 15 片 - [ ] 游戏运行中相机持续跟随角色（画面随角色滚动，角色不会跑出屏幕）
- [ ] 每个页面至少一个配图占位，且注释中标注了对应文件名（首页.jpg / 产品.jpg / 关于我们.jpg / 问卷.jpg / 游戏.jpg）
- [ ] 所有
img与用户提供的代码逐字一致（若已提供） - [ ] 无外部
.css/.js/ CDN / 网络字体引用 - [ ] CSS/JS 全部内嵌，原生 JS，带中文注释，未压缩
- [ ] 双击任一 HTML 能在本地浏览器正常打开并跳转
第 4 步：交付
输出 5 个 HTML 文件，并附一段简短说明：页面用途、导航跳转方式、问卷与游戏位置、后续替换图片/文案的位置，
以及配图命名对照表（首页.jpg / 产品.jpg / 关于我们.jpg / 问卷.jpg / 游戏.jpg，多图加序号）。
Resources
references/site-spec.md
5 页网站的详细技术规范：统一 <head>、导航栏标准代码（5 项）、配色与字体变量、
1920 布局规范、survey.html 问卷页规范（q1~q6 交互）、茶山跑酷游戏规范
（物理参数 / 逐帧相机跟随 / 关卡节拍生成 / 碰撞规则 / 输入手感 / 音效 / 关卡平衡原则）、
图片占位与配图命名规范、常见误区。
生成页面时务必先阅读本文件。
assets/example-site/
一套可直接双击打开的完整示例网站（5 个 HTML 文件），已满足全部硬性要求。
作为生成新站点时的骨架模板：
- index.html（含问卷入口横幅）
- product.html
- about.html
- survey.html（独立问卷页，q1~q6）
- game3.html（茶山跑酷闯关小游戏，相机跟随角色）
使用时复制该目录，替换品牌文案与图片代码即可。
