Suburb - Responsive Coming Soon Page

# 项目简介 The Outskirts 是一套响应式"即将上线"（Coming Soon）页面模板，包含倒计时、联系表单和邮件订阅功能。提供多种背景效果（视频、图片轮播、Ken Burns）和天气氛围（雨、雪、云、粒子），适合网站维护或产品发布前的占位页面。 ## 技术栈 - Bootstrap 3.x（CSS 框架） - jQuery（DOM 操作与交互） - Supersized 3.2.7（背景幻灯片库） - PHP（联系表单与邮件订阅后端） - MailChimp API（邮件列表集成） ## 项目结构 ``` The-Outskirts-v1-1-Template/ ├── index-*.html # 30种首页变体（背景+主题+氛围组合） ├── contact.php # 联系表单处理 ├── subscribe.php # MailChimp 订阅处理 ├── css/ │ ├── bootstrap.min.css # Bootstrap 核心样式 │ ├── style-dark.css # 暗色主题 │ ├── style-light.css # 亮色主题 │ └── font-awesome-4.4.0/ # 图标字体 ├── js/ │ ├── supersized.*.js # 各背景效果的配置脚本 │ └── the-outskirts.js # 主交互逻辑（旋转文字等） └── img/ # 背景图、云/雨/雪等素材 The-Outskirts-v1-1-Documentation/ └── index.html # 官方文档 ``` ## 核心文件说明 - `index-*.html` — 30种模板变体，按背景类型（video/ken-burns/single-image/slideshow/youtube-video）、主题色（dark/light）、氛围（clean/clouds/rain/snow/particles）组合 - `css/style-dark.css` / `style-light.css` — 暗色/亮色主题样式表 - `js/the-outskirts.js` — 主脚本，控制欢迎语轮播等交互 - `js/supersized.*.js` — Supersized 背景引擎的配置，决定使用哪种背景效果 - `contact.php` — 接收联系表单 POST 数据并发送邮件 - `subscribe.php` — 对接 MailChimp API 实现邮件订阅 ## 快速开始 1. 根据需要选择合适的 `index-*.html` 作为 `index.html` 2. 修改页面文字内容（欢迎语、倒计时目标日期等） 3. 替换背景素材（视频、图片）或更新 YouTube 视频 ID 4. 配置联系表单：在 `contact.php` 中设置 `$myemail` 5. 配置订阅功能：在 `subscribe.php` 中填入 MailChimp API Key 和 List ID 6. 将整个目录部署到支持 PHP 的 Web 服务器 如仅本地预览部分效果，可直接用浏览器打开 HTML 文件，但联系表单和订阅功能需服务器环境。 ## 使用建议 - 选择背景类型时考虑页面加载速度，HTML5 视频背景建议控制在 5MB 以内 - 部署前记得将 `contact.php` 和 `subscribe.php` 中的占位符邮箱/密钥替换为真实值，避免表单功能失效