盲文解密盒

做一个单文件 HTML 的「盲文解密盒 Braille Decryption Box」。 屏幕上只有 6 个圆形凸起，按照标准盲文的 2×3 点位（左列从上到下为 1、2、3 号点，右列从上到下为 4、5、6 号点）排列。用户通过点击切换每个点位的凹凸状态（凸起 = 选中，凹陷 = 未选中）。页面上没有任何视觉文字提示告诉用户该怎么做或当前拼出了什么。当用户拼出正确的盲文编码时，触发一个令人满足的机关弹出/解锁动画。 请输出完整的单文件 HTML（内联 CSS + JS）。允许通过 CDN 引入 Google Fonts 和开源库。

制作一个单文件 HTML 的 **盲文解密盒（Braille Decryption Box）** ——一个极简硬件风格的盲文解密装置。核心设计哲学：**没有任何视觉文字提示**，用户完全依赖触觉隐喻和音效反馈来操作和理解。 ```` ### 核心交互 **点阵布局：** 屏幕中央是标准盲文的 2×3 点阵，6 个圆形凸起。左列从上到下编号 1、2、3，右列从上到下编号 4、5、6（对应国际盲文标准点位）。 **点击反馈：** - 每个点位可点击切换凹凸状态（凸起 = 选中，凹陷 = 未选中） - 切换时播放物理"咔哒"声——不同点位的音调有细微差异（如 1 号点最低沉，6 号点最清脆），让用户仅凭听觉就能分辨自己点击了哪个点位 - 凸起和凹陷两个方向的咔哒声应有区别（如按下沉闷、弹起清脆） - 使用 Web Audio API 合成音效，不依赖外部音频文件 **视觉质感：** - 点位必须有强烈的物理凸起/凹陷感——用 CSS 阴影、渐变模拟真实的圆形金属或塑料凸起 - 整体装置像一个实体硬件设备：有面板边框、螺丝孔装饰、金属/磨砂塑料质感 - 配色克制：深灰/炭黑/银色为主，不使用鲜艳颜色 - 切换凹凸时有微小的 CSS 过渡动画（下压/弹起感） ### 关卡系统 **难度递进：** 设计至少 8 个关卡，难度从简单到复杂： 1. **第 1-2 关（单字母）：** 解密单个英文字母的盲文编码（如 A = 点1，B = 点1+2） 2. **第 3-4 关（数字）：** 解密数字的盲文编码（盲文数字需要数字前缀符 ⠼ + 对应字母） 3. **第 5-6 关（常见缩写）：** 解密盲文中的常见缩写符号（如 "the"、"and" 等 Grade 2 Braille 缩写） 4. **第 7-8 关（短单词）：** 逐字母输入，拼出完整短单词（如 "code"、"open" 等），每输入正确一个字母自动推进到下一个 **关卡流转：** - 拼出正确编码后，播放解锁成功的音效（金属锁扣弹开声 / 齿轮旋转声） - 触发令人满足的机关动画——如面板滑开露出下层、齿轮旋转解锁、金属锁栓弹出等 - 动画结束后自动进入下一关，点阵重置为全凹陷状态 - 全部通关后有终极解锁动画和完成画面 **反馈机制（非文字）：** - **错误容忍：** 不显示"错误"文字——如果当前组合不正确，什么都不会发生（沉默即反馈） - **接近提示（可选）：** 当用户的组合接近正确答案时（如 6 个点位中有 4-5 个正确），给出细微的视觉暗示——如装置边缘微微发出暖光、或面板轻微震动 - **关卡进度：** 可以用小型指示灯（非文字）暗示当前是第几关 ### 设计规范 - **无文字原则：** 页面上不得出现任何可读文字（标题、说明、提示语均不允许）——唯一的例外是最终通关画面可以有一行祝贺文字 - **硬件拟物风格：** 整体像一个实体解密装置 / 保险箱面板 / 密码锁设备 - **响应式：** 适配桌面和移动端，移动端点位大小需保证可点击舒适（至少 48px 触控区域） - **音效细节：** 所有音效使用 Web Audio API 程序化生成（OscillatorNode + GainNode），包括点击咔哒声、解锁齿轮声、通关音效。不使用外部音频文件 ```` 请输出完整的单文件 HTML（内联 CSS + JS）。允许通过 CDN 引入 Google Fonts 和开源库。

制作一个单文件 HTML 的 **盲文解密盒（Braille Decryption Box）** ——一个**带学习教程的**极简硬件风格盲文解密装置。核心设计哲学：**几乎没有视觉文字提示**，用户依赖触觉隐喻和音效反馈来操作。 增加一个**盲文学习教程模块**——让完全不懂盲文的用户也能从零开始学会盲文编码规则，然后逐步过渡到解密挑战。 ```` ### 教程模块 **教程定位：** 在解密挑战之前，提供一个循序渐进的盲文入门教程。教程结束后无缝衔接到解密关卡。 **教程内容（建议 5-7 步）：** 1. **点位认识：** 展示 2×3 点阵，每个点位逐一高亮并播放对应音调，让用户认识 6 个点位的位置和编号关系（此步骤可用极简的数字标注，是"无文字原则"的唯一例外区域） 2. **第一个字母：** 引导用户点亮点 1，展示这就是字母 A 的盲文编码。成功后给出正反馈（微光、音效） 3. **组合入门：** 引导用户依次体验 B（点1+2）、C（点1+4），理解多点组合的概念 4. **自由探索：** 暂时解锁一个"自由模式"——用户随意切换点位，旁边用盲文点阵动画实时显示当前组合对应的字母（注意：用盲文符号本身展示，不用拉丁字母明文，保持神秘感） 5. **数字前缀：** 介绍盲文数字需要前缀符 ⠼ 的概念，引导用户体验数字编码 6. **准备就绪：** 教程结束提示（可用简单图标如 ✓ 或锁打开动画），过渡到正式解密关卡 **教程设计原则：** - 教程中允许使用**极少量**的引导性视觉元素（如箭头动画指向特定点位、点位编号），但仍应尽量克制 - 教程本身也应保持硬件拟物风格——像设备附带的快速上手卡片，而非软件弹窗教程 - 教程可跳过（给有盲文基础的用户提供"跳过教程"的入口，用图标而非文字） - 教程进度用指示灯或进度点表示，不用文字 ### 核心交互（在教程结束之后） **点阵布局：** 屏幕中央是标准盲文的 2×3 点阵，6 个圆形凸起。左列从上到下编号 1、2、3，右列从上到下编号 4、5、6（对应国际盲文标准点位）。 **点击反馈：** - 每个点位可点击切换凹凸状态（凸起 = 选中，凹陷 = 未选中） - 切换时播放物理"咔哒"声——不同点位的音调有细微差异（如 1 号点最低沉，6 号点最清脆），让用户仅凭听觉就能分辨自己点击了哪个点位 - 凸起和凹陷两个方向的咔哒声应有区别（如按下沉闷、弹起清脆） - 使用 Web Audio API 合成音效，不依赖外部音频文件 **视觉质感：** - 点位必须有强烈的物理凸起/凹陷感——用 CSS 阴影、渐变模拟真实的圆形金属或塑料凸起 - 整体装置像一个实体硬件设备：有面板边框、螺丝孔装饰、金属/磨砂塑料质感 - 配色克制：深灰/炭黑/银色为主，不使用鲜艳颜色 - 切换凹凸时有微小的 CSS 过渡动画（下压/弹起感） ### 关卡系统 **难度递进：** 设计至少 8 个关卡，难度从简单到复杂： 1. **第 1-2 关（单字母）：** 解密单个英文字母的盲文编码（如 A = 点1，B = 点1+2） 2. **第 3-4 关（数字）：** 解密数字的盲文编码（盲文数字需要数字前缀符 ⠼ + 对应字母） 3. **第 5-6 关（常见缩写）：** 解密盲文中的常见缩写符号（如 "the"、"and" 等 Grade 2 Braille 缩写） 4. **第 7-8 关（短单词）：** 逐字母输入，拼出完整短单词（如 "code"、"open" 等），每输入正确一个字母自动推进到下一个 **关卡流转：** - 拼出正确编码后，播放解锁成功的音效（金属锁扣弹开声 / 齿轮旋转声） - 触发令人满足的机关动画——如面板滑开露出下层、齿轮旋转解锁、金属锁栓弹出等 - 动画结束后自动进入下一关，点阵重置为全凹陷状态 - 全部通关后有终极解锁动画和完成画面 **反馈机制（非文字）：** - **错误容忍：** 不显示"错误"文字——如果当前组合不正确，什么都不会发生（沉默即反馈） - **接近提示（可选）：** 当用户的组合接近正确答案时（如 6 个点位中有 4-5 个正确），给出细微的视觉暗示——如装置边缘微微发出暖光、或面板轻微震动 - **关卡进度：** 可以用小型指示灯（非文字）暗示当前是第几关 ### 设计规范 - **无文字原则：** 解密关卡中不得出现任何可读文字。教程模块允许极少量引导文字（仅限点位编号和必要的教学指引），但应尽量用动画和图标替代 - **硬件拟物风格：** 整体像一个实体解密装置 / 保险箱面板 / 密码锁设备 - **教程↔挑战过渡：** 教程结束到解密关卡的过渡要自然流畅（如面板翻转、设备"重启"动画） - **响应式：** 适配桌面和移动端，移动端点位大小需保证可点击舒适（至少 48px 触控区域） - **音效细节：** 所有音效使用 Web Audio API 程序化生成（OscillatorNode + GainNode），包括点击咔哒声、解锁齿轮声、通关音效。不使用外部音频文件 ```` 请输出完整的单文件 HTML（内联 CSS + JS）。允许通过 CDN 引入 Google Fonts 和开源库。