Sarab 是一套面向快餐店、餐厅和咖啡馆的响应式单页 HTML 模板。页面把菜品分类、菜单价格、限时促销、餐厅故事、厨师团队、营业时间、顾客评价、预订和联系入口集中在同一条滚动路径中，适合用作餐饮品牌展示与到店预订前端；它基于 Bootstrap 5 和原生前端脚本，不包含订单、邮件或预订管理后端。
资源包只有一个正式页面入口 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 中引用的相对目录结构，并在删除区块后同步清理对应脚本和资源。若只保留餐厅介绍与预订，可移除未使用的购物车状态、博客占位链接和促销倒计时，减少后续维护范围。
建议从真实菜单数据和转化入口开始修改
- 先替换品牌名称、Logo、首屏文案、联系方式、地址、营业时间和社交账号。
- 逐张更新菜品图片、分类、名称、价格、描述及卡片中的
data-*属性，确保列表和弹窗显示一致。 - 删除演示用的顾客数字、奖项、发展历史、厨师资料、评价和博客内容，换成能够公开使用的真实信息。
- 根据业务范围连接预订、联系和订阅接口；需要线上点单时，另行接入商品、库存、购物车、订单与支付系统。
- 决定是否本地托管 Google Fonts，并检查第三方库中未使用的文件是否可以移除。
- 最后在手机、平板和桌面宽度下检查粘性导航、筛选按钮、菜品弹窗、图库、轮播和输入区域，再部署到正式环境。
暂无评论内容