Charritics - NGO & Nonprofit HTML Template

# 项目简介 Charitics 是一款面向 NGO 与慈善机构的静态 HTML 模板，包含首页、捐赠、活动、团队等完整页面，适合快速搭建非营利组织官网或活动专题页。 ## 技术栈 - HTML5 + CSS3（CSS 自定义属性、Flexbox/Grid 布局） - Vanilla JavaScript（无框架依赖） - 第三方依赖：Swiper（轮播）、Splide（幻灯）、SlimSelect（下拉）、Flatpickr（日期选择）、MixItUp（筛选）、Animate + WOW（动画） - 字体：Google Fonts（Manrope / Quicksand / Caveat） ## 项目结构 ``` chariticshtml-10/ ├── documentation/ # 官方文档站（含示例截图） │ ├── assets/ │ │ ├── css/ │ │ └── js/ │ └── index.html └── main-file/ # 正式模板文件（使用此目录） ├── index.html # 首页 ├── about.html # 关于我们 ├── services.html # 服务列表 ├── donations.html # 捐赠列表 ├── events.html # 活动列表 ├── team.html # 团队成员 ├── blog.html # 博客列表 ├── contact.html # 联系页 ├── 404.html ├── pricing.html ├── faq.html └── assets/ ├── css/style.css # 主样式文件 └── js/main.js # 交互逻辑 ``` ## 核心文件说明 - `main-file/index.html` — 首页，包含 Banner、捐赠入口、活动板块等完整布局 - `main-file/assets/css/style.css` — 主样式，定义了颜色变量、响应式容器、动画等 - `main-file/assets/js/main.js` — 交互逻辑，实现轮播、筛选、移动端菜单、搜索弹窗、吸顶导航等功能 - `main-file/donations.html` — 捐赠列表页，带项目筛选功能 - `main-file/events.html` — 活动列表页 - `main-file/contact.html` — 联系页 ## 快速开始 直接用浏览器打开 `main-file/index.html` 即可预览。二次开发建议在本地搭建简易 HTTP 服务器（如 `npx serve .`），确保所有页面路径正常工作。 ## 使用建议 - 颜色主题通过 `style.css` 中的 CSS 变量（`--ul-primary`、`--ul-secondary` 等）统一管理，修改一处即可全局换色。 - 模板使用了 `clamp()` 实现响应式字体，建议按需调整间距与断点以适配具体内容。