Tawba - Islamic Center HTML Template

# 项目简介 `tawba` 是一款面向伊斯兰文化中心（Islamic Center）的 HTML 模板，基于 Bootstrap 5 构建，提供首页、博客、活动、课程、慈善、商城、祈祷时间等完整页面，适合用于清真寺、伊斯兰教育机构或非营利组织的官方网站。 ## 技术栈 - **框架**: Bootstrap 5 - **样式**: SCSS + CSS（`style.css`） - **图标**: Font Awesome 6 Pro - **字体**: Google Fonts（Playfair Display + Inter） - **交互**: jQuery - **其他**: Swiper Slider、Magnific Popup、NiceSelect ## 项目结构 ``` tawbahtml-10/ ├── documentation/ # 模板使用文档 │ ├── index.html │ ├── css/ │ └── images/ ├── download-version/ # 生产版本 │ ├── index.html # 首页入口 │ ├── home-*.html # 3 种首页变体 │ ├── blog*.html # 博客列表/详情 │ ├── event*.html # 活动列表/详情 │ ├── courses-details.html │ ├── charity*.html │ ├── sermon*.html │ ├── shop*.html # 商城页面 │ ├── prayer-times.html │ ├── contact.html │ ├── mail.php # 邮件处理 │ └── assets/ │ ├── css/style.css │ ├── js/main.js │ └── img/ ``` ## 核心文件说明 - `download-version/index.html` — 入口首页（Al Noor Haven 风格） - `assets/js/main.js` — 主导脚本，含移动端菜单、滚动置顶、轮播、表单提交等 20+ 功能模块 - `assets/css/style.css` — 主样式文件，采用 CSS 变量定义主题色（`--theme-color: #374868`） - `mail.php` — 联系表单后端邮件处理脚本 - `documentation/index.html` — 完整模板使用文档（含 HTML/CSS/JS 结构说明） - `home-*.html` — 三套首页模板，可根据需求选择或组合使用 ## 快速开始 纯静态项目，无需安装依赖： 1. 直接在浏览器中打开 `download-version/index.html` 预览首页 2. 各功能页面位于 `download-version/` 根目录，按需复制修改 3. 如需邮件表单功能，将项目部署至支持 PHP 的 Web 服务器 ## 使用建议 模板提供了 30+ 页面，建议优先从 `home-*.html` 中选择适配的首页风格，再沿用相同的 Header/Footer 结构扩展其他页面。修改主题色只需调整 `assets/css/style.css` 中的 CSS 变量即可全局换肤。