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

update

Browse Source
This commit is contained in:
Tieptk
2025-12-11 13:30:40 +07:00
parent ebfaf799eb
commit 70ca13999e
10 changed files with 271 additions and 818 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
template/home/home.html
View File

@@ -213,7 +213,7 @@
<i data-lucide="shopping-bag" class="size-4.5"></i>
<span class="font-medium">Lịch sử chỉnh sửa</span>
</div>
<button class="btn btn-outline btn-sm btn-view px-2">
<button class="btn btn-outline btn-sm hura-btn-outline px-2">
Xem danh sách
<i data-lucide="plus-circle" class="size-3.5"></i>
</button>
@@ -236,7 +236,7 @@
<td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td>
<td>
<a href="" class="btn btn-outline btn-view btn-sm">Xem</a>
<a href="" class="btn btn-outline hura-btn-outline btn-sm">Xem</a>
</td>
</tr>
<tr>
@@ -245,7 +245,7 @@
<td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td>
<td>
<a href="" class="btn btn-outline btn-view btn-sm">Xem</a>
<a href="" class="btn btn-outline hura-btn-outline btn-sm">Xem</a>
</td>
</tr>
<tr>
@@ -254,7 +254,7 @@
<td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td>
<td>
<a href="" class="btn btn-outline btn-view btn-sm">Xem</a>
<a href="" class="btn btn-outline hura-btn-outline btn-sm">Xem</a>
</td>
</tr>
<tr>
@@ -263,7 +263,7 @@
<td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td>
<td>
<a href="" class="btn btn-outline btn-view btn-sm">Xem</a>
<a href="" class="btn btn-outline hura-btn-outline btn-sm">Xem</a>
</td>
</tr>
</tbody>
@@ -277,7 +277,7 @@
<div class="col-span-4">
<div class="bg-white shadow p-3 rounded-sm">
<div id="js-admin-home-tab" class="admin-home-tab flex items-center justify-end mb-3">
<a href="#js-report-most-viewed-products" class=" btn btn-sm btn-active">Sản phẩm xem nhiều</a>
<a href="#js-report-most-viewed-products" class=" btn btn-sm hura-btn-active">Sản phẩm xem nhiều</a>
<a href="#js-report-introduce-web" class="btn btn-sm"> Web giới thiệu</a>
<a href="#js-report-key-word" class="btn btn-sm"> Từ khóa</a>
<a href="#js-report-article" class="btn btn-sm"> Bài viết</a>
@@ -382,7 +382,7 @@
</div>
<form class="flex items-center justify-between mt-3">
<input type="text" placeholder="Nhập việc cần làm của bạn" class="input w-[78%]" />
<button type="button" class="btn btn-active">Tạo mới</button>
<button type="button" class="btn hura-btn-active">Tạo mới</button>
</form>
<div class="overflow-x-auto border border-base-content/5 mt-3">

4
template/javascript/homepage.html
View File

@@ -361,11 +361,11 @@
// Xóa class current ở tất cả các tab
document.querySelectorAll("#js-admin-home-tab a").forEach(function (el) {
el.classList.remove("btn-active");
el.classList.remove("hura-btn-active");
});
// Gán class current vào tab đang click
this.classList.add("btn-active");
this.classList.add("hura-btn-active");
// Lấy ID từ href để show nội dung
var id = this.getAttribute("href");

4
template/javascript/index.html
View File

@@ -27,6 +27,10 @@
{% include javascript/product_form %}
{% elsif global.module == 'marketing' %}
{% include javascript/marketing_form %}
{% elsif global.module == 'brand' %}
{% include javascript/brand %}

21
template/javascript/marketing_form.html Normal file
View File

@@ -0,0 +1,21 @@
<!-- 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"
rel="stylesheet" />
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script>
// Quan trọng: đăng ký plugin
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.create(document.querySelector("#avatar-promotion"), {
credits: false,
allowImageCrop: false,
allowImagePreview: false,
allowMultiple: true,
labelIdle: 'Kéo thả ảnh hoặc <span class="filepond--label-action">Chọn ảnh</span>',
})
</script>

4
template/javascript/product_form.html
View File

@@ -1,8 +1,10 @@
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="{{ 'RowExpand.js' | asset_url }}"></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"
rel="stylesheet" />
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>

59
template/marketing/promotion.html
View File

@@ -1,17 +1,14 @@
<div class="w-[100%]">
<div
class="marketing-coupon-page bg-white m-[16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
<div class="w-full">
<div class="marketing-coupon-page bg-white p-3 rounded shadow">
<p class="leading-[30px] text-[24px] font-bold m-[0_0_12px]"> Khuyến mại theo sản phẩm </p>
<form method="get" enctype="multipart/form-data" action="/admin/"
class="border border-[#F6F6F6] m-[12px_0_20px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
<form method="get" enctype="multipart/form-data" action="/admin/" class=" p-3 bg-white rounded-sm shadow">
<input type="hidden" name="opt" value="marketing">
<input type="hidden" name="view" value="promotion">
<input type="text" name="q" id="keyword" value=""
class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
<input type="submit" value="Tìm kiếm"
class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] cursor-pointer rounded-[4px]">
<div class="flex items-center gap-3">
<input type="text" name="q" id="keyword" value="" class="input bg-white rounded-sm shadow" />
<input type="submit" value="Tìm kiếm" class="btn btn-active">
</div>
</form>
<div class="flex items-center justify-between m-[20px_0_25px]">
@@ -19,26 +16,23 @@
phù
hợp cho từng khuyến mại </p>
<div class="flex items-center">
<a href="/admin/marketing/promotion-add"
class="flex items-center whitespace-nowrap border border-[#0041E8] mr-[15px] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] font-[500] leading-[35px] p-[0_12px]">
<span
class="border-[1px] border-[#0041E8] h-[13px] w-[13px] leading-[10px] text-center rounded-[50%] mr-1">+</span>
<div class="flex items-center gap-3">
<a href="/admin/marketing/promotion-add" class="btn btn-view btn-outline btn-md">
<i data-lucide="circle-plus" class="size-4"></i>
<span>Thêm khuyến mại mới</span>
</a>
<a href="/admin/marketing/promotion-group"
class="flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] font-[500] leading-[35px] p-[0_12px]">
<i class="far fa-bookmark mr-[8px]"></i>
<a href="/admin/marketing/promotion-group" class="btn btn-view btn-outline btn-md">
<i data-lucide="bookmark" class="size-4"></i>
<span>Nhóm khuyến mại</span>
</a>
</div>
</div>
<div class="overflow-x-auto">
<div class="overflow-x-auto border border-gray-200 rounded-sm">
<table class="table">
<thead class="bg-[#F6F6F6] text-[#000] text-[14px]">
<tr class="font-[600]">
<thead>
<tr class="bg-base-200 font-bold text-black">
<td width="50"> STT </td>
<td> Khuyến mại </td>
<td> Thời gian </td>
@@ -53,7 +47,7 @@
<td class="whitespace-nowrap">
<p>
[Quà tặng] <b class="text-[#0041E8] font-bold">Phiếu mua hàng trị giá 100.000 VND</b>
[Quà tặng] <b class="text-active font-bold">Phiếu mua hàng trị giá 100.000 VND</b>
</p>
<p> - Mô tả: Phiếu mua hàng </p>
<p> - Giá trị: 0 VND </p>
@@ -70,22 +64,21 @@
</td>
<td>
<a href="/admin/marketing/promotion-product?id=1"
class="block text-center font-[500] text-[#fff_!important] bg-[#0041E8] rounded-[4px] p-[0_9px] leading-[30px]">Xem</a>
<a href="/admin/marketing/promotion-product?id=1" class="btn btn-active btn-sm">Xem</a>
</td>
<td>
<div class="flex items-center flex-wrap justify-center w-[180px]">
<div class="flex items-center flex-wrap justify-center gap-3">
<a href="/admin/marketing/promotion-add?id=1"
class="border-[1px] border-[#0041E8] icons icon-edit w-[32px] h-[32px] mr-[6px]"
title="Sửa lại"></a>
<a href="" title="Cho Hiển thị"
class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
class="btn btn-soft btn-sm btn-square btn-view" title="Sửa lại">
<i data-lucide="pencil" class="size-3"></i>
</a>
<a href="" title="Cho Hiển thị" class="btn btn-soft btn-sm btn-square btn-view">
<i data-lucide="eye" class="size-3"></i>
</a>
<a href="" class="btn btn-soft btn-sm btn-square btn-error">
<i data-lucide="trash-2" class="size-3"></i>
</a>
<!-- <a href="" title="Hạ Hiển thị" class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a> -->
<a href="" title="Dừng khuyến mại"
class="fas fa-volume-mute bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
<a href="" class="icons icon-delete" title="Xóa"></a>
</div>
</td>
</tbody>

347
template/marketing/promotion_add.html
View File

@@ -3,26 +3,22 @@
<a href=""> Form thêm/sửa khuyến mại </a>
</div>
<div class="max-w-[1141px] m-[auto] p-[0_15px]">
<div class="flex flex-wrap items-start justify-center">
{% if global.url contains 'id=' %}
<div
class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px] flex flex-wrap items-center justify-between">
<p class="font-bold text-[20px]"> Cập nhật </p>
<div class="w-7xl mx-auto">
<div class="w-full mt-5 p-3 bg-white rounded-sm shadow flex flex-wrap items-center justify-between">
<p class="font-bold text-xl"> Cập nhật </p>
<a href="/admin/marketing/promotion-add"
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
<span
class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
<span>Thêm khuyến mại mới</span>
</a>
<a href="/admin/marketing/promotion-add" class="btn btn-outline btn-view btn-sm">
<i data-lucide="circle-plus" class="size-3"></i>
<span>Thêm khuyến mại mới</span>
</a>
<p class="w-[100%] text-[#6B7280]">
Tặng phiếu vệ sinh bảo dưỡng Laptop, PC miễn phí trọn đời trị giá 999.000đ (THEK417)
</p>
</div>
<p class="w-full text-[#6B7280]">
Tặng phiếu vệ sinh bảo dưỡng Laptop, PC miễn phí trọn đời trị giá 999.000đ (THEK417)
</p>
</div>
<div class="w-[25%] mr-[16px]">
<div class="grid grid-cols-4 gap-5 mt-5">
<div class="">
<div
class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
<a href="javascript:void(0)"
@@ -36,17 +32,14 @@
</div>
{% endif %}
<form method="post" enctype="multipart/form-data"
class="order-page-table w-[calc(100%_-25%_-16px)] bg-white p-[16pX_16px_20px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px] block">
class="order-page-table bg-white p-3 rounded-sm shadow col-span-3">
<p class="mb-[20px] font-bold text-[20px]">Thông tin cơ bản</p>
<p class="font-bold text-xl">Thông tin cơ bản</p>
<div class="mb-[18px]">
<p class="mb-[7px]"> <b>Hình thức</b> </p>
<select class="w-[300px_!important] select select-bordered h-[40px] min-h-[40px]">
<div class="mt-5 flex items-center gap-3">
<b class="block">Hình thức</b>
<select class="select w-[120px]">
<option value="" selected> Quà tặng </option>
<option value=""> Dịch vụ </option>
<option value=""> Sản phẩm </option>
@@ -54,196 +47,181 @@
</select>
</div>
<div class="mb-[18px]">
<p class="inline-block m-[0_17px_7px_0]"> <b>Ảnh đại diện (nếu có)</b> </p>
<input type="file" name="file_thumbnail" />
<div>
<img src="https://via.placeholder.com/400x300" class="block m-[10px_0_0] max-h-[100px]" />
</div>
<div class="mt-5">
<b class="block mb-2">Ảnh đại diện (nếu có)</b>
<div id="avatar-promotion" class="mt-3"></div>
</div>
<div class="mb-[18px]">
<p class="mb-[7px]"> <b>Đặt tiêu đề khuyến mại</b> </p>
<input type="text" value=""
class="w-[100%] h-[34px] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
<div class="mt-5">
<b class="block">Đặt tiêu đề khuyến mại</b>
<input type="text" value="" class="w-full input input-md input-bordered rounded-sm shadow mt-3" />
</div>
<div class="flex flex-wrap justify-between">
<div class="mb-[18px] w-[49%]">
<div class="grid grid-cols-2 gap-3 mt-5">
<div class="">
<p class="mb-[7px]"> <b>Giá trị bằng</b> (VNĐ) </p>
<input type="text" value="0"
class="w-[100%] h-[34px] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
</div>
<div class="mb-[18px] w-[49%]">
<div class="">
<p class="mb-[7px]"> <b>Số lượng</b> (Để = -1 nếu không hạn chế số lượng)</p>
<input type="text" value="0"
class="w-[100%] h-[34px] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
</div>
</div>
<div class="mb-[18px]">
<p class="mb-[7px]"> <b>Mô tả</b> </p>
<div class="mt-5">
<b class="block">Mô tả</b>
<textarea
class="w-[100%] min-h-[122px] max-h-[170px] textarea textarea-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
<textarea class="w-full textarea textarea-bordered rounded-sm shadow mt-3"></textarea>
</div>
<div class="mb-[18px] flex flex-wrap">
<p class="mr-[45px]"> <b>Thời gian hiệu lực</b> </p>
<div class="grid grid-cols-4 gap-3 mt-5">
<b class="block">Thời gian hiệu lực</b>
<div class="mb-[18px]">
<div class="col-span-3">
<label class="cursor-pointer flex items-center mb-[10px]">
<input type="radio" name="info[time_valid]" value="0" class="radio checked:bg-blue-500"
<label class="cursor-pointer flex items-center gap-2">
<input type="radio" name="info[time_valid]" value="0" class="radio radio-active"
checked="checked" />
<span class="label-text ml-[10px]">Không giới hạn thời gian</span>
<span class="label-text">Không giới hạn thời gian</span>
</label>
<label class="cursor-pointer flex items-center gap-2 mt-3">
<input type="radio" name="info[time_valid]" value="1" class="radio radio-active" />
<span class="label-text">Thời gian giới hạn</span>
</label>
<label class="cursor-pointer flex items-center mb-[10px]">
<input type="radio" name="info[time_valid]" value="1" class="radio checked:bg-blue-500" />
<span class="label-text ml-[10px]">Thời gian giới hạn</span>
</label>
<div class="items-center mb-[10px]" style="display: flex;">
<p style="width: 65px;"> Bắt đầu </p>
<div class="relative m-[0_20px_0_10px]">
<i
class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
<div class="mt-3 grid grid-cols-2 gap-3">
<div class="grid grid-cols-2 gap-3">
<p> Bắt đầu </p>
<input type="date" name="from_time_date" value="" placeholder="Từ ngày"
class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
class="input rounded-sm shadow w-[200px]" />
</div>
<div class="flex items-center gap-3">
<p> Giờ </p>
<select name='info[from_time_minute]' id='from_time_minute'
class="select select-bordered w-[100px] rounded-sm">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<p class="mr-[10px]"> Giờ </p>
<select name='info[from_time_minute]' id='from_time_minute'
class="select select-bordered w-[100px] h-[38px] min-h-[38px] rounded-[4px]">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<div class="items-center" style="display: flex;">
<p style="width: 65px;"> Kết thúc </p>
<div class="relative m-[0_20px_0_10px]">
<i
class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
<input type="date" name="to_time_date" value="" placeholder="Từ ngày"
class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
<div class="mt-3 grid grid-cols-2 gap-3">
<div class="grid grid-cols-2 gap-3">
<p> Kết thúc </p>
<input type="date" name="from_time_date" value="" placeholder="Từ ngày"
class="input rounded-sm shadow w-[200px]" />
</div>
<div class="flex items-center gap-3">
<p> Giờ </p>
<select name='info[to_time_minute]' id='to_time_minute'
class="select select-bordered w-[100px] rounded-sm">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<p class="mr-[10px]"> Giờ </p>
<select name='info[to_time_minute]' id='from_time_minute'
class="select select-bordered w-[100px] h-[38px] min-h-[38px] rounded-[4px]">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
</div>
</div>
<div class="mb-[18px]">
<p class="mb-[7px]"> <b>Link liên quan (nếu có)</b> (Link tới 1 bài viết giới thiệu chi tiết hoặc link
sản phẩm) </p>
<input type="text" value=""
class="w-[100%] h-[34px] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
<div class="mt-5">
<div class="flex items-center gap-2"> <b>Link liên quan (nếu có)</b> (Link tới 1 bài viết giới thiệu chi
tiết hoặc link
sản phẩm) </div>
<input type="text" value="" class="w-full input input-md input-bordered rounded-sm shadow mt-3" />
</div>
<div class="mb-[18px]">
@@ -275,4 +253,5 @@
class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
</form>
</div>
</div>

10
template/other/header.html
View File

@@ -377,10 +377,10 @@
<div class="flex items-center justify-between gap-3 relative">
<ul class="menu menu-horizontal">
<li>
<div class="flex items-center gap-3">
<i data-lucide="house" class="tw-sla menu-icon-color"></i>
<a href="/"><span class="grow">Home</span></a>
</div>
<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 %}
@@ -389,7 +389,7 @@
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="tw-sla menu-icon-color"></i>
<i data-lucide="{{_menu_item.icon_class}}" class="size-4.5 menu-icon-color"></i>
{% endif %}
<span class="grow">{{ _menu_item.name }}</span>
</div>

508
template/other/topbar.html
View File

@@ -1,508 +0,0 @@
<!-- Start: Layout - Topbar -->
<div role="navigation" aria-label="Navbar" class="flex items-center justify-between px-3" id="layout-topbar">
<div class="inline-flex items-center gap-3">
<label class="btn btn-square btn-ghost btn-sm group-has-[[id=layout-sidebar-hover-trigger]:checked]/html:hidden"
aria-label="Leftmenu toggle" for="layout-sidebar-toggle-trigger">
<span class="iconify lucide--menu size-5"></span>
</label>
<label
class="btn btn-square btn-ghost btn-sm hidden group-has-[[id=layout-sidebar-hover-trigger]:checked]/html:flex"
aria-label="Leftmenu toggle" for="layout-sidebar-hover-trigger">
<span class="iconify lucide--menu size-5"></span>
</label>
<button
class="btn btn-outline btn-sm btn-ghost border-base-300 text-base-content/70 hidden h-9 w-48 justify-start gap-2 !text-sm md:flex"
onclick="document.getElementById('topbar-search-modal')?.showModal()">
<span class="iconify lucide--search size-4"></span>
<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()">
<span class="iconify lucide--search size-4"></span>
</button>
<dialog id="topbar-search-modal" class="modal p-0">
<div class="modal-box bg-transparent p-0 shadow-none">
<div class="bg-base-100 rounded-box">
<div class="input w-full border-0 !outline-none">
<span class="iconify lucide--search text-base-content/60 size-4.5"></span>
<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">
<span class="iconify lucide--x text-base-content/80 size-4"></span>
</button>
</form>
</div>
<div class="border-base-300 flex items-center gap-3 border-t px-2 py-2">
<div class="flex items-center gap-0.5">
<div
class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
<span class="iconify lucide--arrow-up size-3.5"></span>
</div>
<div
class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
<span class="iconify lucide--arrow-down size-3.5"></span>
</div>
<p class="text-base-content/80 ms-1 text-sm">Điều hướng</p>
</div>
<div class="flex items-center gap-0.5 max-sm:hidden">
<div
class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
<span class="iconify lucide--undo-2 size-3.5"></span>
</div>
<p class="text-base-content/80 ms-1 text-sm">Quay lại</p>
</div>
<div class="flex items-center gap-0.5">
<div
class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
<span class="iconify lucide--corner-down-left size-3.5"></span>
</div>
<p class="text-base-content/80 ms-1 text-sm">Mở</p>
</div>
<div class="ms-auto flex items-center gap-0.5">
<div
class="border-base-300 bg-base-200 flex h-5 items-center justify-center rounded-sm border px-1 text-sm/none shadow-xs">
esc
</div>
<p class="text-base-content/80 ms-1 text-sm">Đóng</p>
</div>
</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">I'm looking for...</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">
Writer
</div>
<div
class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
Editor
</div>
<div
class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
Explainer
</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">
<span class="iconify lucide--plus size-3.5"></span>
Action
</div>
</div>
</div>
<hr class="border-base-300 h-px border-dashed" />
<ul class="menu w-full pt-1">
<li class="menu-title">Talk to assistant</li>
<li>
<div class="group">
<div
class="from-primary to-primary/80 mask mask-squircle text-primary-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
R
</div>
<p class="grow text-sm">Research Buddy</p>
<div
class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
<span class="iconify lucide--star text-orange-500"></span>
<div class="flex items-center gap-0.5">
<div
class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
<span class="iconify lucide--corner-down-left size-3.5"></span>
</div>
<p class="ms-1 text-sm opacity-80">Select</p>
</div>
<span class="iconify lucide--ellipsis-vertical opacity-80"></span>
</div>
</div>
</li>
<li>
<div class="group">
<div
class="from-secondary to-secondary/80 mask mask-squircle text-secondary-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
T
</div>
<p class="grow text-sm">Task Planner</p>
<div
class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
<span class="iconify lucide--star text-orange-500"></span>
<div class="flex items-center gap-0.5">
<div
class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
<span class="iconify lucide--corner-down-left size-3.5"></span>
</div>
<p class="ms-1 text-sm opacity-80">Select</p>
</div>
<span class="iconify lucide--ellipsis-vertical opacity-80"></span>
</div>
</div>
</li>
<li>
<div class="group">
<div
class="from-success to-success/80 mask mask-squircle text-success-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
S
</div>
<p class="grow text-sm">Sparking Ideas</p>
<div
class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
<span class="iconify lucide--star text-orange-500"></span>
<div class="flex items-center gap-0.5">
<div
class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
<span class="iconify lucide--corner-down-left size-3.5"></span>
</div>
<p class="ms-1 text-sm opacity-80">Select</p>
</div>
<span class="iconify lucide--ellipsis-vertical opacity-80"></span>
</div>
</div>
</li>
<li>
<div class="group">
<div
class="from-warning to-warning/80 mask mask-squircle text-warning-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
D
</div>
<p class="grow text-sm">Docs Assistant</p>
<div
class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
<span class="iconify lucide--star text-orange-500"></span>
<div class="flex items-center gap-0.5">
<div
class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
<span class="iconify lucide--corner-down-left size-3.5"></span>
</div>
<p class="ms-1 text-sm opacity-80">Select</p>
</div>
<span class="iconify lucide--ellipsis-vertical opacity-80"></span>
</div>
</div>
</li>
</ul>
<hr class="border-base-300 h-px border-dashed" />
<ul class="menu w-full pt-1">
<li class="menu-title flex flex-row items-center justify-between gap-2">
<span>Tasks Manager</span>
<span>Progress</span>
</li>
<li>
<div>
<span class="iconify lucide--notebook size-4"></span>
<p class="grow text-sm">Creating an essay</p>
<progress class="progress progress-primary h-1 w-30" value="60" max="100"></progress>
</div>
</li>
<li>
<div>
<span class="iconify lucide--message-circle size-4"></span>
<p class="grow text-sm">Summarizing chat</p>
<progress class="progress progress-secondary h-1 w-30" value="80" max="100"></progress>
</div>
</li>
<li>
<div>
<span class="iconify lucide--code size-4"></span>
<p class="grow text-sm">Fixing syntax</p>
<progress class="progress progress-accent h-1 w-30" value="35" max="100"></progress>
</div>
</li>
<li>
<div>
<span class="iconify lucide--book-open size-4"></span>
<p class="grow text-sm">Reading docs</p>
<progress class="progress progress-info h-1 w-30" value="90" max="100"></progress>
</div>
</li>
<li>
<div>
<span class="iconify lucide--lightbulb size-4"></span>
<p class="grow text-sm">Generating ideas</p>
<progress class="progress progress-warning h-1 w-30" value="50" max="100"></progress>
</div>
</li>
</ul>
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</div>
<div class="inline-flex items-center gap-0.5">
<div class="dropdown dropdown-bottom dropdown-center">
<div tabindex="0" class="btn btn-ghost btn-circle btn-sm cursor-pointer">
<img src="https://flagcdn.com/us.svg" alt="Avatar" class="rounded-box size-4.5 object-cover" />
</div>
<div tabindex="0" class="dropdown-content bg-base-100 rounded-box mt-2 w-40 shadow">
<ul class="menu w-full p-2">
<li>
<a class="flex items-center gap-2" href="#">
<img src="https://flagcdn.com/us.svg" alt="Avatar"
class="rounded-box size-4.5 cursor-pointer object-cover" />
<span>English</span>
</a>
</li>
<li>
<a class="flex items-center gap-2" href="#">
<img src="https://flagcdn.com/vn.svg" alt="Avatar"
class="rounded-box size-4.5 cursor-pointer object-cover" />
<span>Tiếng việt</span>
</a>
</li>
</ul>
</div>
</div>
<button aria-label="Toggle Theme" class="relative tw-dp btn btn-sm btn-circle btn-ghost"
data-theme-control="toggle">
<span
class="iconify lucide--sun absolute size-4.5 -translate-y-4 opacity-0 transition-all duration-300 group-data-[theme=light]/html:translate-y-0 group-data-[theme=light]/html:opacity-100"></span>
<span
class="iconify lucide--moon absolute size-4.5 translate-y-4 opacity-0 transition-all duration-300 group-data-[theme=dark]/html:translate-y-0 group-data-[theme=dark]/html:opacity-100"></span>
<span
class="iconify lucide--palette absolute size-4.5 opacity-100 group-data-[theme=dark]/html:opacity-0 group-data-[theme=light]/html:opacity-0"></span>
</button>
<label for="layout-rightbar-drawer" class="btn btn-circle btn-ghost btn-sm drawer-button">
<span class="iconify lucide--settings-2 size-4.5"></span>
</label>
<div class="dropdown dropdown-bottom sm:dropdown-end dropdown-center">
<div tabindex="0" role="button" class="btn btn-circle btn-ghost btn-sm relative" aria-label="Notifications">
<span class="iconify lucide--bell motion-preset-seesaw size-4.5"></span>
<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-84 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">Notification</p>
<button class="btn btn-xs btn-circle btn-ghost" aria-label="Close"
onclick="document.activeElement.blur()">
<span class="iconify lucide--x 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>All</span>
<div class="badge badge-sm">4</div>
</div>
<div role="tab" class="tab gap-2 px-3"><span>Team</span></div>
<div role="tab" class="tab gap-2 px-3"><span>AI</span></div>
<div role="tab" class="tab gap-2 px-3"><span>@mention</span></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="../../assets/images//avatars/2.png"
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="/images/avatars/4.png"
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="/images/avatars/5.png"
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">View All</button>
<div class="flex items-center gap-1">
<button class="btn btn-sm btn-square btn-ghost">
<span class="iconify lucide--check-check size-4"></span>
</button>
<button class="btn btn-sm btn-square btn-ghost">
<span class="iconify lucide--bell-ring size-4"></span>
</button>
<button class="btn btn-sm btn-square btn-ghost">
<span class="iconify lucide--settings size-4"></span>
</button>
</div>
</div>
</div>
</div>
<div class="drawer drawer-end">
<input id="topbar-profile-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<label for="topbar-profile-drawer" class="btn btn-ghost flex items-center gap-2 px-1.5">
<div class="avatar">
<div class="bg-base-200 mask mask-squircle w-8">
<img src="../../assets/images/avatars/1.png" alt="Avatar" />
</div>
</div>
<div class="text-start">
<p class="text-sm/none">Denish</p>
<p class="text-base-content/50 mt-0.5 text-xs/none">Team</p>
</div>
</label>
</div>
<div class="drawer-side">
<label for="topbar-profile-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<div class="h-full w-72 p-2 sm:w-84">
<div class="bg-base-100 rounded-box relative flex h-full flex-col pt-4 sm:pt-8">
<label for="topbar-profile-drawer"
class="btn btn-xs btn-circle btn-ghost absolute start-2 top-2" aria-label="Close">
<span class="iconify lucide--x size-4"></span>
</label>
<div class="flex flex-col items-center">
<div class="relative">
<div
class="avatar bg-base-200 isolate size-20 cursor-pointer overflow-hidden rounded-full px-1 pt-1 md:size-24">
<img src="/images/avatars/1.png" alt="User Avatar" />
</div>
<div
class="bg-base-100 absolute end-0 bottom-0 flex items-center justify-center rounded-full p-1.5 shadow-sm">
<span class="iconify lucide--pencil size-4"></span>
</div>
</div>
<p class="mt-4 text-lg/none font-medium sm:mt-8">John Doe</p>
<p class="text-base-content/60 mt-1 text-sm">john@company.com</p>
<div class="mt-4 flex items-center gap-2 *:cursor-pointer sm:mt-6">
<div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
<img src="/images/avatars/2.png" alt="Team member" />
</div>
<div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
<img src="/images/avatars/3.png" alt="Team member" />
</div>
<div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
<img src="/images/avatars/4.png" alt="Team member" />
</div>
<div
class="bg-base-200 border-base-300 flex size-10 items-center justify-center rounded-full border border-dashed">
<span class="iconify lucide--plus size-4.5"></span>
</div>
</div>
</div>
<div class="border-base-300 mt-4 grow overflow-auto border-t border-dashed px-2 sm:mt-6">
<ul class="menu w-full p-2">
<li class="menu-title">Account</li>
<li>
<a href="#">
<span class="iconify lucide--user size-4.5"></span>
<span>View Profile</span>
</a>
</li>
<li>
<a href="#">
<span class="iconify lucide--users size-4.5"></span>
<span>Team</span>
</a>
</li>
<li>
<a href="#">
<span class="iconify lucide--mail-plus size-4.5"></span>
<span>Invites</span>
<div class="badge badge-sm">4</div>
</a>
</li>
<li class="menu-title">Platform</li>
<li>
<a href="#">
<span class="iconify lucide--settings size-4.5"></span>
<span>Settings</span>
</a>
</li>
<li>
<a href="#">
<span class="iconify lucide--credit-card size-4.5"></span>
<span>Billing</span>
</a>
</li>
<li>
<a href="#">
<span class="iconify lucide--help-circle size-4.5"></span>
<span>Support</span>
</a>
</li>
<li>
<a class="text-error hover:bg-error/10" href="#">
<span class="iconify lucide--log-out size-4.5"></span>
<span>Sign Out</span>
</a>
</li>
</ul>
</div>
<div
class="rounded-box from-primary to-secondary text-primary-content m-4 mt-auto flex cursor-pointer flex-col items-center justify-center bg-linear-to-br p-4 text-center transition-all hover:opacity-95 sm:p-6">
<div
class="bg-primary-content/10 border-primary-content/10 flex items-center justify-center rounded-full border p-1.5 sm:p-2.5">
<span class="iconify lucide--zap size-5 sm:size-6"></span>
</div>
<p
class="mt-2 font-mono text-[11px] font-medium tracking-wider uppercase opacity-70 sm:mt-4">
Upgrade your plan
</p>
<p class="mt-1 leading-none font-medium sm:text-lg">
Save
<span class="font-semibold underline">30%</span>
today
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End: Layout - Topbar -->