Kênh triển khai
Một bộ component, 4 mode. Đổi mode bằng <html data-platform="…">.
Nguồn: chuyển từ design/docs/02-kenh-trien-khai.md ngày 2026-11-11.
So sánh nhanh
| Kiosk (offline) | Website | App (webview) | Zalo Mini App |
|---|
data-platform | kiosk | web | app | zalo |
| Thiết bị | Màn cảm ứng 32–55" đứng, iPad tại booth | Desktop + mobile browser | App FPT (Hi FPT, FPT Play…) | Zalo trên điện thoại |
| Viewport chuẩn | 1080×1920 | 360–1440 | 360–430 | 360–430 |
| Khoảng cách xem | 1–2 m | 40–60 cm | 30 cm | 30 cm |
| Body / Nút | 26 / 34px | 16 / 17px | 16 / 17px | 16 / 17px |
| Vùng chạm tối thiểu | 96px | 44px | 48px | 48px |
| Header | Logo lớn giữa trên, không menu | .ds-appbar có logo | Ẩn — app native lo | Ẩn — dùng header Zalo |
| Safe area | Không | env() | env() | --zaui-safe-area-inset-* |
| Đăng nhập | Không — nhập SĐT tại chỗ | SĐT + OTP / FPT ID | Lấy từ phiên app | Zalo auth + xin quyền SĐT |
| Mạng | Có thể chập chờn — phải chạy offline | Online | Online | Online |
| Font | Nhúng trong build | Web font | Web font | Subset, nhúng trong gói |
Thêm mode
tv: màn ngang 1920×1080
không cảm ứng tại sự kiện, xem từ 3–5 m (body 30px, điểm 180px). Chỉ hiển thị sân chơi, bảng điểm, QR tham gia; thao tác nằm trên điện thoại hoặc nút booth. Xem
mau-game.html.
Kiosk — activation offline
| Yêu cầu | Chi tiết |
|---|
| Attract loop | Khi rảnh, chạy màn mời chơi động (cụm bit-dot + CTA lớn). Chạm bất kỳ đâu để bắt đầu |
| Tự reset | Không thao tác 60 giây → hỏi "Bạn còn chơi không?" 10 giây → về attract, xoá dữ liệu phiên |
| Vùng thao tác | Đặt nút chính ở 1/3 dưới màn hình đứng (tầm tay người đứng) |
| Không hover | Mọi phản hồi qua trạng thái nhấn :active |
| Bàn phím | Bàn phím số tuỳ biến trên màn (không gọi bàn phím OS) |
| Riêng tư | Che SĐT 09•••••123 ở màn kết quả — người xếp hàng nhìn thấy |
| Offline | Lưu lead vào bộ nhớ máy, đồng bộ khi có mạng; hiển thị trạng thái đồng bộ cho nhân viên (cử chỉ ẩn, vd. chạm giữ logo 5 giây) |
| In / QR quà | Mã quà hiển thị dạng QR lớn ≥ 320px để nhân viên quét |
| Chống cháy màn | Không để nền tĩnh hoàn toàn trên màn LCD nhiều giờ — attract phải chuyển động |
Website
| Yêu cầu | Chi tiết |
|---|
| Responsive | Mobile-first; ≥ 1024px tăng display 64px, gutter 32px |
| Khung game | Desktop: game nằm trong khung tỉ lệ 9:16 giữa màn, hai bên là thể lệ + bảng xếp hạng |
| SEO/share | Ảnh OG 1200×630 dùng gradient cam + cụm bit + logo âm bản |
| Hover | Có hover cho card, nút |
App (webview)
| Yêu cầu | Chi tiết |
|---|
| Header | Ẩn .ds-appbar; tiêu đề do app native truyền vào |
| Đăng nhập | Nhận token từ app qua bridge, không bắt đăng nhập lại |
| Nút back | Phần cứng/cử chỉ back phải đóng modal trước khi thoát game |
| Theme | Có thể đổi data-theme theo app (Hi FPT → blue) |
Zalo Mini App
| Yêu cầu | Chi tiết |
|---|
| Header | Zalo vẽ header + cụm nút "… / ×" bên phải. Không đặt nút quan trọng ở góc phải trên |
| UI kit | Có thể dùng ZaUI (zmp-ui) cho khung; component game dùng .ds-* để giữ brand |
| Quyền | Xin SĐT/vị trí đúng lúc cần (ví dụ ngay trước bước nhận quà), kèm lý do |
| Chia sẻ | Nút "Chia sẻ nhận thêm lượt" dùng API share của Zalo |
| Dung lượng | Gói có giới hạn — subset font, ảnh WebP, tránh video nền |
| Kiểm duyệt | Thể lệ, điều khoản, chính sách dữ liệu phải có link rõ ràng (Zalo kiểm duyệt khi publish) |
Dữ liệu cá nhân (áp dụng mọi kênh)
| Quy tắc | Lý do |
|---|
| Checkbox đồng ý xử lý dữ liệu không tick sẵn, có link chính sách | Nghị định 13/2023/NĐ-CP |
| Chỉ thu trường cần thiết (thường: tên, SĐT, khu vực) | Giảm rơi rụng form |
| Ghi rõ mục đích: "để trao quà và tư vấn dịch vụ FPT" | Minh bạch |
Lịch sử thay đổi
| Bản | Ngày | Người sửa | Nội dung |
|---|
| 1.0 | 2026-11-11 | Designer | Chuyển từ Markdown sang HTML |