---
# System prepended metadata

title: Mô tả giao diện Onchan

---

# Mô tả giao diện Onchan

## 1. Giao diện Navbar.
 - Chức năng: Chứa các thông tin cơ bản giúp nhận diện thương hiệu.
 - Các dữ liệu hiển thị: Logo, nút tìm kiếm giao dịch, nút giỏ hàng.
 - Ràng buộc: 
 - Animation: Giỏ hàng nhảy số khi thêm một sản phẩm vào giỏ. 
    
## 2. Giao diện Footer.
 - Chức năng: Chức các thông tin liên hệ, giới thiệu doanh nghiệp.
 - Các dữ liệu hiển thị: Địa chỉ, số điện thoại, email, danh muc ...
 - Ràng buộc:
 - Animation:

## 3. Giao diện Trang Chủ.
 - Chức năng: Hiển thị thông tin sản phẩm tới người tiêu dùng.
 - Các dữ liệu hiển thị: Danh sách loại sản phẩm, danh sách sản phẩm.
 - Ràng buộc: Dữ liệu loại sản phẩm, dữ liệu sản phẩm.
 - Animation: Đổi màu khi di chuột vào một loại sản phẩm / sản phẩm.
### 3.1 Danh Sách Loại Sản Phẩm.
 - Chức năng: Hiển thị danh sách các loại sản phẩm cung cấp tới khách hàng.
 - Các dữ liệu hiển thị: Danh sách các loại sản phẩm.
 - Ràng buộc: Dữ liệu loại sản phẩm
 - Animation: Đổi màu loại sản phẩm khi di chuột vào / khi chọn loại sản phẩm.

### 3.2 Danh Sách Sản Phẩm.
 - Chức năng: Hiển thị danh sách các sản phẩm cung cấp tới khách hàng.
 - Các dữ liệu hiển thị: Hình ảnh, tên, giá bán, % giảm giá, số lượng còn lại.
 - Ràng buộc: Dữ liệu sản phẩm.
 - Animation: Đổi màu khi di chuột vào sản phẩm, đổi màu khi di chuột vào nút chi tiết / nút thêm vào giỏ.
 
## 4. Giao diện Chi Tiết Sản Phẩm.
- Chức năng: Hiển thị thông tin chi tiết sản phẩm tới người tiêu dùng.
- Các dữ liệu hiển thị: Hình ảnh, tên, giá bán, % giảm giá, số lượng, số lượng còn lại, video quảng cáo.
- Ràng buộc: Dữ liệu sản phẩm.
- Animation: Đổi màu khi di chuột vào nút mua ngay / nút thêm vào giỏ.
 
## 5. Giao diện Giỏ Hàng.
- Chức năng: Hiển thị thông tin sản phẩm đã thêm vào giỏ hàng tới người tiêu dùng.
- Các dữ liệu hiển thị: Hình ảnh, tên, giá bán, % giảm giá, số lượng, xóa, tổng tiền thanh toán.
- Ràng buộc: Dữ liệu sản phẩm.
- Animation: Đổi màu khi di chuột vào nút thanh toán / xóa tất cả.

## 6. Giao diện Thông Tin Thanh Toán.
- Chức năng: Nhập các thông tin của khách và chọn hình thức thanh toán để thực hiện thanh toán sản phẩm.
- Các dữ liệu hiển thị: Tên, số điện thoại, địa chỉ, email của khách hàng và hình thức thanh toán, tổng tiền thanh toán.
- Ràng buộc: Dữ liệu nhập thông tin khách hàng bắt buộc, bắt buộc chọn hình thức thanh toán.
- Animation: Đổi màu khi di chuột vào nút thanh toán sản phẩm.

## 7. Giao diện Kết Quả Thanh Toán.
- Chức năng: Hiển thị kết quả thanh toán thành công / thất bại.
- Các dữ liệu hiển thị: Hình ảnh, thông báo kết quả.
- Ràng buộc:
- Animation: Đổi màu khi di chuột vào nút về trang chủ.

## 8. Giao diện trang Not Found.
 - Chức năng: Hiển thị thông báo khi xảy ra lỗi.
 - Các dữ liệu hiển thị: Hình ảnh, thông báo lỗi.
 - Ràng buộc:
 - Animation:

## 9. Giao diện trang Đăng Nhập.
 - Chức năng: Đăng nhập để thực hiện chức năng tìm kiếm giao dịch.
 - Các dữ liệu hiển thị: Logo, slogan, form đăng nhập.
 - Ràng buộc: Dữ liệu nhập vào phải là số, không chứa chữ cái hoặc ký tự đặc biệt.
 - Animation: Đổi màu khi di chuột vào nút lấy mã OTP / nút nhập.

## 10. Giao diện trang Tìm Kiếm Giao Dịch.
 - Chức năng: Hiển thị thống kê giao dịch, danh sách giao dịch mà Số Điện Thoại đăng nhập đã thực hiện.
 - Các dữ liệu hiển thị: Dữ liệu thống kê, danh sách giao dịch đã thực hiện.
 - Ràng buộc: Chỉ hiển thị khi có tài khoản đăng nhập, nếu chưa có sẽ chuyển về trang đăng nhập.
 - Animation: