update 7/5
This commit is contained in:
547
buildpc.html
Normal file
547
buildpc.html
Normal file
@@ -0,0 +1,547 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>BESTPC - Trang chủ</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="./src/assets/css/font.css">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||||
|
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="page-buildpc bg-[#F4F4F4] pb-[100px]">
|
||||||
|
<div class="container">
|
||||||
|
<div class="breadcrumb p-[12px_0]">
|
||||||
|
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="flex items-center pr-[12px]">
|
||||||
|
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||||
|
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||||
|
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||||
|
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||||
|
<meta itemprop="position" content="1">
|
||||||
|
</li>
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="flex items-center pr-[12px]">
|
||||||
|
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||||
|
<b itemprop="name">
|
||||||
|
Tạo máy tính riêng của bạn
|
||||||
|
</b>
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="2">
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<!-- Action Bar -->
|
||||||
|
<div class="flex gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
|
||||||
|
<div class="w-[615px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
|
||||||
|
<a class="w-[24px] ml-[10px]" href="javascript:void()">
|
||||||
|
<i class="icon_2025 copy"></i>
|
||||||
|
</a>
|
||||||
|
<input type="text" class="w-full h-full p-[10px] outline-none"
|
||||||
|
value="https://bestpc.vn/restricted.php" />
|
||||||
|
</div>
|
||||||
|
<div class="w-[370px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
|
||||||
|
<p class="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
|
||||||
|
<input type="text" class="w-full h-full p-[10px] outline-none" value="" />
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 gap-[10px] w-[calc(100%-615px-370px)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group">
|
||||||
|
<i class="icon_2025 history group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||||
|
<span class="ml-[5px]">Lịch sử</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group">
|
||||||
|
<i class="icon_2025 download group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||||
|
<span class="ml-[5px]">Tải xuống</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group">
|
||||||
|
<i class="icon_2025 return group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||||
|
<span class="ml-[5px]">Làm mới</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white p-[15px]">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="px-6 py-2.5 text-center font-bold text-white bg-violet-900 rounded">
|
||||||
|
Bắt đầu tạo
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="px-6 py-2.5 text-center font-bold text-stone-500 bg-zinc-100 rounded hover:text-white hover:bg-violet-900">
|
||||||
|
So sánh giá tại các cửa hàng
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- list button -->
|
||||||
|
|
||||||
|
<div class="content-tab hidden" id="create-component">
|
||||||
|
<div class="mt-6 flex items-center border-b-[1px] border-neutral-200 pb-3">
|
||||||
|
<b class="left w-[200px] name-component">
|
||||||
|
Sản phẩm
|
||||||
|
</b>
|
||||||
|
<div class="right w-[calc(100%-200px)] grid grid-cols-8">
|
||||||
|
<b class="item col-span-3">
|
||||||
|
Thông tin
|
||||||
|
</b>
|
||||||
|
<b class="item">
|
||||||
|
Giá gốc
|
||||||
|
</b>
|
||||||
|
<b class="item">
|
||||||
|
Khuyến mãi
|
||||||
|
</b>
|
||||||
|
<b class="item">
|
||||||
|
Thành tiền
|
||||||
|
</b>
|
||||||
|
<b class="item col-span-2">Nhà cung cấp </b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- header list buildpc -->
|
||||||
|
<div class="list-buildpc">
|
||||||
|
<div class="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU
|
||||||
|
</b>
|
||||||
|
<div class="right w-[calc(100%-200px)]">
|
||||||
|
<div class="item-info-product grid items-center grid-cols-8">
|
||||||
|
<div class="info col-span-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<a href=""
|
||||||
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
||||||
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||||||
|
height="100%" class="block w-full h-full object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<a href=""
|
||||||
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
||||||
|
Ryzen 7 9800x3D 4.7
|
||||||
|
GHz 8-Core Processor</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="old-price font-400">
|
||||||
|
4.700.000 Vnđ
|
||||||
|
</div>
|
||||||
|
<div class="price-saleoff font-400">
|
||||||
|
20%
|
||||||
|
</div>
|
||||||
|
<b class="total-amount">
|
||||||
|
4.000.000đ
|
||||||
|
</b>
|
||||||
|
<div class="supplier col-span-2 flex items-center justify-between">
|
||||||
|
<a href="">
|
||||||
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||||||
|
class="w-full block h-[30px] object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<div class="btn flex items-center">
|
||||||
|
<a href=""
|
||||||
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
||||||
|
ngay</a>
|
||||||
|
<a href="" class="group hover:bg-red-500 p-1.5 rounded-[50%]"><i
|
||||||
|
class="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU Cooler
|
||||||
|
</b>
|
||||||
|
<div class="right w-[calc(100%-200px)]">
|
||||||
|
<div class="item-info-product grid items-center grid-cols-8">
|
||||||
|
<div class="info col-span-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<a href=""
|
||||||
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
||||||
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||||||
|
height="100%" class="block w-full h-full object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<a href=""
|
||||||
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
||||||
|
Ryzen 7 9800x3D 4.7
|
||||||
|
GHz 8-Core Processor</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="old-price font-400">
|
||||||
|
4.700.000 Vnđ
|
||||||
|
</div>
|
||||||
|
<div class="price-saleoff font-400">
|
||||||
|
20%
|
||||||
|
</div>
|
||||||
|
<b class="total-amount">
|
||||||
|
4.000.000đ
|
||||||
|
</b>
|
||||||
|
<div class="supplier col-span-2 flex items-center justify-between">
|
||||||
|
<a href="">
|
||||||
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||||||
|
class="w-full block h-[30px] object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<div class="btn flex items-center">
|
||||||
|
<a href=""
|
||||||
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
||||||
|
ngay</a>
|
||||||
|
<a href="" class="group hover:bg-red-500 p-1.5 rounded-[50%]"><i
|
||||||
|
class="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-info-product grid items-center grid-cols-8 mt-2.5 pt-2.5 border-t-[1px] border-neutral-200">
|
||||||
|
<div class="info col-span-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<a href=""
|
||||||
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
||||||
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||||||
|
height="100%" class="block w-full h-full object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<a href=""
|
||||||
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
||||||
|
Ryzen 7 9800x3D 4.7
|
||||||
|
GHz 8-Core Processor</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="old-price font-400">
|
||||||
|
4.700.000 Vnđ
|
||||||
|
</div>
|
||||||
|
<div class="price-saleoff font-400">
|
||||||
|
20%
|
||||||
|
</div>
|
||||||
|
<b class="total-amount">
|
||||||
|
4.000.000đ
|
||||||
|
</b>
|
||||||
|
<div class="supplier col-span-2 flex items-center justify-between">
|
||||||
|
<a href="">
|
||||||
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||||||
|
class="w-full block h-[30px] object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<div class="btn flex items-center">
|
||||||
|
<a href=""
|
||||||
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
||||||
|
ngay</a>
|
||||||
|
<a href="" class="group hover:bg-red-500 p-1.5 rounded-[50%]"><i
|
||||||
|
class="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="w-[130px] h-[30px] block text-xs mt-2.5 text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
||||||
|
Chọn thêm CPU</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU Cooler
|
||||||
|
</b>
|
||||||
|
<div class="right w-[calc(100%-200px)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
||||||
|
Chọn thêm CPU</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU Cooler
|
||||||
|
</b>
|
||||||
|
<div class="right w-[calc(100%-200px)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
||||||
|
Chọn thêm CPU</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU Cooler
|
||||||
|
</b>
|
||||||
|
<div class="right w-[calc(100%-200px)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
||||||
|
Chọn thêm CPU</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU Cooler
|
||||||
|
</b>
|
||||||
|
<div class="right w-[calc(100%-200px)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
||||||
|
Chọn thêm CPU</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU Cooler
|
||||||
|
</b>
|
||||||
|
<div class="right w-[calc(100%-200px)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
||||||
|
Chọn thêm CPU</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- list buildpc -->
|
||||||
|
|
||||||
|
<div class="box-total-price pt-5">
|
||||||
|
<b class="block text-xl text-right text-red-600">Tổng tiền 2 sản phẩm: 8.000.000đ</b>
|
||||||
|
<div class="flex items-center justify-end gap-[10px] mt-3">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="flex items-center px-7 py-2.5 border border-[#b3b3b3] rounded hover:bg-[#e0e0e0]">
|
||||||
|
<i class="icon_2025 print"></i>
|
||||||
|
<span class="ml-2">In đơn hàng</span>
|
||||||
|
</a>
|
||||||
|
<a href="javasript:void(0)"
|
||||||
|
class="px-7 py-2.5 text-center text-white bg-violet-900 rounded font-bold hover:bg-violet-700">
|
||||||
|
Mua hàng tại Hacom
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- tổng tiền -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-tab" id="compare-component">
|
||||||
|
|
||||||
|
<div class="list-component mt-5">
|
||||||
|
|
||||||
|
<div class="item-compare mb-12">
|
||||||
|
<div class="flex items-center border-b-[1px] border-neutral-200 pb-3">
|
||||||
|
<b class="left w-[200px] name-component">
|
||||||
|
<a href="" class="block m-[auto_auto_auto_0]">
|
||||||
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||||||
|
class="w-[150px] block h-[50px] object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
</b>
|
||||||
|
<div class="right w-[calc(100%-200px)] grid grid-cols-8">
|
||||||
|
<b class="item col-span-3">
|
||||||
|
Sản phẩm
|
||||||
|
</b>
|
||||||
|
<b class="item">
|
||||||
|
Giá gốc
|
||||||
|
</b>
|
||||||
|
<b class="item">
|
||||||
|
Khuyến mãi
|
||||||
|
</b>
|
||||||
|
<b class="item">
|
||||||
|
Giao hàng
|
||||||
|
</b>
|
||||||
|
<b class="item col-span-2">Thành tiền</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="list-product">
|
||||||
|
<div
|
||||||
|
class="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU Cooler
|
||||||
|
</b>
|
||||||
|
<div class="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
||||||
|
<div class="info col-span-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<a href=""
|
||||||
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
||||||
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||||||
|
height="100%" class="block w-full h-full object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<a href=""
|
||||||
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
||||||
|
Ryzen 7 9800x3D 4.7
|
||||||
|
GHz 8-Core Processor</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="old-price font-400">
|
||||||
|
4.700.000 Vnđ
|
||||||
|
</div>
|
||||||
|
<div class="price-saleoff font-400">
|
||||||
|
20%
|
||||||
|
</div>
|
||||||
|
<b class="ship underline">
|
||||||
|
Liên hệ
|
||||||
|
</b>
|
||||||
|
<div class="col-span-2 flex items-center justify-between">
|
||||||
|
<b class="total-amount">
|
||||||
|
4.000.000đ
|
||||||
|
</b>
|
||||||
|
<a href=""
|
||||||
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU Cooler
|
||||||
|
</b>
|
||||||
|
<div class="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
||||||
|
<div class="info col-span-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<a href=""
|
||||||
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
||||||
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||||||
|
height="100%" class="block w-full h-full object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<a href=""
|
||||||
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
||||||
|
Ryzen 7 9800x3D 4.7
|
||||||
|
GHz 8-Core Processor</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="old-price font-400">
|
||||||
|
4.700.000 Vnđ
|
||||||
|
</div>
|
||||||
|
<div class="price-saleoff font-400">
|
||||||
|
20%
|
||||||
|
</div>
|
||||||
|
<b class="ship underline text-[#33c600]">
|
||||||
|
Liên hệ
|
||||||
|
</b>
|
||||||
|
<div class="col-span-2 flex items-center justify-between">
|
||||||
|
<b class="total-amount">
|
||||||
|
4.000.000đ
|
||||||
|
</b>
|
||||||
|
<a href=""
|
||||||
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- end list -->
|
||||||
|
|
||||||
|
<div class="text-right flex items-center font-bold justify-end mt-5">
|
||||||
|
<div class="mr-[10px]">Tổng tiền (<span>2</span> sản phẩm) :</div>
|
||||||
|
<div class="font-bold">6.000.000 Vnđ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-compare mb-12">
|
||||||
|
<div class="flex items-center border-b-[1px] border-neutral-200 pb-3">
|
||||||
|
<b class="left w-[200px] name-component">
|
||||||
|
<a href="" class="block m-[auto_auto_auto_0]">
|
||||||
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||||||
|
class="w-[150px] block h-[50px] object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
</b>
|
||||||
|
<div class="right w-[calc(100%-200px)] grid grid-cols-8">
|
||||||
|
<b class="item col-span-3">
|
||||||
|
Sản phẩm
|
||||||
|
</b>
|
||||||
|
<b class="item">
|
||||||
|
Giá gốc
|
||||||
|
</b>
|
||||||
|
<b class="item">
|
||||||
|
Khuyến mãi
|
||||||
|
</b>
|
||||||
|
<b class="item">
|
||||||
|
Giao hàng
|
||||||
|
</b>
|
||||||
|
<b class="item col-span-2">Thành tiền</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="list-product">
|
||||||
|
<div
|
||||||
|
class="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU Cooler
|
||||||
|
</b>
|
||||||
|
<div class="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
||||||
|
<div class="info col-span-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<a href=""
|
||||||
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
||||||
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||||||
|
height="100%" class="block w-full h-full object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<a href=""
|
||||||
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
||||||
|
Ryzen 7 9800x3D 4.7
|
||||||
|
GHz 8-Core Processor</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="old-price font-400">
|
||||||
|
4.700.000 Vnđ
|
||||||
|
</div>
|
||||||
|
<div class="price-saleoff font-400">
|
||||||
|
20%
|
||||||
|
</div>
|
||||||
|
<b class="ship underline">
|
||||||
|
Liên hệ
|
||||||
|
</b>
|
||||||
|
<div class="col-span-2 flex items-center justify-between">
|
||||||
|
<b class="total-amount">
|
||||||
|
4.000.000đ
|
||||||
|
</b>
|
||||||
|
<a href=""
|
||||||
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||||
|
<b class="name-component block w-[200px]">
|
||||||
|
CPU Cooler
|
||||||
|
</b>
|
||||||
|
<div class="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
||||||
|
<div class="info col-span-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<a href=""
|
||||||
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
||||||
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||||||
|
height="100%" class="block w-full h-full object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<a href=""
|
||||||
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
||||||
|
Ryzen 7 9800x3D 4.7
|
||||||
|
GHz 8-Core Processor</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="old-price font-400">
|
||||||
|
4.700.000 Vnđ
|
||||||
|
</div>
|
||||||
|
<div class="price-saleoff font-400">
|
||||||
|
20%
|
||||||
|
</div>
|
||||||
|
<b class="ship underline text-[#33c600]">
|
||||||
|
Liên hệ
|
||||||
|
</b>
|
||||||
|
<div class="col-span-2 flex items-center justify-between">
|
||||||
|
<b class="total-amount">
|
||||||
|
4.000.000đ
|
||||||
|
</b>
|
||||||
|
<a href=""
|
||||||
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- end list -->
|
||||||
|
|
||||||
|
<div class="text-right flex items-center font-bold justify-end mt-5">
|
||||||
|
<div class="mr-[10px]">Tổng tiền (<span>2</span> sản phẩm) :</div>
|
||||||
|
<div class="font-bold">6.000.000 Vnđ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -47,8 +47,6 @@
|
|||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="box-backgorund px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
<div class="box-backgorund px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||||||
|
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|||||||
@@ -487,8 +487,6 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Banner Section -->
|
<!-- Banner Section -->
|
||||||
<div class="banner mt-[10px]">
|
<div class="banner mt-[10px]">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
10
index.html
10
index.html
@@ -5,12 +5,16 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="" />
|
<link rel="icon" type="image/svg+xml" href="" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="color-scheme" content="light dark" />
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<title>Vite + Preact</title>
|
<link rel="stylesheet" href="./src/assets/css/font.css">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||||
|
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/index.tsx"></script>
|
<script type="module" src="/src/index.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
425
list-store.html
425
list-store.html
@@ -41,7 +41,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box-backgorund p-[15px] rounded-[12px] mt-3.5 bg-white">
|
<div class="box-backgorund p-[15px] rounded-[12px] mt-3.5 bg-white">
|
||||||
|
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h3 class="text-2xl text-black font-bold">Danh sách cửa hàng</h3>
|
<h3 class="text-2xl text-black font-bold">Danh sách cửa hàng</h3>
|
||||||
|
|
||||||
@@ -53,17 +52,15 @@
|
|||||||
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
|
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
|
||||||
onclick="$('.autocomplete-suggestions').show();">
|
onclick="$('.autocomplete-suggestions').show();">
|
||||||
<button type="submit" class="absolute left-[10px] top-[5px] w-[40px] h-[35px] "><i
|
<button type="submit" class="absolute left-[10px] top-[5px] w-[40px] h-[35px] "><i
|
||||||
class="icon_2025 search "></i></button>
|
class="icon_2025 search-2 "></i></button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<a href=""
|
<a href="javascript:void()" onclick="showFormStoreNew()"
|
||||||
class="block w-[190px] h-[45px] leading-[45px] border-[1px] border-[#462f91] rounded-[8px] text-center text-[#462f91] font-[500] hover:bg-[#462f91] hover:text-white">Giới
|
class="block w-[190px] h-[45px] leading-[45px] border-[1px] border-[#462f91] rounded-[8px] text-center text-[#462f91] font-[500] hover:bg-[#462f91] hover:text-white">Giới
|
||||||
thiệu cửa hàng mới</a>
|
thiệu cửa hàng mới</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter flex items-center justify-between p-[10px] bg-[#f4f4f4] mt-[10px]">
|
<div class="filter flex items-center justify-between p-[10px] bg-[#f4f4f4] mt-[10px]">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<a href=""
|
<a href=""
|
||||||
@@ -98,13 +95,431 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="list">
|
||||||
|
|
||||||
|
<div class="item-store py-[15px] border-b-[1px] border-[#c8c8c8] flex ">
|
||||||
|
<div class="logo w-[100px] h-[100px] border border-[#d4d4d4] mr-[10px]">
|
||||||
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||||||
|
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%-390px)] mr-[10px]">
|
||||||
|
<a href="#" class="name-store line-clamp-1 font-bold mb-[3px] text-xl">
|
||||||
|
Hanoicomputer - Công cổ phần máy tính Hà Nội
|
||||||
|
</a>
|
||||||
|
<a href="" class="flex items-center">
|
||||||
|
<i class="icon_2025 shop-blue"></i>
|
||||||
|
<span class="ml-[5px] text-[#1877f2]">Chuyên mua bán trao đổi PC, laptop,
|
||||||
|
linh phụ kiện máy tính</span>
|
||||||
|
</a>
|
||||||
|
<div class="flex items-center mt-[5px]">
|
||||||
|
<div class="flex items-center mr-[15px]">
|
||||||
|
<div class="w-[24px]">
|
||||||
|
<i class="icon_2025 map-2"></i>
|
||||||
|
</div>
|
||||||
|
<p class="ml-[5px]">Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh Khai, phường 6,
|
||||||
|
quận 3, TP. Hồ
|
||||||
|
Chí Minh</p>
|
||||||
|
</div>
|
||||||
|
<a href="" class="flex items-center mr-[15px]">
|
||||||
|
<i class="icon_2025 map-4"></i>
|
||||||
|
<span class="ml-[5px] text-[#FF7A00] hover:underline ">Google Maps</span>
|
||||||
|
</a>
|
||||||
|
<a href="" class="flex items-center">
|
||||||
|
<i class="icon_2025 showroom"></i>
|
||||||
|
<span class="ml-[5px] text-[#1877f2] underline hover:font-bold">Có 7 showroom</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a href="" class="flex items-center mt-[5px]">
|
||||||
|
<div class="w-[24px]"><i class="icon_2025 phone"></i></div>
|
||||||
|
<span class="ml-[5px]">Tel: 1800 6867 - 1800 6865</span>
|
||||||
|
</a>
|
||||||
|
<a href="" class="flex items-center mt-[5px]">
|
||||||
|
<div class="w-[24px]"><i class="icon_2025 earth"></i></div>
|
||||||
|
<span class="ml-[5px]">Web: https:/hacom.com.vn/</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- end info -->
|
||||||
|
<div class="btn w-[270px] flex flex-col justify-between">
|
||||||
|
<div class="top">
|
||||||
|
<a href="javascript:void()" onclick="showReview()"
|
||||||
|
class="text-right block underline hover:text-[#1877f2]">Đánh giá về chất
|
||||||
|
lượng
|
||||||
|
dịch vụ</a>
|
||||||
|
<div class="flex items-center justify-end mt-[5px]">
|
||||||
|
<i class="icon-star star4"></i>
|
||||||
|
<span class="mx-[5px]">4.6</span>
|
||||||
|
<a href="javascript:void(0)" onclick="showListReview()"
|
||||||
|
class="font-[500] underline hover:text[var(--color-hover)]">(Xem 47 đánh
|
||||||
|
giá)</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn flex items-center gap-[10px]">
|
||||||
|
<a href=""
|
||||||
|
class="block border w-[50%] h-[38px] leading-[38px] text-center border-[#303030] border rounded-[4px] font-bold hover:bg-[#303030] hover:text-white">
|
||||||
|
Lưu địa chỉ
|
||||||
|
</a>
|
||||||
|
<a href=""
|
||||||
|
class="block w-[50%] h-[38px] leading-[38px] text-center bg-[#FF7A00] text-white font-bold rounded-[4px] text-center hover:bg-orange-600">Liên
|
||||||
|
hệ</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="backgroundPopup" onclick="closeBackground()"></div>
|
||||||
|
<div class="box-form-review hidden fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
|
||||||
|
id="js-box-review">
|
||||||
|
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||||
|
<b class="text-center text-xl block">Đánh giá sản phẩm</b>
|
||||||
|
<a href="javascript:void(0)" onclick="closeReview()" id="js-close-review"
|
||||||
|
class="absolute right-0 top-0 text-[#808080] text-[22px] ">x</a>
|
||||||
|
</div>
|
||||||
|
<div class="info-form-review w-[500px] mx-[auto]">
|
||||||
|
<a href="" class="block w-[100px] h-[100px] m-[10px_auto] p-[10px] rounded-[4px] border border-[#d4d4d4]">
|
||||||
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||||||
|
class="block w-full h-[100%] m-[auto] object-contain" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="" class="text-center block mb-[10px]">Hanoicomputer - Công cổ phần máy tính Hà Nội</a>
|
||||||
|
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<div class="rating-selection">
|
||||||
|
<input type="radio" class="rating-input" id="star5" name="rating" value="5">
|
||||||
|
<label for="star5" class="rating-star"></label>
|
||||||
|
|
||||||
|
<input type="radio" class="rating-input" id="star4" name="rating" value="4">
|
||||||
|
<label for="star4" class="rating-star"></label>
|
||||||
|
|
||||||
|
<input type="radio" class="rating-input" id="star3" name="rating" value="3">
|
||||||
|
<label for="star3" class="rating-star"></label>
|
||||||
|
|
||||||
|
<input type="radio" class="rating-input" id="star2" name="rating" value="2">
|
||||||
|
<label for="star2" class="rating-star"></label>
|
||||||
|
|
||||||
|
<input type="radio" class="rating-input" id="star1" name="rating" value="1">
|
||||||
|
<label for="star1" class="rating-star"></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="form-input mt-[20px]">
|
||||||
|
<input type="text" name="title" placeholder="Mời bạn nhập tiêu đề..." />
|
||||||
|
<div class="note-error"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-input mt-[10px]">
|
||||||
|
<textarea name="content" placeholder="Mời bạn chia sẻ cảm nhận..." id=""></textarea>
|
||||||
|
<div class="note-error"></div>
|
||||||
|
</div>
|
||||||
|
<input id="js-file-upload-id" type="hidden" value="">
|
||||||
|
<div id="js-container-selector" class="mt-[10px] flex items-center">
|
||||||
|
<a href="javascript:void(0)" class="flex items-center" id="js-select-file">
|
||||||
|
<i class="icon_2025 upload_image"></i>
|
||||||
|
<span class="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
|
||||||
|
<span class="px-[5px]">(tối đa 3 ảnh)</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-[15px] flex items-center">
|
||||||
|
<p class="mr-[10px]">Chấm điểm theo trải nghiệm cá nhân</p>
|
||||||
|
<input type="number" name="point" min="1" max="10"
|
||||||
|
class="w-[60px] h-[40px] p-[10px] border border-[#c1c1c1] rounded-[4px]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit"
|
||||||
|
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]">Gửi
|
||||||
|
đánh
|
||||||
|
giá</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="box-list-review hidden fixed left-[50%] top-[50%] w-[800px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
|
||||||
|
id="js-box-list-review">
|
||||||
|
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||||
|
<b class="text-center text-xl block">Đánh giá của khách hàng</b>
|
||||||
|
<span class="mt-[5px] text-center block">(102 đánh giá)</span>
|
||||||
|
<a href="javascript:void(0)" onclick="closeReview()" id="js-close-review"
|
||||||
|
class="absolute right-0 top-[-5px] text-[#808080] text-[22px] ">x</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="list-review max-h-[900px] overflow-auto">
|
||||||
|
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||||
|
<div class="w-[80px] mr-[20px]">
|
||||||
|
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||||
|
<div class="time mt-[10px]">
|
||||||
|
<b class="mb-[2px] text-center block">Dino</b>
|
||||||
|
<p class="text-center">10:00pm 20/02/2025</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-[calc(100%-100px)]">
|
||||||
|
<div class="flex items-center mb-[5px]">
|
||||||
|
<i class="icon-star star4"></i>
|
||||||
|
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||||
|
</div>
|
||||||
|
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||||
|
typesetting
|
||||||
|
industry. Lorem Ipsum has been the industry's standard
|
||||||
|
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||||
|
and scrambled it to make a type specimen
|
||||||
|
book. I</p>
|
||||||
|
<div class="flex items-center mb-[10px]">
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||||
|
class="w-[80px] block mr-[10px]">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||||
|
data-fancybox="gallery">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||||
|
data-fancybox="gallery">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||||
|
<div class="btn">
|
||||||
|
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||||
|
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||||
|
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||||
|
<div class="w-[80px] mr-[20px]">
|
||||||
|
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||||
|
<div class="time mt-[10px]">
|
||||||
|
<b class="mb-[2px] text-center block">Dino</b>
|
||||||
|
<p class="text-center">10:00pm 20/02/2025</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-[calc(100%-100px)]">
|
||||||
|
<div class="flex items-center mb-[5px]">
|
||||||
|
<i class="icon-star star4"></i>
|
||||||
|
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||||
|
</div>
|
||||||
|
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||||
|
typesetting
|
||||||
|
industry. Lorem Ipsum has been the industry's standard
|
||||||
|
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||||
|
and scrambled it to make a type specimen
|
||||||
|
book. I</p>
|
||||||
|
<div class="flex items-center mb-[10px]">
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||||
|
class="w-[80px] block mr-[10px]">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||||
|
data-fancybox="gallery">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||||
|
data-fancybox="gallery">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||||
|
<div class="btn">
|
||||||
|
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||||
|
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||||
|
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||||
|
<div class="w-[80px] mr-[20px]">
|
||||||
|
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||||
|
<div class="time mt-[10px]">
|
||||||
|
<b class="mb-[2px] text-center block">Dino</b>
|
||||||
|
<p class="text-center">10:00pm 20/02/2025</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-[calc(100%-100px)]">
|
||||||
|
<div class="flex items-center mb-[5px]">
|
||||||
|
<i class="icon-star star4"></i>
|
||||||
|
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||||
|
</div>
|
||||||
|
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||||
|
typesetting
|
||||||
|
industry. Lorem Ipsum has been the industry's standard
|
||||||
|
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||||
|
and scrambled it to make a type specimen
|
||||||
|
book. I</p>
|
||||||
|
<div class="flex items-center mb-[10px]">
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||||
|
class="w-[80px] block mr-[10px]">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||||
|
data-fancybox="gallery">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||||
|
data-fancybox="gallery">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||||
|
<div class="btn">
|
||||||
|
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||||
|
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||||
|
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||||
|
<div class="w-[80px] mr-[20px]">
|
||||||
|
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||||
|
<div class="time mt-[10px]">
|
||||||
|
<b class="mb-[2px] text-center block">Dino</b>
|
||||||
|
<p class="text-center">10:00pm 20/02/2025</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-[calc(100%-100px)]">
|
||||||
|
<div class="flex items-center mb-[5px]">
|
||||||
|
<i class="icon-star star4"></i>
|
||||||
|
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||||
|
</div>
|
||||||
|
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||||
|
typesetting
|
||||||
|
industry. Lorem Ipsum has been the industry's standard
|
||||||
|
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||||
|
and scrambled it to make a type specimen
|
||||||
|
book. I</p>
|
||||||
|
<div class="flex items-center mb-[10px]">
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||||
|
class="w-[80px] block mr-[10px]">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||||
|
data-fancybox="gallery">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="./src/assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||||
|
data-fancybox="gallery">
|
||||||
|
<img src="./src/assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||||
|
<div class="btn">
|
||||||
|
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||||
|
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||||
|
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="box-form-store hidden fixed left-[50%] top-[50%] w-[800px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
|
||||||
|
id="js-form-store">
|
||||||
|
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||||
|
<b class="text-center text-xl block">Giới thiệu cửa hàng mới</b>
|
||||||
|
<a href="javascript:void(0)" onclick="closeFormStore()" id="js-close-store"
|
||||||
|
class="absolute right-0 top-0 text-[#808080] text-[22px] ">x</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-input mt-[10px]">
|
||||||
|
<label for="" class="block mb-[5px]">Tên cửa hàng</label>
|
||||||
|
<input type="text" name="title" placeholder="Mời bạn nhập tên cửa hàng..." />
|
||||||
|
<div class="note-error"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-input mt-[10px]">
|
||||||
|
<label for="" class="block mb-[5px]">Website</label>
|
||||||
|
<input type="text" name="web" placeholder="Mời bạn nhập link website..." />
|
||||||
|
<div class="note-error"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-input mt-[10px]">
|
||||||
|
<label for="" class="block mb-[5px]">Tỉnh thành</label>
|
||||||
|
<div class="relative select-arrow">
|
||||||
|
<select name="" id="">
|
||||||
|
<option value="">Chọn tỉnh thành</option>
|
||||||
|
<option value="">Hà nội</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="note-error"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-input mt-[10px]">
|
||||||
|
<label for="" class="block mb-[5px]">Địa chỉ</label>
|
||||||
|
<input type="text" name="address" placeholder="Mời bạn nhập địa chỉ cửu hàng..." />
|
||||||
|
<div class="note-error"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-input mt-[10px]">
|
||||||
|
<label for="" class="block mb-[5px]">Mô tả</label>
|
||||||
|
<textarea type="text" name="note" placeholder="Mời bạn nhập mô tả..."></textarea>
|
||||||
|
<div class="note-error"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-input mt-[10px]">
|
||||||
|
<label for="" class="block mb-[5px]">Thông tin người liên hệ</label>
|
||||||
|
<input type="text" name="info" placeholder="Mời bạn nhập thông tin..." />
|
||||||
|
<div class="note-error"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit"
|
||||||
|
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]">Gửi
|
||||||
|
đánh
|
||||||
|
giá</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
function showReview() {
|
||||||
|
$("#js-box-review").removeClass('hidden');
|
||||||
|
$("#backgroundPopup").addClass('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function showListReview() {
|
||||||
|
$("#js-box-list-review").removeClass('hidden');
|
||||||
|
$("#backgroundPopup").addClass('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeReview() {
|
||||||
|
$("#js-box-review").addClass('hidden');
|
||||||
|
$('#js-box-list-review').addClass('hidden');
|
||||||
|
$("#backgroundPopup").removeClass('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeFormStore() {
|
||||||
|
$("#js-form-store").addClass('hidden');
|
||||||
|
$("#backgroundPopup").removeClass('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeBackground() {
|
||||||
|
$("#js-box-review").addClass('hidden');
|
||||||
|
$('#js-box-list-review').addClass('hidden');
|
||||||
|
$("#js-form-store").addClass('hidden');
|
||||||
|
$("#backgroundPopup").removeClass('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function showFormStoreNew() {
|
||||||
|
$("#js-form-store").removeClass('hidden');
|
||||||
|
$("#backgroundPopup").addClass('active');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
51
package-lock.json
generated
51
package-lock.json
generated
@@ -5,8 +5,10 @@
|
|||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"preact": "^10.25.3",
|
"preact": "^10.26.6",
|
||||||
"preact-iso": "^2.9.1"
|
"preact-iso": "^2.9.1",
|
||||||
|
"swiper": "^11.2.6",
|
||||||
|
"tailwindcss": "^4.1.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@preact/preset-vite": "^2.9.3",
|
"@preact/preset-vite": "^2.9.3",
|
||||||
@@ -3831,9 +3833,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/preact": {
|
"node_modules/preact": {
|
||||||
"version": "10.26.5",
|
"version": "10.26.6",
|
||||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.26.5.tgz",
|
"resolved": "https://registry.npmjs.org/preact/-/preact-10.26.6.tgz",
|
||||||
"integrity": "sha512-fmpDkgfGU6JYux9teDWLhj9mKN55tyepwYbxHgQuIxbWQzgFg5vk7Mrrtfx7xRxq798ynkY4DDDxZr235Kk+4w==",
|
"integrity": "sha512-5SRRBinwpwkaD+OqlBDeITlRgvd8I8QlxHJw9AxSdMNV6O+LodN9nUyYGpSF7sadHjs6RzeFShMexC6DbtWr9g==",
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "opencollective",
|
"type": "opencollective",
|
||||||
"url": "https://opencollective.com/preact"
|
"url": "https://opencollective.com/preact"
|
||||||
@@ -4445,6 +4447,29 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/swiper": {
|
||||||
|
"version": "11.2.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz",
|
||||||
|
"integrity": "sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "patreon",
|
||||||
|
"url": "https://www.patreon.com/swiperjs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "open_collective",
|
||||||
|
"url": "http://opencollective.com/swiper"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 4.7.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/tailwindcss": {
|
||||||
|
"version": "4.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.5.tgz",
|
||||||
|
"integrity": "sha512-nYtSPfWGDiWgCkwQG/m+aX83XCwf62sBgg3bIlNiiOcggnS1x3uVRDAuyelBFL+vJdOPPCGElxv9DjHJjRHiVA=="
|
||||||
|
},
|
||||||
"node_modules/text-table": {
|
"node_modules/text-table": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||||
@@ -7478,9 +7503,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"preact": {
|
"preact": {
|
||||||
"version": "10.26.5",
|
"version": "10.26.6",
|
||||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.26.5.tgz",
|
"resolved": "https://registry.npmjs.org/preact/-/preact-10.26.6.tgz",
|
||||||
"integrity": "sha512-fmpDkgfGU6JYux9teDWLhj9mKN55tyepwYbxHgQuIxbWQzgFg5vk7Mrrtfx7xRxq798ynkY4DDDxZr235Kk+4w=="
|
"integrity": "sha512-5SRRBinwpwkaD+OqlBDeITlRgvd8I8QlxHJw9AxSdMNV6O+LodN9nUyYGpSF7sadHjs6RzeFShMexC6DbtWr9g=="
|
||||||
},
|
},
|
||||||
"preact-iso": {
|
"preact-iso": {
|
||||||
"version": "2.9.1",
|
"version": "2.9.1",
|
||||||
@@ -7897,6 +7922,16 @@
|
|||||||
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
|
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"swiper": {
|
||||||
|
"version": "11.2.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz",
|
||||||
|
"integrity": "sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q=="
|
||||||
|
},
|
||||||
|
"tailwindcss": {
|
||||||
|
"version": "4.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.5.tgz",
|
||||||
|
"integrity": "sha512-nYtSPfWGDiWgCkwQG/m+aX83XCwf62sBgg3bIlNiiOcggnS1x3uVRDAuyelBFL+vJdOPPCGElxv9DjHJjRHiVA=="
|
||||||
|
},
|
||||||
"text-table": {
|
"text-table": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||||
|
|||||||
@@ -7,8 +7,10 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"preact": "^10.25.3",
|
"preact": "^10.26.6",
|
||||||
"preact-iso": "^2.9.1"
|
"preact-iso": "^2.9.1",
|
||||||
|
"swiper": "^11.2.6",
|
||||||
|
"tailwindcss": "^4.1.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@preact/preset-vite": "^2.9.3",
|
"@preact/preset-vite": "^2.9.3",
|
||||||
|
|||||||
@@ -1,15 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%">
|
|
||||||
<stop offset="0%" stop-color="#41D1FF"></stop>
|
|
||||||
<stop offset="100%" stop-color="#BD34FE"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%">
|
|
||||||
<stop offset="0%" stop-color="#FFEA83"></stop>
|
|
||||||
<stop offset="8.333%" stop-color="#FFDD35"></stop>
|
|
||||||
<stop offset="100%" stop-color="#FFA800"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path>
|
|
||||||
<path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,6 +1,7 @@
|
|||||||
:root {
|
:root {
|
||||||
--color-global: #462f91;
|
--color-global: #462f91;
|
||||||
--color-title: #0d0d9c;
|
--color-title: #0d0d9c;
|
||||||
|
--color-hover: #1877f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
@@ -32,7 +33,7 @@ html {
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Roboto", sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
min-width: 1400px;
|
min-width: 1400px;
|
||||||
color: #303030;
|
color: #303030;
|
||||||
@@ -57,6 +58,11 @@ html {
|
|||||||
height: 24px;
|
height: 24px;
|
||||||
background-position: -70px 0;
|
background-position: -70px 0;
|
||||||
}
|
}
|
||||||
|
.icon_2025.search-2 {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -102px 0;
|
||||||
|
}
|
||||||
.icon_2025.user {
|
.icon_2025.user {
|
||||||
width: 26px;
|
width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
@@ -105,7 +111,12 @@ html {
|
|||||||
.icon_2025.heart {
|
.icon_2025.heart {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-position: -98px -141px;
|
background-position: -98px -123px;
|
||||||
|
}
|
||||||
|
.icon_2025.shop-blue {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -100px -147px;
|
||||||
}
|
}
|
||||||
.icon_2025.link {
|
.icon_2025.link {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
@@ -193,6 +204,51 @@ html {
|
|||||||
height: 24px;
|
height: 24px;
|
||||||
background-position: -126px -124px;
|
background-position: -126px -124px;
|
||||||
}
|
}
|
||||||
|
.icon_2025.showroom {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -119px -69px;
|
||||||
|
}
|
||||||
|
.icon_2025.phone {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background-position: -167px -4px;
|
||||||
|
}
|
||||||
|
.icon_2025.earth {
|
||||||
|
width: 22px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: 0 -102px;
|
||||||
|
}
|
||||||
|
.icon_2025.copy {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-position: -208px -71px;
|
||||||
|
}
|
||||||
|
.icon_2025.history {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -45px -102px;
|
||||||
|
}
|
||||||
|
.icon_2025.download {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
background-position: -74px -102px;
|
||||||
|
}
|
||||||
|
.icon_2025.return {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background-position: -155px -105px;
|
||||||
|
}
|
||||||
|
.icon_2025.close {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-position: -160px -126px;
|
||||||
|
}
|
||||||
|
.icon_2025.print {
|
||||||
|
width: 18px;
|
||||||
|
height: 19px;
|
||||||
|
background-position: -187px -4px;
|
||||||
|
}
|
||||||
|
|
||||||
.icon-star {
|
.icon-star {
|
||||||
background: url(../images/icon_star.png) no-repeat;
|
background: url(../images/icon_star.png) no-repeat;
|
||||||
@@ -901,7 +957,7 @@ html {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
border-radius: 12px;
|
border-radius: 4px;
|
||||||
border: 1px solid #c1c1c1;
|
border: 1px solid #c1c1c1;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #9c9c9c;
|
color: #9c9c9c;
|
||||||
@@ -991,4 +1047,47 @@ html {
|
|||||||
background-position: -212px -152px;
|
background-position: -212px -152px;
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-arrow {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid #d5d5d5;
|
||||||
|
border-radius: 4px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.select-arrow select {
|
||||||
|
position: relative;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
outline: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 30px 0 10px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.select-arrow::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
right: 10px;
|
||||||
|
top: 15px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 16px;
|
||||||
|
height: 8px;
|
||||||
|
background: #777777;
|
||||||
|
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||||
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-form-store input {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
#js-box-list-review .list-review {
|
||||||
|
max-height: 450px;
|
||||||
|
}
|
||||||
}/*# sourceMappingURL=style.css.map */
|
}/*# sourceMappingURL=style.css.map */
|
||||||
File diff suppressed because one or more lines are too long
@@ -1,6 +1,7 @@
|
|||||||
:root {
|
:root {
|
||||||
--color-global: #462f91;
|
--color-global: #462f91;
|
||||||
--color-title: #0d0d9c;
|
--color-title: #0d0d9c;
|
||||||
|
--color-hover: #1877f2;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
@@ -34,7 +35,7 @@ html {
|
|||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
font-family: "Roboto", sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
min-width: 1400px;
|
min-width: 1400px;
|
||||||
color: #303030;
|
color: #303030;
|
||||||
@@ -42,6 +43,7 @@ body {
|
|||||||
html {
|
html {
|
||||||
font-family: "Roboto", sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon_2025 {
|
.icon_2025 {
|
||||||
background: url(../images/icon_2025.png) no-repeat;
|
background: url(../images/icon_2025.png) no-repeat;
|
||||||
background-size: 228px 175px;
|
background-size: 228px 175px;
|
||||||
@@ -56,6 +58,11 @@ html {
|
|||||||
height: 24px;
|
height: 24px;
|
||||||
background-position: -70px 0;
|
background-position: -70px 0;
|
||||||
}
|
}
|
||||||
|
&.search-2 {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -102px 0;
|
||||||
|
}
|
||||||
&.user {
|
&.user {
|
||||||
width: 26px;
|
width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
@@ -104,7 +111,12 @@ html {
|
|||||||
&.heart {
|
&.heart {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-position: -98px -141px;
|
background-position: -98px -123px;
|
||||||
|
}
|
||||||
|
&.shop-blue {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -100px -147px;
|
||||||
}
|
}
|
||||||
&.link {
|
&.link {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
@@ -193,6 +205,51 @@ html {
|
|||||||
height: 24px;
|
height: 24px;
|
||||||
background-position: -126px -124px;
|
background-position: -126px -124px;
|
||||||
}
|
}
|
||||||
|
&.showroom {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -119px -69px;
|
||||||
|
}
|
||||||
|
&.phone {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background-position: -167px -4px;
|
||||||
|
}
|
||||||
|
&.earth {
|
||||||
|
width: 22px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: 0 -102px;
|
||||||
|
}
|
||||||
|
&.copy {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-position: -208px -71px;
|
||||||
|
}
|
||||||
|
&.history {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -45px -102px;
|
||||||
|
}
|
||||||
|
&.download {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
background-position: -74px -102px;
|
||||||
|
}
|
||||||
|
&.return {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background-position: -155px -105px;
|
||||||
|
}
|
||||||
|
&.close {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-position: -160px -126px;
|
||||||
|
}
|
||||||
|
&.print {
|
||||||
|
width: 18px;
|
||||||
|
height: 19px;
|
||||||
|
background-position: -187px -4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-star {
|
.icon-star {
|
||||||
@@ -959,7 +1016,7 @@ html {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
border-radius: 12px;
|
border-radius: 4px;
|
||||||
border: 1px solid #c1c1c1;
|
border: 1px solid #c1c1c1;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #9c9c9c;
|
color: #9c9c9c;
|
||||||
@@ -1047,3 +1104,47 @@ html {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select-arrow {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid #d5d5d5;
|
||||||
|
border-radius: 4px;
|
||||||
|
line-height: 40px;
|
||||||
|
select {
|
||||||
|
position: relative;
|
||||||
|
appearance: none;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
outline: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 30px 0 10px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
right: 10px;
|
||||||
|
top: 15px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 16px;
|
||||||
|
height: 8px;
|
||||||
|
background: #777777;
|
||||||
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-form-store {
|
||||||
|
input {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
#js-box-list-review {
|
||||||
|
.list-review {
|
||||||
|
max-height: 450px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 42 KiB |
BIN
src/assets/images/lienkien-ram.png
Normal file
BIN
src/assets/images/lienkien-ram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
@@ -1,18 +1,17 @@
|
|||||||
import { render } from 'preact';
|
import { render } from "preact";
|
||||||
import { LocationProvider, Router, Route } from 'preact-iso';
|
import { LocationProvider, Router, Route } from "preact-iso";
|
||||||
|
|
||||||
import { Header } from './components/Header.jsx';
|
import { Home } from "./pages/Home/index.jsx";
|
||||||
import { Home } from './pages/Home/index.jsx';
|
import ProductDetail from "./pages/product/ProductPage.jsx";
|
||||||
import { NotFound } from './pages/_404.jsx';
|
import { NotFound } from "./pages/_404.jsx";
|
||||||
import './style.css';
|
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
return (
|
return (
|
||||||
<LocationProvider>
|
<LocationProvider>
|
||||||
<Header />
|
|
||||||
<main>
|
<main>
|
||||||
<Router>
|
<Router>
|
||||||
<Route path="/" component={Home} />
|
<Route path="/" component={Home} />
|
||||||
|
<Route path="/detail" component={ProductDetail} />
|
||||||
<Route default component={NotFound} />
|
<Route default component={NotFound} />
|
||||||
</Router>
|
</Router>
|
||||||
</main>
|
</main>
|
||||||
@@ -20,4 +19,4 @@ export function App() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
render(<App />, document.getElementById('app'));
|
render(<App />, document.getElementById("root"));
|
||||||
|
|||||||
@@ -1,36 +1,8 @@
|
|||||||
import "./style.css";
|
|
||||||
|
|
||||||
export function Home() {
|
export function Home() {
|
||||||
return (
|
return (
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<a href="https://preactjs.com" target="_blank"></a>
|
<a href="https://preactjs.com" target="_blank"></a>
|
||||||
<h1>Get Started building Vite-powered Preact Apps </h1>
|
<h1>Get Started building Vite-powered Preact Apps chào xìn</h1>
|
||||||
<section>
|
|
||||||
<Resource
|
|
||||||
title="Learn Preact"
|
|
||||||
description="If you're new to Preact, try the interactive tutorial to learn important concepts"
|
|
||||||
href="https://preactjs.com/tutorial"
|
|
||||||
/>
|
|
||||||
<Resource
|
|
||||||
title="Differences to React"
|
|
||||||
description="If you're coming from React, you may want to check out our docs to see where Preact differs"
|
|
||||||
href="https://preactjs.com/guide/v10/differences-to-react"
|
|
||||||
/>
|
|
||||||
<Resource
|
|
||||||
title="Learn Vite"
|
|
||||||
description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
|
|
||||||
href="https://vitejs.dev"
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function Resource(props) {
|
|
||||||
return (
|
|
||||||
<a href={props.href} target="_blank" class="resource">
|
|
||||||
<h2>{props.title}</h2>
|
|
||||||
<p>{props.description}</p>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,47 +0,0 @@
|
|||||||
img {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #673ab8aa);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home section {
|
|
||||||
margin-top: 5rem;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
column-gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource {
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
text-align: left;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #222;
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource:hover {
|
|
||||||
border: 1px solid #000;
|
|
||||||
box-shadow: 0 25px 50px -12px #673ab888;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 639px) {
|
|
||||||
.home section {
|
|
||||||
margin-top: 5rem;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
row-gap: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.resource {
|
|
||||||
color: #ccc;
|
|
||||||
background-color: #161616;
|
|
||||||
}
|
|
||||||
.resource:hover {
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,34 +1,68 @@
|
|||||||
import "./style.css";
|
import { h } from "preact";
|
||||||
|
|
||||||
const ProductPage = () => {
|
|
||||||
const { id } = useParams(); // Lấy id sản phẩm từ URL
|
|
||||||
|
|
||||||
const product = {
|
|
||||||
id: id,
|
|
||||||
name: `Product ${id}`,
|
|
||||||
description: "Detailed description of the product.",
|
|
||||||
price: 99.99,
|
|
||||||
imageUrl: "https://via.placeholder.com/400",
|
|
||||||
features: ["Feature 1", "Feature 2", "Feature 3"],
|
|
||||||
reviews: [
|
|
||||||
{ text: "Great product!", rating: 5 },
|
|
||||||
{ text: "Good value for money.", rating: 4 },
|
|
||||||
{ text: "Could be better.", rating: 3 },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
|
export function ProductDetail() {
|
||||||
return (
|
return (
|
||||||
<div className="product-page">
|
<div className="box-product-detail bg-[#F4F4F4]">
|
||||||
<ProductImage imageUrl={product.imageUrl} altText={product.name} />
|
<div className="container">
|
||||||
<ProductDetail
|
<div className="breadcrumb p-[12px_0]">
|
||||||
name={product.name}
|
<ol
|
||||||
description={product.description}
|
itemscope
|
||||||
price={product.price}
|
itemtype="http://schema.org/BreadcrumbList"
|
||||||
/>
|
className="ul flex flex-wrap items-center"
|
||||||
<ProductFeatures features={product.features} />
|
>
|
||||||
<ProductReviews reviews={product.reviews} />
|
<li
|
||||||
|
itemprop="itemListElement"
|
||||||
|
itemscope
|
||||||
|
itemtype="http://schema.org/ListItem"
|
||||||
|
className="flex items-center pr-[12px]"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
itemprop="item"
|
||||||
|
className="nopad-l flex items-center text-[#637381]"
|
||||||
|
>
|
||||||
|
<span itemprop="name">
|
||||||
|
<span style="font-size: 0; display: none;">Trang chủ</span>
|
||||||
|
<i className="icon_2025 home mr-[5px] mb-[5px]" />
|
||||||
|
</span>
|
||||||
|
</a>{" "}
|
||||||
|
<i className="icon_2025 angle-right ml-[12px]" />
|
||||||
|
<meta itemprop="position" content="1" />
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
itemprop="itemListElement"
|
||||||
|
itemscope
|
||||||
|
itemtype="http://schema.org/ListItem"
|
||||||
|
className="flex items-center pr-[12px]"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="/man-hinh.html"
|
||||||
|
itemprop="item"
|
||||||
|
className="nopad-l flex items-center"
|
||||||
|
>
|
||||||
|
<span itemprop="name">Màn hình máy tính</span>
|
||||||
|
<i className="icon_2025 angle-right text-[#637381] ml-[12px]" />
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="2" />
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
itemprop="itemListElement"
|
||||||
|
itemscope
|
||||||
|
itemtype="http://schema.org/ListItem"
|
||||||
|
className="flex items-center pr-[12px]"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="/aivision.html"
|
||||||
|
itemprop="item"
|
||||||
|
className="nopad-l flex items-center"
|
||||||
|
>
|
||||||
|
<span itemprop="name">AIVISION</span>
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="3" />
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
export default ProductPage;
|
|
||||||
|
|||||||
9
tailwind.config.js
Normal file
9
tailwind.config.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./src/**/*.{html,js,jsx,ts,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from 'vite';
|
||||||
import preact from '@preact/preset-vite';
|
import preact from '@preact/preset-vite';
|
||||||
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [preact()],
|
plugins: [preact()],
|
||||||
@@ -11,4 +12,5 @@ export default defineConfig({
|
|||||||
ignored: ['!**/node_modules/**'], // Loại bỏ các thư mục không cần theo dõi
|
ignored: ['!**/node_modules/**'], // Loại bỏ các thư mục không cần theo dõi
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
publicDir: 'static',
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user