PowerFlow - 健身房健身和瑜伽 HTML 模板

# 项目简介 PowerFlow 是一款面向健身房、健身俱乐部和瑜伽馆的专业 HTML 模板，提供 4 种首页布局以及课程展示、博客、团队、定价、预约等功能页面。基于 Bootstrap 5 构建，完全响应式，支持深色/浅色主题切换和 RTL 模式，开箱即用，适合快速搭建健身类商业网站。 ## 技术栈 - Bootstrap 5（CSS 框架，响应式布局） - jQuery（DOM 操作与交互） - Swiper.js（轮播与滑动组件） - Google Fonts（Zalando Sans 字体） - FontAwesome 4/6 + 多款 Icon Font（图标库） ## 项目结构 ``` PowerFlow/ ├── PowerFlow/ │ ├── index.html # 首页入口 │ ├── 02_homepage-*.html # 其他首页变体 │ ├── classes.html # 课程列表 │ ├── class-single.html # 课程详情 │ ├── about.html # 关于我们 │ ├── team.html # 团队成员 │ ├── pricing.html # 定价方案 │ ├── schedule.html # 课程表 │ ├── contact.html # 联系页面 │ ├── join.html # 入会表单 │ ├── blog.html # 博客列表 │ ├── blog-single.html # 博客详情 │ ├── css/ # 样式文件 │ │ ├── bootstrap.min.css │ │ ├── style.css # 主样式 │ │ └── coloring.css # 配色方案 │ ├── js/ # 脚本文件 │ │ ├── designesia.js # 核心交互 │ │ ├── swiper.js # 轮播组件 │ │ └── validation-*.js # 表单验证 │ ├── fonts/ # 图标字体 │ ├── images/ # 图片资源 │ └── video/ # 视频资源 └── documentation/ └── index.html # 官方文档 ``` ## 核心文件说明 - `index.html` — 网站首页入口，包含导航、幻灯片、课程推荐模块 - `css/style.css` — 主样式表，定义全站排版、颜色、间距等变量 - `js/designesia.js` — 核心交互逻辑，负责导航、滚动效果、主题切换等 - `js/swiper.js` — 轮播图/课程卡片的滑动实现 - `css/coloring.css` — 主题配色预设，可切换不同色系方案 - `contact.php` / `join.php` — 表单后端处理文件（需配合 PHP 环境） ## 快速开始 1. 直接用浏览器打开 `PowerFlow/index.html` 即可预览； 2. 如需本地服务器以获得完整字体加载体验，可执行： ```bash python3 -m http.server 8080 ``` 然后访问 `http://localhost:8080/PowerFlow/index.html`； 3. 编辑 HTML 文件时推荐使用 VS Code 或 Sublime Text，参照 `documentation/index.html` 中的 Bootstrap 栅格布局说明进行定制。 ## 使用建议 该模板为纯静态页面，若要启用联系/入会表单的邮件发送功能，需将 `contact.php` 和 `join.php` 部署至支持 PHP 的 Web 服务器，或替换为第三方表单服务（如 Formspree）进行替代。