🎨 PASTEL DAILY DIARY

1. Giới thiệu

Pastel Daily Diary là một web application nhật ký cá nhân được xây dựng nhằm hỗ trợ người dùng – đặc biệt là nữ giới – ghi lại cảm xúc, suy nghĩ, thành tựu và các hoạt động chăm sóc bản thân hằng ngày.

Ứng dụng hướng tới việc tạo ra một không gian riêng tư, nhẹ nhàng và an toàn về mặt cảm xúc, giúp người dùng hình thành thói quen viết nhật ký, lắng nghe bản thân và theo dõi sức khỏe tinh thần một cách tích cực. 🔗 Demo trực tuyến:
https://ivypear.github.io/Diary/

---

🌸 Giao diện tổng quan

---

2. Mục tiêu của dự án

• Xây dựng một ứng dụng web hỗ trợ ghi nhật ký cá nhân hằng ngày
• Hướng tới việc chăm sóc và theo dõi sức khỏe tinh thần, đặc biệt phù hợp với người dùng nữ
• Giúp người dùng theo dõi cảm xúc, thói quen self-care và quá trình phát triển bản thân
• Áp dụng kiến thức đã học về HTML, CSS, JavaScript và công cụ phát triển web hiện đại
• Thiết kế giao diện dịu mắt, thân thiện và dễ sử dụng trên nhiều thiết bị

---

3. Phạm vi và đối tượng sử dụng

Đối tượng sử dụng

• Nữ sinh, sinh viên
• Người dùng trẻ có nhu cầu ghi nhật ký, theo dõi cảm xúc và chăm sóc bản thân
• Người dùng yêu thích giao diện pastel, nhẹ nhàng

Phạm vi

• Ứng dụng hoạt động trên trình duyệt web
• Không yêu cầu đăng nhập và không sử dụng cơ sở dữ liệu phía server

---

4. Các chức năng chính

4.1 📝 Diary

Cho phép người dùng ghi nhật ký hằng ngày bao gồm:

• Tâm trạng
• Thành tựu trong ngày
• Điều biết ơn
• Checklist self-care
• Highlight nổi bật
• Photo journal (tối đa 3 ảnh)

---

4.2 🕒 Timeline

Hiển thị toàn bộ nhật ký và khoảnh khắc theo dòng thời gian.
Hỗ trợ:

• Tìm kiếm
• Lọc theo tâm trạng
• Lọc theo loại nội dung (nhật ký hoặc khoảnh khắc)

---

4.3 📊 Report

Thống kê và trực quan hóa dữ liệu người dùng:

• Biểu đồ tâm trạng theo tuần và theo tháng
• Số ngày viết nhật ký
• Tỷ lệ cảm xúc tích cực
• Checklist self-care
• Thời gian viết nhật ký trung bình

---

4.4 💭 Reflection

Tổng kết cuối tháng thông qua các câu hỏi gợi mở:

• Học được điều gì trong tháng
• Điều gì khiến bản thân tự hào
• Điều gì muốn cải thiện trong thời gian tới

---

5. Giao diện và trải nghiệm người dùng

• Hỗ trợ 5 chủ đề màu pastel mang phong cách nhẹ nhàng, phù hợp với người dùng nữ:
  • Mint (mặc định)
  • Pink
  • Lavender
  • Ocean
  • Night
• Theo dõi streak viết nhật ký liên tiếp
• Giao diện responsive, tương thích với desktop và thiết bị di động
• Cho phép xuất toàn bộ dữ liệu người dùng dưới dạng file JSON để sao lưu

📱 Giao diện trên thiết bị di động

---

6. Công nghệ sử dụng

• HTML5
• CSS3
• JavaScript (ES6 Modules)
• Tailwind CSS
• Vite
• Lucide Icons
• localStorage
• GitHub Pages
• GitHub Actions

---

7. Hướng dẫn cài đặt và chạy dự án

7.1 Yêu cầu hệ thống

• Node.js (phiên bản 16 trở lên)
• Trình duyệt web hiện đại (Chrome, Edge, Firefox)

7.2 Các bước chạy dự án

git clone https://github.com/IvyPear/Diary.git
cd Diary
npm install
npm run dev

8. Đánh giá và hướng phát triển

8.1 Kết quả đạt được

• Hoàn thiện đầy đủ các chức năng theo yêu cầu đề tài

• Giao diện thân thiện, phù hợp với người dùng nữ

• Ứng dụng hoạt động ổn định trên nhiều thiết bị

8.2 Hướng phát triển

• Bổ sung tính năng đăng nhập và đồng bộ dữ liệu giữa các thiết bị

• Lưu trữ dữ liệu trên server hoặc cloud

• Thêm nhắc nhở viết nhật ký hằng ngày

• Cá nhân hóa nội dung gợi ý theo thói quen và cảm xúc người dùng

9. Nhóm thực hiện

• Tên đề tài: Pastel Daily Diary

• Môn học: Thiết kế Web

• Lớp: 23SE – VNUK

Thành viên nhóm:

• Nguyễn Ánh Ngọc

• Trương Thủy Lam

• Nguyễn Thị Quỳnh Mỹ

10. Kết luận

Pastel Daily Diary là sản phẩm thể hiện quá trình áp dụng kiến thức đã học vào thực tế, đồng thời hướng tới việc hỗ trợ người dùng – đặc biệt là nữ giới – chăm sóc và theo dõi sức khỏe tinh thần thông qua thói quen viết nhật ký hằng ngày.

Nhóm xin chân thành cảm ơn giảng viên đã hướng dẫn và hỗ trợ trong suốt quá trình thực hiện dự án.

Nhóm 4 – 23SE – VNUK