Files
bestpc/template/shop/home.html
2025-05-28 15:30:26 +07:00

504 lines
27 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<div class="page-list-store bg-[#EFEFEF] 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">
<span itemprop="name">
Tìm người bán
</span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="box-backgorund p-[15px] rounded-[12px] mt-3.5 bg-white">
<div class="flex items-center justify-between">
<h3 class="text-2xl text-black font-bold">Danh sách cửa hàng</h3>
<div class="right flex items-center">
<div class="w-[520px] relative rounded-[8px] mr-[15px] input-search border border-[#dddddd]">
<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="Nhập địa chỉ cửa bạn để tìm cửa hàng gần nhất"
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
onclick="$('.autocomplete-suggestions').show();">
<button type="submit" class="absolute left-[10px] top-[5px] w-[40px] h-[35px] "><i
class="icon_2025 search-2 "></i></button>
</form>
</div>
<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
thiệu cửa hàng mới</a>
</div>
</div>
<div class="filter flex items-center justify-between p-[10px] bg-[#f4f4f4] mt-[10px]">
<div class="flex items-center">
<a href=""
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[var(--color-global)] text-white mr-[10px]">Gần
tôi
nhất</a>
<a href=""
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[#fff] mr-[10px] hover:bg-[var(--color-global)] hover:text-white">Đánh
giá tốt nhất</a>
<a href=""
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[#fff] mr-[10px] hover:bg-[var(--color-global)] hover:text-white">Đã
xem</a>
</div>
<div class="flex items-center">
<span class="mr-[10px]">Lọc theo</span>
<div class="select-two-arrow mr-[10px]">
<select name="" id="" class="">
<option value="">Tỉnh/Thành phố</option>
<option value="">Hà nội</option>
</select>
</div>
<div class="select-two-arrow mr-[10px]">
<select name="" id="" class="">
<option value="">Quận/Huyện</option>
<option value="">Hà nội</option>
</select>
</div>
<select name="" id="" class="p-[10px] border-[1px] border-[#d5d5d5] rounded-[4px]">
<option value="">Cách tôi 3km</option>
<option value="">10km</option>
</select>
</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="../../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 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="../../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 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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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>