项目简介link

Charitics 是一款面向 NGO 与慈善机构的静态 HTML 模板，包含首页、捐赠、活动、团队等完整页面，适合快速搭建非营利组织官网或活动专题页。

技术栈link

• HTML5 + CSS3（CSS 自定义属性、Flexbox/Grid 布局）
• Vanilla JavaScript（无框架依赖）
• 第三方依赖：Swiper（轮播）、Splide（幻灯）、SlimSelect（下拉）、Flatpickr（日期选择）、MixItUp（筛选）、Animate + WOW（动画）
• 字体：Google Fonts（Manrope / Quicksand / Caveat）

项目结构link

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      # 交互逻辑

核心文件说明link

• 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 — 联系页

快速开始link

直接用浏览器打开 main-file/index.html 即可预览。二次开发建议在本地搭建简易 HTTP 服务器（如 npx serve .），确保所有页面路径正常工作。

使用建议link

• 颜色主题通过 style.css 中的 CSS 变量（--ul-primary、--ul-secondary 等）统一管理，修改一处即可全局换色。
• 模板使用了 clamp() 实现响应式字体，建议按需调整间距与断点以适配具体内容。