📖 WeFlip — Trình đọc PDF lật trang 3D

Biến bất kỳ file PDF thành một cuốn sách lật 3D đẹp mắt, chạy hoàn toàn trong trình duyệt — không cần server, không upload file đi đâu. Kéo thả PDF vào là đọc được ngay.

Xây bằng React + TypeScript + Vite, hiệu ứng lật bằng react-pageflip, render PDF bằng pdf.js. Toàn bộ xử lý diễn ra phía client nên PDF của bạn không rời khỏi máy.

---

✨ Tính năng

• 📄 Nạp PDF trực tiếp — kéo thả hoặc chọn file, tự cắt trang thành sách lật. Nhớ lịch sử file đã mở.
• 🔖 Ghim trang (bookmark)
  • Bấm nút ghim trên toolbar hoặc phím B để ghim/bỏ ghim trang đang đọc.
  • Ruy-băng đỏ hiện ngay trên trang đã ghim để nhận biết tức thì.
  • Tab Dấu trang liệt kê mọi ghim, bấm để nhảy tới, kèm ô ghi chú cho từng ghim.
  • Nhảy nhanh giữa các ghim bằng phím [ (ghim trước) và ] (ghim kế).
  • Ghim + ghi chú được lưu theo từng file (localStorage), mở lại vẫn còn.
• 🎯 Điểm tương tác (hotspot) — vẽ vùng bấm được lên trang và gắn hành động: liên kết (mở tab mới), popup (tiêu đề + nội dung), video (YouTube/MP4), ảnh (phóng to). Toạ độ chuẩn-hoá nên đúng khi zoom/đổi màn hình; lưu theo từng file. Bật chế độ vẽ bằng nút Điểm tương tác trên toolbar.
• 📣 Bộ công cụ Marketing (cấu hình trong panel Marketing trên toolbar)
  • Popup quảng cáo — tiêu đề, nội dung, ảnh, nút CTA + link, có thể kèm mã QR. Tự bật khi đọc tới trang N hoặc khi định rời trang (exit-intent); nút Xem thử.
  • Mã QR nổi — tự sinh offline từ link bất kỳ, chọn góc + kích thước + nhãn.
  • Banner 2 bên — trái/phải, dạng chữ chạy (marquee dọc) hoặc hình ảnh, có link click. Tự ẩn trên màn hình hẹp.
• 🖍️ Highlight — tô sáng trực tiếp lên trang bằng nhiều màu.
• 🔊 Đọc thành tiếng (TTS) — đọc nội dung trang bằng Web Speech.
• 🔍 Tìm kiếm — tìm chữ trong toàn bộ PDF (Ctrl/⌘+F).
• 🧭 Mục lục — tự đọc outline của PDF để điều hướng.
• 🌙 Chế độ đêm, âm thanh lật trang, âm nền (mưa/biển/…) và tuỳ biến giao diện.
• ⛶ Toàn màn hình + điều hướng bằng bàn phím.

⌨️ Phím tắt

Phím	Chức năng
→ / PageDown	Trang sau
← / PageUp	Trang trước
Home / End	Trang đầu / cuối
B	Ghim / bỏ ghim trang hiện tại
[ / ]	Nhảy tới ghim trước / kế
Ctrl / ⌘ + F	Tìm kiếm
F	Toàn màn hình

🚀 Chạy dự án

Yêu cầu Node.js ≥ 18.

npm install        # cài dependencies
npm run dev        # chạy dev server (Vite)
npm run build      # build production → thư mục dist/
npm run preview    # xem thử bản build

Mở trình duyệt ở địa chỉ Vite in ra (mặc định http://localhost:5173), kéo một file PDF vào là xong.

🌐 Đưa lên web / blog

WeFlip build ra web tĩnh (dist/). Có thể mở thẳng một cuốn sách cố định (chế độ xuất bản, không có màn hình upload) bằng cách đặt book.pdf + weflip.config.json cạnh index.html — popup/QR/banner + điểm tương tác được nướng sẵn cho mọi người xem. Xem hướng dẫn đầy đủ (subdomain / path con / nhúng iframe) trong DEPLOY.md và mẫu cấu hình weflip.config.example.json.

🛠️ Công nghệ

Thành phần	Vai trò
React + TypeScript	UI
Vite	build tool / dev server
react-pageflip	hiệu ứng lật trang 3D
pdf.js (pdfjs-dist)	render PDF → ảnh
Zustand	quản lý state + lưu bookmark/settings/marketing
qrcode	tạo mã QR offline cho popup + QR nổi

📁 Cấu trúc

src/
├── components/     # FlipBook, Toolbar, Sidebar, TTSPanel, SearchPanel, ...
├── stores/         # Zustand stores (book, bookmark, highlight, settings, ...)
├── hooks/          # usePDFProcessor, useKeyboardNav, useTTS, useFullscreen
├── services/       # pdfService, ttsService, soundService, ambientService
└── types/          # kiểu dữ liệu dùng chung

📜 License

MIT