tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upload

Browse Source
This commit is contained in:
Tieptk
2025-05-11 21:25:48 +07:00
parent b798003ec9
commit 8a7adbb3d2
17 changed files with 2741 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

489
buildpc.html
View File

@@ -539,9 +539,498 @@
</div>
</div>
</div>
<div id="backgroundPopup" class="" onclick="closeBuildpc()"></div>
<div class="fixed w-[1400px] hidden bg-white left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[999]"
id="js-modal-popup">
<div class="header-popup p-[10px] bg-[var(--color-global)] flex items-center justify-between">
<b class="w-[205px] mr-[15px] text-white">Chọn linh kiện</b>
<div class="w-[calc(100%-275px)] relative input-search">
<form action="/search" enctype="text/plain" method="get"
class="relative w-full h-[45px] bg-white rounded-[3px] overflow-hidden">
<input type="text" name="q" placeholder="Bạn cần tìm linh kiện gì..."
class="search-input w-full h-full p-[0_10px] outline-none rounded-[8px] text-base"
onclick="$('.autocomplete-suggestions').show();">
<button type="submit" class="absolute right-[10px] top-[5px] w-[40px] h-[35px] pl-[10px]"><i
class="icon_2025 search "></i></button>
</form>
</div>
<a href="javascript:void(0)" onclick="close_pupup()" class="w-[54px] flex items-center justify-end">
<i class="icon_2025 close brightness-0 invert-[1]"></i>
</a>
</div>
<div class="content-popup p-[10px] bg-white">
<div class="flex gap-[15px]">
<div class="left w-[205px]">
<b class="">230 sản phẩm</b>
<div
class="mt-3 title-filter flex items-center justify-between px-[20px] bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
<b class="text-xl">Bộ lọc</b>
<i class="icon_2025 filter"></i>
</div>
<div class="list-filter h-[calc(100vh-208px)] overflow-auto">
<div class="item-filter mb-2.5">
<h3
class="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
Lọc theo
</h3>
<div class="mt-2.5 text-base leading-8 text-black">
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
cho Máy tính dành
cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle2" class="checkbox">
<label for="vehicle2" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle3" class="checkbox">
<label for="vehicle3" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle4" class="checkbox">
<label for="vehicle4" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle5" class="checkbox">
<label for="vehicle5" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle6" class="checkbox">
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
cho</label>
</a>
</div>
</div>
<div class="item-filter mb-2.5">
<h3
class="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
Lọc theo
</h3>
<div class="mt-2.5 grid grid-flow-col grid-rows-9 text-base leading-8 text-black">
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">All</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle2" class="checkbox">
<label for="vehicle2" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">32gb</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle3" class="checkbox">
<label for="vehicle3" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">64bg</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle4" class="checkbox">
<label for="vehicle4" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">16bg</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle5" class="checkbox">
<label for="vehicle5" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">12gb</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle6" class="checkbox">
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">4gb</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle6" class="checkbox">
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">2gb</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle6" class="checkbox">
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">24gb</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle2" class="checkbox">
<label for="vehicle2" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">32gb</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle3" class="checkbox">
<label for="vehicle3" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">64bg</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle4" class="checkbox">
<label for="vehicle4" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">16bg</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle5" class="checkbox">
<label for="vehicle5" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">12gb</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle6" class="checkbox">
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">4gb</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle6" class="checkbox">
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">2gb</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle6" class="checkbox">
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">24gb</label>
</a>
</div>
</div>
</div>
</div>
<div class="right w-[calc(100%-220px)]">
<div class="flex gap-[15px]">
<a href="" class="text-[var(--color-hover)]">Chọn tất cả</a>
<a href="">Bỏ chọn tất cả</a>
<a href="">So sánh sản phẩm đã chọn</a>
</div>
<div
class="mt-3 relative z-[9] grid grid-cols-11 bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
<b class="col-span-3 text-center">Tên</b>
<b>Dung lượng</b>
<b>Thế hệ</b>
<b>Bộ nhớ</b>
<b>Độ ồn</b>
<b>Màu sắc</b>
<b>Đánh giá</b>
<b class="col-span-2">Thành tiền</b>
</div>
<div class="list mt-3 h-[calc(100vh-208px)] overflow-auto">
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
<div class="col-span-3">
<div class="flex items-center">
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]">AMD
Ryzen 7 9800x3D 4.7
GHz 8-Core Processor</a>
</div>
</div>
<div class="text-center">
8bg
</div>
<div class="">5</div>
<div>GDDR5</div>
<div class="text-center">5db</div>
<div>Đen</div>
<div class="flex items-center">
<i class="icon_star star4"></i>
<span class="ml-[5px]">(125)</span>
</div>
<div class="col-span-2 flex items-center justify-between">
<div class="price">3.400.000đ</div>
<a href=""
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
</div>
</div>
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
<div class="col-span-3">
<div class="flex items-center">
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]">AMD
Ryzen 7 9800x3D 4.7
GHz 8-Core Processor</a>
</div>
</div>
<div class="text-center">
8bg
</div>
<div class="">5</div>
<div>GDDR5</div>
<div class="text-center">5db</div>
<div>Đen</div>
<div class="flex items-center">
<i class="icon_star star4"></i>
<span class="ml-[5px]">(125)</span>
</div>
<div class="col-span-2 flex items-center justify-between">
<div class="price">3.400.000đ</div>
<a href=""
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
</div>
</div>
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
<div class="col-span-3">
<div class="flex items-center">
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]">AMD
Ryzen 7 9800x3D 4.7
GHz 8-Core Processor</a>
</div>
</div>
<div class="text-center">
8bg
</div>
<div class="">5</div>
<div>GDDR5</div>
<div class="text-center">5db</div>
<div>Đen</div>
<div class="flex items-center">
<i class="icon_star star4"></i>
<span class="ml-[5px]">(125)</span>
</div>
<div class="col-span-2 flex items-center justify-between">
<div class="price">3.400.000đ</div>
<a href=""
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
</div>
</div>
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
<div class="col-span-3">
<div class="flex items-center">
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]">AMD
Ryzen 7 9800x3D 4.7
GHz 8-Core Processor</a>
</div>
</div>
<div class="text-center">
8bg
</div>
<div class="">5</div>
<div>GDDR5</div>
<div class="text-center">5db</div>
<div>Đen</div>
<div class="flex items-center">
<i class="icon_star star4"></i>
<span class="ml-[5px]">(125)</span>
</div>
<div class="col-span-2 flex items-center justify-between">
<div class="price">3.400.000đ</div>
<a href=""
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
</div>
</div>
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
<div class="col-span-3">
<div class="flex items-center">
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]">AMD
Ryzen 7 9800x3D 4.7
GHz 8-Core Processor</a>
</div>
</div>
<div class="text-center">
8bg
</div>
<div class="">5</div>
<div>GDDR5</div>
<div class="text-center">5db</div>
<div>Đen</div>
<div class="flex items-center">
<i class="icon_star star4"></i>
<span class="ml-[5px]">(125)</span>
</div>
<div class="col-span-2 flex items-center justify-between">
<div class="price">3.400.000đ</div>
<a href=""
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
</div>
</div>
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
<div class="col-span-3">
<div class="flex items-center">
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]">AMD
Ryzen 7 9800x3D 4.7
GHz 8-Core Processor</a>
</div>
</div>
<div class="text-center">
8bg
</div>
<div class="">5</div>
<div>GDDR5</div>
<div class="text-center">5db</div>
<div>Đen</div>
<div class="flex items-center">
<i class="icon_star star4"></i>
<span class="ml-[5px]">(125)</span>
</div>
<div class="col-span-2 flex items-center justify-between">
<div class="price">3.400.000đ</div>
<a href=""
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
</div>
</div>
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
<div class="col-span-3">
<div class="flex items-center">
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]">AMD
Ryzen 7 9800x3D 4.7
GHz 8-Core Processor</a>
</div>
</div>
<div class="text-center">
8bg
</div>
<div class="">5</div>
<div>GDDR5</div>
<div class="text-center">5db</div>
<div>Đen</div>
<div class="flex items-center">
<i class="icon_star star4"></i>
<span class="ml-[5px]">(125)</span>
</div>
<div class="col-span-2 flex items-center justify-between">
<div class="price">3.400.000đ</div>
<a href=""
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
</div>
</div>
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
<div class="col-span-3">
<div class="flex items-center">
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]">AMD
Ryzen 7 9800x3D 4.7
GHz 8-Core Processor</a>
</div>
</div>
<div class="text-center">
8bg
</div>
<div class="">5</div>
<div>GDDR5</div>
<div class="text-center">5db</div>
<div>Đen</div>
<div class="flex items-center">
<i class="icon_star star4"></i>
<span class="ml-[5px]">(125)</span>
</div>
<div class="col-span-2 flex items-center justify-between">
<div class="price">3.400.000đ</div>
<a href=""
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
</div>
</div>
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
<div class="col-span-3">
<div class="flex items-center">
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]">AMD
Ryzen 7 9800x3D 4.7
GHz 8-Core Processor</a>
</div>
</div>
<div class="text-center">
8bg
</div>
<div class="">5</div>
<div>GDDR5</div>
<div class="text-center">5db</div>
<div>Đen</div>
<div class="flex items-center">
<i class="icon_star star4"></i>
<span class="ml-[5px]">(125)</span>
</div>
<div class="col-span-2 flex items-center justify-between">
<div class="price">3.400.000đ</div>
<a href=""
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
</div>
</div>
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
<div class="col-span-3">
<div class="flex items-center">
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]">AMD
Ryzen 7 9800x3D 4.7
GHz 8-Core Processor</a>
</div>
</div>
<div class="text-center">
8bg
</div>
<div class="">5</div>
<div>GDDR5</div>
<div class="text-center">5db</div>
<div>Đen</div>
<div class="flex items-center">
<i class="icon_star star4"></i>
<span class="ml-[5px]">(125)</span>
</div>
<div class="col-span-2 flex items-center justify-between">
<div class="price">3.400.000đ</div>
<a href=""
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>