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

d

Browse Source
This commit is contained in:
hieutmd
2025-05-27 14:28:47 +07:00
parent 170122ad32
commit 4fb79660b2
144 changed files with 5973 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
template/buildpc/home.html Normal file
View File

210
template/home/components/main_stat.html Normal file
View File

@@ -0,0 +1,210 @@
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="mr-[10px] w-[calc(100%-36px)] text-[#B1B1B1] text-[12px] text-custom-16 uppercase">
Đơn
hàng
mới</p>
<a href=""
class="bg-[#F0F8FF] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-cart"></i>
</a>
</div>
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#E8F7F2] bg-green-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#299D00] text-[14px]">
<i class="icons icon-increase"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-[12px] text-custom-16 uppercase">Khách
hàng
liên hệ qua website</p>
<a href=""
class="bg-[#F0F9F2] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-contact"></i>
</a>
</div>
<p class="text-[22px] text-custom-28 leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#E8F7F2] bg-green-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#299D00] text-[14px]">
<i class="icons icon-increase"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-custom-16 text-[12px] uppercase">Đơn
trả
góp</p>
<a href=""
class="bg-[#F7F5FF] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-pay"></i>
</a>
</div>
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#FFEEEB] bg-[red]-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#E00000] text-[14px]">
<i class="icons icon-reduce"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-custom-16 text-[12px] uppercase">Đơn
hoàn
trả</p>
<a href=""
class="bg-[#F9F2F2] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-installment"></i>
</a>
</div>
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#FFEEEB] bg-[red]-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#E00000] text-[14px]">
<i class="icons icon-reduce"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 item-chart bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-2">
<div class="flex justify-between min-h-[100px]">
<div>
<h5 class="leading-[30px] text-[24px] font-[600]">32.4k</h5>
<p class="text-custom-16 text-[14px] text-[#7E7E7E]">Doanh thu trong tuần này</p>
</div>
<div
class="flex items-center px-2.5 py-0.5 text-base font-semibold text-green-500 dark:text-green-500 text-center">
12%
<i class="fa-solid fa-arrow-up ml-[5px]"></i>
</div>
</div>
<div id="js-revenue-chart"></div>
<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
<div class="flex justify-between items-center pt-5">
<select>
<option value=""> Last 7 days </option>
<option value=""> Yesterday </option>
<option value=""> Today </option>
<option value=""> Last 7 days </option>
<option value=""> Last 30 days </option>
<option value=""> Last 90 days </option>
</select>
<a href="#"
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
Users Report
<i class="fa-solid fa-angle-right ml-[5px]"></i>
</a>
</div>
</div>
</div>
<div
class="sm:col-span-2 item-chart bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-2">
<div class="pb-[14px] mb-[10px] border-b border-gray-200 dark:border-gray-700">
<h5 class="leading-[30px] text-[24px] font-[600]">3.4k</h5>
<div class="flex items-center justify-between">
<p class="text-[14px] text-[#7E7E7E] text-custom-16">Truy cập web trong tuần này</p>
<span
class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-green-900 dark:text-green-300">
<svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 10 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 13V1m0 0L1 5m4-4 4 4" />
</svg>
42.5%
</span>
</div>
</div>
<div class="grid grid-cols-2">
<dl class="flex items-center">
<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Lượt truy cập:
</dt>
<dd class="text-gray-900 text-sm dark:text-white font-semibold">1.458</dd>
</dl>
<dl class="flex items-center justify-end">
<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Người xem:</dt>
<dd class="text-gray-900 text-sm dark:text-white font-semibold">2.130</dd>
</dl>
</div>
<div id="js-access-chart"></div>
<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
<div class="flex justify-between items-center pt-5">
<select>
<option value=""> Last 7 days </option>
<option value=""> Yesterday </option>
<option value=""> Today </option>
<option value=""> Last 7 days </option>
<option value=""> Last 30 days </option>
<option value=""> Last 90 days </option>
</select>
<a href="#"
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
Leads Report
<svg class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 9 4-4-4-4" />
</svg>
</a>
</div>
</div>
</div>

1071
template/home/home.html Normal file
View File

File diff suppressed because it is too large Load Diff

2
template/javascript/index.html Normal file
View File

@@ -0,0 +1,2 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

44
template/shared/footer.html Normal file
View File

@@ -0,0 +1,44 @@
<footer class="mt-20 border-t-[11px] border-[#1c039b] w-full">
<div class="container">
<a href="/" class="block my-[30px]">
<img src="../../assets/images/logo-footer.png" class="block w-[180px] h-[45px] object-contain"
width="100%" height="100%" alt="logo">
</a>
<div class="main-footer grid grid-cols-4">
<div class="item">
<h3 class="title">Về chúng tôi</h3>
<a href="" class="block">Độc quyền</a>
<a href="" class="block">Mua online</a>
<a href="" class="block">Bộ sưu tập</a>
<a href="/tin-tuc" class="block">Blog</a>
<div class="list-social flex items-center mt-[45px]">
<a href="" target="_blank" class="mr-[10px]"><i class="icon_2025 facebook"></i></a>
<a href="" target="_blank"><i class="icon_2025 zalo"></i></a>
</div>
</div>
<div class="item">
<h3 class="title">Tuyển dụng</h3>
<a href="">Liên hệ</a>
<a href="">Điều khoản</a>
<a href="">Chính sách bảo mật</a>
<a href="">Trở thành đối tác</a>
</div>
<div class="item">
<h3 class="title">Liên kết</h3>
<a href="hurasoft.com">Hurasoft.com</a>
</div>
<div class="item">
<h3 class="title">Giới thiệu</h3>
<b class="text-[16px]">BESTPC là kênh tổng hợp tin khuyến mãi chuyên nghiệp đầu tiên ở Việt Nam,
cho phép bạn tìm
kiếm mã giảm giá, tin ưu đãi
từ nghành hàng laptop, thiết bị điện tử, máy tính, xây dựng cấu hình PC chuyên nghiệp. Và
còn rất nhiều mã giảm giá độc
quyền dành riêng cho bạn.</b>
</div>
</div>
</div>
<div class="footer-bottom bg-[#ebebeb] py-[15px]">
<b class="text-center block">© Copyright 2025 by Hurasoft. All Rights Reserved.</b>
</div>
</footer>

458
template/shared/header.html Normal file
View File

@@ -0,0 +1,458 @@
<!-- Header Section -->
<header class="w-full">
<div class="header-main py-6 bg-[var(--color-global)]">
<div class="container">
<div class="flex items-center justify-between">
<a href="/" class="logo block mr-[100px]">
<img src="../../assets/images/logo.png" class="object-contain w-[173px] h-[45px] block"
alt="Location icon" />
</a>
<div class="flex items-center mr-[100px]">
<i class="icon_2025 map"></i>
<div class="ml-[20px] ">
<span class="text-xs text-white block mb-[5px]">Bạn đang ở</span>
<div class="box-select">
<select name="" id="" class="select select_location">
<option value="">Hà Nội</option>
<option value="">TP HCM</option>
<option value="">Đà Nẵng</option>
</select>
</div>
</div>
</div>
<div class="w-[670px] relative mr-[135px] input-search">
<form action="/search" enctype="text/plain" method="get"
class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden">
<input type="text" name="q" placeholder="Tìm kiếm khuyến mãi, cửa hàng, sản phẩm,..."
class="search-input w-full h-full p-[0_10px] rounded-[8px] text-base"
onclick="$('.autocomplete-suggestions').show();">
<button type="submit"
class="absolute right-[10px] top-[5px] w-[40px] h-[35px] border-l-[1.5px] border-[#B3B3B3] pl-[10px]"><i
class="icon_2025 search "></i></button>
</form>
<div class="autocomplete-suggestions hidden">
<p>TỪ KHOÁ HOT</p>
<ul class="ul">
<li><a href=""> laptop </a></li>
<li><a href=""> laptop </a></li>
<li><a href=""> laptop </a></li>
<li><a href=""> laptop </a></li>
<li><a href=""> laptop </a></li>
<li><a href=""> laptop </a></li>
<li><a href=""> laptop </a></li>
</ul>
</div>
</div>
<div class="box-user">
<div class="flex items-center">
<i class="icon_2025 user"></i>
<b class="text-white p-[0_5px] whitespace-nowrap">Tài khoản</b>
<i class="icon_arrow"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Section -->
<nav class="header-bottom py-2.5 w-full bg-white shadow-[0px_4px_4px_rgba(149,149,149,0.25)]">
<div class="container">
<div class="flex items-center justify-between w-full">
<div class="header-menu relative group">
<div
class="title-menu flex items-center justify-center w-[219px] h-[45px] rounded-[4px] border-[1px] border-[#e3e3e3] bg-[#F6F6F6] cursor-pointer">
<i class="icon_2025 bar"></i>
<b class="ml-[8px] uppercase">Danh mục sản phẩm</b>
</div>
<div
class="box-menu-hover group-hover:block absolute hidden shadow-[0_0_8px_2px_rgba(0,0,0,0.1)] rounded-[5px] bg-white top-[47px] z-[99] w-[220px]">
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/laptop.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href="/danh-muc-cap2.html"> Laptop 2 </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện 2 </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop 2 </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện 2 </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop 2 </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<!-- copy -->
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/008-mouse.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/010-computer.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/013-fan.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/gamepad-1.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/server-4.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/laptop.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/008-mouse.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/010-computer.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/013-fan.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/gamepad-1.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/server-4.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<div class="item">
<a href="" class="flex items-center">
<span class="cate-img"> <img src="/dev/images/server-4.png" alt=""> </span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Phụ kiện </a></li>
<li><a href=""> Laptop </a></li>
<li><a href=""> Phụ kiện </a></li>
</ul>
<ul class="ul sub-cate">
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
<li><a href=""> Laptop 2 </a></li>
<li><a href=""> Phụ kiện 2 </a></li>
</ul>
</div>
</div>
<!-- end copy -->
</div>
</div>
<div class="flex gap-[40px] header-bottom-right">
<a href="/buildpc" class="flex items-center group">
<i class="icon_2025 buildpc group-hover:buildpc-hover"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Build
PC</span>
</a>
<a href="/tim-nguoi-ban" class="flex items-center group">
<i class="icon_2025 shop"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Tìm
người bán</span>
</a>
<a href="/" class="flex items-center group">
<i class="icon_2025 map-2"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Địa
chỉ
sửa chữa</span>
</a>
<a href="/" class="flex items-center group">
<i class="icon_2025 question"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)">Hỏi
đáp</span>
</a>
<a href="/" class="flex items-center group">
<i class="icon_2025 prduct-save"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Sản
phẩm
đã lưu</span>
</a>
<a href="/" class="flex items-center group">
<i class="icon_2025 article"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Tin
rạo
vặt</span>
</a>
</div>
</div>
</div>
</nav>
</header>

104
template/theme.html Normal file
View File

@@ -0,0 +1,104 @@
<!doctype html>
<html lang="vi">
<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>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
violet: {
50: "#f5f3ff",
900: "#4c1d95",
},
},
},
},
};
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" media="screen" href="{{ 'style.css' | asset_url }}" />
</head>
<body>
<main class="flex overflow-hidden flex-col items-center bg-white">
{% include shared/header %}
{{ page_content }}
{% include shared/footer %}
</main>
{% include javascript/index %}
<script>
var swiper = new Swiper("#js-banner-slider", {
slidesPerView: 1,
navigation: {
nextEl: "#js-banner-slider .swiper-button-next",
prevEl: "#js-banner-slider .swiper-button-prev",
},
});
var swiper_product = new Swiper("#js-product-best", {
slidesPerView: 5,
spaceBetween: 15,
loop: false,
rewind: false,
lazy: true,
navigation: {
nextEl: "#js-product-best-btn .swiper-button-next",
prevEl: "#js-product-best-btn .swiper-button-prev",
},
});
var swiper_businesses = new Swiper("#list-businesses", {
slidesPerView: 7,
spaceBetween: 20,
loop: false,
rewind: false,
lazy: true,
});
runVideo("#js-video");
function runVideo(holder) {
$(holder).on("click", function () {
$(this).addClass("active");
let url = $(holder).attr("data-url");
let width = $(holder).width();
let height = $(holder).height();
const videoUrl = getEmbedVideoUrl(url);
if (videoUrl) {
$(holder).html(`<iframe width="${width}" height="${height}" src="${videoUrl}?mute=1&autoplay=1" frameborder="0" allowfullscreen></iframe>`);
}
});
}
function getEmbedVideoUrl(url) {
const youtubeRegex = /(?:youtube\.com\/(?:shorts\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/(?:shorts\/)?)([a-zA-Z0-9_-]{11})/;
const tiktokRegex = /(?:tiktok\.com\/@[^\/]+\/video\/)(\d+)/;
const youtubeMatch = url.match(youtubeRegex);
if (youtubeMatch) return 'https://www.youtube.com/embed/' + youtubeMatch[1];
const tiktokMatch = url.match(tiktokRegex);
if (tiktokMatch) return 'https://www.tiktok.com/player/v1/' + tiktokMatch[1];
return null;
}
</script>
</body>
</html>