# marry_me

**Repository Path**: laicj/marry_me

## Basic Information

- **Project Name**: marry_me
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-24
- **Last Updated**: 2026-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 浪漫求婚网站

一个纯HTML的浪漫求婚网站，包含精心设计的动画效果和交互体验，为您的求婚时刻增添美好回忆。

## 功能特点

### 1. 爱情记录 (love_record)
- **图片轮播效果**：自动播放的图片轮播，支持手动切换
- **图片信息展示**：每张图片附带日期和文字描述
- **可配置轮播速度**：通过配置文件设置3-5秒/张的轮播速度
- **平滑过渡动画**：淡入淡出效果，营造温馨氛围
- **时间轴排列**：图片按照时间线顺序排列

### 2. 开场/结尾 (begining/ending)
- **打字机效果**：文字逐字显示，模拟打字机效果
- **可配置打字速度**：支持调整字符/秒的打字速度
- **可调节停留时间**：文字停留时间可在3-10秒范围内调整
- **优雅字体**：使用思源宋体，黑色背景配白色文字
- **多段落支持**：支持多个段落的连续展示

### 3. 音频功能
- **独立背景音乐**：为三个部分分别配置不同的背景音乐
- **自动播放**：遵循浏览器策略，默认静音自动播放
- **音乐控制按钮**：右上角的音乐按钮可控制播放/暂停
- **音乐信息显示**：当前播放的音乐标题会显示在按钮旁

### 4. 响应式设计
- **多设备适配**：完美适配PC、平板和手机等不同屏幕尺寸
- **横竖屏自动调整**：根据设备方向自动调整布局
- **图片自适应**：图片大小根据屏幕自动缩放，保持最佳显示效果

### 5. 其他优化
- **资源预加载**：预加载所有资源确保流畅播放体验
- **进度条指示**：底部进度条显示当前播放位置
- **极简设计**：简洁的界面设计，突出内容本身
- **JSON配置管理**：所有设置通过config.json文件管理，易于自定义
- **Web Animations API**：使用现代Web动画API实现平滑动画效果

## 文件结构

```
├── index.html          # 原项目主页
├── fire.html           # 原项目求婚页
├── proposal.html       # 新求婚网站（主文件）
├── proposal.css        # 网站样式文件
├── proposal.js         # 网站交互逻辑
├── config.json         # 网站配置文件
├── images/             # 图片资源目录
│   ├── memory1.jpg     # 回忆图片1
│   ├── memory2.jpg     # 回忆图片2
│   └── ...
├── css/                # CSS文件目录
│   ├── default.css     # 原项目样式
│   └── modal.css       # 原项目模态框样式
├── js/                 # JavaScript文件目录
└── README.md           # 项目说明文件
```

## 配置说明

### config.json 配置文件

所有网站设置都通过 `config.json` 文件管理，您可以自定义以下内容：

#### 开场部分配置 (begining)
```json
"begining": {
    "title": "我们的故事",              // 部分标题
    "typingSpeed": 50,                  // 打字速度（字符/秒）
    "pauseDuration": 3000,              // 文字停留时间（毫秒）
    "backgroundMusic": "begining.mp3",  // 背景音乐文件
    "sections": [                       // 文字段落数组
        {
            "text": "您的文字内容",
            "duration": 5000            // 此段落显示时长（毫秒）
        }
    ]
}
```

#### 爱情记录部分配置 (love_record)
```json
"love_record": {
    "title": "爱的回忆",                // 部分标题
    "carouselSpeed": 4000,             // 轮播速度（毫秒）
    "backgroundMusic": "love.mp3",      // 背景音乐文件
    "images": [                         // 图片数组
        {
            "src": "images/memory1.jpg",  // 图片路径
            "date": "2021.10.11",         // 日期
            "description": "图片描述"      // 图片描述
        }
    ]
}
```

#### 结尾部分配置 (ending)
```json
"ending": {
    "title": "永恒的承诺",              // 部分标题
    "typingSpeed": 45,                  // 打字速度（字符/秒）
    "pauseDuration": 4000,              // 文字停留时间（毫秒）
    "backgroundMusic": "ending.mp3",    // 背景音乐文件
    "sections": [                       // 文字段落数组
        {
            "text": "您的文字内容",
            "duration": 5000            // 此段落显示时长（毫秒）
        }
    ]
}
```

#### 全局配置 (global)
```json
"global": {
    "transitionDuration": 1000,        // 页面切换过渡时间（毫秒）
    "enableProgress": true,             // 是否启用进度指示器
    "autoProgress": true,               // 是否自动播放下一部分
    "enablePreload": true,              // 是否启用资源预加载
    "fontSize": {                       // 字体大小设置
        "mobile": "16px",               // 移动端字体大小
        "desktop": "18px"               // 桌面端字体大小
    },
    "fontFamily": "'Noto Serif SC'"    // 字体家族
}
```

## 使用方法

1. **准备资源文件**
   - 将您的照片放入 `images/` 目录
   - 准备背景音乐文件（MP3格式）

2. **批量处理图片（可选）**
   - 本项目包含一个便捷的图片重命名工具 `image_renamer.html`
   - **启动方法**：
     - **方法一（推荐）**：双击项目根目录下的 `start_tool.bat` 文件，会自动启动服务并打开浏览器。
     - **方法二**：在命令行运行 `node tool_server.js`，然后浏览器访问 `http://localhost:3000`。
   - **功能**：
     - 自动读取 `images/` 目录下的图片。
     - 支持预览图片。
     - 支持批量重命名（格式：`YYYY-MM-DD_描述.扩展名`），并直接保存修改。

3. **修改配置文件**
   - 打开 `config.json` 文件
   - 根据您的需求修改各项配置
   - 更新图片路径、音乐文件路径和文字内容

4. **部署网站**
   - Nginx

## 技术特点

- **纯前端实现**：无需服务器，可在本地直接打开
- **响应式设计**：使用CSS媒体查询实现多设备适配
- **现代Web技术**：使用Web Animations API实现流畅动画
- **模块化设计**：代码结构清晰，易于维护和扩展
- **优雅降级**：在不支持某些特性的浏览器中也能正常工作

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+