https://birthday-cake.online/ 是一款可以在浏览器中直接使用的，用来模拟生日吹蜡烛场景的互动程序，用户打开应用，配置生日场景后，通过对着麦克风吹气，就能实时吹灭屏幕中的虚拟生日蛋糕上燃烧的蜡烛。还可以将布置好的蛋糕场景生成专属链接分享给好友，让其在线体验这份吹蜡烛的互动惊喜。
本文为该软件的概要设计文档。
应用界面
- 全局布局：顶导航+内容+footer
- 样式风格：部分文案字体使用快乐体
一、开始界面
功能区：由上到下分别是标题、标题下的提示文案、虚拟蛋糕（包含蜡烛）、开始按钮区域（包含两个按钮：“布置蛋糕”和“直接开始”）。底部开始按钮区域并非线性排在虚拟蛋糕下面，而是使用背景遮罩，遮住蛋糕的三分之一左右，这样能够引导用户去点击，以免用户不知道吹蛋糕之前需要先进行配置。功能区的组件，加上 header 占据屏幕高度。
文本区：用户还可向下滚动，查看 FAQ、使用帮助等。
二、蛋糕布置界面
此界面用来个性化配置蛋糕场景。
- 抽屉组件：布置蛋糕的界面需实现抽屉组件，桌面端从右侧滑入，移动端从底部划入。
- 步骤项：抽屉中的内容为蛋糕场景配置项，实现为有序步骤条（顶部进度步骤条，可任意切换步骤，中间为表单内容，底部为上下步切换按钮）。
SEO 实现要求：抽屉，及抽屉内所有步骤中的内容， DOM 首屏完整渲染，不用 display，仅视觉隐藏；步骤用 ol 有序列表、规范 h2/h3 标题层级、全表单 label 语义化；保证爬虫抓取全部内容。
用户可以配置的内容包括：选择蛋糕（有默认）、选择蜡烛（有默认）、编辑祝福语（可跳过）、调整麦克风灵敏度。
三、吹蜡烛互动界面
- 吹蜡烛互动界面：显示布置好的生日蛋糕场景，这是庆祝生日时使用的关键页面，用户在这个界面可以进行吹蛋糕动作，在已完成配置的状态下显示。界面中的元素包括：祝福语、提示、蛋糕（包含蜡烛）。右下脚为操作按钮区域，有锁定、分享等按钮，按钮中的内容为对应的 icon 。按钮纵向排列
应用功能
功能一、布置蛋糕场景功能
通过填写表单，布置蛋糕。布置过程中可实时预览。
- 蛋糕选择功能：提供多种蛋糕可选
- 上传自定义蛋糕功能：除了支持预设的蛋糕，如果您对蛋糕的样式不满，还可以上传蛋糕图片。
- 蜡烛选择功能：可以选择使用经典款和数字款蜡烛。
- 调整蜡烛数量功能：根据年龄，选择对应的蜡烛数量，最大支持摆放50只蜡烛。更大的年龄可以选择使用数字型蜡烛。
- 录入祝福语功能：填入寿星(birthday honoree)的名字、留言(note)、祝福发起者(sender)，蛋糕界面会有提示语。
蛋糕界面：祝福语，包含 xxx 署名等
功能二、吹蛋糕功能
-
吹气进度条功能：吹满进度条，蜡烛才会熄灭。
-
对麦克风吹气，吹灭蜡烛。蜡烛吹灭时，播放烟花效果，还要有气球🎈
-
锁定、解锁功能：防止一有风吹草动，蜡烛就被吹灭。完成配置后，可以点击一个解锁/锁定的按钮。锁定情况下，检测到吹气，蜡烛页不会灭
状态 麦克风 进度条 吹蜡烛 锁定 ❌ 不工作 ❌ 不走 ❌ 吹不灭 解锁 ✅ 正常工作 ✅ 正常走 ✅ 可以吹灭 -
麦克风灵敏度调节功能：由于设备差异，不同用户对麦克风灵敏度的感知不同，有的人反馈太过灵敏，还没开始吹就灭了，有的人反馈蜡烛吹不灭。不同手机，麦克风灵敏度有所区别，在给你的朋友吹之前，可以先通过调节灵敏度，确保处于最适合的状态。
-
作弊功能：如果发现吹不灭，麦克风失效，怎么办？为了防止还是有问题莫名其妙的故障导致吹不灭，那么，界面上有一个微笑的作弊按钮，长按后也能让蜡烛熄灭。桌面端则可以长按空格键。
-
全屏显示功能：为了打造更沉浸式的体验，用户在吹蛋糕时，应该全屏显示蛋糕场景界面，全屏应该只针对蛋糕场景，header 、footer 等不应包含在内。配置完蛋糕后，默认是直接进入全屏显示的，如果不慎退出，也应该有全屏按钮让用户再次进入全屏
