117 lines
5.4 KiB
HTML
117 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Thanh toán - 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">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="cart.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Thanh toán</h1>
|
|
<div style="width: 32px;"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Delivery Info -->
|
|
<div class="card">
|
|
<h3 class="card-title">Thông tin giao hàng</h3>
|
|
<div class="form-group">
|
|
<label class="form-label">Họ và tên người nhận</label>
|
|
<input type="text" class="form-input" value="La Nguyen Quynh">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Số điện thoại</label>
|
|
<input type="tel" class="form-input" value="0983441099">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Địa chỉ giao hàng</label>
|
|
<textarea class="form-input" rows="3">123 Nguyễn Trãi, Quận 1, TP.HCM</textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Ghi chú cho tài xế</label>
|
|
<input type="text" class="form-input" placeholder="Ví dụ: Gọi trước khi giao">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Method -->
|
|
<div class="card">
|
|
<h3 class="card-title">Phương thức thanh toán</h3>
|
|
<label class="list-item" style="cursor: pointer;">
|
|
<input type="radio" name="payment" checked style="margin-right: 12px;">
|
|
<div class="list-item-icon">
|
|
<i class="fas fa-money-check-alt"></i>
|
|
</div>
|
|
<div class="list-item-content">
|
|
<div class="list-item-title">Chuyển khoản ngân hàng</div>
|
|
<div class="list-item-subtitle">Thanh toán qua tài khoản ngân hàng</div>
|
|
</div>
|
|
</label>
|
|
<label class="list-item" style="cursor: pointer;">
|
|
<input type="radio" name="payment" style="margin-right: 12px;">
|
|
<div class="list-item-icon">
|
|
<i class="fas fa-hand-holding-usd"></i>
|
|
</div>
|
|
<div class="list-item-content">
|
|
<div class="list-item-title">Thanh toán khi nhận hàng</div>
|
|
<div class="list-item-subtitle">COD - Trả tiền mặt cho tài xế</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Order Summary -->
|
|
<div class="card">
|
|
<h3 class="card-title">Tóm tắt đơn hàng</h3>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Gạch men cao cấp 60x60 (10m²)</span>
|
|
<span>4.500.000đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Gạch granite nhập khẩu (15m²)</span>
|
|
<span>10.200.000đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Gạch mosaic trang trí (5m²)</span>
|
|
<span>1.600.000đ</span>
|
|
</div>
|
|
<hr style="margin: 12px 0;">
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Tạm tính</span>
|
|
<span>16.700.000đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Giảm giá Diamond</span>
|
|
<span class="text-success">-2.505.000đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Phí vận chuyển</span>
|
|
<span>Miễn phí</span>
|
|
</div>
|
|
<hr style="margin: 12px 0;">
|
|
<div class="d-flex justify-between">
|
|
<span class="text-bold" style="font-size: 16px;">Tổng thanh toán</span>
|
|
<span class="text-bold text-primary" style="font-size: 18px;">14.195.000đ</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Place Order Button -->
|
|
<div style="margin-bottom: 24px;">
|
|
<a href="order-success.html" class="btn btn-primary btn-block">
|
|
<i class="fas fa-check-circle"></i> Hoàn tất đặt hàng
|
|
</a>
|
|
<p class="text-center text-small text-muted mt-2">
|
|
Bằng cách đặt hàng, bạn đồng ý với
|
|
<a href="#" class="text-primary">Điều khoản & Điều kiện</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |