资源包只有一个正式页面入口 index.html，样式、脚本、字体图标和演示图片按 css、js、webfonts 与 img 目录组织。无需 npm、构建命令或前端框架编译，修改静态文件后即可放到普通静态主机预览；需要真实业务数据时，则要继续接入菜单、订单和表单服务。

一页串联菜品浏览、品牌说明与到店预订

所有导航入口都指向当前页面内的锚点，脚本会在滚动时切换导航状态，并在移动菜单点击后关闭 Bootstrap 折叠导航。因此，这套结构更适合希望用一个页面完成“看菜单—了解门店—查看评价—提交预订或咨询”的餐饮展示，而不是需要独立商品详情、结算和会员中心的完整外卖商城。

菜单筛选与菜品弹窗是主要交互

• 分类筛选：菜单区提供全部、汉堡、披萨、炸鸡、卷饼、甜点和意面按钮，根据卡片的 data-c 值切换显示；上方分类卡片也会滚动到菜单并触发同一筛选。
• 搜索浮层：导航搜索按钮会打开覆盖层，分类按钮可直接筛选菜单，趋势词只负责填入输入框；源码没有根据手动输入文字执行搜索的逻辑。
• 菜品弹窗：点击菜单卡片会读取图片、名称、类别、价格、评分、热量、制作时间和标签等 data-* 数据，并生成详情弹窗。数量按钮和“加入购物车”只修改当前页面状态，不会保存订单。
• 食物图库：五张图库卡片使用自定义遮罩层展示大图、标题和描述，并提供上一张、下一张及 Esc 关闭操作。
• 评价轮播：Swiper 在窄屏显示一张评价卡，宽度达到 640px 和 1024px 后分别显示两张和三张，并开启四秒自动轮播。

红橙配色和三组字体集中控制餐饮视觉

主样式表顶部定义了红色 #e8281a、橙色 #f6a623、深色 #1a1a1a 和两组奶油背景色，按钮、图标、标签、渐变和滚动条都围绕这些变量展开。先修改 --primary、--secondary、--dark、--cream 与 --cream2，可以快速建立新的餐厅品牌色，再逐块检查局部对比度。

正文使用 Poppins，标题使用 Playfair Display，手写装饰文字使用 Dancing Script，三组字体均通过 Google Fonts 远程加载。模板同时打包了 Font Awesome 和 Icomoon 字体文件。若部署环境无法稳定访问外部字体服务，应把所需字体改为本地托管或替换为可靠的本地字体栈。

预订、联系和订阅目前只有前端反馈

预订区提供姓名、电话、邮箱、人数、日期、时间和特殊要求等输入项，联系区也包含姓名、邮箱、电话、主题和留言；但页面没有表单提交地址，也没有 fetch、Ajax 或邮件接口。点击按钮后，脚本只等待约 1.5 秒并显示成功提示，没有校验服务器是否真正收件。

订阅输入框只检查内容是否包含 @，随后暂时改变按钮文字。演示中的订单数量、限时倒计时、顾客评价、门店数字、地址、电话、博客链接和社交链接也都是静态数据或占位入口。正式上线前需要连接表单服务或自有后端，并补充必填校验、错误状态、重复提交处理、隐私说明和真实成功回执。

依赖文件已本地打包，但仍需确认实际使用范围

资源包内含 Bootstrap 5.3、jQuery 3.7.1、AOS、Swiper 和 Magnific Popup 的样式或脚本文件。Bootstrap 负责网格与移动导航，AOS 处理滚动显现，Swiper 用于评价轮播，Magnific Popup 初始化了 iframe 弹层能力；菜单详情和图库则由 js/main.js 中的自定义脚本控制。

实际页面不需要包管理器，也没有编译步骤。部署时应保留 HTML 中引用的相对目录结构，并在删除区块后同步清理对应脚本和资源。若只保留餐厅介绍与预订，可移除未使用的购物车状态、博客占位链接和促销倒计时，减少后续维护范围。

建议从真实菜单数据和转化入口开始修改

1. 先替换品牌名称、Logo、首屏文案、联系方式、地址、营业时间和社交账号。
2. 逐张更新菜品图片、分类、名称、价格、描述及卡片中的 data-* 属性，确保列表和弹窗显示一致。
3. 删除演示用的顾客数字、奖项、发展历史、厨师资料、评价和博客内容，换成能够公开使用的真实信息。
4. 根据业务范围连接预订、联系和订阅接口；需要线上点单时，另行接入商品、库存、购物车、订单与支付系统。
5. 决定是否本地托管 Google Fonts，并检查第三方库中未使用的文件是否可以移除。
6. 最后在手机、平板和桌面宽度下检查粘性导航、筛选按钮、菜品弹窗、图库、轮播和输入区域，再部署到正式环境。