TRANG CASINO MOBILE UI/UX SPECIFICATION

THIẾT KẾ TỔNG THỂ

• Giao diện Mobile First
• Tông màu chủ đạo xanh dương (#2F98DB)
• Nền trắng kết hợp xanh nhạt (#EEF5FF)
• Bo góc mềm 10px - 18px
• Hiệu ứng chuyển động mượt 60FPS
• Thiết kế tối ưu cho Android và iPhone
• Hỗ trợ Dark Mode trong tương lai

HEADER

Chiều cao: 60px

Bên trái:

• Nút đóng (X)

Chính giữa:

• Icon ổ khóa SSL
• Tên miền website
• Dòng mô tả nhỏ phía dưới

Bên phải:

• Nút lịch sử
• Nút menu 3 chấm

Header luôn cố định khi cuộn trang

BANNER

• Slider toàn chiều ngang
• Bo góc 16px
• Auto chuyển sau 5 giây
• Hỗ trợ hình ảnh và video
• Có indicator hiển thị số banner

HIỆU ỨNG BANNER

• Fade In
• Fade Out
• Swipe Mobile
• Zoom nhẹ 1.03x

THÔNG BÁO HỆ THỐNG

• Icon loa bên trái
• Nội dung chạy ngang
• Tốc độ ổn định
• Có thể click mở popup chi tiết

KHU VỰC TÀI KHOẢN

Khi chưa đăng nhập:

• Nút Đăng Nhập
• Nút Đăng Ký

Khi đã đăng nhập:

• Avatar
• Tên tài khoản
• Cấp VIP
• Số dư hiện tại

THANH CHỨC NĂNG NHANH

Bao gồm:

• Nạp Tiền
• Rút Tiền
• Khuyến Mãi
• Đại Lý
• Tải App
• Chăm Sóc Khách Hàng
• Nhiệm Vụ
• Vòng Quay May Mắn

Mỗi nút:

• Bo góc 16px
• Icon phía trên
• Tên phía dưới
• Shadow nhẹ

DANH MỤC GAME

• Hot Games
• Slots
• Casino Live
• Thể Thao
• Bắn Cá
• Poker
• Xổ Số
• Mini Game
• Esports

Tab đang chọn:

• Màu xanh
• Có hiệu ứng nổi
• Có thanh chỉ báo

KHU VỰC DANH SÁCH GAME

Mỗi game gồm:

• Thumbnail
• Tên game
• Nhà phát hành
• Tag HOT hoặc NEW

Card game:

• Bo góc 18px
• Shadow mềm
• Hover nổi lên

POPUP ĐĂNG NHẬP

Chiều rộng: 90%

Nền: Trắng

Logo: Nằm giữa

Tab:

• Đăng Nhập
• Đăng Ký

Ô nhập tài khoản:

• Icon User

Ô nhập mật khẩu:

• Icon Lock
• Nút hiện mật khẩu
• Link Quên mật khẩu

Ô xác minh:

• Captcha
• Nút làm mới

Nút Đăng Nhập:

• Cao 60px
• Màu xanh
• Chữ trắng

Nút phụ:

• Chơi Miễn Phí
• Chăm Sóc 24/7

POPUP HỘP THƯ

Header:

• Màu xanh
• Nút đóng bên phải

Tabs:

• Hộp thư đến
• Hộp thư đi
• Gửi thư

Tab đang chọn:

• Nền xanh
• Chữ trắng

Khu vực nội dung:

• Danh sách thư
• Trạng thái chưa đọc
• Thời gian gửi

TRANG CÁ NHÂN

Hiển thị:

• Avatar
• UID
• VIP Level
• Tổng tài sản
• Lịch sử giao dịch
• Lịch sử cược
• Đổi mật khẩu
• Cài đặt bảo mật

TRANG KHUYẾN MÃI

Mỗi khuyến mãi gồm:

• Banner
• Tiêu đề
• Mô tả
• Thời gian áp dụng
• Nút nhận thưởng

TRANG NẠP TIỀN

• Chọn ngân hàng
• Chọn ví điện tử
• QR Code
• Lịch sử nạp tiền

TRANG RÚT TIỀN

• Danh sách tài khoản liên kết
• Nhập số tiền
• Xác minh OTP

CSKH 24/7

Nút nổi bên phải màn hình

Bao gồm:

• Live Chat
• Telegram
• Messenger
• Zalo

BOTTOM NAVIGATION

Bao gồm:

• Trang Chủ
• Khuyến Mãi
• Nạp Tiền
• Hỗ Trợ
• Cá Nhân

Luôn cố định cuối màn hình

HIỆU ỨNG HỆ THỐNG

• Fade Animation
• Smooth Scroll
• Ripple Effect
• Skeleton Loading
• Lazy Load Hình Ảnh
• Slide Drawer
• Glass Effect Nhẹ
• Zoom Popup
• Pull To Refresh
• Infinite Marquee

CÔNG NGHỆ ĐỀ XUẤT

Frontend:

• Next.js
• React
• TypeScript
• TailwindCSS
• Framer Motion
• SwiperJS
• Zustand

Backend:

• Node.js
• Express
• PostgreSQL
• Redis

MỤC TIÊU GIAO DIỆN

• Hiện đại
• Cao cấp
• Mượt mà
• Dễ sử dụng
• Tối ưu điện thoại
• Cảm giác giống ứng dụng native Android/iOS

TRIỂN KHAI HIỆN TẠI

Repo hiện đã có bản dựng giao diện tĩnh mobile-first:

• index.html: cấu trúc màn hình casino mobile gồm header, banner, thông báo, tài khoản, chức năng nhanh, danh mục game, danh sách game, khuyến mãi, CSKH và bottom navigation.
• styles.css: toàn bộ style responsive, màu xanh chủ đạo, bo góc, shadow, hiệu ứng fade, marquee và fixed navigation.

Chạy thử local:

python3 -m http.server 3000

Sau đó mở http://localhost:3000 trên trình duyệt hoặc chế độ mobile viewport.