This commit is contained in:
2025-12-11 13:30:40 +07:00
parent ebfaf799eb
commit 70ca13999e
10 changed files with 271 additions and 818 deletions

View File

@@ -39,6 +39,34 @@
} }
@layer components { @layer components {
#layout-topbar {
background: var(--layout-topbar-background);
top: calc(var(--spacing) * 0);
z-index: 10;
transition-property: top, margin, border-radius;
transition-timing-function: var(
--tw-ease,
var(--default-transition-timing-function)
);
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-duration: 0.3s;
transition-duration: 0.3s;
position: sticky;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: var(--color-base-300);
}
#layout-content {
padding: calc(var(--spacing) * 6);
transition-property: all;
transition-timing-function: var(
--tw-ease,
var(--default-transition-timing-function)
);
transition-duration: var(--tw-duration, var(--default-transition-duration));
flex-grow: 1;
background: var(--bg-body);
}
.bg-menu { .bg-menu {
background-color: var(--color-header); background-color: var(--color-header);
} }
@@ -48,18 +76,15 @@
--menu-active-bg: #e9f2ff; --menu-active-bg: #e9f2ff;
} }
} }
.menu-horizontal { .menu-horizontal {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
} }
.menu-horizontal li { .menu-horizontal li {
position: relative; position: relative;
} }
/* ACTIVE STATE (LEVEL 1) */ /* ACTIVE STATE (LEVEL 1) */
.menu-horizontal li.active { .menu-horizontal li.active {
background: var(--menu-active); background: var(--menu-active);
} }
@@ -139,7 +164,6 @@
.menu-horizontal > li > details > ul:before { .menu-horizontal > li > details > ul:before {
content: none; content: none;
} }
/* ========================== /* ==========================
SUBMENU HOVER ITEMS SUBMENU HOVER ITEMS
========================== */ ========================== */
@@ -154,116 +178,54 @@
.menu-horizontal li ul li:hover::before { .menu-horizontal li ul li:hover::before {
display: none; display: none;
} }
/* Font weight chung */ /* Font weight chung */
.menu-horizontal .grow { .menu-horizontal .grow {
font-weight: 500; font-weight: 500;
} }
.tw-qna {
gap: calc(var(--spacing) * 0.5);
}
.tw-zy {
align-items: center;
}
.tw-uba {
display: inline-flex;
}
.tw-usa {
width: calc(var(--spacing) * 5);
height: calc(var(--spacing) * 5);
}
.tw-sla {
width: calc(var(--spacing) * 4.5);
height: calc(var(--spacing) * 4.5);
}
.menu-icon-color { .menu-icon-color {
color: #838383; color: #838383;
} }
.card-body { .card-body {
padding: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 4);
} }
.-mt-25 {
margin-top: calc(var(--spacing) * -25);
}
}
#layout-topbar {
background: var(--layout-topbar-background);
top: calc(var(--spacing) * 0);
z-index: 10;
transition-property: top, margin, border-radius;
transition-timing-function: var(
--tw-ease,
var(--default-transition-timing-function)
);
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-duration: 0.3s;
transition-duration: 0.3s;
position: sticky;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: var(--color-base-300);
}
#layout-content {
padding: calc(var(--spacing) * 6);
transition-property: all;
transition-timing-function: var(
--tw-ease,
var(--default-transition-timing-function)
);
transition-duration: var(--tw-duration, var(--default-transition-duration));
flex-grow: 1;
background: var(--bg-body);
} }
@layer hura { @layer hura {
.btn-active { .hura-btn-active {
--btn-bg: var(--color-hura); --btn-bg: var(--color-hura);
--btn-fg: #ffffff; --btn-fg: #ffffff;
--btn-border: var(--color-hura); --btn-border: var(--color-hura);
color: var(--color-white); color: var(--color-white);
} }
.btn-active:hover { .hura-btn-active:hover {
--btn-bg: #002bb5; --btn-bg: #002bb5;
--btn-border: #002bb5; --btn-border: #002bb5;
} }
.btn-view { .hura-btn-outline {
background: #f5f7ff; background: #f5f7ff;
color: var(--color-hura); color: var(--color-hura);
border: 1px solid var(--color-hura); border: 1px solid var(--color-hura);
} }
.btn-view:hover { .hura-btn-outline:hover {
background: var(--color-hura); background: var(--color-hura);
color: #fff; color: #fff;
} }
.checkbox-active:checked, .hura-checkbox:checked,
.checkbox-active[aria-checked="true"] { .hura-checkbox[aria-checked="true"] {
background: var(--color-hura); background: var(--color-hura);
color: #fff; color: #fff;
} }
.menu-form .btn { .hura-radio:checked,
border-bottom: 0; .hura-radio[aria-checked="true"] {
}
.menu-form .btn:hover {
background: var(--color-hura);
color: #fff;
}
.radio-active:checked,
.radio-active[aria-checked="true"] {
border-color: var(--color-hura); border-color: var(--color-hura);
} }
.radio-active:checked::before, .hura-radio:checked::before,
.radio-active[aria-checked="true"]::before { .hura-radio[aria-checked="true"]::before {
background-color: var(--color-hura); background-color: var(--color-hura);
} }
.link-active { .hura-text-blue {
color: var(--color-hura); color: var(--color-hura);
} }
.text-active {
color: var(--color-hura);
}
.choices { .choices {
margin-top: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2);
--tw-shadow: --tw-shadow:

View File

@@ -213,7 +213,7 @@
<i data-lucide="shopping-bag" class="size-4.5"></i> <i data-lucide="shopping-bag" class="size-4.5"></i>
<span class="font-medium">Lịch sử chỉnh sửa</span> <span class="font-medium">Lịch sử chỉnh sửa</span>
</div> </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 Xem danh sách
<i data-lucide="plus-circle" class="size-3.5"></i> <i data-lucide="plus-circle" class="size-3.5"></i>
</button> </button>
@@ -236,7 +236,7 @@
<td> Chỉnh sửa trang chủ website laptoptcc </td> <td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td> <td> 24/11/2023 </td>
<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> </td>
</tr> </tr>
<tr> <tr>
@@ -245,7 +245,7 @@
<td> Chỉnh sửa trang chủ website laptoptcc </td> <td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td> <td> 24/11/2023 </td>
<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> </td>
</tr> </tr>
<tr> <tr>
@@ -254,7 +254,7 @@
<td> Chỉnh sửa trang chủ website laptoptcc </td> <td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td> <td> 24/11/2023 </td>
<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> </td>
</tr> </tr>
<tr> <tr>
@@ -263,7 +263,7 @@
<td> Chỉnh sửa trang chủ website laptoptcc </td> <td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td> <td> 24/11/2023 </td>
<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> </td>
</tr> </tr>
</tbody> </tbody>
@@ -277,7 +277,7 @@
<div class="col-span-4"> <div class="col-span-4">
<div class="bg-white shadow p-3 rounded-sm"> <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"> <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-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-key-word" class="btn btn-sm"> Từ khóa</a>
<a href="#js-report-article" class="btn btn-sm"> Bài viết</a> <a href="#js-report-article" class="btn btn-sm"> Bài viết</a>
@@ -382,7 +382,7 @@
</div> </div>
<form class="flex items-center justify-between mt-3"> <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%]" /> <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> </form>
<div class="overflow-x-auto border border-base-content/5 mt-3"> <div class="overflow-x-auto border border-base-content/5 mt-3">

View File

@@ -361,11 +361,11 @@
// Xóa class current ở tất cả các tab // Xóa class current ở tất cả các tab
document.querySelectorAll("#js-admin-home-tab a").forEach(function (el) { 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 // 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 // Lấy ID từ href để show nội dung
var id = this.getAttribute("href"); var id = this.getAttribute("href");

View File

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

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>

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

View File

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

View File

@@ -3,26 +3,22 @@
<a href=""> Form thêm/sửa khuyến mại </a> <a href=""> Form thêm/sửa khuyến mại </a>
</div> </div>
<div class="max-w-[1141px] m-[auto] p-[0_15px]"> <div class="w-7xl mx-auto">
<div class="flex flex-wrap items-start justify-center"> <div class="w-full mt-5 p-3 bg-white rounded-sm shadow flex flex-wrap items-center justify-between">
{% if global.url contains 'id=' %} <p class="font-bold text-xl"> Cập nhật </p>
<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>
<a href="/admin/marketing/promotion-add" <a href="/admin/marketing/promotion-add" class="btn btn-outline btn-view btn-sm">
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]"> <i data-lucide="circle-plus" class="size-3"></i>
<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> <span>Thêm khuyến mại mới</span>
</a> </a>
<p class="w-[100%] text-[#6B7280]"> <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) Tặng phiếu vệ sinh bảo dưỡng Laptop, PC miễn phí trọn đời trị giá 999.000đ (THEK417)
</p> </p>
</div> </div>
<div class="w-[25%] mr-[16px]"> <div class="grid grid-cols-4 gap-5 mt-5">
<div class="">
<div <div
class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden"> 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)" <a href="javascript:void(0)"
@@ -36,17 +32,14 @@
</div> </div>
{% endif %}
<form method="post" enctype="multipart/form-data" <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]"> <div class="mt-5 flex items-center gap-3">
<p class="mb-[7px]"> <b>Hình thức</b> </p> <b class="block">Hình thức</b>
<select class="select w-[120px]">
<select class="w-[300px_!important] select select-bordered h-[40px] min-h-[40px]">
<option value="" selected> Quà tặng </option> <option value="" selected> Quà tặng </option>
<option value=""> Dịch vụ </option> <option value=""> Dịch vụ </option>
<option value=""> Sản phẩm </option> <option value=""> Sản phẩm </option>
@@ -54,73 +47,61 @@
</select> </select>
</div> </div>
<div class="mb-[18px]"> <div class="mt-5">
<p class="inline-block m-[0_17px_7px_0]"> <b>Ảnh đại diện (nếu có)</b> </p> <b class="block mb-2">Ảnh đại diện (nếu có)</b>
<input type="file" name="file_thumbnail" /> <div id="avatar-promotion" class="mt-3"></div>
<div>
<img src="https://via.placeholder.com/400x300" class="block m-[10px_0_0] max-h-[100px]" />
</div>
</div> </div>
<div class="mb-[18px]"> <div class="mt-5">
<p class="mb-[7px]"> <b>Đặt tiêu đề khuyến mại</b> </p> <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" />
<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> </div>
<div class="flex flex-wrap justify-between"> <div class="grid grid-cols-2 gap-3 mt-5">
<div class="mb-[18px] w-[49%]"> <div class="">
<p class="mb-[7px]"> <b>Giá trị bằng</b> (VNĐ) </p> <p class="mb-[7px]"> <b>Giá trị bằng</b> (VNĐ) </p>
<input type="text" value="0" <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)]" /> 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="">
<div class="mb-[18px] w-[49%]">
<p class="mb-[7px]"> <b>Số lượng</b> (Để = -1 nếu không hạn chế số lượng)</p> <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" <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)]" /> 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> </div>
<div class="mb-[18px]"> <div class="mt-5">
<p class="mb-[7px]"> <b>Mô tả</b> </p> <b class="block">Mô tả</b>
<textarea <textarea class="w-full textarea textarea-bordered rounded-sm shadow mt-3"></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>
</div> </div>
<div class="mb-[18px] flex flex-wrap"> <div class="grid grid-cols-4 gap-3 mt-5">
<p class="mr-[45px]"> <b>Thời gian hiệu lực</b> </p> <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]"> <label class="cursor-pointer flex items-center gap-2">
<input type="radio" name="info[time_valid]" value="0" class="radio checked:bg-blue-500" <input type="radio" name="info[time_valid]" value="0" class="radio radio-active"
checked="checked" /> 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>
<label class="cursor-pointer flex items-center mb-[10px]"> <div class="mt-3 grid grid-cols-2 gap-3">
<input type="radio" name="info[time_valid]" value="1" class="radio checked:bg-blue-500" /> <div class="grid grid-cols-2 gap-3">
<span class="label-text ml-[10px]">Thời gian giới hạn</span> <p> Bắt đầu </p>
</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>
<input type="date" name="from_time_date" value="" placeholder="Từ ngày" <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>
<div class="flex items-center gap-3">
<p class="mr-[10px]"> Giờ </p> <p> Giờ </p>
<select name='info[from_time_minute]' id='from_time_minute' <select name='info[from_time_minute]' id='from_time_minute'
class="select select-bordered w-[100px] h-[38px] min-h-[38px] rounded-[4px]"> class="select select-bordered w-[100px] rounded-sm">
<option value="00:00">00:00</option> <option value="00:00">00:00</option>
<option value="00:30">00:30</option> <option value="00:30">00:30</option>
<option value="01:00">01:00</option> <option value="01:00">01:00</option>
@@ -171,20 +152,17 @@
<option value="23:30">23:30</option> <option value="23:30">23:30</option>
</select> </select>
</div> </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> </div>
<div class="mt-3 grid grid-cols-2 gap-3">
<p class="mr-[10px]"> Giờ </p> <div class="grid grid-cols-2 gap-3">
<p> Kết thúc </p>
<select name='info[to_time_minute]' id='from_time_minute' <input type="date" name="from_time_date" value="" placeholder="Từ ngày"
class="select select-bordered w-[100px] h-[38px] min-h-[38px] rounded-[4px]"> 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:00">00:00</option>
<option value="00:30">00:30</option> <option value="00:30">00:30</option>
<option value="01:00">01:00</option> <option value="01:00">01:00</option>
@@ -237,13 +215,13 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="mb-[18px]"> <div class="mt-5">
<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 <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
sản phẩm) </p> tiết hoặc link
sản phẩm) </div>
<input type="text" value="" <input type="text" value="" class="w-full input input-md input-bordered rounded-sm shadow mt-3" />
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]"> <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]" /> class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
</form> </form>
</div> </div>
</div> </div>

View File

@@ -377,10 +377,10 @@
<div class="flex items-center justify-between gap-3 relative"> <div class="flex items-center justify-between gap-3 relative">
<ul class="menu menu-horizontal"> <ul class="menu menu-horizontal">
<li> <li>
<div class="flex items-center gap-3"> <a href="/" class="flex items-center gap-3">
<i data-lucide="house" class="tw-sla menu-icon-color"></i> <i data-lucide="house" class="size-4.5 menu-icon-color"></i>
<a href="/"><span class="grow">Home</span></a> <span class="grow">Home</span>
</div> </a>
</li> </li>
{% for _menu_item in global.main_menu %} {% for _menu_item in global.main_menu %}
{% assign _menu_children = _menu_item.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 -%}"> class="{%- for _item in _menu_children -%}{%- if _item.url == global.url -%} active {%- endif -%} {%- endfor -%}">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
{% if _menu_item.icon_class != '' %} {% 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 %} {% endif %}
<span class="grow">{{ _menu_item.name }}</span> <span class="grow">{{ _menu_item.name }}</span>
</div> </div>

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 -->