# 💖 情人節開源浪漫頁（GitHub Pages 模板）

一鍵部署、免寫程式，只要改「設定」就能生成你的專屬浪漫頁。
**功能**：點愛心放紙屑/煙火、在一起天數、音樂播放、相片牆拖放（3–9 張）＋自動輪播、網址參數分享、LocalStorage 暫存。

[我的Github專案網址](https://github.com/and910805/love-page-private/blob/mainer/README.md)
[Demo網址](https://and910805.github.io/love-page/)
---

## ✨ 功能列表
- **中央愛心互動**：點愛心會放紙屑 / 煙火。
- **在一起天數**：自動計算相伴天數，達成特別里程碑會出現彩蛋。
- **打字機情書**：故事文字逐字顯示，最後自動加上發光的「我愛你」，打字速度可在設定調整。
- **音樂播放**：上傳 MP3，支援播放/暫停與計時顯示。
- **相片牆拖放**（3–9 張）＋自動輪播。
- **拍立得翻轉**：點一下翻到背面顯示註解/日期（3D 翻轉動畫），雙擊可編輯註解。
- **背景小愛心**：可調整數量、大小、速度。
- **網址參數分享**：可複製含設定的分享連結（不包含 MP3/照片）。
- **LocalStorage 暫存**：設定、照片、註解保存在使用者瀏覽器，不上傳到伺服器。

## 自訂功能
- **右上角設定**：修改愛人名字、署名、紀念日、主題色、故事、打字速度；上傳 MP3 與照片。
- **拍立得互動**：
- 點一下 → 前後翻轉（背面顯示註解與日期）
- 雙擊 → 編輯該照片的註解（儲存在本機）
- **背景小愛心**：數量 / 大小 / 飄動速度可調整。
- **分享連結**：按 **複製可分享連結**，設定會寫進網址參數（不包含 MP3/照片）。
- **網址參數使用範例**：?lover=小花&sender=阿志&anniv=2024-05-20&story=我們第一次見面的那天...&theme=%23ff4d6d&typingSpeed=25

## 🚀 快速開始（GitHub 直接部署）

1. 點右上角 **Use this template**（或按頁面上的綠色 **Use this template** 按鈕）。
2. 取個新倉庫名稱，例如：`valentine-2025`。
3. 進入新倉庫 → **Settings → Pages → Build and deployment**

* **Source**：`Deploy from a branch`
* **Branch**：`main`（或 `mainer`，依你的分支名稱）
* **Folder**：選 `/ (root)`
4. 進入新倉庫 → Actions
- 搜尋並選擇 Jekyll using Docker image 工作流
- 按 Configure → 直接 Commit 到分支，啟用工作流
4. 等候 1～3 分鐘，回到 **Settings → Pages** 頁面最上方會看到：

   Your site is live at https://你的帳號.github.io/你的-repo-名稱/

5. 點擊網址，就能看到你的浪漫網站 🎉

---

## 放在電腦桌面直接打開版本

如果你不想用 GitHub Pages，也可以直接在本機打開網站：

1. 在這個 repo 頁面點擊 **Code → Download ZIP** 下載專案壓縮檔。
2. 解壓縮到電腦任意資料夾（例如桌面）。
3. 直接雙擊 `index.html`，用瀏覽器打開，就能看到網站。

> **小提醒**：本機打開版本一樣能用所有功能，但網址分享功能只會在本機作用，因為沒有線上部署。

## 隱私與資料儲存
- 照片、音樂、註解全部保存在使用者瀏覽器的 **LocalStorage**，不會上傳到伺服器。
- LocalStorage 容量通常約 5MB，若照片太多/解析度太高可能存不下。
- 如果需要跨裝置同步或更多儲存空間，可改用 IndexedDB 或雲端儲存（Firebase、Cloudinary 等）。

---
## 授權
- 預設為 MIT 授權，歡迎自由使用與修改。
- 使用時請自行確認音樂、圖片素材的版權與授權。
## 想用 React / Vite？
本模板為單檔版。若要擴充為 React，可將邏輯拆為元件後以 Vite 部署 GitHub Pages。
我找時間在出一版React版本