写给瀚予的一封信

一个纯静态、可部署到 GitHub Pages 的互动情书页面。

本地预览

python3 -m http.server 8080

然后打开 http://127.0.0.1:8080。

替换音乐

把你自己准备好的音频文件放到：

assets/audio/bushuo.mp3

页面上的音乐按钮会尝试从 80 秒，也就是 1:20 开始播放。浏览器通常禁止自动播放，所以需要点击按钮。

替换照片

把照片放到 assets/photos/，使用这些文件名即可自动显示：

airport.jpg
siwawa.jpg
solo.jpg
qingyun.jpg
birthday.jpg
rain.jpg
hotel.jpg
henan.jpg

如果暂时没有照片，页面会显示胶片占位卡片。

部署到 GitHub Pages

1. 把这些文件推到你的 GitHub 仓库，例如 gelei88.github.io。
2. 在 GitHub 仓库的 Settings -> Pages 中选择 main 分支和根目录。
3. 等待部署完成后访问 https://gelei88.github.io/。

文件说明

• index.html：页面结构和正文。
• styles.css：视觉系统、响应式布局和动画。
• script.js：打开信件、播放音乐、展开回忆和照片占位。
• assets/audio/：放音乐。
• assets/photos/：放照片。