158 lines
7.3 KiB
HTML
158 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Giỏ hà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>
|
|
<style>
|
|
.quantity-label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.conversion-text {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="products.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Giỏ hàng (3)</h1>
|
|
<button class="back-button">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Warehouse Selection -->
|
|
<div class="card mb-3">
|
|
<div class="form-group" style="margin-bottom: 0;">
|
|
<label class="form-label" for="warehouse">Kho xuất hàng</label>
|
|
<select id="warehouse" class="form-input form-select">
|
|
<option value="hanoi">Kho Hà Nội - Nguyễn Trãi</option>
|
|
<option value="hcm">Kho TP.HCM - Quận 7</option>
|
|
<option value="danang">Kho Đà Nẵng - Sơn Trà</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cart Items -->
|
|
<div class="cart-item">
|
|
<img src="https://images.unsplash.com/photo-1615971677499-5467cbab01c0?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
|
|
<div class="cart-item-info">
|
|
<div class="cart-item-name">Gạch men cao cấp 60x60</div>
|
|
<div class="text-small text-muted">Mã: ET-MC6060</div>
|
|
<div class="cart-item-price">450.000đ/m²</div>
|
|
<div class="quantity-control">
|
|
<button class="quantity-btn">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<span class="quantity-value">10</span>
|
|
<button class="quantity-btn">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
|
</div>
|
|
<div class="text-small text-muted">(Quy đổi: <strong>28 viên</strong> / <strong>10.08 m²</strong>)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-item">
|
|
<img src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
|
|
<div class="cart-item-info">
|
|
<div class="cart-item-name">Gạch granite nhập khẩu 1200x1200</div>
|
|
<div class="text-small text-muted">Mã: ET-GR8080</div>
|
|
<div class="cart-item-price">680.000đ/m²</div>
|
|
<div class="quantity-control">
|
|
<button class="quantity-btn">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<span class="quantity-value">15</span>
|
|
<button class="quantity-btn">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
|
</div>
|
|
<div class="text-small text-muted">(Quy đổi: <strong>11 viên</strong> / <strong>15.84 m²</strong>)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-item">
|
|
<img src="https://images.unsplash.com/photo-1600607687644-aac4c3eac7f4?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
|
|
<div class="cart-item-info">
|
|
<div class="cart-item-name">Gạch mosaic trang trí 750x1500</div>
|
|
<div class="text-small text-muted">Mã: ET-MS3030</div>
|
|
<div class="cart-item-price">320.000đ/m²</div>
|
|
<div class="quantity-control">
|
|
<button class="quantity-btn">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<span class="quantity-value">5</span>
|
|
<button class="quantity-btn">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
|
</div>
|
|
<div class="text-small text-muted">(Quy đổi: <strong>5 viên</strong> / <strong>5.625 m²</strong>)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Discount Code -->
|
|
<div class="card">
|
|
<div class="form-group" style="margin-bottom: 8px;">
|
|
<label class="form-label">Mã giảm giá</label>
|
|
<div style="display: flex; gap: 8px;">
|
|
<input type="text" class="form-input" style="flex: 1;" placeholder="Nhập mã giảm giá">
|
|
<button class="btn btn-primary">Áp dụng</button>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-success">
|
|
<i class="fas fa-check-circle"></i> Bạn được giảm 15% (hạng Diamond)
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Order Summary -->
|
|
<div class="card">
|
|
<h3 class="card-title">Thông tin đơn hàng</h3>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Tạm tính (30 m²)</span>
|
|
<span>17.107.200đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Giảm giá Diamond (-15%)</span>
|
|
<span class="text-success">-2.566.000đ</span>
|
|
</div>
|
|
<div class="d-flex justify-between mb-2">
|
|
<span>Phí vận chuyển</span>
|
|
<span>Miễn phí</span>
|
|
</div>
|
|
<div style="border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: 12px;">
|
|
<div class="d-flex justify-between">
|
|
<span class="text-bold" style="font-size: 16px;">Tổng cộng</span>
|
|
<span class="text-bold text-primary" style="font-size: 18px;">14.541.120đ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checkout Button -->
|
|
<div style="margin-bottom: 24px;">
|
|
<a href="checkout.html" class="btn btn-primary btn-block">
|
|
Tiến hành đặt hàng
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |