tieptk/agent_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
tieptk
2026-03-07 10:26:20 +07:00
commit aa223ce3bb
1128 changed files with 118856 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
export_to_html/cart.html Normal file
View File

@@ -0,0 +1,308 @@
<!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">&nbsp;</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>