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

up

Browse Source
This commit is contained in:
Tieptk
2025-09-25 10:42:06 +07:00
commit 689936198f
90 changed files with 9368 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

527
template/buildpc/buildpc-detail.html Normal file
View File

@@ -0,0 +1,527 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<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/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="container-mb">
<div class="page-buildpc bg-[#F4F4F4] pb-[30px]">
<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="/buildpc" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Build PC
</span>
</a>
<meta itemprop="position" content="3">
</li>
</ol>
</div>
<div class="box-content-info bg-white p-[10px] mb-[10px] rounded-[4px]">
<div class="box-image">
<div class="swiper border border-[#B1B1B1 rounded-[12px] mb-[10px]" id="js-slider-big">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail.png" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail-2.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail-3.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail-4.jpg" alt="">
</div>
</div>
</div>
<div class="swiper-button-next right-0"></div>
<div class="swiper-button-prev left-0"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper" id="js-slider-small">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:void(0)" class="item video">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
</div>
<div class="swiper-button-next right-[10px] w-[30px] h-[30px]"></div>
<div class="swiper-button-prev left-[10px] w-[30px] h-[30px]"></div>
</div>
</div>
<div class="box-review mt-3">
<div class="flex items-center justify-center">
<b>Người đánh giá</b>
<div class="flex items-center ml-[10px]">
(40 ratings, 4.9 <i class="icon-star star-small ml-1"></i>
)
</div>
</div>
<div class="mt-[10px]">
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
<p class="w-[11%] text-[var(--color-hover)] font-bold">
5 sao
</p>
<div class="relative w-[79%]">
<div class="block w-full h-[11px] bg-gray-200"></div>
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
</div>
<p class="text-[var(--color-hover)] w-[9%] font-bold">
97%
</p>
</div>
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
<p class="w-[11%] text-[var(--color-hover)] font-bold">
4 sao
</p>
<div class="relative w-[79%]">
<div class="block w-full h-[11px] bg-gray-200"></div>
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
</div>
<p class="text-[var(--color-hover)] w-[9%] font-bold">
97%
</p>
</div>
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
<p class="w-[11%] text-[var(--color-hover)] font-bold">
3 sao
</p>
<div class="relative w-[79%]">
<div class="block w-full h-[11px] bg-gray-200"></div>
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
</div>
<p class="text-[var(--color-hover)] w-[9%] font-bold">
97%
</p>
</div>
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
<p class="w-[11%] text-[var(--color-hover)] font-bold">
2 sao
</p>
<div class="relative w-[79%]">
<div class="block w-full h-[11px] bg-gray-200"></div>
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
</div>
<p class="text-[var(--color-hover)] w-[9%] font-bold">
97%
</p>
</div>
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
<p class="w-[11%] text-[var(--color-hover)] font-bold">
1 sao
</p>
<div class="relative w-[79%]">
<div class="block w-full h-[11px] bg-gray-200"></div>
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
</div>
<p class="text-[var(--color-hover)] w-[9%] font-bold">
97%
</p>
</div>
</div>
</div>
<div class="mt-[10px]">
<div class="list">
<div class="item py-2.5 border-b-[1px] border-[#ebebeb]">
<div class="flex items-center justify-between">
<a href="" class="block">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="" />
</a>
<a href=""
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">
Mua ngay
</a>
</div>
<div class="status text-blue-500 font-bold">Còn hàng</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giá sản phẩm</p>
<div class="price font-bold text-[#FF0000]">3.700.000Vnđ</div>
<del class="text-[#A5A5A5]">3.400.000 Vnđ</del>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Khuyến mãi</p>
<div class="saleoff text-center font-bold">20%</div>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giao hàng</p>
<div class="ship font-bold text-[#33C600] underline">Free</div>
</div>
</div>
<div class="item py-2.5 border-b-[1px] border-[#ebebeb]">
<div class="flex items-center justify-between">
<a href="" class="block">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="" />
</a>
<a href=""
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">
Mua ngay
</a>
</div>
<div class="status text-blue-500 font-bold">Còn hàng</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giá sản phẩm</p>
<div class="price font-bold text-[#FF0000]">3.700.000Vnđ</div>
<del class="text-[#A5A5A5]">3.400.000 Vnđ</del>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Khuyến mãi</p>
<div class="saleoff text-center font-bold">20%</div>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giao hàng</p>
<div class="ship font-bold text-[#33C600] underline">Free</div>
</div>
</div>
<div class="item py-2.5 border-b-[1px] border-[#ebebeb]">
<div class="flex items-center justify-between">
<a href="" class="block">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="" />
</a>
<a href=""
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">
Mua ngay
</a>
</div>
<div class="status text-blue-500 font-bold">Còn hàng</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giá sản phẩm</p>
<div class="price font-bold text-[#FF0000]">3.700.000Vnđ</div>
<del class="text-[#A5A5A5]">3.400.000 Vnđ</del>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Khuyến mãi</p>
<div class="saleoff text-center font-bold">20%</div>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giao hàng</p>
<div class="ship font-bold text-[#33C600] underline">Free</div>
</div>
</div>
<div class="item py-2.5 border-b-[1px] border-[#ebebeb]">
<div class="flex items-center justify-between">
<a href="" class="block">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="" />
</a>
<a href=""
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">
Mua ngay
</a>
</div>
<div class="status text-blue-500 font-bold">Còn hàng</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giá sản phẩm</p>
<div class="price font-bold text-[#FF0000]">3.700.000Vnđ</div>
<del class="text-[#A5A5A5]">3.400.000 Vnđ</del>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Khuyến mãi</p>
<div class="saleoff text-center font-bold">20%</div>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giao hàng</p>
<div class="ship font-bold text-[#33C600] underline">Free</div>
</div>
</div>
<div class="item py-2.5 border-b-[1px] border-[#ebebeb]">
<div class="flex items-center justify-between">
<a href="" class="block">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="" />
</a>
<a href=""
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">
Mua ngay
</a>
</div>
<div class="status text-blue-500 font-bold">Còn hàng</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giá sản phẩm</p>
<div class="price font-bold text-[#FF0000]">3.700.000Vnđ</div>
<del class="text-[#A5A5A5]">3.400.000 Vnđ</del>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Khuyến mãi</p>
<div class="saleoff text-center font-bold">20%</div>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giao hàng</p>
<div class="ship font-bold text-[#33C600] underline">Free</div>
</div>
</div>
</div>
</div>
<div class="mt-[20px]">
<h3 class="title bg-[#EFEFEF] text-[16px] font-bold p-2.5 border-b-[1px] border-[#ABABAB]">
Thông số kỹ thuật
</h3>
<div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Manufacturer</b>
<p>AMD</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Part #</b>
<ul>
<li>100-1000001084WOF</li>
<li>AMD Ryzen 7 9800X3D</li>
<li>100-100001084WOF</li>
</ul>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Series</b>
<p>AMD Ryzen 7</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Microarchitecture</b>
<p>Zen 5</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Core Family</b>
<p>Granite Ridge</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Socket</b>
<p>AM5</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Core</b>
<p>8</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Thread Count</b>
<p>16</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Performance Core Clock</b>
<p>4.7 GHz</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Performance Core Boost Clock</b>
<p>5.2 GHz</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>L2 Cache</b>
<p>8 MB</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>L3 Cache</b>
<p>96 MB</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>TDP</b>
<p>120 W</p>
</div>
<div class="item py-2">
<b>Integrated Graphics</b>
<p>Radeon</p>
</div>
</div>
</div>
<div class="mt-[20px]">
<h3 class="title bg-[#EFEFEF] text-[16px] font-bold p-2.5 border-b-[1px] border-[#ABABAB]">
Đánh giá
</h3>
<div class="list mt-3">
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="flex items-center gap-[10px] mb-[10px]">
<div class="w-[40px]">
<img src="/assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar" />
</div>
<b class="">Dino</b>
<p class="block text-[#747474]">
10:00pm 20/02/2025
</p>
<i class="icon-star star5"></i>
</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="btn flex items-center">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 view"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="flex items-center gap-[10px] mb-[10px]">
<div class="w-[40px]">
<img src="/assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar" />
</div>
<b class="">Dino</b>
<p class="block text-[#747474]">
10:00pm 20/02/2025
</p>
<i class="icon-star star5"></i>
</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="btn flex items-center">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 view"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="flex items-center gap-[10px] mb-[10px]">
<div class="w-[40px]">
<img src="/assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar" />
</div>
<b class="">Dino</b>
<p class="block text-[#747474]">
10:00pm 20/02/2025
</p>
<i class="icon-star star5"></i>
</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="btn flex items-center">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 view"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
</div>
<a href=""
class="block rounded-[4px] w-[160px] h-[35px] leading-[35px] mx-auto text-center text-[500] text-white bg-[#1877F2]">Xem
tất cả bình
luận</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
var swiper_small = new Swiper("#js-slider-small", {
loop: true,
spaceBetween: 12,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
navigation: {
nextEl: "#js-slider-small .swiper-button-next",
prevEl: "#js-slider-small .swiper-button-prev",
},
});
var swiper_big = new Swiper("#js-slider-big", {
loop: true,
spaceBetween: 10,
navigation: {
nextEl: "#js-slider-big .swiper-button-next",
prevEl: " #js-slider-big .swiper-button-prev",
},
thumbs: {
swiper: swiper_small,
},
});
</script>
</body>
</html>