Roda - NFT Gaming & E-commerce HTML Template

# 项目简介 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 操作与插件调用） ## 项目结构 ``` 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 或其他购物车系统。