uppdate
This commit is contained in:
@@ -1,210 +0,0 @@
|
||||
<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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,122 @@
|
||||
<script>
|
||||
(function () {
|
||||
var menuTimer = null;
|
||||
|
||||
function getCatIds() {
|
||||
return Array.from(document.querySelectorAll('[data-menu-cat]')).map(function (item) {
|
||||
return item.getAttribute('data-menu-cat');
|
||||
});
|
||||
}
|
||||
|
||||
function switchCat(id) {
|
||||
var catIds = getCatIds();
|
||||
catIds.forEach(function (c) {
|
||||
var item = document.getElementById('cat-' + c);
|
||||
var panel = document.getElementById('rp-' + c);
|
||||
if (item) item.classList.remove('cat-active');
|
||||
if (panel) panel.style.display = 'none';
|
||||
});
|
||||
|
||||
var activeItem = document.getElementById('cat-' + id);
|
||||
var activePanel = document.getElementById('rp-' + id);
|
||||
if (activeItem) activeItem.classList.add('cat-active');
|
||||
if (activePanel) activePanel.style.display = 'flex';
|
||||
}
|
||||
|
||||
function showMenu() {
|
||||
cancelMenuClose();
|
||||
closeShowroom();
|
||||
|
||||
var catIds = getCatIds();
|
||||
if (catIds.length > 0) switchCat(catIds[0]);
|
||||
|
||||
var megaMenu = document.getElementById('mega-menu');
|
||||
var overlay = document.getElementById('overlay');
|
||||
if (megaMenu) megaMenu.classList.remove('hidden');
|
||||
if (overlay) overlay.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function scheduleMenuClose() {
|
||||
menuTimer = setTimeout(function () {
|
||||
var megaMenu = document.getElementById('mega-menu');
|
||||
var overlay = document.getElementById('overlay');
|
||||
if (megaMenu) megaMenu.classList.add('hidden');
|
||||
if (overlay) overlay.classList.add('hidden');
|
||||
}, 150);
|
||||
}
|
||||
|
||||
function cancelMenuClose() {
|
||||
if (menuTimer) {
|
||||
clearTimeout(menuTimer);
|
||||
menuTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleShowroom() {
|
||||
var panel = document.getElementById('showroom-panel');
|
||||
var arrow = document.getElementById('showroom-arrow');
|
||||
if (!panel || !arrow) return;
|
||||
|
||||
var isOpen = !panel.classList.contains('hidden');
|
||||
closeAll();
|
||||
if (!isOpen) {
|
||||
panel.classList.remove('hidden');
|
||||
var overlay = document.getElementById('overlay');
|
||||
if (overlay) overlay.classList.remove('hidden');
|
||||
arrow.style.transform = 'rotate(90deg)';
|
||||
}
|
||||
}
|
||||
|
||||
function closeShowroom() {
|
||||
var panel = document.getElementById('showroom-panel');
|
||||
var arrow = document.getElementById('showroom-arrow');
|
||||
if (panel) panel.classList.add('hidden');
|
||||
if (arrow) arrow.style.transform = '';
|
||||
}
|
||||
|
||||
function closeAll() {
|
||||
var megaMenu = document.getElementById('mega-menu');
|
||||
var panel = document.getElementById('showroom-panel');
|
||||
var overlay = document.getElementById('overlay');
|
||||
var arrow = document.getElementById('showroom-arrow');
|
||||
|
||||
if (megaMenu) megaMenu.classList.add('hidden');
|
||||
if (panel) panel.classList.add('hidden');
|
||||
if (overlay) overlay.classList.add('hidden');
|
||||
if (arrow) arrow.style.transform = '';
|
||||
cancelMenuClose();
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
closeAll();
|
||||
var popup = document.getElementById('search-popup');
|
||||
if (!popup) return;
|
||||
popup.classList.remove('hidden');
|
||||
popup.style.display = 'flex';
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
var popup = document.getElementById('search-popup');
|
||||
if (!popup) return;
|
||||
popup.style.display = 'none';
|
||||
popup.classList.add('hidden');
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeAll();
|
||||
hideSearch();
|
||||
}
|
||||
});
|
||||
|
||||
window.switchCat = switchCat;
|
||||
window.showMenu = showMenu;
|
||||
window.scheduleMenuClose = scheduleMenuClose;
|
||||
window.cancelMenuClose = cancelMenuClose;
|
||||
window.toggleShowroom = toggleShowroom;
|
||||
window.closeShowroom = closeShowroom;
|
||||
window.closeAll = closeAll;
|
||||
window.showSearch = showSearch;
|
||||
window.hideSearch = hideSearch;
|
||||
})();
|
||||
</script>
|
||||
@@ -1,3 +1,6 @@
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
|
||||
<!-- plugin upload image -->
|
||||
<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
|
||||
@@ -361,6 +364,23 @@
|
||||
}
|
||||
|
||||
|
||||
function initHomepageBannerSlider() {
|
||||
if (typeof Swiper === "undefined") return
|
||||
if (!document.querySelector(".homepage-banner-slider")) return
|
||||
|
||||
new Swiper(".homepage-banner-slider", {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".homepage-banner-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function initAdminHomeTab() {
|
||||
document.querySelectorAll("#js-admin-home-tab a").forEach(function (link) {
|
||||
link.addEventListener("click", function (event) {
|
||||
@@ -389,6 +409,7 @@
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initHomepageBannerSlider()
|
||||
initCustomerAcquisitionChart()
|
||||
initRevenueStatisticsChart()
|
||||
initGlobalSalesChart()
|
||||
@@ -405,4 +426,4 @@
|
||||
allowMultiple: true,
|
||||
labelIdle: 'Kéo thả file hoặc <span class="filepond--label-action">Chọn file</span>',
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,7 @@
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.css" />
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
|
||||
|
||||
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
{% include javascript/global %}
|
||||
|
||||
|
||||
{% if global.module == 'home' %}
|
||||
|
||||
65
template/other/footer.html
Normal file
65
template/other/footer.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<footer class="w-full bg-white mt-1">
|
||||
<div class="layout-container flex gap-[95px] py-4 h-[212px] overflow-hidden items-start">
|
||||
<div class="flex flex-col gap-1 w-[267px] shrink-0">
|
||||
<p class="text-[14px] font-bold text-black leading-[27px]">Tổng đài hỗ trợ</p>
|
||||
<div class="text-[13px] text-black leading-[30px]">
|
||||
<p>Gọi mua: <a href="tel:0971490000" class="font-bold text-[#0084ff]">0971.49.0000</a>
|
||||
<span>(8h00-18h00)</span>
|
||||
</p>
|
||||
<p>Hỗ trợ kỹ thuật : <a href="tel:0987762444" class="font-bold">0987.762.444</a> <span>(8h00-18h00)</span></p>
|
||||
<p>Góp ý - Khiếu nại: <a href="tel:0824184444" class="font-bold">082.418.4444</a> <span>(8h00-18h00)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 w-[148px] shrink-0">
|
||||
<p class="text-[14px] font-bold text-black leading-[27px]">Về công ty</p>
|
||||
<div class="text-[13px] text-black leading-[30px]">
|
||||
<p>Giới thiệu về công ty</p>
|
||||
<p>Tuyển dụng</p>
|
||||
<p>Gửi góp ý, khiếu nại</p>
|
||||
<p>Tìm siêu thị (215 shop)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 w-[209px] shrink-0">
|
||||
<p class="text-[14px] font-bold text-black leading-[27px]">Chính sách chung</p>
|
||||
<div class="text-[13px] text-black leading-[30px]">
|
||||
<p>Quy định truy cập Website</p>
|
||||
<p>Chính sách bảo mật thông tin</p>
|
||||
<p>Chính sách vận chuyển, giao nhận</p>
|
||||
<p>Chính sách cho doanh nghiệp</p>
|
||||
<p>Chính sách bảo hành, đổi trả</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 w-[291px] shrink-0">
|
||||
<p class="text-[14px] font-bold text-black leading-[27px]">Kết nối với chúng tôi</p>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-5 h-5">
|
||||
<img src="{{ 'icon_facebook.svg' | asset_url }}" alt="Facebook" class="w-full h-full" />
|
||||
</div>
|
||||
<span class="text-[11px] text-[#0084ff]">12.8k lượt thích</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="{{ 'icon_youtube.svg' | asset_url }}" alt="YouTube" class="w-[28px] h-5 object-contain" />
|
||||
<span class="text-[11px] text-[#0084ff]">2.2T Đăng ký</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="{{ 'icon_zalo.png' | asset_url }}" alt="Zalo" class="w-5 h-5 object-contain" />
|
||||
<span class="text-[11px] text-[#0084ff]">Zalo MIQ</span>
|
||||
</div>
|
||||
</div>
|
||||
<img src="{{ 'logo_bct.png' | asset_url }}" alt="Đã thông báo Bộ Công Thương" class="w-[100px] h-[38px] object-contain" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#e4e4e4] h-9 flex items-center justify-center">
|
||||
<p class="text-[#353535] text-[13px]">Bản quyền thuộc về MIQ Việt Nam</p>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -1,388 +1,221 @@
|
||||
<div role="navigation" aria-label="Navbar" class="" id="layout-topbar">
|
||||
<div class="flex items-center justify-between px-6 py-3 bg-menu">
|
||||
<div class="inline-flex items-center gap-5">
|
||||
<a href="/">
|
||||
<img src="{{ 'logo_new.png' | asset_url }}" class="h-[20px]" />
|
||||
</a>
|
||||
<button
|
||||
class="btn btn-outline btn-sm btn-ghost border-base-300 text-base-content/70 hidden h-9 w-96 justify-start gap-2 px-2 !text-sm md:flex bg-white"
|
||||
onclick="document.getElementById('topbar-search-modal')?.showModal()">
|
||||
<i data-lucide="search"></i>
|
||||
<span>Tìm Kiếm</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline btn-sm btn-square btn-ghost border-base-300 text-base-content/70 flex size-9 md:hidden"
|
||||
aria-label="Search" onclick="document.getElementById('topbar-search-modal')?.showModal()">
|
||||
<i data-lucide="search"></i>
|
||||
</button>
|
||||
<dialog id="topbar-search-modal" class="modal p-0">
|
||||
<div class="modal-box bg-transparent p-0 shadow-none max-w-xl">
|
||||
<div class="bg-base-100 rounded-box">
|
||||
<div class="input w-full border-0 !outline-none pl-0">
|
||||
<select name="search-category" id="search-category"
|
||||
class="select !outline-none border-0 border-r-1 border-base-300 font-bold">
|
||||
<option value="">Chọn nội dung tìm</option>
|
||||
<option value="">Bán hàng</option>
|
||||
<option value="">Sản phẩm</option>
|
||||
<option value="">Khách hàng</option>
|
||||
</select>
|
||||
<i data-lucide="search" class="text-base-content/60 size-8"></i>
|
||||
<input type="search" class="grow" placeholder="Tìm kiếm" aria-label="Search" />
|
||||
<form method="dialog">
|
||||
<button class="btn btn-xs btn-circle btn-ghost" aria-label="Close">
|
||||
<i data-lucide="x" class="text-base-content/80 size-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-base-100 rounded-box mt-4">
|
||||
<div class="px-5 py-3">
|
||||
<p class="text-base-content/80 text-sm font-medium">Từ khóa tìm kiếm gần đây...</p>
|
||||
<div class="mt-2 flex flex-wrap gap-1.5">
|
||||
<div
|
||||
class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
|
||||
Đơn hàng
|
||||
</div>
|
||||
<div
|
||||
class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
|
||||
Sản phẩm
|
||||
</div>
|
||||
<div
|
||||
class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
|
||||
Bài viết
|
||||
</div>
|
||||
<div
|
||||
class="border-base-300 hover:bg-base-200 rounded-box flex cursor-pointer items-center gap-1 border border-dashed px-2.5 py-1 text-sm/none">
|
||||
Khách hàng
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-base-300 h-px border-dashed" />
|
||||
|
||||
<ul class="menu w-full pt-1">
|
||||
<li class="menu-title">Tác vụ nhanh</li>
|
||||
<li>
|
||||
<a href="/order" class="group">
|
||||
<i data-lucide="store" class="size-3"></i>
|
||||
<p class="grow text-sm">Danh sách đơn hàng</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/product" class="group">
|
||||
<i data-lucide="package" class="size-3"></i>
|
||||
<p class="grow text-sm">Danh sách sản phẩm</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/customer" class="group">
|
||||
<i data-lucide="user" class="size-3"></i>
|
||||
<p class="grow text-sm">Danh sách khách hàng</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
<header class="w-full flex flex-col items-center bg-white relative z-50">
|
||||
<div class="w-full relative h-8 flex items-center overflow-hidden" style="background:#c00060">
|
||||
<img src="{{ 'header_slogan_bg.png' | asset_url }}" alt="" class="absolute inset-0 w-full h-full object-cover pointer-events-none" />
|
||||
<div class="layout-container relative flex items-center justify-between">
|
||||
<div class="flex items-center gap-[22px]">
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="{{ 'icon_certificate.svg' | asset_url }}" alt="" class="w-5 h-5" />
|
||||
<span class="text-white text-xs font-semibold tracking-tight">Sản phẩm <strong>Chính hãng - xuất VAT</strong> đầy đủ</span>
|
||||
</div>
|
||||
<div class="inline-flex items-center gap-0.5">
|
||||
|
||||
<div class="dropdown dropdown-bottom sm:dropdown-end dropdown-center">
|
||||
<div tabindex="0" role="button" class="btn btn-circle btn-sm relative" aria-label="Notifications">
|
||||
<i data-lucide="bell" class="motion-preset-seesaw size-4.5"></i>
|
||||
<div class="status status-error status-sm absolute end-1 top-1"></div>
|
||||
</div>
|
||||
<div tabindex="0"
|
||||
class="dropdown-content bg-base-100 rounded-box mt-1 w-80 shadow-md duration-1000 hover:shadow-lg">
|
||||
<div class="bg-base-200/30 rounded-t-box border-base-200 border-b ps-4 pe-2 pt-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="font-medium">Thông báo</p>
|
||||
<button class="btn btn-xs btn-circle btn-ghost" aria-label="Close"
|
||||
onclick="document.activeElement.blur()">
|
||||
<span data-lucide="x" class="size-4"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="-ms-2 mt-2 -mb-px flex items-center justify-between">
|
||||
<div role="tablist" class="tabs tabs-sm tabs-border">
|
||||
<div role="tab" class="tab tab-active gap-2 px-3 font-medium">
|
||||
<span>Tất cả</span>
|
||||
<div class="badge badge-sm">4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hover:bg-base-200/20 relative flex items-start gap-3 p-4 transition-all">
|
||||
<div class="avatar avatar-online size-12">
|
||||
<img src="{{ 'avatars/2.png' | asset_url }}"
|
||||
class="from-primary/80 to-primary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="grow">
|
||||
<p class="text-sm leading-tight">Lena submitted a draft for review.</p>
|
||||
<p class="text-base-content/60 text-xs">15 min ago</p>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<button class="btn btn-sm btn-primary">Approve</button>
|
||||
<button class="btn btn-sm btn-outline border-base-300">Decline</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status status-primary absolute end-4 top-4 size-1.5"></div>
|
||||
</div>
|
||||
<hr class="border-base-300 border-dashed" />
|
||||
<div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
|
||||
<div class="avatar avatar-offline size-12">
|
||||
<img src="{{ 'avatars/4.png' | asset_url }}"
|
||||
class="from-secondary/80 to-secondary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="grow">
|
||||
<p class="text-sm leading-tight">Kai mentioned you in a project.</p>
|
||||
<p class="text-base-content/60 text-xs">22 min ago</p>
|
||||
<div
|
||||
class="from-base-200 via-base-200/80 rounded-box mt-2 flex items-center justify-between gap-2 bg-linear-to-r to-transparent py-1 ps-2.5">
|
||||
<p class="text-sm">Check model inputs?</p>
|
||||
<button class="btn btn-xs btn-ghost text-xs">
|
||||
<span class="iconify lucide--reply size-3.5"></span>
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-base-300 border-dashed" />
|
||||
<div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
|
||||
<div class="avatar size-12">
|
||||
<img src="{{ 'avatars/5.png' | asset_url }}"
|
||||
class="mask mask-squircle bg-linear-to-b from-orange-500/80 to-orange-500/60 px-1 pt-1"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="grow">
|
||||
<p class="text-sm leading-tight">Your latest results are ready</p>
|
||||
<div
|
||||
class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
|
||||
<p class="text-sm">
|
||||
Forecast Report
|
||||
<span class="text-base-content/60 text-xs">(12 MB)</span>
|
||||
</p>
|
||||
<button class="btn btn-xs btn-square btn-ghost text-xs">
|
||||
<span class="iconify lucide--arrow-down-to-line size-4"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
|
||||
<p class="text-sm">
|
||||
Generated Summary
|
||||
<span class="text-base-content/60 text-xs">(354 KB)</span>
|
||||
</p>
|
||||
<button class="btn btn-xs btn-square btn-ghost text-xs">
|
||||
<span class="iconify lucide--arrow-down-to-line size-4"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-base-200" />
|
||||
<div class="flex items-center justify-between px-2 py-2">
|
||||
<button class="btn btn-sm btn-soft btn-primary"
|
||||
onclick="document.getElementById('topbar-notifications')?.showModal()">Xem tất cả</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- hiển thị popup thông báo -->
|
||||
<dialog id="topbar-notifications" class="modal p-0">
|
||||
<div class="modal-box bg-transparent p-0 shadow-none max-w-xl">
|
||||
<div class="bg-base-100 rounded-box p-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="font-medium">Thông báo</p>
|
||||
<form method="dialog">
|
||||
<button class="btn btn-xs btn-circle btn-ghost" aria-label="Close">
|
||||
<i data-lucide="x" class="text-base-content/80 size-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="-ms-2 mt-2 -mb-px flex items-center justify-between">
|
||||
<div role="tablist" class="tabs tabs-sm tabs-border">
|
||||
<div role="tab" class="tab tab-active gap-2 px-3 font-medium">
|
||||
<span>Tất cả</span>
|
||||
<div class="badge badge-sm">8</div>
|
||||
</div>
|
||||
<div role="tab" class="tab gap-2 px-3 font-medium">
|
||||
<span>Đã đọc</span>
|
||||
<div class="badge badge-sm">4</div>
|
||||
</div>
|
||||
<div role="tab" class="tab gap-2 px-3 font-medium">
|
||||
<span>Chưa đọc</span>
|
||||
<div class="badge badge-sm">4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-auto max-h-[450px]">
|
||||
<div class="hover:bg-base-200/20 relative flex items-start gap-3 p-4 transition-all">
|
||||
<div class="avatar avatar-online size-12">
|
||||
<img src="{{ 'avatars/2.png' | asset_url }}"
|
||||
class="from-primary/80 to-primary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="grow">
|
||||
<p class="text-sm leading-tight">Lena submitted a draft for review.</p>
|
||||
<p class="text-base-content/60 text-xs">15 min ago</p>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<button class="btn btn-sm btn-primary">Approve</button>
|
||||
<button class="btn btn-sm btn-outline border-base-300">Decline</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status status-primary absolute end-4 top-4 size-1.5"></div>
|
||||
</div>
|
||||
<hr class="border-base-300 border-dashed" />
|
||||
<div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
|
||||
<div class="avatar avatar-offline size-12">
|
||||
<img src="{{ 'avatars/4.png' | asset_url }}"
|
||||
class="from-secondary/80 to-secondary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="grow">
|
||||
<p class="text-sm leading-tight">Kai mentioned you in a project.</p>
|
||||
<p class="text-base-content/60 text-xs">22 min ago</p>
|
||||
<div
|
||||
class="from-base-200 via-base-200/80 rounded-box mt-2 flex items-center justify-between gap-2 bg-linear-to-r to-transparent py-1 ps-2.5">
|
||||
<p class="text-sm">Check model inputs?</p>
|
||||
<button class="btn btn-xs btn-ghost text-xs">
|
||||
<span class="iconify lucide--reply size-3.5"></span>
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-base-300 border-dashed" />
|
||||
<div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
|
||||
<div class="avatar size-12">
|
||||
<img src="{{ 'avatars/5.png' | asset_url }}"
|
||||
class="mask mask-squircle bg-linear-to-b from-orange-500/80 to-orange-500/60 px-1 pt-1"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="grow">
|
||||
<p class="text-sm leading-tight">Your latest results are ready</p>
|
||||
<div
|
||||
class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
|
||||
<p class="text-sm">
|
||||
Forecast Report
|
||||
<span class="text-base-content/60 text-xs">(12 MB)</span>
|
||||
</p>
|
||||
<button class="btn btn-xs btn-square btn-ghost text-xs">
|
||||
<span class="iconify lucide--arrow-down-to-line size-4"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
|
||||
<p class="text-sm">
|
||||
Generated Summary
|
||||
<span class="text-base-content/60 text-xs">(354 KB)</span>
|
||||
</p>
|
||||
<button class="btn btn-xs btn-square btn-ghost text-xs">
|
||||
<span class="iconify lucide--arrow-down-to-line size-4"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<!-- tài khoản người dùng -->
|
||||
<div class="dropdown dropdown-bottom dropdown-end w-full">
|
||||
<div tabindex="0" role="button"
|
||||
class="hover:bg-base-300 rounded-box mx-2 mt-0 flex cursor-pointer items-center gap-2.5 transition-all group">
|
||||
<div class="avatar">
|
||||
<div class="bg-base-200 mask mask-squircle w-8">
|
||||
<img src="{{ 'avatars/1.png' | asset_url }}" alt="Avatar" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow -space-y-0.5">
|
||||
<p class="text-sm font-medium text-white group-hover:text-black">Admin</p>
|
||||
<p class="text-base-content/60 text-xs text-white group-hover:text-black">@hura</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul role="menu" tabindex="0"
|
||||
class="dropdown-content menu bg-base-100 rounded-box shadow-base-content/4 mb-1 w-48 p-1 shadow-[0px_-10px_40px_0px]">
|
||||
<li>
|
||||
<a href="">
|
||||
<i data-lucide="user" class="size-4"></i>
|
||||
<span>Hồ sơ cá nhân</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i data-lucide="settings" class="size-4"></i>
|
||||
<span>Cài đặt tài khoản</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/logout.php">
|
||||
<i data-lucide="log-out" class="size-4"></i>
|
||||
<span>Đăng xuất</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- cài đặt hệ thống -->
|
||||
<div class="dropdown dropdown-bottom dropdown-end w-full">
|
||||
<div tabindex="0" role="button" class="btn btn-sm relative" aria-label="settings">
|
||||
<i data-lucide="settings" class="motion-preset-seesaw size-4.5"></i>
|
||||
<span>Cài đặt</span>
|
||||
</div>
|
||||
<ul role="setting" tabindex="0"
|
||||
class="dropdown-content menu bg-base-100 rounded-box shadow-base-content/4 mb-1 w-48 p-1 shadow-[0px_-10px_40px_0px]">
|
||||
<div class="max-h-[400px] overflow-auto">
|
||||
{% for _menu_item in global.main_menu %}
|
||||
{% assign _menu_children = _menu_item.menu %}
|
||||
{% if _menu_item.id == 'system' %}
|
||||
{% for _item in _menu_children | limit: 10 %}
|
||||
<li>
|
||||
<a href="{{ _item.url }}">
|
||||
<span>{{ _item.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="{{ 'icon_delivery_truck.svg' | asset_url }}" alt="" class="w-5 h-5" />
|
||||
<span class="text-white text-xs font-semibold tracking-tight">Giao nhanh - Miễn phí</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-[5px]">
|
||||
<img src="{{ 'icon_customer_support.svg' | asset_url }}" alt="" class="w-5 h-5" />
|
||||
<span class="text-white text-xs font-semibold font-inter tracking-tight">Hotline: <strong>0967641641</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3 relative">
|
||||
<ul class="menu menu-horizontal">
|
||||
<li>
|
||||
<a href="/" class="flex items-center gap-3">
|
||||
<i data-lucide="house" class="size-4.5 menu-icon-color"></i>
|
||||
<span class="grow">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
{% for _menu_item in global.main_menu %}
|
||||
{% assign _menu_children = _menu_item.menu %}
|
||||
{% if _menu_item.id != 'system' %}
|
||||
<li
|
||||
class="{%- for _item in _menu_children -%}{%- if _item.url == global.url -%} active {%- endif -%} {%- endfor -%}">
|
||||
<div class="flex items-center gap-3">
|
||||
{% if _menu_item.icon_class != '' %}
|
||||
<i data-lucide="{{_menu_item.icon_class}}" class="size-4.5 menu-icon-color"></i>
|
||||
{% endif %}
|
||||
<span class="grow">{{ _menu_item.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="w-full bg-[#e4057c] h-[68px] flex items-center">
|
||||
<div class="layout-container h-full py-[7px]">
|
||||
<div class="w-full flex items-center gap-9">
|
||||
<div class="h-[54px] w-[79px] relative shrink-0">
|
||||
<img src="{{ 'logo_miq.png' | asset_url }}" alt="MIQ Logo" class="absolute inset-0 w-full h-full object-contain" />
|
||||
</div>
|
||||
|
||||
<div id="menu-trigger" class="flex items-center gap-[10px] cursor-pointer select-none" onmouseenter="showMenu()" onmouseleave="scheduleMenuClose()">
|
||||
<img src="{{ 'icon_menu.svg' | asset_url }}" alt="" class="w-6 h-6" />
|
||||
<span class="text-white text-sm font-semibold">Danh mục</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-[35px] flex-1 justify-end">
|
||||
<div class="relative flex-1 min-w-[465px]">
|
||||
<form action="/search" method="get" class="relative h-9">
|
||||
<div class="absolute inset-0 bg-white rounded-full"></div>
|
||||
<img src="{{ 'icon_search.svg' | asset_url }}" alt="" class="absolute left-[15px] top-[8px] w-5 h-5" />
|
||||
<input type="text" id="search" name="q" placeholder="Tivi Samsung giá sốc"
|
||||
class="absolute inset-0 bg-transparent rounded-full pl-[44px] pr-4 text-[13px] text-[#e4057c] outline-none w-full"
|
||||
onfocus="showSearch()" onblur="setTimeout(hideSearch, 200)" />
|
||||
</form>
|
||||
|
||||
<div id="search-popup" class="hidden absolute top-[calc(100%+8px)] left-0 bg-white rounded-[8px] flex-col gap-3 p-3 z-[60]"
|
||||
style="width:562px; box-shadow:-2px 10px 25.4px 0px rgba(0,0,0,0.25)">
|
||||
<div class="flex items-center justify-between shrink-0">
|
||||
<span class="text-[14px] font-medium text-[#585858]">Tìm kiếm gần đây</span>
|
||||
<button type="button" onclick="hideSearch()" class="w-6 h-6 flex items-center justify-center">
|
||||
<img src="{{ 'icon_close.svg' | asset_url }}" alt="" class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-wrap shrink-0">
|
||||
<span class="bg-[#f1f3f9] rounded-full px-3 h-7 flex items-center text-[12px] font-medium text-[#585858] cursor-pointer">Nồi cơm điện</span>
|
||||
<span class="bg-[#f1f3f9] rounded-full px-3 h-7 flex items-center text-[12px] font-medium text-[#585858] cursor-pointer">lõi lọc không khí</span>
|
||||
<span class="bg-[#f1f3f9] rounded-full px-3 h-7 flex items-center text-[12px] font-medium text-[#585858] cursor-pointer">nồi nấu chậm</span>
|
||||
</div>
|
||||
<div class="h-px bg-[#ebebeb] shrink-0"></div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<span class="text-[14px] font-medium text-[#585858]">Ưu đãi đặc biệt</span>
|
||||
<div class="w-full h-[146px] rounded-[8px] overflow-hidden shrink-0">
|
||||
<img src="{{ 'search_promo_banner.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<ul class="p-2 submenu">
|
||||
{% for _item in _menu_children %}
|
||||
<li class="{% if _item.url == global.url %} active {% endif %}"><a href="{{ _item.url }}"
|
||||
style="white-space: nowrap">{{ _item.name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center h-8 bg-[#ffe4e9] rounded-[8px] overflow-hidden">
|
||||
<div class="bg-[#90004b] h-full flex items-center px-[13px] shrink-0 rounded-l-[8px]">
|
||||
<span class="text-[12px] font-medium text-white whitespace-nowrap">Máy lạnh 1 HP</span>
|
||||
</div>
|
||||
<span class="flex-1 text-[12px] font-medium text-black text-right pr-3">Giá chỉ từ 5.632.000đ</span>
|
||||
</div>
|
||||
<div class="flex items-center h-8 bg-[#ffe4e9] rounded-[8px] overflow-hidden">
|
||||
<div class="bg-[#90004b] h-full flex items-center px-[13px] shrink-0 rounded-l-[8px]">
|
||||
<span class="text-[12px] font-medium text-white whitespace-nowrap">Tuần lễ tủ lạnh LG</span>
|
||||
</div>
|
||||
<span class="flex-1 text-[12px] font-medium text-black text-right pr-3">Deal hời chỉ từ 5.632.000đ</span>
|
||||
</div>
|
||||
<div class="flex items-center h-8 bg-[#ffe4e9] rounded-[8px] overflow-hidden">
|
||||
<div class="bg-[#90004b] h-full flex items-center px-[13px] shrink-0 rounded-l-[8px]">
|
||||
<span class="text-[12px] font-medium text-white whitespace-nowrap">Smart TV 2026</span>
|
||||
</div>
|
||||
<span class="flex-1 text-[12px] font-medium text-black text-right pr-3">Giá chỉ từ 3.900.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-[10px] cursor-pointer">
|
||||
<img src="{{ 'icon_login.svg' | asset_url }}" alt="" class="w-[15px] h-[18px]" />
|
||||
<span class="text-white text-sm font-semibold">Đăng nhập</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-[10px] cursor-pointer">
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[20.844px] h-[18.688px]" />
|
||||
<span class="text-white text-sm font-semibold">Giỏ hàng</span>
|
||||
</div>
|
||||
|
||||
<div id="btn-showroom"
|
||||
class="bg-[#b70061] h-8 rounded-full flex items-center justify-between pl-[11px] pr-[7px] w-[199px] cursor-pointer select-none"
|
||||
onclick="toggleShowroom()">
|
||||
<div class="flex items-center gap-[10px]">
|
||||
<img src="{{ 'icon_map.svg' | asset_url }}" alt="" class="w-[15.5px] h-5" />
|
||||
<span class="text-white text-[13px]">Showroom</span>
|
||||
</div>
|
||||
<img src="{{ 'icon_cart.svg' | asset_url }}" alt="" id="showroom-arrow" class="w-[6px] h-[10.7px] transition-transform duration-200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full bg-[#ebecf0] h-8 flex items-center">
|
||||
<div class="layout-container">
|
||||
<div class="h-8 flex items-center justify-center gap-[20px] text-[#90004b] text-[13px] font-normal tracking-[-0.26px]">
|
||||
{% for _menu_item in component.main_menu.product.all_category | limit: 9 %}
|
||||
<a href="{{ _menu_item.url }}" class="hover:underline">{{ _menu_item.title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mega-menu" class="hidden absolute top-full left-0 w-full z-50" onmouseenter="cancelMenuClose()" onmouseleave="scheduleMenuClose()">
|
||||
<div class="layout-container flex rounded-[4px] overflow-hidden">
|
||||
<div class="w-[231px] shrink-0 bg-[#eaecf0] rounded-tl-[4px] rounded-bl-[4px] flex flex-col">
|
||||
{% for _menu_item in component.main_menu.product.all_category %}
|
||||
<a href="{{ _menu_item.url }}" id="cat-{{ forloop.index0 }}" data-menu-cat="{{ forloop.index0 }}"
|
||||
class="cat-item {% if forloop.first %}cat-active{% endif %} flex items-center justify-between h-9 pr-3 shrink-0"
|
||||
onmouseenter="switchCat('{{ forloop.index0 }}')">
|
||||
<div class="flex items-center min-w-0">
|
||||
{% if forloop.first %}
|
||||
<img src="{{ 'icon_fire.png' | asset_url }}" alt="" class="w-4 h-4 shrink-0 ml-[15px]" />
|
||||
<span class="cat-label text-[13px] ml-5 truncate">{{ _menu_item.title }}</span>
|
||||
{% elsif _menu_item.is_featured == '1' %}
|
||||
<div class="w-[34px] h-[25px] shrink-0 overflow-hidden ml-[10px]">
|
||||
<img src="{{ 'icon_sale_badge.png' | asset_url }}" alt="" class="h-full object-contain" />
|
||||
</div>
|
||||
<span class="cat-label text-[13px] ml-2 truncate">{{ _menu_item.title }}</span>
|
||||
{% else %}
|
||||
<span class="cat-label text-[13px] ml-[44px] truncate">{{ _menu_item.title }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<img src="{{ 'icon_chevron_right_menu.svg' | asset_url }}" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
|
||||
</a>
|
||||
{% unless forloop.last %}
|
||||
<div class="border-t border-[#d3d7df]"></div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="flex-1 bg-white rounded-tr-[4px] rounded-br-[4px] overflow-hidden relative">
|
||||
{% for _menu_item in component.main_menu.product.all_category %}
|
||||
<div id="rp-{{ forloop.index0 }}" data-menu-panel="{{ forloop.index0 }}" class="menu-rp-panel" style="{% if forloop.first %}display:flex{% else %}display:none{% endif %}">
|
||||
<p class="menu-rp-title">{{ _menu_item.title }}</p>
|
||||
<div class="menu-subcat-grid">
|
||||
{% if _menu_item.children and _menu_item.children.size > 0 %}
|
||||
{% for _item in _menu_item.children %}
|
||||
<a href="{{ _item.url }}" class="menu-subcat-item">
|
||||
{% if _item.thumnail %}
|
||||
<img src="{{ _item.thumnail }}" alt="{{ _item.title }}" class="w-12 h-12 object-contain" />
|
||||
{% else %}
|
||||
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="{{ _item.title }}" class="w-12 h-12 object-contain" />
|
||||
{% endif %}
|
||||
<span>{{ _item.title }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<a href="{{ _menu_item.url }}" class="menu-subcat-item">
|
||||
{% if _menu_item.thumnail %}
|
||||
<img src="{{ _menu_item.thumnail }}" alt="{{ _menu_item.title }}" class="w-12 h-12 object-contain" />
|
||||
{% else %}
|
||||
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="{{ _menu_item.title }}" class="w-12 h-12 object-contain" />
|
||||
{% endif %}
|
||||
<span>{{ _menu_item.title }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="menu-brand-row">
|
||||
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="{{ 'brand_samsung.png' | asset_url }}" alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
||||
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="{{ 'brand_lg.png' | asset_url }}" alt="LG" class="h-5 object-contain" style="max-width:44px" /></div>
|
||||
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="{{ 'brand_sony.png' | asset_url }}" alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
||||
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="{{ 'brand_toshiba.png' | asset_url }}" alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
||||
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="{{ 'brand_aqua.png' | asset_url }}" alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
||||
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="{{ 'brand_tcl.png' | asset_url }}" alt="TCL" class="h-5 object-contain" style="max-width:43px" /></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="showroom-panel" class="hidden absolute top-full left-0 w-full z-50 bg-white shadow-[0px_10px_15px_0px_rgba(0,0,0,0.1)]">
|
||||
<div class="layout-container py-[18px]">
|
||||
<p class="text-center font-semibold text-[16px] text-black uppercase tracking-[-0.32px] mb-4">Địa điểm showroom của MIQ</p>
|
||||
<div class="flex gap-3">
|
||||
<div class="flex-1">
|
||||
<div class="bg-[#db0000] rounded-[4px] h-11 flex items-center justify-between px-4">
|
||||
<span class="font-semibold text-[16px] text-white uppercase tracking-[-0.32px]">Cơ sở Hà Nội</span>
|
||||
<span class="text-[13px] text-white tracking-[-0.26px]">Thời gian mở cửa: 8h00 - 18h00 hằng ngày</span>
|
||||
</div>
|
||||
<div class="pt-3 flex flex-col gap-[18px]">
|
||||
<div class="flex items-start gap-2"><img src="{{ 'icon_map_pin.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0 mt-[1px]" /><span class="text-[13px] text-black tracking-[-0.26px]">Địa chỉ: Số 2 Lương Ngọc Quyến, Phường Thanh Liệt, TP Hà Nội</span></div>
|
||||
<div class="flex items-center gap-2"><img src="{{ 'icon_phone.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" /><span class="text-[13px] text-black tracking-[-0.26px]">Tel: 082.418.4444</span></div>
|
||||
<div class="flex items-center gap-2"><img src="{{ 'icon_support.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" /><span class="text-[13px] text-black tracking-[-0.26px]">Bảo hành: 082.418.4444</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="bg-[#db0000] rounded-[4px] h-11 flex items-center justify-between px-4">
|
||||
<span class="font-semibold text-[16px] text-white uppercase tracking-[-0.32px]">Cơ sở Hồ Chí Minh</span>
|
||||
<span class="text-[13px] text-white tracking-[-0.26px]">Thời gian mở cửa: 8h00 - 18h00 hằng ngày</span>
|
||||
</div>
|
||||
<div class="pt-3 flex flex-col gap-[18px]">
|
||||
<div class="flex items-start gap-2"><img src="{{ 'icon_map_pin.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0 mt-[1px]" /><span class="text-[13px] text-black tracking-[-0.26px]">Địa chỉ: 74 Bàu Cát 1, Phường Tân Bình, TP Hồ Chí Minh</span></div>
|
||||
<div class="flex items-center gap-2"><img src="{{ 'icon_phone.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" /><span class="text-[13px] text-black tracking-[-0.26px]">Tel: 0971.49.0000</span></div>
|
||||
<div class="flex items-center gap-2"><img src="{{ 'icon_support.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" /><span class="text-[13px] text-black tracking-[-0.26px]">Bảo hành: 082.418.4444</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="overlay" class="hidden fixed inset-0 bg-black/30 z-40" onclick="closeAll()"></div>
|
||||
|
||||
@@ -1,46 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="vi">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title> Admin Hura Pc </title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Admin Hura Pc</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700;800&display=swap"
|
||||
rel="stylesheet" />
|
||||
|
||||
<!-- library tailwindcss + daisyui css -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
|
||||
<!-- file build tailwindcss + daisyui -->
|
||||
<!-- <link rel="stylesheet" href="{{ 'hura-lib.css' | asset_url }}" /> -->
|
||||
|
||||
<!-- hura global css -->
|
||||
<link rel="stylesheet" href="{{ 'hura.global.css' | asset_url }}" />
|
||||
|
||||
<link rel="stylesheet" href="{{ 'miq-homepage.css' | asset_url }}" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{global|show_var}}
|
||||
{{component|show_var}}
|
||||
{{banner|show_var}}
|
||||
{{page|show_var}}
|
||||
<body class="bg-[#f4f4f4]">
|
||||
{% include "other/header" %}
|
||||
|
||||
<div class="flex h-screen min-w-0 grow flex-col overflow-auto">
|
||||
{% include "other/header" %}
|
||||
<main id="layout-content">
|
||||
{{ page_content }}
|
||||
</main>
|
||||
|
||||
<div id="layout-content">
|
||||
{{ page_content }}
|
||||
</div>
|
||||
|
||||
<footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4">
|
||||
<aside>
|
||||
<p>Copyright © 2025 - HuraSoft</p>
|
||||
</aside>
|
||||
</footer>
|
||||
</div>
|
||||
{% include "other/footer" %}
|
||||
|
||||
{% include javascript/index %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user