308 lines
15 KiB
HTML
308 lines
15 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 | MIQ</title>
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|||
|
|
<script>
|
|||
|
|
tailwind.config = {
|
|||
|
|
theme: {
|
|||
|
|
extend: {
|
|||
|
|
fontFamily: { roboto: ['Roboto', 'Arial', 'sans-serif'] },
|
|||
|
|
colors: { brand: '#E4057C', brandDeep: '#6B1440' }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: 'Roboto', Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body class="bg-[#f4f4f4] text-[#111] text-[13px]">
|
|||
|
|
|
|||
|
|
<!-- Breadcrumb -->
|
|||
|
|
<div class="mx-auto w-[1200px] px-0 py-3">
|
|||
|
|
<div class="flex items-center gap-2 text-[12px]">
|
|||
|
|
<a href="index.html" class="text-[#888] hover:text-brand">Trang chủ</a>
|
|||
|
|
<svg class="w-2.5 h-2.5 text-[#888]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|||
|
|
</svg>
|
|||
|
|
<span class="text-[#0a0a0a] font-medium">Giỏ hàng</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Main Content -->
|
|||
|
|
<div class="mx-auto w-[1200px] pb-12 flex justify-center">
|
|||
|
|
<div class="bg-white px-4 py-5 w-[832px]">
|
|||
|
|
<div class="flex flex-col gap-3 w-full">
|
|||
|
|
|
|||
|
|
<!-- Section: Thông tin giỏ hàng -->
|
|||
|
|
<h2 class="font-bold text-[16px] text-[#0a0a0a] leading-7">Thông tin giỏ hàng</h2>
|
|||
|
|
|
|||
|
|
<!-- Cart Item 1 -->
|
|||
|
|
<div class="flex gap-4 items-start">
|
|||
|
|
<div class="bg-[#f3f4f6] flex items-center justify-center shrink-0 w-16 h-16">
|
|||
|
|
<img src="https://www.figma.com/api/mcp/asset/be3c9d39-373b-45b8-a00e-1600f3dde382"
|
|||
|
|
alt="Máy Quét Mã Vạch Symbol LS2208" class="w-16 h-16 object-contain" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex-col flex-1">
|
|||
|
|
<div class="flex items-start justify-between w-full">
|
|||
|
|
<p class="font-bold text-[13px] text-[#0a0a0a] leading-5">Máy Quét Mã Vạch Symbol LS2208</p>
|
|||
|
|
<div class="flex items-start gap-10 shrink-0">
|
|||
|
|
<!-- Price -->
|
|||
|
|
<div class="w-[87px]">
|
|||
|
|
<p class="font-medium text-[16px] text-[#e7000b] leading-[18px]">1.850.000₫</p>
|
|||
|
|
<p class="text-[12px] text-[#a5a5a5] line-through">2.000.000đ</p>
|
|||
|
|
</div>
|
|||
|
|
<!-- Quantity -->
|
|||
|
|
<div class="flex items-center gap-3 h-8">
|
|||
|
|
<button
|
|||
|
|
class="border border-[#d1d5dc] rounded w-6 h-8 flex items-center justify-center hover:bg-gray-50">
|
|||
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
<div class="border border-[#d1d5dc] rounded w-12 h-8 flex items-center justify-center">
|
|||
|
|
<span class="text-[14px] text-[#0a0a0a]">1</span>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
class="border border-[#d1d5dc] rounded w-6 h-8 flex items-center justify-center hover:bg-gray-50">
|
|||
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<!-- Delete -->
|
|||
|
|
<button class="w-4 h-5 flex items-center justify-center text-[#4a5565] hover:text-[#e7000b]">
|
|||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|||
|
|
d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
|
|||
|
|
<path stroke-linecap="round" stroke-width="1.5" d="M10 11v6M14 11v6" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Cart Item 2 + note -->
|
|||
|
|
<div class="flex flex-col gap-1">
|
|||
|
|
<div class="flex gap-4 items-start">
|
|||
|
|
<div class="bg-[#f3f4f6] flex items-center justify-center shrink-0 w-16 h-16">
|
|||
|
|
<img src="https://www.figma.com/api/mcp/asset/be3c9d39-373b-45b8-a00e-1600f3dde382"
|
|||
|
|
alt="Máy in hóa đơn Zywell ZY901" class="w-16 h-16 object-contain" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex-col flex-1">
|
|||
|
|
<div class="flex items-start justify-between w-full">
|
|||
|
|
<p class="font-bold text-[13px] text-[#0a0a0a] leading-5">Máy in hóa đơn Zywell ZY901</p>
|
|||
|
|
<div class="flex items-start gap-10 shrink-0">
|
|||
|
|
<!-- Price -->
|
|||
|
|
<div class="w-[87px]">
|
|||
|
|
<p class="font-medium text-[14px] text-[#e7000b] leading-5">Liên hệ</p>
|
|||
|
|
<p class="text-[14px] text-transparent select-none"> </p>
|
|||
|
|
</div>
|
|||
|
|
<!-- Quantity -->
|
|||
|
|
<div class="flex items-center gap-3 h-8">
|
|||
|
|
<button
|
|||
|
|
class="border border-[#d1d5dc] rounded w-6 h-8 flex items-center justify-center hover:bg-gray-50">
|
|||
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
<div class="border border-[#d1d5dc] rounded w-12 h-8 flex items-center justify-center">
|
|||
|
|
<span class="text-[14px] text-[#0a0a0a]">1</span>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
class="border border-[#d1d5dc] rounded w-6 h-8 flex items-center justify-center hover:bg-gray-50">
|
|||
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<!-- Delete -->
|
|||
|
|
<button class="w-4 h-5 flex items-center justify-center text-[#4a5565] hover:text-[#e7000b]">
|
|||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|||
|
|
d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
|
|||
|
|
<path stroke-linecap="round" stroke-width="1.5" d="M10 11v6M14 11v6" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Note row (aligned with product content, offset by image width) -->
|
|||
|
|
<div class="flex gap-4">
|
|||
|
|
<div class="shrink-0 w-16"></div>
|
|||
|
|
<div class="flex-1 bg-[#f3f4f6] rounded px-3 py-1.5 text-[12px] text-[#4a5565] leading-4">
|
|||
|
|
• "Cam kết hàng chính hãng Liên hệ có giá tốt nhất Hỗ trợ kỹ thuật 24/7"
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Section: Thông tin nhận hàng -->
|
|||
|
|
<h2 class="font-bold text-[16px] text-[#0a0a0a] leading-7 mt-1">Thông tin nhận hàng</h2>
|
|||
|
|
|
|||
|
|
<!-- Delivery form -->
|
|||
|
|
<div class="flex flex-col">
|
|||
|
|
<!-- Tabs -->
|
|||
|
|
<div class="border-b border-black/10 flex">
|
|||
|
|
<button id="tab-delivery" onclick="switchTab('delivery')"
|
|||
|
|
class="h-[46px] w-[392px] text-[14px] font-medium bg-[#f3f4f6] border-b-2 border-[#e7000b] text-[#e7000b] rounded-tl-lg rounded-tr-lg">
|
|||
|
|
Giao hàng tận nơi
|
|||
|
|
</button>
|
|||
|
|
<button id="tab-pickup" onclick="switchTab('pickup')"
|
|||
|
|
class="h-[46px] w-[408px] text-[14px] font-medium text-[#4a5565] border-b-2 border-transparent">
|
|||
|
|
Nhận hàng tại trung tâm
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Form body -->
|
|||
|
|
<div class="bg-[#f3f4f6] rounded px-3 py-5 flex flex-col gap-3">
|
|||
|
|
<!-- Gender -->
|
|||
|
|
<div class="flex items-center gap-6">
|
|||
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|||
|
|
<input type="radio" name="gender" value="anh" checked class="w-4 h-4 accent-[#e7000b]" />
|
|||
|
|
<span class="font-medium text-[13px] text-[#0a0a0a]">Anh</span>
|
|||
|
|
</label>
|
|||
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|||
|
|
<input type="radio" name="gender" value="chi" class="w-4 h-4 accent-[#e7000b]" />
|
|||
|
|
<span class="font-medium text-[13px] text-[#0a0a0a]">Chị</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Name + Phone -->
|
|||
|
|
<div class="grid grid-cols-2 gap-4">
|
|||
|
|
<div class="flex flex-col gap-2">
|
|||
|
|
<label class="text-[13px] font-medium text-[#0a0a0a]">
|
|||
|
|
Họ và tên <span class="text-[#e7000b]">*</span>
|
|||
|
|
</label>
|
|||
|
|
<input type="text" placeholder="Họ tên"
|
|||
|
|
class="bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b]" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex-col gap-2">
|
|||
|
|
<label class="text-[13px] font-medium text-[#0a0a0a]">
|
|||
|
|
Số điện thoại <span class="text-[#e7000b]">*</span>
|
|||
|
|
</label>
|
|||
|
|
<input type="tel" placeholder="Nhập số điện thoại"
|
|||
|
|
class="bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b]" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Address -->
|
|||
|
|
<div class="flex flex-col gap-2">
|
|||
|
|
<label class="text-[13px] font-medium text-[#0a0a0a]">
|
|||
|
|
Địa chỉ nhận hàng <span class="text-[#e7000b]">*</span>
|
|||
|
|
</label>
|
|||
|
|
<div class="grid grid-cols-2 gap-4">
|
|||
|
|
<div class="relative">
|
|||
|
|
<select
|
|||
|
|
class="appearance-none bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 w-full text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b] cursor-pointer">
|
|||
|
|
<option value="" disabled selected>Chọn Tỉnh/Thành Phố</option>
|
|||
|
|
<option>Hà Nội</option>
|
|||
|
|
<option>TP. Hồ Chí Minh</option>
|
|||
|
|
<option>Đà Nẵng</option>
|
|||
|
|
</select>
|
|||
|
|
<svg
|
|||
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#0a0a0a] pointer-events-none rotate-90"
|
|||
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="relative">
|
|||
|
|
<select
|
|||
|
|
class="appearance-none bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 w-full text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b] cursor-pointer">
|
|||
|
|
<option value="" disabled selected>Chọn Xã/Phường</option>
|
|||
|
|
</select>
|
|||
|
|
<svg
|
|||
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#0a0a0a] pointer-events-none rotate-90"
|
|||
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<textarea rows="2" placeholder="Nhập địa chỉ giao hàng"
|
|||
|
|
class="bg-white border border-[#d1d5dc] rounded px-4 py-2 text-[13px] text-[rgba(10,10,10,0.5)] outline-none focus:border-[#e7000b] resize-none"></textarea>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Invoice checkbox -->
|
|||
|
|
<label class="flex items-center gap-2 cursor-pointer h-5">
|
|||
|
|
<input type="checkbox" class="w-4 h-4 accent-[#e7000b] border border-[#d1d5dc] rounded" />
|
|||
|
|
<span class="font-medium text-[13px] text-[#0a0a0a]">Yêu cầu xuất hóa đơn công ty</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<!-- Total -->
|
|||
|
|
<div class="flex items-center justify-between h-8">
|
|||
|
|
<span class="font-semibold text-[13px] text-[#0a0a0a]">Tổng tiền</span>
|
|||
|
|
<span class="font-medium text-[16px] text-[#e7000b]">1.850.000₫</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Divider -->
|
|||
|
|
<hr class="border-t border-dashed border-[#d1d5dc]" />
|
|||
|
|
|
|||
|
|
<!-- Section: Phương thức thanh toán -->
|
|||
|
|
<div class="flex flex-col gap-3">
|
|||
|
|
<h3 class="font-bold text-[16px] text-[#0a0a0a] leading-7">Phương thức thanh toán</h3>
|
|||
|
|
|
|||
|
|
<div class="flex flex-col gap-3">
|
|||
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|||
|
|
<input type="radio" name="payment" value="cod" checked class="w-4 h-4 accent-[#e7000b]" />
|
|||
|
|
<span class="text-[13px] text-[#0a0a0a]">Thanh toán khi nhận hàng (COD)</span>
|
|||
|
|
</label>
|
|||
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|||
|
|
<input type="radio" name="payment" value="transfer" class="w-4 h-4 accent-[#e7000b]" />
|
|||
|
|
<span class="text-[13px] text-[#0a0a0a]">Chuyển khoản ngân hàng</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Terms checkbox -->
|
|||
|
|
<label class="flex items-center gap-2 cursor-pointer mt-4">
|
|||
|
|
<input type="checkbox" class="w-4 h-4 accent-[#e7000b] border border-[#d1d5dc] rounded" />
|
|||
|
|
<span class="text-[13px] text-[#4a5565]">
|
|||
|
|
Tôi đã đọc và đồng ý với các
|
|||
|
|
<a href="#" class="text-[#155dfc] font-bold hover:underline">Điều kiện giao dịch chung</a>
|
|||
|
|
của website
|
|||
|
|
</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<!-- Order button -->
|
|||
|
|
<button
|
|||
|
|
class="bg-[#e7000b] hover:bg-[#c00009] text-white font-medium text-[16px] h-12 w-full rounded flex items-center justify-center transition-colors mt-5">
|
|||
|
|
ĐẶT HÀNG
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function switchTab(tab) {
|
|||
|
|
const tabDelivery = document.getElementById('tab-delivery');
|
|||
|
|
const tabPickup = document.getElementById('tab-pickup');
|
|||
|
|
if (tab === 'delivery') {
|
|||
|
|
tabDelivery.classList.add('bg-[#f3f4f6]', 'border-[#e7000b]', 'text-[#e7000b]');
|
|||
|
|
tabDelivery.classList.remove('text-[#4a5565]', 'border-transparent');
|
|||
|
|
tabPickup.classList.remove('bg-[#f3f4f6]', 'border-[#e7000b]', 'text-[#e7000b]');
|
|||
|
|
tabPickup.classList.add('text-[#4a5565]', 'border-transparent');
|
|||
|
|
} else {
|
|||
|
|
tabPickup.classList.add('bg-[#f3f4f6]', 'border-[#e7000b]', 'text-[#e7000b]');
|
|||
|
|
tabPickup.classList.remove('text-[#4a5565]', 'border-transparent');
|
|||
|
|
tabDelivery.classList.remove('bg-[#f3f4f6]', 'border-[#e7000b]', 'text-[#e7000b]');
|
|||
|
|
tabDelivery.classList.add('text-[#4a5565]', 'border-transparent');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|