项目简介
Roda 是一款面向游戏商店与电商场景的 HTML5 模板，采用暗色系主题，集成商品展示、购物车、结算、博客、NFT 专区、赛事列表等多种页面。模板基于 Bootstrap 5 构建，配合 GSAP 动画引擎和 Lenis 平滑滚动，提供完整的响应式布局和交互体验，适合快速搭建游戏周边产品销售平台。
技术栈
- HTML5 / CSS3（静态模板）
- Bootstrap 5.3（栅格与基础组件）
- GSAP + ScrollTrigger（动画与视差滚动）
- Lenis（平滑滚动）
- WOW.js（滚动动画触发）
- Font Awesome 6 Pro（图标库）
- Slick Slider / Magnific Popup（轮播与弹窗）
- jQuery（DOM 操作与插件调用）
项目结构
text
rodahtml-10/
├── documentation/ # 模板说明文档（离线）
│ ├── index.html
│ └── assets/css/style.css
├── download version/ # 可直接使用的完整模板
│ ├── index.html # 首页（主模板）
│ ├── shop.html # 商品列表页
│ ├── shop-details.html # 商品详情页
│ ├── cart.html # 购物车
│ ├── checkout.html # 结算页
│ ├── blog.html # 博客列表
│ ├── blog-details.html # 博客详情
│ ├── about.html # 关于我们
│ ├── contact.html # 联系页面
│ ├── team.html # 团队成员
│ ├── nft-shop.html # NFT 商品页
│ ├── tournament-list.html # 赛事列表
│ ├── faq.html # 常见问题
│ ├── wishlist.html # 收藏夹
│ ├── service.html # 服务页
│ ├── mail.php # 联系表单后端
│ └── assets/
│ ├── css/ # 样式文件（含 sass 目录结构注释）
│ ├── fonts/ # Font Awesome 字体
│ └── img/ # 图片资源
核心文件说明
download version/index.html— 首页入口，定义全站头部、底部与主要内容区结构download version/assets/css/style.css— 主样式表，包含所有模板样式定义download version/assets/js/main.js— 交互逻辑，涵盖 GSAP 动画、移动端菜单、滚动置顶等30余项功能download version/mail.php— 联系表单的 PHP 后端处理脚本documentation/index.html— 离线模板使用文档，包含安装说明与定制指引
快速开始
纯静态项目，无需安装依赖。将 download version 目录内容上传至 Web 服务器（或通过 python -m http.server 本地预览），直接在浏览器打开 index.html 即可。模板说明文档位于 documentation/index.html，可离线查阅。
使用建议
下载版本中 index.html 为完整首页参考，其他页面（shop、cart、blog 等）可直接复制修改。如需对接后端，联系表单已预留 mail.php 接口；若集成真实电商逻辑，需自行接入 WooCommerce 或其他购物车系统。
