🌟 Daily Vibes - 心情追蹤應用程式

一個簡潔優雅的心情追蹤 React 應用程式，讓您記錄每一天的情緒變化。

✨ 功能特色

• 心情選擇器 - 從 10 種不同心情表情符號中選擇
• 備註記錄 - 可選的文字備註功能，最多 200 字元
• 歷史追蹤 - 完整的心情記錄歷史，包含日期和時間
• 本地儲存 - 使用 localStorage 保存所有記錄
• 響應式設計 - 完美支援桌面和行動裝置
• 現代化 UI - 美觀的漸層背景和毛玻璃效果

🚀 快速開始

前置需求

• Node.js (版本 14 或以上)
• npm 或 yarn

安裝步驟

1. 克隆專案

   git clone [your-repository-url]
   cd daily-vibes

2. 安裝依賴

   npm install

3. 啟動開發伺服器

   npm start

4. 開啟瀏覽器 應用程式會在 http://localhost:3000 自動開啟

🎯 使用方法

記錄心情

1. 從心情選擇器中點選符合當前心情的表情符號
2. （可選）在備註欄位輸入額外的心情描述
3. 點擊「記錄心情 ✨」按鈕提交

查看歷史

• 所有心情記錄會按時間順序顯示在下方
• 每條記錄包含心情、日期時間和備註
• 可以點擊垃圾桶圖示刪除不需要的記錄

心情選項

• 😊 開心 - 感到快樂和滿足
• 😢 難過 - 感到悲傷或沮喪
• 😡 生氣 - 感到憤怒或煩躁
• 😴 疲憊 - 感到疲倦或缺乏精力
• 🤔 困惑 - 感到困惑或猶豫
• 😌 平靜 - 感到安寧和放鬆
• 🤩 興奮 - 感到激動和期待
• 😰 緊張 - 感到焦慮或壓力
• 😍 愛慕 - 感到愛意或欣賞
• 😤 驕傲 - 感到自豪或成就感

🛠️ 技術架構

• 前端框架: React 18
• 狀態管理: React Hooks (useState, useEffect)
• 樣式: CSS3 + 響應式設計
• 資料儲存: localStorage API
• 字體: 系統字體堆疊
• 圖示: Unicode 表情符號

📱 響應式設計

應用程式完全響應式，支援：

• 桌面電腦 (1200px+)
• 平板電腦 (768px - 1199px)
• 手機裝置 (480px - 767px)
• 小型手機 (< 480px)

🎨 設計特色

• 漸層背景 - 美麗的藍紫色漸層
• 毛玻璃效果 - 現代化的半透明卡片設計
• 平滑動畫 - 優雅的 hover 和點擊效果
• 色彩心理學 - 根據心情選擇合適的視覺回饋

🔧 自訂選項

修改心情選項

在 src/App.js 中編輯 moodOptions 陣列：

const moodOptions = [
  { emoji: '😊', name: '開心', value: 'happy' },
  // 新增或修改心情選項
];

調整樣式

在 src/App.css 中修改 CSS 變數和樣式規則。

📝 開發筆記

這個應用程式展示了：

• React Hooks 的實際應用
• 本地儲存的最佳實踐
• 響應式設計的實現
• 現代化 UI/UX 設計原則

🤝 貢獻

歡迎提交 Issue 和 Pull Request！

📄 授權

MIT License

---

用 Daily Vibes 記錄每一天的心情變化，追蹤你的情緒旅程！ 🌈