# 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: