update
This commit is contained in:
@@ -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,10 +164,9 @@
|
|||||||
.menu-horizontal > li > details > ul:before {
|
.menu-horizontal > li > details > ul:before {
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================
|
/* ==========================
|
||||||
SUBMENU HOVER ITEMS
|
SUBMENU HOVER ITEMS
|
||||||
========================== */
|
========================== */
|
||||||
.menu-horizontal li ul li:hover {
|
.menu-horizontal li ul li:hover {
|
||||||
background: var(--color-hura);
|
background: var(--color-hura);
|
||||||
}
|
}
|
||||||
@@ -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:
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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");
|
||||||
|
|||||||
@@ -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 %}
|
||||||
|
|||||||
21
template/javascript/marketing_form.html
Normal file
21
template/javascript/marketing_form.html
Normal 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>
|
||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 -->
|
|
||||||
Reference in New Issue
Block a user