85 lines
4.8 KiB
HTML
85 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Đặt hàng thành công - EuroTile Worker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="container">
|
|
<div class="success-container">
|
|
<div class="success-icon">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
|
|
<h1 class="success-title">Đặt hàng thành công!</h1>
|
|
<p class="success-message">
|
|
Cảm ơn bạn đã đặt hàng. Chúng tôi sẽ liên hệ xác nhận trong vòng 24 giờ.
|
|
</p>
|
|
|
|
<!-- Order Info -->
|
|
<div class="card" style="background: var(--background-gray);">
|
|
<div class="text-center mb-3">
|
|
<p class="text-small text-muted">Mã đơn hàng</p>
|
|
<p class="text-bold" style="font-size: 24px; color: var(--primary-blue);">DH2023120801</p>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span class="text-small text-muted">Ngày đặt</span>
|
|
<span class="text-small">08/12/2023 14:30</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span class="text-small text-muted">Tổng tiền</span>
|
|
<span class="text-small text-bold">14.195.000đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span class="text-small text-muted">Phương thức thanh toán</span>
|
|
<span class="text-small">Chuyển khoản</span>
|
|
</div>
|
|
<div class="d-flex justify-between">
|
|
<span class="text-small text-muted">Trạng thái</span>
|
|
<span class="text-small text-warning">Chờ xác nhận</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Next Steps -->
|
|
<div class="card">
|
|
<h3 class="card-title">Các bước tiếp theo</h3>
|
|
<div style="display: flex; align-items: flex-start; margin-bottom: 12px;">
|
|
<div style="width: 24px; height: 24px; background: var(--primary-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 12px; flex-shrink: 0;">1</div>
|
|
<div>
|
|
<p class="text-small text-bold">Chờ xác nhận</p>
|
|
<p class="text-small text-muted">Nhân viên sẽ gọi xác nhận trong 24h</p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-start; margin-bottom: 12px;">
|
|
<div style="width: 24px; height: 24px; background: var(--border-color); color: var(--text-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 12px; flex-shrink: 0;">2</div>
|
|
<div>
|
|
<p class="text-small text-bold">Chuẩn bị hàng</p>
|
|
<p class="text-small text-muted">Đơn hàng được đóng gói và chuẩn bị</p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-start;">
|
|
<div style="width: 24px; height: 24px; background: var(--border-color); color: var(--text-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 12px; flex-shrink: 0;">3</div>
|
|
<div>
|
|
<p class="text-small text-bold">Giao hàng</p>
|
|
<p class="text-small text-muted">Vận chuyển đến địa chỉ của bạn</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<a href="#" class="btn btn-primary btn-block mb-2">
|
|
<i class="fas fa-eye"></i> Xem chi tiết đơn hàng
|
|
</a>
|
|
<a href="index.html" class="btn btn-secondary btn-block">
|
|
<i class="fas fa-home"></i> Quay về trang chủ
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |