Bricknet - Construction Company Website Tailwind Template

# 项目简介 Bricknet 是一款面向建筑/工程公司的静态 HTML 网站模板，由 PeterDraw Studio 出品。该模板基于 TailwindCSS v4 构建，无需 jQuery，提供首页、关于、案例、详情、联系等多个页面，适合快速搭建专业的建筑企业展示站。 ## 技术栈 - **HTML5** — 语义化标签，SEO 友好 - **TailwindCSS v4** — 样式框架（预编译为单 CSS 文件） - **Vanilla JavaScript** — 交互逻辑，无外部依赖 - **AOS.js** — 页面滚动动画（CDN） - **Swiper.js** — 轮播图与幻灯片（CDN） - **Shuffle.js** — 案例画廊筛选（CDN） - **Plyr.js** — 视频播放器，支持 HTML5/YouTube/Vimeo（CDN） - **Phosphor Icons** — 图标库（CDN） - **Formspree** — 表单后端服务 ## 项目结构 ``` bricknet-template/ ├── bricknet-html/ │ ├── index.html # 首页 │ ├── home.html # 首页（另版） │ ├── about.html # 关于我们 │ ├── projects.html # 案例列表 │ ├── project-details.html # 案例详情 │ ├── contact.html # 联系我们 │ ├── assets/ │ │ └── main-BL-C0xJq.css │ ├── js/ │ │ └── main.js │ ├── images/ # WebP 图片资源 │ └── *.webmanifest # PWA 清单 └── bricknet-doc/ └── index.html # 官方文档 ``` ## 核心文件说明 - `bricknet-html/index.html` — 网站首页入口 - `bricknet-html/assets/main-BL-C0xJq.css` — 编译后的 TailwindCSS 样式表 - `bricknet-html/js/main.js` — 导航栏滚动变色、移动端菜单、视频背景自动播放等交互 - `bricknet-html/projects.html` — 案例画廊，支持 Shuffle.js 筛选 - `bricknet-html/contact.html` — 联系表单，集成 Formspree - `bricknet-doc/index.html` — 完整使用文档（包含 CDN 资源、部署方式等） ## 快速开始 1. 将 `bricknet-template/bricknet-html/` 目录部署到任意 Web 服务器或静态托管平台 2. 在浏览器中打开 `index.html` 即可预览 ## 使用建议 - 如需修改样式，可直接编辑 `assets/main-BL-C0xJq.css`（或基于 TailwindCSS 源码重新编译） - 视频背景默认静音自动播放，建议提前准备 WebP 格式的占位图作为降级方案