# memorize

**Repository Path**: tiny_dinosaur/memorize

## Basic Information

- **Project Name**: memorize
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-22
- **Last Updated**: 2026-07-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 💕 一周年纪念惊喜小程序

一个可通过微信链接打开的浪漫一周年纪念页面，包含多种互动功能。附带制作工具，无需编程即可自定义所有内容。

## ✨ 功能特色

| 板块 | 说明 |
|------|------|
| 🌟 **开场动画** | 全屏渐变背景 + 飘落爱心粒子 + 在一起天数 + 倒计时 |
| 💕 **爱情时间线** | 纵向滚动时间线，记录每一个重要时刻 |
| 🖼️ **照片画廊** | 左右滑动浏览照片，支持触摸手势和鼠标拖动 |
| 💌 **情书** | 点击信封展开，逐段展示你的心里话 |
| 🎯 **心有灵犀** | 趣味问答测试，看看TA有多了解你 |
| 🏮 **心愿瓶** | 彩色瓶子，点击捞起甜蜜留言 |
| 🎆 **结尾惊喜** | 烟花爆炸动画 + 告白 + 隐藏小彩蛋 |

## 🚀 快速开始

### 1. 方式一：本地预览

```bash
# 进入项目目录
cd one_year

# 用任意本地服务器打开（三选一）
npx serve .          # Node.js 用户
python -m http.server 8000   # Python 用户
# 或者直接用 VS Code 的 Live Server 插件打开 index.html
```

### 2. 方式二：使用制作工具编辑

```bash
# 启动本地服务器后
# 浏览器打开：http://localhost:3000/admin.html
# 在制作工具中编辑所有内容 → 导出完整页面
```

### 3. 方式三：部署到线上（生成微信链接）

#### GitHub Pages（免费）
```bash
# 1. 在 GitHub 新建仓库
# 2. 将项目文件推送到仓库
git init
git add .
git commit -m "一周年纪念"
git remote add origin https://github.com/你的用户名/仓库名.git
git push -u origin main

# 3. 在仓库 Settings → Pages → Source 选择 main 分支
# 4. 几分钟后获得链接：https://你的用户名.github.io/仓库名/
```

#### Vercel（免费，推荐）
```bash
# 1. 访问 vercel.com 注册（用 GitHub 账号）
# 2. 导入你的 GitHub 仓库
# 3. 自动部署，获得链接：https://xxx.vercel.app
```

#### Netlify（免费）
```bash
# 1. 访问 netlify.com 注册
# 2. 拖拽项目文件夹到部署页面
# 3. 获得链接：https://xxx.netlify.app
```

## 🛠️ 制作工具使用指南

1. 用浏览器打开 `admin.html`（需通过本地服务器）
2. 左侧标签页切换编辑各个板块
3. 修改文字、日期、颜色、照片路径等
4. 右侧手机模拟器实时预览效果
5. 编辑完成后：
   - **下载配置**：仅下载 `config.js` 文件，替换项目中的原文件
   - **导出完整页面**：下载一个包含所有内容的自包含 HTML 文件，可直接部署

## 📁 项目结构

```
one_year/
├── index.html          # 🎯 主惊喜页面（对外分享的就是这个）
├── admin.html          # 🛠️ 制作工具
├── config.js           # ⚙️ 配置文件（所有自定义内容在这里）
├── js/
│   └── app.js          # 📜 主程序脚本
├── assets/
│   ├── photos/         # 🖼️ 放你的照片
│   └── music/          # 🎵 放背景音乐（可选）
└── README.md           # 📖 本说明文档
```

## 🎨 自定义指南

### 添加照片
1. 将照片放入 `assets/photos/` 文件夹
2. 在 `admin.html` 的「照片画廊」中设置路径：`assets/photos/你的照片.jpg`
3. 或直接修改 `config.js` 中的 `gallery` 数组

### 修改文字内容
- 用 `admin.html` 制作工具（推荐）
- 或直接编辑 `config.js` 文件（需要一点 JSON 基础）

### 修改主题颜色
- 制作工具 → 主题配色 → 用取色器选择喜欢的颜色

### 添加背景音乐
1. 将 mp3 文件放入 `assets/music/`
2. 在制作工具的「背景音乐」中设置路径
3. 或使用在线音乐链接

## ⚠️ 微信浏览器注意事项

- 微信内置浏览器可能不支持自动播放音乐，需要用户点击按钮触发
- 建议使用 HTTPS 链接（微信要求）
- 部分 iOS 微信可能阻止某些 CSS 动画，本页面已做兼容处理
- 分享到微信时建议使用已部署的线上链接，而非本地文件

## 📱 兼容性

- ✅ iOS Safari（微信内置浏览器）
- ✅ Android Chrome（微信内置浏览器）
- ✅ 桌面端 Chrome / Edge / Safari
- ✅ 移动端所有主流浏览器

## 💡 提示

- 第一次使用建议先用制作工具（`admin.html`）编辑内容
- 编辑完成后导出完整页面，单独部署那个文件即可
- 照片建议使用 3:4 比例（竖版），效果最佳
- 背景音乐文件建议不超过 5MB

---

**💗 祝你们一周年快乐！**