请帮我开发一个名为「随机吃」的 H5 移动端网页应用，解决"今天吃什么"的选择困难症。

【产品定位】
一款有趣的美食决策工具，通过盲盒随机、智能匹配、个性化推荐三种方式帮助用户快速决定吃什么。

【设计风格】
- 暖米橙色系：背景 #FFF8F0，主色 #E8622A，副文字 #A09080
- 圆润卡片风格，圆角 16px，柔和阴影
- 移动端优先，最大宽度 480px 居中适配
- 动效丰富：盲盒摇晃开盒动画、粒子浮动背景、卡片弹入动画

【三大核心功能模块】

1️⃣ 随机吃（首页/盲盒模式）
- 礼盒造型的盲盒，点击后摇晃→开盒动画→弹出随机菜品
- 展示菜品图片、名称、描述、标签（菜系/口味/场景/热量）
- 三种操作按钮：自己做（跳转菜谱）、点外卖（复制菜名引导）、出去吃（打开地图）
- 多维筛选功能：菜系(8种)、口味(6种)、场景(5种)、热量范围、排除食材
- 热门推荐横向滚动列表

2️⃣ 随便做（食材匹配模式）
- 5大食材分类展示（肉类/蔬菜/海鲜/主食/调料），支持搜索
- 用户点选已有食材后，智能匹配可做的菜谱
- 匹配结果显示匹配度、缺少的食材（可直接购买）
- 支持一键随机填充食材

3️⃣ 我的（个性化设置）
- 口味偏好设置（16种口味标签多选）
- 饮食禁忌设置（过敏原/不吃的食材）
- 养生目标选择（减脂/增肌/养生/无特定目标）
- 设置会影响随机吃的推荐权重

【数据要求】
- 内置 109 种食物数据库，每种包含名称、描述、菜系、口味标签、场景标签、热量、图片
- 内置 109 份完整菜谱，含食材清单和分步烹饪步骤
- 5 大分类 100+ 食材库
- 所有数据内置在本地 JS 文件中，无需后端

【技术要求】
- 纯前端 HTML + CSS + JS，单文件 index.html + 数据文件
- 底部 TabBar 切换三个页面（随机吃/随便做/我的）
- 使用 CSS 动画实现交互效果，无需额外框架
- 响应式设计，适配手机屏幕
- 部署到 EdgeOne Makers

【交互细节】
- 盲盒点击 → 摇晃1.5秒 → 加载动画 → 结果卡片弹入
- 筛选底部弹窗，标签式多选
- 外卖/外出操作使用系统原生能力（剪贴板/地图）
- Toast 提示反馈

Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Makers.