admin/bij
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit BIJ CI4

Browse Source
This commit is contained in:
BIJ Dev
2026-04-21 05:49:17 +07:00
commit fa38ac6b24
13170 changed files with 866701 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
public/assets/tailadmin/partials/alert/alert-error.html Normal file
View File

@@ -0,0 +1,76 @@
<div
class="rounded-xl border border-error-500 bg-error-50 p-4 dark:border-error-500/30 dark:bg-error-500/15"
>
<div class="flex items-start gap-3">
<div class="-mt-0.5 text-error-500">
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.3499 12.0004C20.3499 16.612 16.6115 20.3504 11.9999 20.3504C7.38832 20.3504 3.6499 16.612 3.6499 12.0004C3.6499 7.38881 7.38833 3.65039 11.9999 3.65039C16.6115 3.65039 20.3499 7.38881 20.3499 12.0004ZM11.9999 22.1504C17.6056 22.1504 22.1499 17.6061 22.1499 12.0004C22.1499 6.3947 17.6056 1.85039 11.9999 1.85039C6.39421 1.85039 1.8499 6.3947 1.8499 12.0004C1.8499 17.6061 6.39421 22.1504 11.9999 22.1504ZM13.0008 16.4753C13.0008 15.923 12.5531 15.4753 12.0008 15.4753L11.9998 15.4753C11.4475 15.4753 10.9998 15.923 10.9998 16.4753C10.9998 17.0276 11.4475 17.4753 11.9998 17.4753L12.0008 17.4753C12.5531 17.4753 13.0008 17.0276 13.0008 16.4753ZM11.9998 6.62898C12.414 6.62898 12.7498 6.96476 12.7498 7.37898L12.7498 13.0555C12.7498 13.4697 12.414 13.8055 11.9998 13.8055C11.5856 13.8055 11.2498 13.4697 11.2498 13.0555L11.2498 7.37898C11.2498 6.96476 11.5856 6.62898 11.9998 6.62898Z"
fill="#F04438"
/>
</svg>
</div>
<div>
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Error Message
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
<a
href="#"
class="mt-3 inline-block text-sm font-medium text-gray-500 underline dark:text-gray-400"
>
Learn more
</a>
</div>
</div>
</div>
<div
class="rounded-xl border border-error-500 bg-error-50 p-4 dark:border-error-500/30 dark:bg-error-500/15"
>
<div class="flex items-start gap-3">
<div class="-mt-0.5 text-error-500">
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.3499 12.0004C20.3499 16.612 16.6115 20.3504 11.9999 20.3504C7.38832 20.3504 3.6499 16.612 3.6499 12.0004C3.6499 7.38881 7.38833 3.65039 11.9999 3.65039C16.6115 3.65039 20.3499 7.38881 20.3499 12.0004ZM11.9999 22.1504C17.6056 22.1504 22.1499 17.6061 22.1499 12.0004C22.1499 6.3947 17.6056 1.85039 11.9999 1.85039C6.39421 1.85039 1.8499 6.3947 1.8499 12.0004C1.8499 17.6061 6.39421 22.1504 11.9999 22.1504ZM13.0008 16.4753C13.0008 15.923 12.5531 15.4753 12.0008 15.4753L11.9998 15.4753C11.4475 15.4753 10.9998 15.923 10.9998 16.4753C10.9998 17.0276 11.4475 17.4753 11.9998 17.4753L12.0008 17.4753C12.5531 17.4753 13.0008 17.0276 13.0008 16.4753ZM11.9998 6.62898C12.414 6.62898 12.7498 6.96476 12.7498 7.37898L12.7498 13.0555C12.7498 13.4697 12.414 13.8055 11.9998 13.8055C11.5856 13.8055 11.2498 13.4697 11.2498 13.0555L11.2498 7.37898C11.2498 6.96476 11.5856 6.62898 11.9998 6.62898Z"
fill="#F04438"
/>
</svg>
</div>
<div>
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Error Message
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
</div>
</div>
</div>

76
public/assets/tailadmin/partials/alert/alert-info.html Normal file
View File

@@ -0,0 +1,76 @@
<div
class="rounded-xl border border-blue-light-500 bg-blue-light-50 p-4 dark:border-blue-light-500/30 dark:bg-blue-light-500/15"
>
<div class="flex items-start gap-3">
<div class="-mt-0.5 text-blue-light-500">
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
fill=""
/>
</svg>
</div>
<div>
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Success Message
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
<a
href="#"
class="mt-3 inline-block text-sm font-medium text-gray-500 underline dark:text-gray-400"
>
Learn more
</a>
</div>
</div>
</div>
<div
class="rounded-xl border border-blue-light-500 bg-blue-light-50 p-4 dark:border-blue-light-500/30 dark:bg-blue-light-500/15"
>
<div class="flex items-start gap-3">
<div class="-mt-0.5 text-blue-light-500">
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
fill=""
/>
</svg>
</div>
<div>
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Success Message
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
</div>
</div>
</div>

76
public/assets/tailadmin/partials/alert/alert-success.html Normal file
View File

@@ -0,0 +1,76 @@
<div
class="rounded-xl border border-success-500 bg-success-50 p-4 dark:border-success-500/30 dark:bg-success-500/15"
>
<div class="flex items-start gap-3">
<div class="-mt-0.5 text-success-500">
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z"
fill=""
/>
</svg>
</div>
<div>
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Success Message
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
<a
href="#"
class="mt-3 inline-block text-sm font-medium text-gray-500 underline dark:text-gray-400"
>
Learn more
</a>
</div>
</div>
</div>
<div
class="rounded-xl border border-success-500 bg-success-50 p-4 dark:border-success-500/30 dark:bg-success-500/15"
>
<div class="flex items-start gap-3">
<div class="-mt-0.5 text-success-500">
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z"
fill=""
/>
</svg>
</div>
<div>
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Success Message
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
</div>
</div>
</div>

76
public/assets/tailadmin/partials/alert/alert-warning.html Normal file
View File

@@ -0,0 +1,76 @@
<div
class="rounded-xl border border-warning-500 bg-warning-50 p-4 dark:border-warning-500/30 dark:bg-warning-500/15"
>
<div class="flex items-start gap-3">
<div class="-mt-0.5 text-warning-500 dark:text-orange-400">
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z"
fill=""
/>
</svg>
</div>
<div>
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Warning Message
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
<a
href="#"
class="mt-3 inline-block text-sm font-medium text-gray-500 underline dark:text-gray-400"
>
Learn more
</a>
</div>
</div>
</div>
<div
class="rounded-xl border border-warning-500 bg-warning-50 p-4 dark:border-warning-500/30 dark:bg-warning-500/15"
>
<div class="flex items-start gap-3">
<div class="-mt-0.5 text-warning-500 dark:text-orange-400">
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z"
fill=""
/>
</svg>
</div>
<div>
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Warning Message
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
</div>
</div>
</div>

49
public/assets/tailadmin/partials/avatar/avatar-01.html Normal file
View File

@@ -0,0 +1,49 @@
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
<div class="relative h-6 w-full max-w-6 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
</div>
<div class="relative h-8 w-full max-w-8 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
</div>
<div class="relative h-10 w-full max-w-10 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
</div>
<div class="relative h-12 w-full max-w-12 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
</div>
<div class="relative h-14 w-full max-w-14 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
</div>
<div class="relative h-16 w-full max-w-16 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
</div>
</div>

73
public/assets/tailadmin/partials/avatar/avatar-02.html Normal file
View File

@@ -0,0 +1,73 @@
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
<div class="relative h-6 w-full max-w-6 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-1.5 w-full max-w-1.5 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-8 w-full max-w-8 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-2 w-full max-w-2 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-10 w-full max-w-10 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-12 w-full max-w-12 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-3 w-full max-w-3 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-14 w-full max-w-14 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-3.5 w-full max-w-3.5 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-16 w-full max-w-16 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-4 w-full max-w-4 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"
></span>
</div>
</div>

73
public/assets/tailadmin/partials/avatar/avatar-03.html Normal file
View File

@@ -0,0 +1,73 @@
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
<div class="relative h-6 w-full max-w-6 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-1.5 w-full max-w-1.5 rounded-full border-[1.5px] border-white bg-error-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-8 w-full max-w-8 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-2 w-full max-w-2 rounded-full border-[1.5px] border-white bg-error-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-10 w-full max-w-10 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-error-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-12 w-full max-w-12 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-3 w-full max-w-3 rounded-full border-[1.5px] border-white bg-error-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-14 w-full max-w-14 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-3.5 w-full max-w-3.5 rounded-full border-[1.5px] border-white bg-error-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-16 w-full max-w-16 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-4 w-full max-w-4 rounded-full border-[1.5px] border-white bg-error-500 dark:border-gray-900"
></span>
</div>
</div>

73
public/assets/tailadmin/partials/avatar/avatar-04.html Normal file
View File

@@ -0,0 +1,73 @@
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
<div class="relative h-6 w-full max-w-6 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-1.5 w-full max-w-1.5 rounded-full border-[1.5px] border-white bg-warning-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-8 w-full max-w-8 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-2 w-full max-w-2 rounded-full border-[1.5px] border-white bg-warning-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-10 w-full max-w-10 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-warning-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-12 w-full max-w-12 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-3 w-full max-w-3 rounded-full border-[1.5px] border-white bg-warning-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-14 w-full max-w-14 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-3.5 w-full max-w-3.5 rounded-full border-[1.5px] border-white bg-warning-500 dark:border-gray-900"
></span>
</div>
<div class="relative h-16 w-full max-w-16 rounded-full">
<img
src="./images/user/user-01.jpg"
alt="user"
class="overflow-hidden rounded-full"
/>
<span
class="absolute bottom-0 right-0 h-4 w-full max-w-4 rounded-full border-[1.5px] border-white bg-warning-500 dark:border-gray-900"
></span>
</div>
</div>

50
public/assets/tailadmin/partials/badge/badge-01.html Normal file
View File

@@ -0,0 +1,50 @@
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
<!-- Primary Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-brand-50 px-2.5 py-0.5 text-sm font-medium text-brand-500 dark:bg-brand-500/15 dark:text-brand-400"
>
Primary
</span>
<!-- Success Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-success-50 px-2.5 py-0.5 text-sm font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500"
>
Success
</span>
<!-- Error Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-error-50 px-2.5 py-0.5 text-sm font-medium text-error-600 dark:bg-error-500/15 dark:text-error-500"
>
Error
</span>
<!-- Warning Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-warning-50 px-2.5 py-0.5 text-sm font-medium text-warning-600 dark:bg-warning-500/15 dark:text-orange-400"
>
Warning
</span>
<!-- Info Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-blue-light-50 px-2.5 py-0.5 text-sm font-medium text-blue-light-500 dark:bg-blue-light-500/15 dark:text-blue-light-500"
>
Info
</span>
<!-- Light Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-100 px-2.5 py-0.5 text-sm font-medium text-gray-700 dark:bg-white/5 dark:text-white/80"
>
Light
</span>
<!-- Dark Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-500 px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white"
>
Dark
</span>
</div>

50
public/assets/tailadmin/partials/badge/badge-02.html Normal file
View File

@@ -0,0 +1,50 @@
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
<!-- Primary Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-brand-500 px-2.5 py-0.5 text-sm font-medium text-white"
>
Primary
</span>
<!-- Success Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-success-500 px-2.5 py-0.5 text-sm font-medium text-white"
>
Success
</span>
<!-- Error Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-error-500 px-2.5 py-0.5 text-sm font-medium text-white"
>
Error
</span>
<!-- Warning Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-warning-500 px-2.5 py-0.5 text-sm font-medium text-white"
>
Warning
</span>
<!-- Info Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-blue-light-500 px-2.5 py-0.5 text-sm font-medium text-white"
>
Info
</span>
<!-- Light Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-400 px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80"
>
Light
</span>
<!-- Dark Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-800 px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/15 dark:text-white"
>
Dark
</span>
</div>

161
public/assets/tailadmin/partials/badge/badge-03.html Normal file
View File

@@ -0,0 +1,161 @@
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
<!-- Primary Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-brand-50 py-0.5 pl-2 pr-2.5 text-sm font-medium text-brand-500 dark:bg-brand-500/15 dark:text-brand-400"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Primary
</span>
<!-- Success Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-success-50 py-0.5 pl-2 pr-2.5 text-sm font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Success
</span>
<!-- Error Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-error-50 py-0.5 pl-2 pr-2.5 text-sm font-medium text-error-600 dark:bg-error-500/15 dark:text-error-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Error
</span>
<!-- Warning Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-warning-50 py-0.5 pl-2 pr-2.5 text-sm font-medium text-warning-600 dark:bg-warning-500/15 dark:text-orange-400"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Warning
</span>
<!-- Info Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-blue-light-50 py-0.5 pl-2 pr-2.5 text-sm font-medium text-blue-light-500 dark:bg-blue-light-500/15 dark:text-blue-light-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Info
</span>
<!-- Light Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-100 py-0.5 pl-2 pr-2.5 text-sm font-medium text-gray-700 dark:bg-white/5 dark:text-white/80"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Light
</span>
<!-- Dark Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-500 py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Dark
</span>
</div>

162
public/assets/tailadmin/partials/badge/badge-04.html Normal file
View File

@@ -0,0 +1,162 @@
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
<!-- Primary Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-brand-500 py-0.5 pl-2 pr-2.5 text-sm font-medium text-white"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Primary
</span>
<!-- Success Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-success-500 py-0.5 pl-2 pr-2.5 text-sm font-medium text-white"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Success
</span>
<!-- Error Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-error-500 py-0.5 pl-2 pr-2.5 text-sm font-medium text-white"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Error
</span>
<!-- Warning Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-warning-500 py-0.5 pl-2 pr-2.5 text-sm font-medium text-white"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Warning
</span>
<!-- Info Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-blue-light-500 py-0.5 pl-2 pr-2.5 text-sm font-medium text-white"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Info
</span>
<!-- Light Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-400 py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Light
</span>
<!-- Dark Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-800 py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/15 dark:text-white"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
Dark
</span>
</div>

162
public/assets/tailadmin/partials/badge/badge-05.html Normal file
View File

@@ -0,0 +1,162 @@
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
<!-- Primary Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-brand-50 py-0.5 pl-2.5 pr-2 text-sm font-medium text-brand-500 dark:bg-brand-500/15 dark:text-brand-400"
>
Primary
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Success Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-success-50 py-0.5 pl-2.5 pr-2 text-sm font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500"
>
Success
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Error Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-error-50 py-0.5 pl-2.5 pr-2 text-sm font-medium text-error-600 dark:bg-error-500/15 dark:text-error-500"
>
Error
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Warning Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-warning-50 py-0.5 pl-2.5 pr-2 text-sm font-medium text-warning-600 dark:bg-warning-500/15 dark:text-orange-400"
>
Warning
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Info Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-blue-light-50 py-0.5 pl-2.5 pr-2 text-sm font-medium text-blue-light-500 dark:bg-blue-light-500/15 dark:text-blue-light-500"
>
Info
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Light Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-100 py-0.5 pl-2.5 pr-2 text-sm font-medium text-gray-700 dark:bg-white/5 dark:text-white/80"
>
Light
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Dark Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-500 py-0.5 pl-2.5 pr-2 text-sm font-medium text-white dark:bg-white/5 dark:text-white"
>
Dark
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
</div>

162
public/assets/tailadmin/partials/badge/badge-06.html Normal file
View File

@@ -0,0 +1,162 @@
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
<!-- Primary Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-brand-500 py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
>
Primary
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Success Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-success-500 py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
>
Success
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Error Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-error-500 py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
>
Error
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Warning Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-warning-500 py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
>
Warning
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Info Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-blue-light-500 py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
>
Info
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Light Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-400 py-0.5 pl-2.5 pr-2 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80"
>
Light
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
<!-- Dark Badge-->
<span
class="inline-flex items-center justify-center gap-1 rounded-full bg-gray-800 py-0.5 pl-2.5 pr-2 text-sm font-medium text-white dark:bg-white/15 dark:text-white"
>
Dark
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
fill=""
/>
</svg>
</span>
</div>

39
public/assets/tailadmin/partials/breadcrumb.html Normal file
View File

@@ -0,0 +1,39 @@
<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
<h2
class="text-xl font-semibold text-gray-800 dark:text-white/90"
x-text="pageName"
></h2>
<nav>
<ol class="flex items-center gap-1.5">
<li>
<a
class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
href="index.html"
>
Home
<svg
class="stroke-current"
width="17"
height="16"
viewBox="0 0 17 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
stroke=""
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
</li>
<li
class="text-sm text-gray-800 dark:text-white/90"
x-text="pageName"
></li>
</ol>
</nav>
</div>

13
public/assets/tailadmin/partials/buttons/button-01.html Normal file
View File

@@ -0,0 +1,13 @@
<div class="flex items-center gap-5">
<button
class="inline-flex items-center gap-2 px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
>
Button Text
</button>
<button
class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-5 py-3.5 text-sm font-medium text-white shadow-theme-xs transition hover:bg-brand-600"
>
Button Text
</button>
</div>

44
public/assets/tailadmin/partials/buttons/button-02.html Normal file
View File

@@ -0,0 +1,44 @@
<div class="flex items-center gap-5">
<button
class="inline-flex items-center gap-2 px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
>
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.77692 3.24224C9.91768 3.17186 10.0834 3.17186 10.2241 3.24224L15.3713 5.81573L10.3359 8.33331C10.1248 8.43888 9.87626 8.43888 9.66512 8.33331L4.6298 5.81573L9.77692 3.24224ZM3.70264 7.0292V13.4124C3.70264 13.6018 3.80964 13.775 3.97903 13.8597L9.25016 16.4952L9.25016 9.7837C9.16327 9.75296 9.07782 9.71671 8.99432 9.67496L3.70264 7.0292ZM10.7502 16.4955V9.78396C10.8373 9.75316 10.923 9.71683 11.0067 9.67496L16.2984 7.0292V13.4124C16.2984 13.6018 16.1914 13.775 16.022 13.8597L10.7502 16.4955ZM9.41463 17.4831L9.10612 18.1002C9.66916 18.3817 10.3319 18.3817 10.8949 18.1002L16.6928 15.2013C17.3704 14.8625 17.7984 14.17 17.7984 13.4124V6.58831C17.7984 5.83076 17.3704 5.13823 16.6928 4.79945L10.8949 1.90059C10.3319 1.61908 9.66916 1.61907 9.10612 1.90059L9.44152 2.57141L9.10612 1.90059L3.30823 4.79945C2.63065 5.13823 2.20264 5.83076 2.20264 6.58831V13.4124C2.20264 14.17 2.63065 14.8625 3.30823 15.2013L9.10612 18.1002L9.41463 17.4831Z"
fill=""
/>
</svg>
Button Text
</button>
<button
class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-5 py-3.5 text-sm font-medium text-white shadow-theme-xs transition hover:bg-brand-600"
>
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.77692 3.24224C9.91768 3.17186 10.0834 3.17186 10.2241 3.24224L15.3713 5.81573L10.3359 8.33331C10.1248 8.43888 9.87626 8.43888 9.66512 8.33331L4.6298 5.81573L9.77692 3.24224ZM3.70264 7.0292V13.4124C3.70264 13.6018 3.80964 13.775 3.97903 13.8597L9.25016 16.4952L9.25016 9.7837C9.16327 9.75296 9.07782 9.71671 8.99432 9.67496L3.70264 7.0292ZM10.7502 16.4955V9.78396C10.8373 9.75316 10.923 9.71683 11.0067 9.67496L16.2984 7.0292V13.4124C16.2984 13.6018 16.1914 13.775 16.022 13.8597L10.7502 16.4955ZM9.41463 17.4831L9.10612 18.1002C9.66916 18.3817 10.3319 18.3817 10.8949 18.1002L16.6928 15.2013C17.3704 14.8625 17.7984 14.17 17.7984 13.4124V6.58831C17.7984 5.83076 17.3704 5.13823 16.6928 4.79945L10.8949 1.90059C10.3319 1.61908 9.66916 1.61907 9.10612 1.90059L9.44152 2.57141L9.10612 1.90059L3.30823 4.79945C2.63065 5.13823 2.20264 5.83076 2.20264 6.58831V13.4124C2.20264 14.17 2.63065 14.8625 3.30823 15.2013L9.10612 18.1002L9.41463 17.4831Z"
fill=""
/>
</svg>
Button Text
</button>
</div>

44
public/assets/tailadmin/partials/buttons/button-03.html Normal file
View File

@@ -0,0 +1,44 @@
<div class="flex items-center gap-5">
<button
class="inline-flex items-center gap-2 px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
>
Button Text
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.77692 3.24224C9.91768 3.17186 10.0834 3.17186 10.2241 3.24224L15.3713 5.81573L10.3359 8.33331C10.1248 8.43888 9.87626 8.43888 9.66512 8.33331L4.6298 5.81573L9.77692 3.24224ZM3.70264 7.0292V13.4124C3.70264 13.6018 3.80964 13.775 3.97903 13.8597L9.25016 16.4952L9.25016 9.7837C9.16327 9.75296 9.07782 9.71671 8.99432 9.67496L3.70264 7.0292ZM10.7502 16.4955V9.78396C10.8373 9.75316 10.923 9.71683 11.0067 9.67496L16.2984 7.0292V13.4124C16.2984 13.6018 16.1914 13.775 16.022 13.8597L10.7502 16.4955ZM9.41463 17.4831L9.10612 18.1002C9.66916 18.3817 10.3319 18.3817 10.8949 18.1002L16.6928 15.2013C17.3704 14.8625 17.7984 14.17 17.7984 13.4124V6.58831C17.7984 5.83076 17.3704 5.13823 16.6928 4.79945L10.8949 1.90059C10.3319 1.61908 9.66916 1.61907 9.10612 1.90059L9.44152 2.57141L9.10612 1.90059L3.30823 4.79945C2.63065 5.13823 2.20264 5.83076 2.20264 6.58831V13.4124C2.20264 14.17 2.63065 14.8625 3.30823 15.2013L9.10612 18.1002L9.41463 17.4831Z"
fill=""
/>
</svg>
</button>
<button
class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-5 py-3.5 text-sm font-medium text-white shadow-theme-xs transition hover:bg-brand-600"
>
Button Text
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.77692 3.24224C9.91768 3.17186 10.0834 3.17186 10.2241 3.24224L15.3713 5.81573L10.3359 8.33331C10.1248 8.43888 9.87626 8.43888 9.66512 8.33331L4.6298 5.81573L9.77692 3.24224ZM3.70264 7.0292V13.4124C3.70264 13.6018 3.80964 13.775 3.97903 13.8597L9.25016 16.4952L9.25016 9.7837C9.16327 9.75296 9.07782 9.71671 8.99432 9.67496L3.70264 7.0292ZM10.7502 16.4955V9.78396C10.8373 9.75316 10.923 9.71683 11.0067 9.67496L16.2984 7.0292V13.4124C16.2984 13.6018 16.1914 13.775 16.022 13.8597L10.7502 16.4955ZM9.41463 17.4831L9.10612 18.1002C9.66916 18.3817 10.3319 18.3817 10.8949 18.1002L16.6928 15.2013C17.3704 14.8625 17.7984 14.17 17.7984 13.4124V6.58831C17.7984 5.83076 17.3704 5.13823 16.6928 4.79945L10.8949 1.90059C10.3319 1.61908 9.66916 1.61907 9.10612 1.90059L9.44152 2.57141L9.10612 1.90059L3.30823 4.79945C2.63065 5.13823 2.20264 5.83076 2.20264 6.58831V13.4124C2.20264 14.17 2.63065 14.8625 3.30823 15.2013L9.10612 18.1002L9.41463 17.4831Z"
fill=""
/>
</svg>
</button>
</div>

13
public/assets/tailadmin/partials/buttons/button-04.html Normal file
View File

@@ -0,0 +1,13 @@
<div class="flex items-center gap-5">
<button
class="inline-flex items-center gap-2 rounded-lg bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-inset ring-gray-300 transition hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03]"
>
Button Text
</button>
<button
class="inline-flex items-center gap-2 rounded-lg bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-inset ring-gray-300 transition hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03]"
>
Button Text
</button>
</div>

43
public/assets/tailadmin/partials/buttons/button-05.html Normal file
View File

@@ -0,0 +1,43 @@
<div class="flex items-center gap-5">
<button
class="inline-flex items-center gap-2 rounded-lg bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-gray-300 transition hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03]"
>
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.77692 3.24224C9.91768 3.17186 10.0834 3.17186 10.2241 3.24224L15.3713 5.81573L10.3359 8.33331C10.1248 8.43888 9.87626 8.43888 9.66512 8.33331L4.6298 5.81573L9.77692 3.24224ZM3.70264 7.0292V13.4124C3.70264 13.6018 3.80964 13.775 3.97903 13.8597L9.25016 16.4952L9.25016 9.7837C9.16327 9.75296 9.07782 9.71671 8.99432 9.67496L3.70264 7.0292ZM10.7502 16.4955V9.78396C10.8373 9.75316 10.923 9.71683 11.0067 9.67496L16.2984 7.0292V13.4124C16.2984 13.6018 16.1914 13.775 16.022 13.8597L10.7502 16.4955ZM9.41463 17.4831L9.10612 18.1002C9.66916 18.3817 10.3319 18.3817 10.8949 18.1002L16.6928 15.2013C17.3704 14.8625 17.7984 14.17 17.7984 13.4124V6.58831C17.7984 5.83076 17.3704 5.13823 16.6928 4.79945L10.8949 1.90059C10.3319 1.61908 9.66916 1.61907 9.10612 1.90059L9.44152 2.57141L9.10612 1.90059L3.30823 4.79945C2.63065 5.13823 2.20264 5.83076 2.20264 6.58831V13.4124C2.20264 14.17 2.63065 14.8625 3.30823 15.2013L9.10612 18.1002L9.41463 17.4831Z"
fill=""
/>
</svg>
Button Text
</button>
<button
class="inline-flex items-center gap-2 rounded-lg bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-gray-300 transition hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03]"
>
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.77692 3.24224C9.91768 3.17186 10.0834 3.17186 10.2241 3.24224L15.3713 5.81573L10.3359 8.33331C10.1248 8.43888 9.87626 8.43888 9.66512 8.33331L4.6298 5.81573L9.77692 3.24224ZM3.70264 7.0292V13.4124C3.70264 13.6018 3.80964 13.775 3.97903 13.8597L9.25016 16.4952L9.25016 9.7837C9.16327 9.75296 9.07782 9.71671 8.99432 9.67496L3.70264 7.0292ZM10.7502 16.4955V9.78396C10.8373 9.75316 10.923 9.71683 11.0067 9.67496L16.2984 7.0292V13.4124C16.2984 13.6018 16.1914 13.775 16.022 13.8597L10.7502 16.4955ZM9.41463 17.4831L9.10612 18.1002C9.66916 18.3817 10.3319 18.3817 10.8949 18.1002L16.6928 15.2013C17.3704 14.8625 17.7984 14.17 17.7984 13.4124V6.58831C17.7984 5.83076 17.3704 5.13823 16.6928 4.79945L10.8949 1.90059C10.3319 1.61908 9.66916 1.61907 9.10612 1.90059L9.44152 2.57141L9.10612 1.90059L3.30823 4.79945C2.63065 5.13823 2.20264 5.83076 2.20264 6.58831V13.4124C2.20264 14.17 2.63065 14.8625 3.30823 15.2013L9.10612 18.1002L9.41463 17.4831Z"
fill=""
/>
</svg>
Button Text
</button>
</div>

45
public/assets/tailadmin/partials/buttons/button-06.html Normal file
View File

@@ -0,0 +1,45 @@
<div class="flex items-center gap-5">
<button
class="inline-flex items-center gap-2 rounded-lg bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-gray-300 transition hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03]"
>
Button Text
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.77692 3.24224C9.91768 3.17186 10.0834 3.17186 10.2241 3.24224L15.3713 5.81573L10.3359 8.33331C10.1248 8.43888 9.87626 8.43888 9.66512 8.33331L4.6298 5.81573L9.77692 3.24224ZM3.70264 7.0292V13.4124C3.70264 13.6018 3.80964 13.775 3.97903 13.8597L9.25016 16.4952L9.25016 9.7837C9.16327 9.75296 9.07782 9.71671 8.99432 9.67496L3.70264 7.0292ZM10.7502 16.4955V9.78396C10.8373 9.75316 10.923 9.71683 11.0067 9.67496L16.2984 7.0292V13.4124C16.2984 13.6018 16.1914 13.775 16.022 13.8597L10.7502 16.4955ZM9.41463 17.4831L9.10612 18.1002C9.66916 18.3817 10.3319 18.3817 10.8949 18.1002L16.6928 15.2013C17.3704 14.8625 17.7984 14.17 17.7984 13.4124V6.58831C17.7984 5.83076 17.3704 5.13823 16.6928 4.79945L10.8949 1.90059C10.3319 1.61908 9.66916 1.61907 9.10612 1.90059L9.44152 2.57141L9.10612 1.90059L3.30823 4.79945C2.63065 5.13823 2.20264 5.83076 2.20264 6.58831V13.4124C2.20264 14.17 2.63065 14.8625 3.30823 15.2013L9.10612 18.1002L9.41463 17.4831Z"
fill=""
/>
</svg>
</button>
<button
class="inline-flex items-center gap-2 rounded-lg bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-gray-300 transition hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03]"
>
Button Text
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.77692 3.24224C9.91768 3.17186 10.0834 3.17186 10.2241 3.24224L15.3713 5.81573L10.3359 8.33331C10.1248 8.43888 9.87626 8.43888 9.66512 8.33331L4.6298 5.81573L9.77692 3.24224ZM3.70264 7.0292V13.4124C3.70264 13.6018 3.80964 13.775 3.97903 13.8597L9.25016 16.4952L9.25016 9.7837C9.16327 9.75296 9.07782 9.71671 8.99432 9.67496L3.70264 7.0292ZM10.7502 16.4955V9.78396C10.8373 9.75316 10.923 9.71683 11.0067 9.67496L16.2984 7.0292V13.4124C16.2984 13.6018 16.1914 13.775 16.022 13.8597L10.7502 16.4955ZM9.41463 17.4831L9.10612 18.1002C9.66916 18.3817 10.3319 18.3817 10.8949 18.1002L16.6928 15.2013C17.3704 14.8625 17.7984 14.17 17.7984 13.4124V6.58831C17.7984 5.83076 17.3704 5.13823 16.6928 4.79945L10.8949 1.90059C10.3319 1.61908 9.66916 1.61907 9.10612 1.90059L9.44152 2.57141L9.10612 1.90059L3.30823 4.79945C2.63065 5.13823 2.20264 5.83076 2.20264 6.58831V13.4124C2.20264 14.17 2.63065 14.8625 3.30823 15.2013L9.10612 18.1002L9.41463 17.4831Z"
fill=""
/>
</svg>
</button>
</div>

283
public/assets/tailadmin/partials/calendar-event-modal.html Normal file
View File

@@ -0,0 +1,283 @@
<div
class="fixed inset-0 items-center justify-center hidden p-5 overflow-y-auto modal z-99999"
id="eventModal"
>
<div
class="modal-close-btn fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
></div>
<div
class="modal-dialog modal-dialog-scrollable modal-lg no-scrollbar relative flex w-full max-w-[700px] flex-col overflow-y-auto rounded-3xl bg-white p-6 dark:bg-gray-900 lg:p-11"
>
<!-- close btn -->
<button
class="modal-close-btn transition-color absolute right-5 top-5 z-999 flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:bg-gray-700 dark:bg-white/[0.05] dark:text-gray-400 dark:hover:bg-white/[0.07] dark:hover:text-gray-300 sm:h-11 sm:w-11"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.04289 16.5418C5.65237 16.9323 5.65237 17.5655 6.04289 17.956C6.43342 18.3465 7.06658 18.3465 7.45711 17.956L11.9987 13.4144L16.5408 17.9565C16.9313 18.347 17.5645 18.347 17.955 17.9565C18.3455 17.566 18.3455 16.9328 17.955 16.5423L13.4129 12.0002L17.955 7.45808C18.3455 7.06756 18.3455 6.43439 17.955 6.04387C17.5645 5.65335 16.9313 5.65335 16.5408 6.04387L11.9987 10.586L7.45711 6.04439C7.06658 5.65386 6.43342 5.65386 6.04289 6.04439C5.65237 6.43491 5.65237 7.06808 6.04289 7.4586L10.5845 12.0002L6.04289 16.5418Z"
fill=""
/>
</svg>
</button>
<div
class="flex flex-col px-2 overflow-y-auto modal-content custom-scrollbar"
>
<div class="modal-header">
<h5
class="mb-2 font-semibold text-gray-800 modal-title text-theme-xl dark:text-white/90 lg:text-2xl"
id="eventModalLabel"
>
Add / Edit Event
</h5>
<p class="text-sm text-gray-500 dark:text-gray-400">
Plan your next big moment: schedule or edit an event to stay on track
</p>
</div>
<div class="mt-8 modal-body">
<div>
<div>
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Event Title
</label>
<input
id="event-title"
type="text"
class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
</div>
<div class="mt-6">
<div>
<label
class="block mb-4 text-sm font-medium text-gray-700 dark:text-gray-400"
>
Event Color
</label>
</div>
<div class="flex flex-wrap items-center gap-4 sm:gap-5">
<div class="n-chk">
<div class="form-check form-check-primary form-check-inline">
<label
class="flex items-center text-sm text-gray-700 form-check-label dark:text-gray-400"
for="modalDanger"
>
<span class="relative">
<input
class="sr-only form-check-input"
type="radio"
name="event-level"
value="Danger"
id="modalDanger"
/>
<span
class="flex items-center justify-center w-5 h-5 mr-2 border border-gray-300 rounded-full box dark:border-gray-700"
>
<span
class="w-2 h-2 bg-white rounded-full dark:bg-transparent"
>
</span>
</span>
</span>
Danger
</label>
</div>
</div>
<div class="n-chk">
<div class="form-check form-check-warning form-check-inline">
<label
class="flex items-center text-sm text-gray-700 form-check-label dark:text-gray-400"
for="modalSuccess"
>
<span class="relative">
<input
class="sr-only form-check-input"
type="radio"
name="event-level"
value="Success"
id="modalSuccess"
/>
<span
class="flex items-center justify-center w-5 h-5 mr-2 border border-gray-300 rounded-full box dark:border-gray-700"
>
<span
class="w-2 h-2 bg-white rounded-full dark:bg-transparent"
>
</span>
</span>
</span>
Success
</label>
</div>
</div>
<div class="n-chk">
<div class="form-check form-check-success form-check-inline">
<label
class="flex items-center text-sm text-gray-700 form-check-label dark:text-gray-400"
for="modalPrimary"
>
<span class="relative">
<input
class="sr-only form-check-input"
type="radio"
name="event-level"
value="Primary"
id="modalPrimary"
/>
<span
class="flex items-center justify-center w-5 h-5 mr-2 border border-gray-300 rounded-full box dark:border-gray-700"
>
<span
class="w-2 h-2 bg-white rounded-full dark:bg-transparent"
>
</span>
</span>
</span>
Primary
</label>
</div>
</div>
<div class="n-chk">
<div class="form-check form-check-danger form-check-inline">
<label
class="flex items-center text-sm text-gray-700 form-check-label dark:text-gray-400"
for="modalWarning"
>
<span class="relative">
<input
class="sr-only form-check-input"
type="radio"
name="event-level"
value="Warning"
id="modalWarning"
/>
<span
class="flex items-center justify-center w-5 h-5 mr-2 border border-gray-300 rounded-full box dark:border-gray-700"
>
<span
class="w-2 h-2 bg-white rounded-full dark:bg-transparent"
>
</span>
</span>
</span>
Warning
</label>
</div>
</div>
</div>
</div>
<div class="mt-6">
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Enter Start Date
</label>
<div class="relative">
<input
id="event-start-date"
type="date"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pl-4 pr-11 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
onclick="this.showPicker()"
/>
<span class="absolute right-3.5 top-1/2 -translate-y-1/2">
<svg
class="fill-gray-700 dark:fill-gray-400"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.33317 0.0830078C4.74738 0.0830078 5.08317 0.418794 5.08317 0.833008V1.24967H8.9165V0.833008C8.9165 0.418794 9.25229 0.0830078 9.6665 0.0830078C10.0807 0.0830078 10.4165 0.418794 10.4165 0.833008V1.24967L11.3332 1.24967C12.2997 1.24967 13.0832 2.03318 13.0832 2.99967V4.99967V11.6663C13.0832 12.6328 12.2997 13.4163 11.3332 13.4163H2.6665C1.70001 13.4163 0.916504 12.6328 0.916504 11.6663V4.99967V2.99967C0.916504 2.03318 1.70001 1.24967 2.6665 1.24967L3.58317 1.24967V0.833008C3.58317 0.418794 3.91896 0.0830078 4.33317 0.0830078ZM4.33317 2.74967H2.6665C2.52843 2.74967 2.4165 2.8616 2.4165 2.99967V4.24967H11.5832V2.99967C11.5832 2.8616 11.4712 2.74967 11.3332 2.74967H9.6665H4.33317ZM11.5832 5.74967H2.4165V11.6663C2.4165 11.8044 2.52843 11.9163 2.6665 11.9163H11.3332C11.4712 11.9163 11.5832 11.8044 11.5832 11.6663V5.74967Z"
fill=""
/>
</svg>
</span>
</div>
</div>
</div>
<div class="mt-6">
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Enter End Date
</label>
<div class="relative">
<input
id="event-end-date"
type="date"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pl-4 pr-11 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
onclick="this.showPicker()"
/>
<span class="absolute right-3.5 top-1/2 -translate-y-1/2">
<svg
class="fill-gray-700 dark:fill-gray-400"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.33317 0.0830078C4.74738 0.0830078 5.08317 0.418794 5.08317 0.833008V1.24967H8.9165V0.833008C8.9165 0.418794 9.25229 0.0830078 9.6665 0.0830078C10.0807 0.0830078 10.4165 0.418794 10.4165 0.833008V1.24967L11.3332 1.24967C12.2997 1.24967 13.0832 2.03318 13.0832 2.99967V4.99967V11.6663C13.0832 12.6328 12.2997 13.4163 11.3332 13.4163H2.6665C1.70001 13.4163 0.916504 12.6328 0.916504 11.6663V4.99967V2.99967C0.916504 2.03318 1.70001 1.24967 2.6665 1.24967L3.58317 1.24967V0.833008C3.58317 0.418794 3.91896 0.0830078 4.33317 0.0830078ZM4.33317 2.74967H2.6665C2.52843 2.74967 2.4165 2.8616 2.4165 2.99967V4.24967H11.5832V2.99967C11.5832 2.8616 11.4712 2.74967 11.3332 2.74967H9.6665H4.33317ZM11.5832 5.74967H2.4165V11.6663C2.4165 11.8044 2.52843 11.9163 2.6665 11.9163H11.3332C11.4712 11.9163 11.5832 11.8044 11.5832 11.6663V5.74967Z"
fill=""
/>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-3 mt-6 modal-footer sm:justify-end">
<button
type="button"
class="btn modal-close-btn bg-danger-subtle text-danger flex w-full justify-center rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] sm:w-auto"
data-bs-dismiss="modal"
>
Close
</button>
<button
type="button"
class="btn btn-success btn-update-event flex w-full justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 sm:w-auto"
data-fc-event-public-id=""
>
Update changes
</button>
<button
type="button"
class="btn btn-primary btn-add-event flex w-full justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 sm:w-auto"
>
Add Event
</button>
</div>
</div>
</div>
</div>
<!-- <div
class="modal fixed left-0 top-0 z-99999 hidden min-h-screen w-full justify-center overflow-y-auto overflow-x-hidden bg-gray-400/50 px-4 py-4 backdrop-blur-[32px] lg:py-[120px]"
id="eventModal"
>
</div> -->

57
public/assets/tailadmin/partials/chart/chart-01.html Normal file
View File

@@ -0,0 +1,57 @@
<div
class="overflow-hidden rounded-2xl border border-gray-200 bg-white px-5 pt-5 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6 sm:pt-6"
>
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
Monthly Sales
</h3>
<div x-data="{openDropDown: false}" class="relative h-fit">
<button
@click="openDropDown = !openDropDown"
:class="openDropDown ? 'text-gray-700 dark:text-white' : 'text-gray-400 hover:text-gray-700 dark:hover:text-white'"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.2441 6C10.2441 5.0335 11.0276 4.25 11.9941 4.25H12.0041C12.9706 4.25 13.7541 5.0335 13.7541 6C13.7541 6.9665 12.9706 7.75 12.0041 7.75H11.9941C11.0276 7.75 10.2441 6.9665 10.2441 6ZM10.2441 18C10.2441 17.0335 11.0276 16.25 11.9941 16.25H12.0041C12.9706 16.25 13.7541 17.0335 13.7541 18C13.7541 18.9665 12.9706 19.75 12.0041 19.75H11.9941C11.0276 19.75 10.2441 18.9665 10.2441 18ZM11.9941 10.25C11.0276 10.25 10.2441 11.0335 10.2441 12C10.2441 12.9665 11.0276 13.75 11.9941 13.75H12.0041C12.9706 13.75 13.7541 12.9665 13.7541 12C13.7541 11.0335 12.9706 10.25 12.0041 10.25H11.9941Z"
fill=""
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="absolute right-0 z-40 w-40 p-2 space-y-1 bg-white border border-gray-200 top-full rounded-2xl shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
>
<button
class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
View More
</button>
<button
class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
Delete
</button>
</div>
</div>
</div>
<div class="max-w-full overflow-x-auto custom-scrollbar">
<div class="-ml-5 min-w-[650px] pl-2 xl:min-w-full">
<div
id="chartOne"
class="-ml-5 h-full min-w-[650px] pl-2 xl:min-w-full"
></div>
</div>
</div>
</div>

157
public/assets/tailadmin/partials/chart/chart-02.html Normal file
View File

@@ -0,0 +1,157 @@
<div
class="rounded-2xl border border-gray-200 bg-gray-100 dark:border-gray-800 dark:bg-white/[0.03]"
>
<div
class="shadow-default rounded-2xl bg-white px-5 pb-11 pt-5 dark:bg-gray-900 sm:px-6 sm:pt-6"
>
<div class="flex justify-between">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
Monthly Target
</h3>
<p class="mt-1 text-theme-sm text-gray-500 dark:text-gray-400">
Target you’ve set for each month
</p>
</div>
<div x-data="{openDropDown: false}" class="relative h-fit">
<button
@click="openDropDown = !openDropDown"
:class="openDropDown ? 'text-gray-700 dark:text-white' : 'text-gray-400 hover:text-gray-700 dark:hover:text-white'"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.2441 6C10.2441 5.0335 11.0276 4.25 11.9941 4.25H12.0041C12.9706 4.25 13.7541 5.0335 13.7541 6C13.7541 6.9665 12.9706 7.75 12.0041 7.75H11.9941C11.0276 7.75 10.2441 6.9665 10.2441 6ZM10.2441 18C10.2441 17.0335 11.0276 16.25 11.9941 16.25H12.0041C12.9706 16.25 13.7541 17.0335 13.7541 18C13.7541 18.9665 12.9706 19.75 12.0041 19.75H11.9941C11.0276 19.75 10.2441 18.9665 10.2441 18ZM11.9941 10.25C11.0276 10.25 10.2441 11.0335 10.2441 12C10.2441 12.9665 11.0276 13.75 11.9941 13.75H12.0041C12.9706 13.75 13.7541 12.9665 13.7541 12C13.7541 11.0335 12.9706 10.25 12.0041 10.25H11.9941Z"
fill=""
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="absolute right-0 top-full z-40 w-40 space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
View More
</button>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
Delete
</button>
</div>
</div>
</div>
<div class="relative max-h-[195px]">
<div id="chartTwo" class="h-full"></div>
<span
class="absolute left-1/2 top-[85%] -translate-x-1/2 -translate-y-[85%] rounded-full bg-success-50 px-3 py-1 text-xs font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500"
>+10%</span
>
</div>
<p
class="mx-auto mt-1.5 w-full max-w-[380px] text-center text-sm text-gray-500 sm:text-base"
>
You earn $3287 today, it's higher than last month. Keep up your good work!
</p>
</div>
<div
class="flex items-center justify-center gap-5 px-6 py-3.5 sm:gap-8 sm:py-5"
>
<div>
<p
class="mb-1 text-center text-theme-xs text-gray-500 dark:text-gray-400 sm:text-sm"
>
Target
</p>
<p
class="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg"
>
$20K
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.26816 13.6632C7.4056 13.8192 7.60686 13.9176 7.8311 13.9176C7.83148 13.9176 7.83187 13.9176 7.83226 13.9176C8.02445 13.9178 8.21671 13.8447 8.36339 13.6981L12.3635 9.70076C12.6565 9.40797 12.6567 8.9331 12.3639 8.6401C12.0711 8.34711 11.5962 8.34694 11.3032 8.63973L8.5811 11.36L8.5811 2.5C8.5811 2.08579 8.24531 1.75 7.8311 1.75C7.41688 1.75 7.0811 2.08579 7.0811 2.5L7.0811 11.3556L4.36354 8.63975C4.07055 8.34695 3.59568 8.3471 3.30288 8.64009C3.01008 8.93307 3.01023 9.40794 3.30321 9.70075L7.26816 13.6632Z"
fill="#D92D20"
/>
</svg>
</p>
</div>
<div class="h-7 w-px bg-gray-200 dark:bg-gray-800"></div>
<div>
<p
class="mb-1 text-center text-theme-xs text-gray-500 dark:text-gray-400 sm:text-sm"
>
Revenue
</p>
<p
class="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg"
>
$20K
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.60141 2.33683C7.73885 2.18084 7.9401 2.08243 8.16435 2.08243C8.16475 2.08243 8.16516 2.08243 8.16556 2.08243C8.35773 2.08219 8.54998 2.15535 8.69664 2.30191L12.6968 6.29924C12.9898 6.59203 12.9899 7.0669 12.6971 7.3599C12.4044 7.6529 11.9295 7.65306 11.6365 7.36027L8.91435 4.64004L8.91435 13.5C8.91435 13.9142 8.57856 14.25 8.16435 14.25C7.75013 14.25 7.41435 13.9142 7.41435 13.5L7.41435 4.64442L4.69679 7.36025C4.4038 7.65305 3.92893 7.6529 3.63613 7.35992C3.34333 7.06693 3.34348 6.59206 3.63646 6.29926L7.60141 2.33683Z"
fill="#039855"
/>
</svg>
</p>
</div>
<div class="h-7 w-px bg-gray-200 dark:bg-gray-800"></div>
<div>
<p
class="mb-1 text-center text-theme-xs text-gray-500 dark:text-gray-400 sm:text-sm"
>
Today
</p>
<p
class="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg"
>
$20K
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.60141 2.33683C7.73885 2.18084 7.9401 2.08243 8.16435 2.08243C8.16475 2.08243 8.16516 2.08243 8.16556 2.08243C8.35773 2.08219 8.54998 2.15535 8.69664 2.30191L12.6968 6.29924C12.9898 6.59203 12.9899 7.0669 12.6971 7.3599C12.4044 7.6529 11.9295 7.65306 11.6365 7.36027L8.91435 4.64004L8.91435 13.5C8.91435 13.9142 8.57856 14.25 8.16435 14.25C7.75013 14.25 7.41435 13.9142 7.41435 13.5L7.41435 4.64442L4.69679 7.36025C4.4038 7.65305 3.92893 7.6529 3.63613 7.35992C3.34333 7.06693 3.34348 6.59206 3.63646 6.29926L7.60141 2.33683Z"
fill="#039855"
/>
</svg>
</p>
</div>
</div>
</div>

74
public/assets/tailadmin/partials/chart/chart-03.html Normal file
View File

@@ -0,0 +1,74 @@
<div
class="rounded-2xl border border-gray-200 bg-white px-5 pb-5 pt-5 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6 sm:pt-6"
>
<div class="flex flex-col gap-5 mb-6 sm:flex-row sm:justify-between">
<div class="w-full">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
Statistics
</h3>
<p class="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">
Target you’ve set for each month
</p>
</div>
<div class="flex items-start w-full gap-3 sm:justify-end">
<div
x-data="{selected: 'overview'}"
class="inline-flex w-fit items-center gap-0.5 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900"
>
<button
@click="selected = 'overview'"
:class="selected === 'overview' ? 'shadow-theme-xs text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'"
class="px-3 py-2 font-medium rounded-md text-theme-sm hover:text-gray-900 dark:hover:text-white"
>
Overview
</button>
<button
@click="selected = 'sales'"
:class="selected === 'sales' ? 'shadow-theme-xs text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'"
class="px-3 py-2 font-medium rounded-md text-theme-sm hover:text-gray-900 dark:hover:text-white"
>
Sales
</button>
<button
@click="selected = 'revenue'"
:class="selected === 'revenue' ? 'shadow-theme-xs text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'"
class="px-3 py-2 font-medium rounded-md text-theme-sm hover:text-gray-900 dark:hover:text-white"
>
Revenue
</button>
</div>
<div class="relative w-fit">
<input
class="datepicker h-10 w-full max-w-11 rounded-lg border border-gray-200 bg-white py-2.5 pl-[34px] pr-4 text-theme-sm font-medium text-gray-700 shadow-theme-xs focus:outline-hidden focus:ring-0 focus-visible:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 xl:max-w-fit xl:pl-11"
placeholder="Select dates"
data-class="flatpickr-right"
readonly="readonly"
/>
<div
class="absolute inset-0 right-auto flex items-center pointer-events-none left-4"
>
<svg
class="fill-gray-700 dark:fill-gray-400"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.66683 1.54199C7.08104 1.54199 7.41683 1.87778 7.41683 2.29199V3.00033H12.5835V2.29199C12.5835 1.87778 12.9193 1.54199 13.3335 1.54199C13.7477 1.54199 14.0835 1.87778 14.0835 2.29199V3.00033L15.4168 3.00033C16.5214 3.00033 17.4168 3.89576 17.4168 5.00033V7.50033V15.8337C17.4168 16.9382 16.5214 17.8337 15.4168 17.8337H4.5835C3.47893 17.8337 2.5835 16.9382 2.5835 15.8337V7.50033V5.00033C2.5835 3.89576 3.47893 3.00033 4.5835 3.00033L5.91683 3.00033V2.29199C5.91683 1.87778 6.25262 1.54199 6.66683 1.54199ZM6.66683 4.50033H4.5835C4.30735 4.50033 4.0835 4.72418 4.0835 5.00033V6.75033H15.9168V5.00033C15.9168 4.72418 15.693 4.50033 15.4168 4.50033H13.3335H6.66683ZM15.9168 8.25033H4.0835V15.8337C4.0835 16.1098 4.30735 16.3337 4.5835 16.3337H15.4168C15.693 16.3337 15.9168 16.1098 15.9168 15.8337V8.25033Z"
fill=""
/>
</svg>
</div>
</div>
</div>
</div>
<div class="max-w-full overflow-x-auto custom-scrollbar">
<div id="chartThree" class="-ml-4 min-w-[700px] pl-2"></div>
</div>
</div>

8
public/assets/tailadmin/partials/common-grid-shape.html Normal file
View File

@@ -0,0 +1,8 @@
<div class="absolute right-0 top-0 -z-1 w-full max-w-[250px] xl:max-w-[450px]">
<img src="./images/shape/grid-01.svg" alt="grid" />
</div>
<div
class="absolute bottom-0 left-0 -z-1 w-full max-w-[250px] rotate-180 xl:max-w-[450px]"
>
<img src="./images/shape/grid-01.svg" alt="grid" />
</div>

81
public/assets/tailadmin/partials/common-social-links.html Normal file
View File

@@ -0,0 +1,81 @@
<p class="mb-6 mt-20 text-center text-base text-gray-500 dark:text-gray-400">
Follow Us On
</p>
<div class="flex items-center justify-center gap-5">
<a
href="#"
class="text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white/90"
>
<svg
class="fill-current"
width="20"
height="21"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.6663 12.1366H13.7497L14.583 8.80322H11.6663V7.13656C11.6663 6.27874 11.6663 5.46989 13.333 5.46989H14.583V2.66997C14.3116 2.63393 13.2855 2.55322 12.2021 2.55322C9.94001 2.55322 8.33301 3.93394 8.33301 6.46965V8.80322H5.83301V12.1366H8.33301V19.2199H11.6663V12.1366Z"
fill=""
/>
</svg>
</a>
<a
href="#"
class="text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white/90"
>
<svg
class="fill-current"
width="20"
height="21"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.171 2.76172H17.9277L11.9052 9.64505L18.9902 19.0117H13.4427L9.09766 13.3309L4.12603 19.0117H1.3677L7.80936 11.6492L1.0127 2.76172H6.70103L10.6285 7.95422L15.171 2.76172ZM14.2035 17.3617H15.731L5.87103 4.32505H4.23186L14.2035 17.3617Z"
fill=""
/>
</svg>
</a>
<a
href="#"
class="text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white/90"
>
<svg
class="fill-current"
width="20"
height="21"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.78357 5.05316C5.78326 5.73176 5.37157 6.34241 4.74262 6.59716C4.11367 6.85193 3.39306 6.69993 2.92059 6.21285C2.44811 5.72576 2.31813 5.00085 2.59192 4.37995C2.86572 3.75905 3.48862 3.36614 4.1669 3.3865C5.0678 3.41354 5.78398 4.15186 5.78357 5.05316ZM5.83357 7.95316H2.50024V18.3865H5.83357V7.95316ZM11.1003 7.95316H7.78357V18.3865H11.0669V12.9115C11.0669 9.86147 15.0419 9.57814 15.0419 12.9115V18.3865H18.3336V11.7781C18.3336 6.6365 12.4503 6.82816 11.0669 9.35314L11.1003 7.95316Z"
fill=""
/>
</svg>
</a>
<a
href="#"
class="text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white/90"
>
<svg
class="fill-current"
width="20"
height="21"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.8572 2.5542C11.7951 2.55575 12.2703 2.56072 12.681 2.57294L12.8427 2.57822C13.0296 2.58487 13.2139 2.5932 13.4362 2.60362C14.3229 2.64459 14.9278 2.78487 15.4591 2.99112C16.0083 3.20292 16.4722 3.48903 16.9354 3.95223C17.3979 4.41542 17.6841 4.8807 17.8966 5.42862C18.1021 5.95917 18.2424 6.56473 18.2841 7.45153C18.294 7.67376 18.302 7.85809 18.3086 8.04496L18.3138 8.2067C18.326 8.61732 18.3316 9.09264 18.3333 10.0305L18.334 10.6518C18.3341 10.7278 18.3341 10.8061 18.3341 10.8869L18.334 11.122L18.3335 11.7434C18.3319 12.6813 18.327 13.1566 18.3147 13.5672L18.3094 13.7289C18.3028 13.9158 18.2945 14.1002 18.2841 14.3223C18.2431 15.2092 18.1021 15.814 17.8966 16.3453C17.6847 16.8946 17.3979 17.3585 16.9354 17.8217C16.4722 18.2842 16.0062 18.5703 15.4591 18.7828C14.9278 18.9883 14.3229 19.1286 13.4362 19.1703C13.2139 19.1802 13.0296 19.1883 12.8427 19.1948L12.681 19.2C12.2703 19.2123 11.7951 19.2178 10.8572 19.2196L10.2358 19.2203C10.1599 19.2203 10.0816 19.2203 10.0007 19.2203H9.76565L9.14424 19.2197C8.2064 19.2182 7.73109 19.2132 7.32046 19.2009L7.15873 19.1957C6.97185 19.189 6.78752 19.1807 6.5653 19.1703C5.67849 19.1293 5.07433 18.9883 4.54239 18.7828C3.99377 18.571 3.52919 18.2842 3.06599 17.8217C2.6028 17.3585 2.31739 16.8925 2.10489 16.3453C1.89864 15.814 1.75905 15.2092 1.71739 14.3223C1.70749 14.1002 1.69941 13.9158 1.69287 13.7289L1.68763 13.5672C1.67544 13.1566 1.66988 12.6813 1.66808 11.7434L1.66797 10.0305C1.66952 9.09264 1.67448 8.61732 1.6867 8.2067L1.69199 8.04496C1.69864 7.85809 1.70697 7.67376 1.71739 7.45153C1.75835 6.56403 1.89864 5.95987 2.10489 5.42862C2.31669 4.88001 2.6028 4.41542 3.06599 3.95223C3.52919 3.48903 3.99447 3.20362 4.54239 2.99112C5.07364 2.78487 5.6778 2.64528 6.5653 2.60362C6.78752 2.59372 6.97185 2.58565 7.15873 2.57911L7.32046 2.57387C7.73109 2.56167 8.2064 2.55611 9.14424 2.55431L10.8572 2.5542ZM10.0007 6.72028C7.6983 6.72028 5.83405 8.58656 5.83405 10.8869C5.83405 13.1893 7.70033 15.0536 10.0007 15.0536C12.3032 15.0536 14.1674 13.1873 14.1674 10.8869C14.1674 8.58453 12.3011 6.72028 10.0007 6.72028ZM10.0007 8.38695C11.3815 8.38695 12.5007 9.50584 12.5007 10.8869C12.5007 12.2677 11.3818 13.3869 10.0007 13.3869C8.61999 13.3869 7.50072 12.2681 7.50072 10.8869C7.50072 9.50617 8.61957 8.38695 10.0007 8.38695ZM14.3757 5.47028C13.8013 5.47028 13.3341 5.93687 13.3341 6.51124C13.3341 7.08562 13.8007 7.55292 14.3757 7.55292C14.9501 7.55292 15.4174 7.08634 15.4174 6.51124C15.4174 5.93687 14.9493 5.46957 14.3757 5.47028Z"
fill=""
/>
</svg>
</a>
</div>

26
public/assets/tailadmin/partials/datepicker.html Normal file
View File

@@ -0,0 +1,26 @@
<div class="relative">
<input
class="datepicker w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-11 pr-4 text-theme-sm font-medium text-gray-700 shadow-theme-xs focus:outline-hidden focus:ring-0 focus-visible:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
placeholder="Select dates"
data-class="flatpickr-right"
/>
<div
class="absolute inset-0 right-auto flex items-center pointer-events-none left-4"
>
<svg
class="fill-gray-700 dark:fill-gray-400"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.66683 1.54199C7.08104 1.54199 7.41683 1.87778 7.41683 2.29199V3.00033H12.5835V2.29199C12.5835 1.87778 12.9193 1.54199 13.3335 1.54199C13.7477 1.54199 14.0835 1.87778 14.0835 2.29199V3.00033L15.4168 3.00033C16.5214 3.00033 17.4168 3.89576 17.4168 5.00033V7.50033V15.8337C17.4168 16.9382 16.5214 17.8337 15.4168 17.8337H4.5835C3.47893 17.8337 2.5835 16.9382 2.5835 15.8337V7.50033V5.00033C2.5835 3.89576 3.47893 3.00033 4.5835 3.00033L5.91683 3.00033V2.29199C5.91683 1.87778 6.25262 1.54199 6.66683 1.54199ZM6.66683 4.50033H4.5835C4.30735 4.50033 4.0835 4.72418 4.0835 5.00033V6.75033H15.9168V5.00033C15.9168 4.72418 15.693 4.50033 15.4168 4.50033H13.3335H6.66683ZM15.9168 8.25033H4.0835V15.8337C4.0835 16.1098 4.30735 16.3337 4.5835 16.3337H15.4168C15.693 16.3337 15.9168 16.1098 15.9168 15.8337V8.25033Z"
fill=""
/>
</svg>
</div>
</div>

13
public/assets/tailadmin/partials/grid-image/image-01.html Normal file
View File

@@ -0,0 +1,13 @@
<div class="relative">
<div id="pane" class="overflow-hidden">
<img
src="./images/grid-image/image-01.png"
alt="Cover"
class="w-full rounded-xl border border-gray-200 dark:border-gray-800"
/>
</div>
<div
id="ghostpane"
class="absolute left-0 top-0 duration-300 ease-in-out"
></div>
</div>

17
public/assets/tailadmin/partials/grid-image/image-02.html Normal file
View File

@@ -0,0 +1,17 @@
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
<div>
<img
src="./images/grid-image/image-02.png"
alt="image grid"
class="rounded-xl border border-gray-200 dark:border-gray-800"
/>
</div>
<div>
<img
src="./images/grid-image/image-03.png"
alt="image grid"
class="rounded-xl border border-gray-200 dark:border-gray-800"
/>
</div>
</div>

25
public/assets/tailadmin/partials/grid-image/image-03.html Normal file
View File

@@ -0,0 +1,25 @@
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3">
<div>
<img
src="./images/grid-image/image-04.png"
alt="image grid"
class="rounded-xl border border-gray-200 dark:border-gray-800"
/>
</div>
<div>
<img
src="./images/grid-image/image-05.png"
alt="image grid"
class="rounded-xl border border-gray-200 dark:border-gray-800"
/>
</div>
<div>
<img
src="./images/grid-image/image-06.png"
alt="image grid"
class="rounded-xl border border-gray-200 dark:border-gray-800"
/>
</div>
</div>

758
public/assets/tailadmin/partials/header.html Normal file
View File

@@ -0,0 +1,758 @@
<header
x-data="{menuToggle: false}"
class="sticky top-0 z-99999 flex w-full border-gray-200 bg-white lg:border-b dark:border-gray-800 dark:bg-gray-900"
>
<div
class="flex grow flex-col items-center justify-between lg:flex-row lg:px-6"
>
<div
class="flex w-full items-center justify-between gap-2 border-b border-gray-200 px-3 py-3 sm:gap-4 lg:justify-normal lg:border-b-0 lg:px-0 lg:py-4 dark:border-gray-800"
>
<!-- Hamburger Toggle BTN -->
<button
:class="sidebarToggle ? 'lg:bg-transparent dark:lg:bg-transparent bg-gray-100 dark:bg-gray-800' : ''"
class="z-99999 flex h-10 w-10 items-center justify-center rounded-lg border-gray-200 text-gray-500 lg:h-11 lg:w-11 lg:border dark:border-gray-800 dark:text-gray-400"
@click.stop="sidebarToggle = !sidebarToggle"
>
<svg
class="hidden fill-current lg:block"
width="16"
height="12"
viewBox="0 0 16 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.583252 1C0.583252 0.585788 0.919038 0.25 1.33325 0.25H14.6666C15.0808 0.25 15.4166 0.585786 15.4166 1C15.4166 1.41421 15.0808 1.75 14.6666 1.75L1.33325 1.75C0.919038 1.75 0.583252 1.41422 0.583252 1ZM0.583252 11C0.583252 10.5858 0.919038 10.25 1.33325 10.25L14.6666 10.25C15.0808 10.25 15.4166 10.5858 15.4166 11C15.4166 11.4142 15.0808 11.75 14.6666 11.75L1.33325 11.75C0.919038 11.75 0.583252 11.4142 0.583252 11ZM1.33325 5.25C0.919038 5.25 0.583252 5.58579 0.583252 6C0.583252 6.41421 0.919038 6.75 1.33325 6.75L7.99992 6.75C8.41413 6.75 8.74992 6.41421 8.74992 6C8.74992 5.58579 8.41413 5.25 7.99992 5.25L1.33325 5.25Z"
fill=""
/>
</svg>
<svg
:class="sidebarToggle ? 'hidden' : 'block lg:hidden'"
class="fill-current lg:hidden"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.25 6C3.25 5.58579 3.58579 5.25 4 5.25L20 5.25C20.4142 5.25 20.75 5.58579 20.75 6C20.75 6.41421 20.4142 6.75 20 6.75L4 6.75C3.58579 6.75 3.25 6.41422 3.25 6ZM3.25 18C3.25 17.5858 3.58579 17.25 4 17.25L20 17.25C20.4142 17.25 20.75 17.5858 20.75 18C20.75 18.4142 20.4142 18.75 20 18.75L4 18.75C3.58579 18.75 3.25 18.4142 3.25 18ZM4 11.25C3.58579 11.25 3.25 11.5858 3.25 12C3.25 12.4142 3.58579 12.75 4 12.75L12 12.75C12.4142 12.75 12.75 12.4142 12.75 12C12.75 11.5858 12.4142 11.25 12 11.25L4 11.25Z"
fill=""
/>
</svg>
<!-- cross icon -->
<svg
:class="sidebarToggle ? 'block lg:hidden' : 'hidden'"
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z"
fill=""
/>
</svg>
</button>
<!-- Hamburger Toggle BTN -->
<a href="index.html" class="lg:hidden">
<img class="dark:hidden" src="./images/logo/logo.svg" alt="Logo" />
<img
class="hidden dark:block"
src="./images/logo/logo-dark.svg"
alt="Logo"
/>
</a>
<!-- Application nav menu button -->
<button
class="z-99999 flex h-10 w-10 items-center justify-center rounded-lg text-gray-700 hover:bg-gray-100 lg:hidden dark:text-gray-400 dark:hover:bg-gray-800"
:class="menuToggle ? 'bg-gray-100 dark:bg-gray-800' : ''"
@click.stop="menuToggle = !menuToggle"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.99902 10.4951C6.82745 10.4951 7.49902 11.1667 7.49902 11.9951V12.0051C7.49902 12.8335 6.82745 13.5051 5.99902 13.5051C5.1706 13.5051 4.49902 12.8335 4.49902 12.0051V11.9951C4.49902 11.1667 5.1706 10.4951 5.99902 10.4951ZM17.999 10.4951C18.8275 10.4951 19.499 11.1667 19.499 11.9951V12.0051C19.499 12.8335 18.8275 13.5051 17.999 13.5051C17.1706 13.5051 16.499 12.8335 16.499 12.0051V11.9951C16.499 11.1667 17.1706 10.4951 17.999 10.4951ZM13.499 11.9951C13.499 11.1667 12.8275 10.4951 11.999 10.4951C11.1706 10.4951 10.499 11.1667 10.499 11.9951V12.0051C10.499 12.8335 11.1706 13.5051 11.999 13.5051C12.8275 13.5051 13.499 12.8335 13.499 12.0051V11.9951Z"
fill=""
/>
</svg>
</button>
<!-- Application nav menu button -->
<div class="hidden lg:block">
<form>
<div class="relative">
<span class="absolute top-1/2 left-4 -translate-y-1/2">
<svg
class="fill-gray-500 dark:fill-gray-400"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.04175 9.37363C3.04175 5.87693 5.87711 3.04199 9.37508 3.04199C12.8731 3.04199 15.7084 5.87693 15.7084 9.37363C15.7084 12.8703 12.8731 15.7053 9.37508 15.7053C5.87711 15.7053 3.04175 12.8703 3.04175 9.37363ZM9.37508 1.54199C5.04902 1.54199 1.54175 5.04817 1.54175 9.37363C1.54175 13.6991 5.04902 17.2053 9.37508 17.2053C11.2674 17.2053 13.003 16.5344 14.357 15.4176L17.177 18.238C17.4699 18.5309 17.9448 18.5309 18.2377 18.238C18.5306 17.9451 18.5306 17.4703 18.2377 17.1774L15.418 14.3573C16.5365 13.0033 17.2084 11.2669 17.2084 9.37363C17.2084 5.04817 13.7011 1.54199 9.37508 1.54199Z"
fill=""
/>
</svg>
</span>
<input
type="text"
placeholder="Search or type command..."
id="search-input"
class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-200 bg-transparent py-2.5 pr-14 pl-12 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden xl:w-[430px] dark:border-gray-800 dark:bg-gray-900 dark:bg-white/[0.03] dark:text-white/90 dark:placeholder:text-white/30"
/>
<button
id="search-button"
class="absolute top-1/2 right-2.5 inline-flex -translate-y-1/2 items-center gap-0.5 rounded-lg border border-gray-200 bg-gray-50 px-[7px] py-[4.5px] text-xs -tracking-[0.2px] text-gray-500 dark:border-gray-800 dark:bg-white/[0.03] dark:text-gray-400"
>
<span> ⌘ </span>
<span> K </span>
</button>
</div>
</form>
</div>
</div>
<div
:class="menuToggle ? 'flex' : 'hidden'"
class="shadow-theme-md w-full items-center justify-between gap-4 px-5 py-4 lg:flex lg:justify-end lg:px-0 lg:shadow-none"
>
<div class="2xsm:gap-3 flex items-center gap-2">
<!-- Dark Mode Toggler -->
<button
class="hover:text-dark-900 relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
@click.prevent="darkMode = !darkMode"
>
<svg
class="hidden dark:block"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.99998 1.5415C10.4142 1.5415 10.75 1.87729 10.75 2.2915V3.5415C10.75 3.95572 10.4142 4.2915 9.99998 4.2915C9.58577 4.2915 9.24998 3.95572 9.24998 3.5415V2.2915C9.24998 1.87729 9.58577 1.5415 9.99998 1.5415ZM10.0009 6.79327C8.22978 6.79327 6.79402 8.22904 6.79402 10.0001C6.79402 11.7712 8.22978 13.207 10.0009 13.207C11.772 13.207 13.2078 11.7712 13.2078 10.0001C13.2078 8.22904 11.772 6.79327 10.0009 6.79327ZM5.29402 10.0001C5.29402 7.40061 7.40135 5.29327 10.0009 5.29327C12.6004 5.29327 14.7078 7.40061 14.7078 10.0001C14.7078 12.5997 12.6004 14.707 10.0009 14.707C7.40135 14.707 5.29402 12.5997 5.29402 10.0001ZM15.9813 5.08035C16.2742 4.78746 16.2742 4.31258 15.9813 4.01969C15.6884 3.7268 15.2135 3.7268 14.9207 4.01969L14.0368 4.90357C13.7439 5.19647 13.7439 5.67134 14.0368 5.96423C14.3297 6.25713 14.8045 6.25713 15.0974 5.96423L15.9813 5.08035ZM18.4577 10.0001C18.4577 10.4143 18.1219 10.7501 17.7077 10.7501H16.4577C16.0435 10.7501 15.7077 10.4143 15.7077 10.0001C15.7077 9.58592 16.0435 9.25013 16.4577 9.25013H17.7077C18.1219 9.25013 18.4577 9.58592 18.4577 10.0001ZM14.9207 15.9806C15.2135 16.2735 15.6884 16.2735 15.9813 15.9806C16.2742 15.6877 16.2742 15.2128 15.9813 14.9199L15.0974 14.036C14.8045 13.7431 14.3297 13.7431 14.0368 14.036C13.7439 14.3289 13.7439 14.8038 14.0368 15.0967L14.9207 15.9806ZM9.99998 15.7088C10.4142 15.7088 10.75 16.0445 10.75 16.4588V17.7088C10.75 18.123 10.4142 18.4588 9.99998 18.4588C9.58577 18.4588 9.24998 18.123 9.24998 17.7088V16.4588C9.24998 16.0445 9.58577 15.7088 9.99998 15.7088ZM5.96356 15.0972C6.25646 14.8043 6.25646 14.3295 5.96356 14.0366C5.67067 13.7437 5.1958 13.7437 4.9029 14.0366L4.01902 14.9204C3.72613 15.2133 3.72613 15.6882 4.01902 15.9811C4.31191 16.274 4.78679 16.274 5.07968 15.9811L5.96356 15.0972ZM4.29224 10.0001C4.29224 10.4143 3.95645 10.7501 3.54224 10.7501H2.29224C1.87802 10.7501 1.54224 10.4143 1.54224 10.0001C1.54224 9.58592 1.87802 9.25013 2.29224 9.25013H3.54224C3.95645 9.25013 4.29224 9.58592 4.29224 10.0001ZM4.9029 5.9637C5.1958 6.25659 5.67067 6.25659 5.96356 5.9637C6.25646 5.6708 6.25646 5.19593 5.96356 4.90303L5.07968 4.01915C4.78679 3.72626 4.31191 3.72626 4.01902 4.01915C3.72613 4.31204 3.72613 4.78692 4.01902 5.07981L4.9029 5.9637Z"
fill="currentColor"
/>
</svg>
<svg
class="dark:hidden"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.4547 11.97L18.1799 12.1611C18.265 11.8383 18.1265 11.4982 17.8401 11.3266C17.5538 11.1551 17.1885 11.1934 16.944 11.4207L17.4547 11.97ZM8.0306 2.5459L8.57989 3.05657C8.80718 2.81209 8.84554 2.44682 8.67398 2.16046C8.50243 1.8741 8.16227 1.73559 7.83948 1.82066L8.0306 2.5459ZM12.9154 13.0035C9.64678 13.0035 6.99707 10.3538 6.99707 7.08524H5.49707C5.49707 11.1823 8.81835 14.5035 12.9154 14.5035V13.0035ZM16.944 11.4207C15.8869 12.4035 14.4721 13.0035 12.9154 13.0035V14.5035C14.8657 14.5035 16.6418 13.7499 17.9654 12.5193L16.944 11.4207ZM16.7295 11.7789C15.9437 14.7607 13.2277 16.9586 10.0003 16.9586V18.4586C13.9257 18.4586 17.2249 15.7853 18.1799 12.1611L16.7295 11.7789ZM10.0003 16.9586C6.15734 16.9586 3.04199 13.8433 3.04199 10.0003H1.54199C1.54199 14.6717 5.32892 18.4586 10.0003 18.4586V16.9586ZM3.04199 10.0003C3.04199 6.77289 5.23988 4.05695 8.22173 3.27114L7.83948 1.82066C4.21532 2.77574 1.54199 6.07486 1.54199 10.0003H3.04199ZM6.99707 7.08524C6.99707 5.52854 7.5971 4.11366 8.57989 3.05657L7.48132 2.03522C6.25073 3.35885 5.49707 5.13487 5.49707 7.08524H6.99707Z"
fill="currentColor"
/>
</svg>
</button>
<!-- Dark Mode Toggler -->
<!-- Notification Menu Area -->
<div
class="relative"
x-data="{ dropdownOpen: false, notifying: true }"
@click.outside="dropdownOpen = false"
>
<button
class="hover:text-dark-900 relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
@click.prevent="dropdownOpen = ! dropdownOpen; notifying = false"
>
<span
:class="!notifying ? 'hidden' : 'flex'"
class="absolute top-0.5 right-0 z-1 h-2 w-2 rounded-full bg-orange-400"
>
<span
class="absolute -z-1 inline-flex h-full w-full animate-ping rounded-full bg-orange-400 opacity-75"
></span>
</span>
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.75 2.29248C10.75 1.87827 10.4143 1.54248 10 1.54248C9.58583 1.54248 9.25004 1.87827 9.25004 2.29248V2.83613C6.08266 3.20733 3.62504 5.9004 3.62504 9.16748V14.4591H3.33337C2.91916 14.4591 2.58337 14.7949 2.58337 15.2091C2.58337 15.6234 2.91916 15.9591 3.33337 15.9591H4.37504H15.625H16.6667C17.0809 15.9591 17.4167 15.6234 17.4167 15.2091C17.4167 14.7949 17.0809 14.4591 16.6667 14.4591H16.375V9.16748C16.375 5.9004 13.9174 3.20733 10.75 2.83613V2.29248ZM14.875 14.4591V9.16748C14.875 6.47509 12.6924 4.29248 10 4.29248C7.30765 4.29248 5.12504 6.47509 5.12504 9.16748V14.4591H14.875ZM8.00004 17.7085C8.00004 18.1228 8.33583 18.4585 8.75004 18.4585H11.25C11.6643 18.4585 12 18.1228 12 17.7085C12 17.2943 11.6643 16.9585 11.25 16.9585H8.75004C8.33583 16.9585 8.00004 17.2943 8.00004 17.7085Z"
fill=""
/>
</svg>
</button>
<!-- Dropdown Start -->
<div
x-show="dropdownOpen"
class="shadow-theme-lg dark:bg-gray-dark absolute -right-[240px] mt-[17px] flex h-[480px] w-[350px] flex-col rounded-2xl border border-gray-200 bg-white p-3 sm:w-[361px] lg:right-0 dark:border-gray-800"
>
<div
class="mb-3 flex items-center justify-between border-b border-gray-100 pb-3 dark:border-gray-800"
>
<h5
class="text-lg font-semibold text-gray-800 dark:text-white/90"
>
Notification
</h5>
<button
@click="dropdownOpen = false"
class="text-gray-500 dark:text-gray-400"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z"
fill=""
/>
</svg>
</button>
</div>
<ul class="custom-scrollbar flex h-auto flex-col overflow-y-auto">
<li>
<a
class="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
href="#"
>
<span
class="relative z-1 block h-10 w-full max-w-10 rounded-full"
>
<img
src="./images/user/user-02.jpg"
alt="User"
class="overflow-hidden rounded-full"
/>
<span
class="bg-success-500 absolute right-0 bottom-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white dark:border-gray-900"
></span>
</span>
<span class="block">
<span
class="text-theme-sm mb-1.5 block text-gray-500 dark:text-gray-400"
>
<span class="font-medium text-gray-800 dark:text-white/90"
>Terry Franci</span
>
requests permission to change
<span class="font-medium text-gray-800 dark:text-white/90"
>Project - Nganter App</span
>
</span>
<span
class="text-theme-xs flex items-center gap-2 text-gray-500 dark:text-gray-400"
>
<span>Project</span>
<span class="h-1 w-1 rounded-full bg-gray-400"></span>
<span>5 min ago</span>
</span>
</span>
</a>
</li>
<li>
<a
class="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
href="#"
>
<span
class="relative z-1 block h-10 w-full max-w-10 rounded-full"
>
<img
src="./images/user/user-03.jpg"
alt="User"
class="overflow-hidden rounded-full"
/>
<span
class="bg-success-500 absolute right-0 bottom-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white dark:border-gray-900"
></span>
</span>
<span class="block">
<span
class="text-theme-sm mb-1.5 block text-gray-500 dark:text-gray-400"
>
<span class="font-medium text-gray-800 dark:text-white/90"
>Alena Franci</span
>
requests permission to change
<span class="font-medium text-gray-800 dark:text-white/90"
>Project - Nganter App</span
>
</span>
<span
class="text-theme-xs flex items-center gap-2 text-gray-500 dark:text-gray-400"
>
<span>Project</span>
<span class="h-1 w-1 rounded-full bg-gray-400"></span>
<span>8 min ago</span>
</span>
</span>
</a>
</li>
<li>
<a
class="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
href="#"
>
<span
class="relative z-1 block h-10 w-full max-w-10 rounded-full"
>
<img
src="./images/user/user-04.jpg"
alt="User"
class="overflow-hidden rounded-full"
/>
<span
class="bg-success-500 absolute right-0 bottom-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white dark:border-gray-900"
></span>
</span>
<span class="block">
<span
class="text-theme-sm mb-1.5 block text-gray-500 dark:text-gray-400"
>
<span class="font-medium text-gray-800 dark:text-white/90"
>Jocelyn Kenter</span
>
requests permission to change
<span class="font-medium text-gray-800 dark:text-white/90"
>Project - Nganter App</span
>
</span>
<span
class="text-theme-xs flex items-center gap-2 text-gray-500 dark:text-gray-400"
>
<span>Project</span>
<span class="h-1 w-1 rounded-full bg-gray-400"></span>
<span>15 min ago</span>
</span>
</span>
</a>
</li>
<li>
<a
class="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
href="#"
>
<span
class="relative z-1 block h-10 w-full max-w-10 rounded-full"
>
<img
src="./images/user/user-05.jpg"
alt="User"
class="overflow-hidden rounded-full"
/>
<span
class="bg-error-500 absolute right-0 bottom-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white dark:border-gray-900"
></span>
</span>
<span class="block">
<span
class="text-theme-sm mb-1.5 block text-gray-500 dark:text-gray-400"
>
<span class="font-medium text-gray-800 dark:text-white/90"
>Brandon Philips</span
>
requests permission to change
<span class="font-medium text-gray-800 dark:text-white/90"
>Project - Nganter App</span
>
</span>
<span
class="text-theme-xs flex items-center gap-2 text-gray-500 dark:text-gray-400"
>
<span>Project</span>
<span class="h-1 w-1 rounded-full bg-gray-400"></span>
<span>1 hr ago</span>
</span>
</span>
</a>
</li>
<li>
<a
class="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
href="#"
>
<span
class="relative z-1 block h-10 w-full max-w-10 rounded-full"
>
<img
src="./images/user/user-02.jpg"
alt="User"
class="overflow-hidden rounded-full"
/>
<span
class="bg-success-500 absolute right-0 bottom-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white dark:border-gray-900"
></span>
</span>
<span class="block">
<span
class="text-theme-sm mb-1.5 block text-gray-500 dark:text-gray-400"
>
<span class="font-medium text-gray-800 dark:text-white/90"
>Terry Franci</span
>
requests permission to change
<span class="font-medium text-gray-800 dark:text-white/90"
>Project - Nganter App</span
>
</span>
<span
class="text-theme-xs flex items-center gap-2 text-gray-500 dark:text-gray-400"
>
<span>Project</span>
<span class="h-1 w-1 rounded-full bg-gray-400"></span>
<span>5 min ago</span>
</span>
</span>
</a>
</li>
<li>
<a
class="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
href="#"
>
<span
class="relative z-1 block h-10 w-full max-w-10 rounded-full"
>
<img
src="./images/user/user-03.jpg"
alt="User"
class="overflow-hidden rounded-full"
/>
<span
class="bg-success-500 absolute right-0 bottom-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white dark:border-gray-900"
></span>
</span>
<span class="block">
<span
class="text-theme-sm mb-1.5 block text-gray-500 dark:text-gray-400"
>
<span class="font-medium text-gray-800 dark:text-white/90"
>Alena Franci</span
>
requests permission to change
<span class="font-medium text-gray-800 dark:text-white/90"
>Project - Nganter App</span
>
</span>
<span
class="text-theme-xs flex items-center gap-2 text-gray-500 dark:text-gray-400"
>
<span>Project</span>
<span class="h-1 w-1 rounded-full bg-gray-400"></span>
<span>8 min ago</span>
</span>
</span>
</a>
</li>
<li>
<a
class="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
href="#"
>
<span
class="relative z-1 block h-10 w-full max-w-10 rounded-full"
>
<img
src="./images/user/user-04.jpg"
alt="User"
class="overflow-hidden rounded-full"
/>
<span
class="bg-success-500 absolute right-0 bottom-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white dark:border-gray-900"
></span>
</span>
<span class="block">
<span
class="text-theme-sm mb-1.5 block text-gray-500 dark:text-gray-400"
>
<span class="font-medium text-gray-800 dark:text-white/90"
>Jocelyn Kenter</span
>
requests permission to change
<span class="font-medium text-gray-800 dark:text-white/90"
>Project - Nganter App</span
>
</span>
<span
class="text-theme-xs flex items-center gap-2 text-gray-500 dark:text-gray-400"
>
<span>Project</span>
<span class="h-1 w-1 rounded-full bg-gray-400"></span>
<span>15 min ago</span>
</span>
</span>
</a>
</li>
<li>
<a
class="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
href="#"
>
<span
class="relative z-1 block h-10 w-full max-w-10 rounded-full"
>
<img
src="./images/user/user-05.jpg"
alt="User"
class="overflow-hidden rounded-full"
/>
<span
class="bg-error-500 absolute right-0 bottom-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white dark:border-gray-900"
></span>
</span>
<span class="block">
<span
class="text-theme-sm mb-1.5 block text-gray-500 dark:text-gray-400"
>
<span class="font-medium text-gray-800 dark:text-white/90"
>Brandon Philips</span
>
requests permission to change
<span class="font-medium text-gray-800 dark:text-white/90"
>Project - Nganter App</span
>
</span>
<span
class="text-theme-xs flex items-center gap-2 text-gray-500 dark:text-gray-400"
>
<span>Project</span>
<span class="h-1 w-1 rounded-full bg-gray-400"></span>
<span>1 hr ago</span>
</span>
</span>
</a>
</li>
</ul>
<a
href="#"
class="text-theme-sm shadow-theme-xs mt-3 flex justify-center rounded-lg border border-gray-300 bg-white p-3 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
>
View All Notification
</a>
</div>
<!-- Dropdown End -->
</div>
<!-- Notification Menu Area -->
</div>
<!-- User Area -->
<div
class="relative"
x-data="{ dropdownOpen: false }"
@click.outside="dropdownOpen = false"
>
<a
class="flex items-center text-gray-700 dark:text-gray-400"
href="#"
@click.prevent="dropdownOpen = ! dropdownOpen"
>
<span class="mr-3 h-11 w-11 overflow-hidden rounded-full">
<img src="./images/user/owner.jpg" alt="User" />
</span>
<span class="text-theme-sm mr-1 block font-medium"> Musharof </span>
<svg
:class="dropdownOpen && 'rotate-180'"
class="stroke-gray-500 dark:stroke-gray-400"
width="18"
height="20"
viewBox="0 0 18 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.3125 8.65625L9 13.3437L13.6875 8.65625"
stroke=""
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<!-- Dropdown Start -->
<div
x-show="dropdownOpen"
class="shadow-theme-lg dark:bg-gray-dark absolute right-0 mt-[17px] flex w-[260px] flex-col rounded-2xl border border-gray-200 bg-white p-3 dark:border-gray-800"
>
<div>
<span
class="text-theme-sm block font-medium text-gray-700 dark:text-gray-400"
>
Musharof Chowdhury
</span>
<span
class="text-theme-xs mt-0.5 block text-gray-500 dark:text-gray-400"
>
randomuser@pimjo.com
</span>
</div>
<ul
class="flex flex-col gap-1 border-b border-gray-200 pt-4 pb-3 dark:border-gray-800"
>
<li>
<a
href="profile.html"
class="group text-theme-sm flex items-center gap-3 rounded-lg px-3 py-2 font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
<svg
class="fill-gray-500 group-hover:fill-gray-700 dark:fill-gray-400 dark:group-hover:fill-gray-300"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.1526 4.3002 16.1184 5.61936 17.616C6.17279 15.3096 8.24852 13.5955 10.7246 13.5955H13.2746C15.7509 13.5955 17.8268 15.31 18.38 17.6167C19.6996 16.119 20.5 14.153 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM17.0246 18.8566V18.8455C17.0246 16.7744 15.3457 15.0955 13.2746 15.0955H10.7246C8.65354 15.0955 6.97461 16.7744 6.97461 18.8455V18.856C8.38223 19.8895 10.1198 20.5 12 20.5C13.8798 20.5 15.6171 19.8898 17.0246 18.8566ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9991 7.25C10.8847 7.25 9.98126 8.15342 9.98126 9.26784C9.98126 10.3823 10.8847 11.2857 11.9991 11.2857C13.1135 11.2857 14.0169 10.3823 14.0169 9.26784C14.0169 8.15342 13.1135 7.25 11.9991 7.25ZM8.48126 9.26784C8.48126 7.32499 10.0563 5.75 11.9991 5.75C13.9419 5.75 15.5169 7.32499 15.5169 9.26784C15.5169 11.2107 13.9419 12.7857 11.9991 12.7857C10.0563 12.7857 8.48126 11.2107 8.48126 9.26784Z"
fill=""
/>
</svg>
Edit profile
</a>
</li>
<li>
<a
href="messages.html"
class="group text-theme-sm flex items-center gap-3 rounded-lg px-3 py-2 font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
<svg
class="fill-gray-500 group-hover:fill-gray-700 dark:fill-gray-400 dark:group-hover:fill-gray-300"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.4858 3.5L13.5182 3.5C13.9233 3.5 14.2518 3.82851 14.2518 4.23377C14.2518 5.9529 16.1129 7.02795 17.602 6.1682C17.9528 5.96567 18.4014 6.08586 18.6039 6.43667L20.1203 9.0631C20.3229 9.41407 20.2027 9.86286 19.8517 10.0655C18.3625 10.9253 18.3625 13.0747 19.8517 13.9345C20.2026 14.1372 20.3229 14.5859 20.1203 14.9369L18.6039 17.5634C18.4013 17.9142 17.9528 18.0344 17.602 17.8318C16.1129 16.9721 14.2518 18.0471 14.2518 19.7663C14.2518 20.1715 13.9233 20.5 13.5182 20.5H10.4858C10.0804 20.5 9.75182 20.1714 9.75182 19.766C9.75182 18.0461 7.88983 16.9717 6.40067 17.8314C6.04945 18.0342 5.60037 17.9139 5.39767 17.5628L3.88167 14.937C3.67903 14.586 3.79928 14.1372 4.15026 13.9346C5.63949 13.0748 5.63946 10.9253 4.15025 10.0655C3.79926 9.86282 3.67901 9.41401 3.88165 9.06303L5.39764 6.43725C5.60034 6.08617 6.04943 5.96581 6.40065 6.16858C7.88982 7.02836 9.75182 5.9539 9.75182 4.23399C9.75182 3.82862 10.0804 3.5 10.4858 3.5ZM13.5182 2L10.4858 2C9.25201 2 8.25182 3.00019 8.25182 4.23399C8.25182 4.79884 7.64013 5.15215 7.15065 4.86955C6.08213 4.25263 4.71559 4.61859 4.0986 5.68725L2.58261 8.31303C1.96575 9.38146 2.33183 10.7477 3.40025 11.3645C3.88948 11.647 3.88947 12.3531 3.40026 12.6355C2.33184 13.2524 1.96578 14.6186 2.58263 15.687L4.09863 18.3128C4.71562 19.3814 6.08215 19.7474 7.15067 19.1305C7.64015 18.8479 8.25182 19.2012 8.25182 19.766C8.25182 20.9998 9.25201 22 10.4858 22H13.5182C14.7519 22 15.7518 20.9998 15.7518 19.7663C15.7518 19.2015 16.3632 18.8487 16.852 19.1309C17.9202 19.7476 19.2862 19.3816 19.9029 18.3134L21.4193 15.6869C22.0361 14.6185 21.6701 13.2523 20.6017 12.6355C20.1125 12.3531 20.1125 11.647 20.6017 11.3645C21.6701 10.7477 22.0362 9.38152 21.4193 8.3131L19.903 5.68667C19.2862 4.61842 17.9202 4.25241 16.852 4.86917C16.3632 5.15138 15.7518 4.79856 15.7518 4.23377C15.7518 3.00024 14.7519 2 13.5182 2ZM9.6659 11.9999C9.6659 10.7103 10.7113 9.66493 12.0009 9.66493C13.2905 9.66493 14.3359 10.7103 14.3359 11.9999C14.3359 13.2895 13.2905 14.3349 12.0009 14.3349C10.7113 14.3349 9.6659 13.2895 9.6659 11.9999ZM12.0009 8.16493C9.88289 8.16493 8.1659 9.88191 8.1659 11.9999C8.1659 14.1179 9.88289 15.8349 12.0009 15.8349C14.1189 15.8349 15.8359 14.1179 15.8359 11.9999C15.8359 9.88191 14.1189 8.16493 12.0009 8.16493Z"
fill=""
/>
</svg>
Account settings
</a>
</li>
<li>
<a
href="settings.html"
class="group text-theme-sm flex items-center gap-3 rounded-lg px-3 py-2 font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
<svg
class="fill-gray-500 group-hover:fill-gray-700 dark:fill-gray-400 dark:group-hover:fill-gray-300"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM11.0991 7.52507C11.0991 8.02213 11.5021 8.42507 11.9991 8.42507H12.0001C12.4972 8.42507 12.9001 8.02213 12.9001 7.52507C12.9001 7.02802 12.4972 6.62507 12.0001 6.62507H11.9991C11.5021 6.62507 11.0991 7.02802 11.0991 7.52507ZM12.0001 17.3714C11.5859 17.3714 11.2501 17.0356 11.2501 16.6214V10.9449C11.2501 10.5307 11.5859 10.1949 12.0001 10.1949C12.4143 10.1949 12.7501 10.5307 12.7501 10.9449V16.6214C12.7501 17.0356 12.4143 17.3714 12.0001 17.3714Z"
fill=""
/>
</svg>
Support
</a>
</li>
</ul>
<button
class="group text-theme-sm mt-3 flex items-center gap-3 rounded-lg px-3 py-2 font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
<svg
class="fill-gray-500 group-hover:fill-gray-700 dark:group-hover:fill-gray-300"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.1007 19.247C14.6865 19.247 14.3507 18.9112 14.3507 18.497L14.3507 14.245H12.8507V18.497C12.8507 19.7396 13.8581 20.747 15.1007 20.747H18.5007C19.7434 20.747 20.7507 19.7396 20.7507 18.497L20.7507 5.49609C20.7507 4.25345 19.7433 3.24609 18.5007 3.24609H15.1007C13.8581 3.24609 12.8507 4.25345 12.8507 5.49609V9.74501L14.3507 9.74501V5.49609C14.3507 5.08188 14.6865 4.74609 15.1007 4.74609L18.5007 4.74609C18.9149 4.74609 19.2507 5.08188 19.2507 5.49609L19.2507 18.497C19.2507 18.9112 18.9149 19.247 18.5007 19.247H15.1007ZM3.25073 11.9984C3.25073 12.2144 3.34204 12.4091 3.48817 12.546L8.09483 17.1556C8.38763 17.4485 8.86251 17.4487 9.15549 17.1559C9.44848 16.8631 9.44863 16.3882 9.15583 16.0952L5.81116 12.7484L16.0007 12.7484C16.4149 12.7484 16.7507 12.4127 16.7507 11.9984C16.7507 11.5842 16.4149 11.2484 16.0007 11.2484L5.81528 11.2484L9.15585 7.90554C9.44864 7.61255 9.44847 7.13767 9.15547 6.84488C8.86248 6.55209 8.3876 6.55226 8.09481 6.84525L3.52309 11.4202C3.35673 11.5577 3.25073 11.7657 3.25073 11.9984Z"
fill=""
/>
</svg>
Sign out
</button>
</div>
<!-- Dropdown End -->
</div>
<!-- User Area -->
</div>
</div>
</header>

125
public/assets/tailadmin/partials/map-01.html Normal file
View File

@@ -0,0 +1,125 @@
<div
class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] sm:p-6"
>
<div class="flex justify-between">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
Customers Demographic
</h3>
<p class="mt-1 text-theme-sm text-gray-500 dark:text-gray-400">
Number of customer based on country
</p>
</div>
<div x-data="{openDropDown: false}" class="relative h-fit">
<button
@click="openDropDown = !openDropDown"
:class="openDropDown ? 'text-gray-700 dark:text-white' : 'text-gray-400 hover:text-gray-700 dark:hover:text-white'"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.2441 6C10.2441 5.0335 11.0276 4.25 11.9941 4.25H12.0041C12.9706 4.25 13.7541 5.0335 13.7541 6C13.7541 6.9665 12.9706 7.75 12.0041 7.75H11.9941C11.0276 7.75 10.2441 6.9665 10.2441 6ZM10.2441 18C10.2441 17.0335 11.0276 16.25 11.9941 16.25H12.0041C12.9706 16.25 13.7541 17.0335 13.7541 18C13.7541 18.9665 12.9706 19.75 12.0041 19.75H11.9941C11.0276 19.75 10.2441 18.9665 10.2441 18ZM11.9941 10.25C11.0276 10.25 10.2441 11.0335 10.2441 12C10.2441 12.9665 11.0276 13.75 11.9941 13.75H12.0041C12.9706 13.75 13.7541 12.9665 13.7541 12C13.7541 11.0335 12.9706 10.25 12.0041 10.25H11.9941Z"
fill=""
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="absolute right-0 top-full z-40 w-40 space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
View More
</button>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
Delete
</button>
</div>
</div>
</div>
<div
class="border-gary-200 my-6 overflow-hidden rounded-2xl border bg-gray-50 px-4 py-6 dark:border-gray-800 dark:bg-gray-900 sm:px-6"
>
<div
id="mapOne"
class="mapOne map-btn -mx-4 -my-6 h-[212px] w-[252px] 2xsm:w-[307px] xsm:w-[358px] sm:-mx-6 md:w-[668px] lg:w-[634px] xl:w-[393px] 2xl:w-[554px]"
></div>
</div>
<div class="space-y-5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-full max-w-8 items-center rounded-full">
<img src="./images/country/country-01.svg" alt="usa" />
</div>
<div>
<p
class="text-theme-sm font-semibold text-gray-800 dark:text-white/90"
>
USA
</p>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
2,379 Customers
</span>
</div>
</div>
<div class="flex w-full max-w-[140px] items-center gap-3">
<div
class="relative block h-2 w-full max-w-[100px] rounded-sm bg-gray-200 dark:bg-gray-800"
>
<div
class="absolute left-0 top-0 flex h-full w-[79%] items-center justify-center rounded-sm bg-brand-500 text-xs font-medium text-white"
></div>
</div>
<p class="text-theme-sm font-medium text-gray-800 dark:text-white/90">
79%
</p>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-full max-w-8 items-center rounded-full">
<img src="./images/country/country-02.svg" alt="france" />
</div>
<div>
<p
class="text-theme-sm font-semibold text-gray-800 dark:text-white/90"
>
France
</p>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
589 Customers
</span>
</div>
</div>
<div class="flex w-full max-w-[140px] items-center gap-3">
<div
class="relative block h-2 w-full max-w-[100px] rounded-sm bg-gray-200 dark:bg-gray-800"
>
<div
class="absolute left-0 top-0 flex h-full w-[23%] items-center justify-center rounded-sm bg-brand-500 text-xs font-medium text-white"
></div>
</div>
<p class="text-theme-sm font-medium text-gray-800 dark:text-white/90">
23%
</p>
</div>
</div>
</div>
</div>

372
public/assets/tailadmin/partials/media-card.html Normal file
View File

@@ -0,0 +1,372 @@
<div
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
>
<div class="px-4 py-4 sm:pl-6 sm:pr-4">
<div
class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
All Media
</h3>
<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
<div class="relative">
<button
class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400"
>
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.04199 9.37363C3.04199 5.87693 5.87735 3.04199 9.37533 3.04199C12.8733 3.04199 15.7087 5.87693 15.7087 9.37363C15.7087 12.8703 12.8733 15.7053 9.37533 15.7053C5.87735 15.7053 3.04199 12.8703 3.04199 9.37363ZM9.37533 1.54199C5.04926 1.54199 1.54199 5.04817 1.54199 9.37363C1.54199 13.6991 5.04926 17.2053 9.37533 17.2053C11.2676 17.2053 13.0032 16.5344 14.3572 15.4176L17.1773 18.238C17.4702 18.5309 17.945 18.5309 18.2379 18.238C18.5308 17.9451 18.5309 17.4703 18.238 17.1773L15.4182 14.3573C16.5367 13.0033 17.2087 11.2669 17.2087 9.37363C17.2087 5.04817 13.7014 1.54199 9.37533 1.54199Z"
fill=""
/>
</svg>
</button>
<input
type="text"
placeholder="Search..."
class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-2.5 pl-[42px] pr-3.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800 xl:w-[300px]"
/>
</div>
<button
class="flex w-full items-center justify-center gap-2 rounded-lg bg-brand-500 px-4 py-3 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600 sm:w-auto"
>
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.2502 4.99951C9.2502 4.5853 9.58599 4.24951 10.0002 4.24951C10.4144 4.24951 10.7502 4.5853 10.7502 4.99951V9.24971H15.0006C15.4148 9.24971 15.7506 9.5855 15.7506 9.99971C15.7506 10.4139 15.4148 10.7497 15.0006 10.7497H10.7502V15.0001C10.7502 15.4143 10.4144 15.7501 10.0002 15.7501C9.58599 15.7501 9.2502 15.4143 9.2502 15.0001V10.7497H5C4.58579 10.7497 4.25 10.4139 4.25 9.99971C4.25 9.5855 4.58579 9.24971 5 9.24971H9.2502V4.99951Z"
fill=""
/>
</svg>
Upload File
</button>
</div>
</div>
</div>
<div class="border-t border-gray-100 p-4 dark:border-gray-800 sm:p-6">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 xl:grid-cols-3">
<!-- Media item-->
<div
class="flex items-center justify-between rounded-2xl border border-gray-100 bg-white py-4 pl-4 pr-4 dark:border-gray-800 dark:bg-white/[0.03] xl:pr-5"
>
<div class="flex items-center gap-4">
<div
class="flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-success-500/[0.08] text-success-500"
>
<svg
class="fill-current"
width="20"
height="18"
viewBox="0 0 20 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.05 3.9L8.45 4.35L9.05 3.9ZM2.25 2.25H6.5V0.75H2.25V2.25ZM1.5 15V3H0V15H1.5ZM17.75 15.75H2.25V17.25H17.75V15.75ZM18.5 6V15H20V6H18.5ZM17.75 3.75H10.25V5.25H17.75V3.75ZM9.65 3.45L8.3 1.65L7.1 2.55L8.45 4.35L9.65 3.45ZM10.25 3.75C10.0139 3.75 9.79164 3.63885 9.65 3.45L8.45 4.35C8.87492 4.91656 9.5418 5.25 10.25 5.25V3.75ZM20 6C20 4.75736 18.9926 3.75 17.75 3.75V5.25C18.1642 5.25 18.5 5.58579 18.5 6H20ZM17.75 17.25C18.9926 17.25 20 16.2426 20 15H18.5C18.5 15.4142 18.1642 15.75 17.75 15.75V17.25ZM0 15C0 16.2426 1.00736 17.25 2.25 17.25V15.75C1.83579 15.75 1.5 15.4142 1.5 15H0ZM6.5 2.25C6.73607 2.25 6.95836 2.36115 7.1 2.55L8.3 1.65C7.87508 1.08344 7.2082 0.75 6.5 0.75V2.25ZM2.25 0.75C1.00736 0.75 0 1.75736 0 3H1.5C1.5 2.58579 1.83579 2.25 2.25 2.25V0.75Z"
fill=""
/>
</svg>
</div>
<div>
<h4
class="mb-1 text-sm font-medium text-gray-800 dark:text-white/90"
>
Image
</h4>
<span class="block text-sm text-gray-500 dark:text-gray-400">
17% Used
</span>
</div>
</div>
<div>
<span
class="mb-1 block text-right text-sm text-gray-500 dark:text-gray-400"
>
245 files
</span>
<span
class="block text-right text-sm text-gray-500 dark:text-gray-400"
>
26.40 GB
</span>
</div>
</div>
<!-- Media item-->
<div
class="flex items-center justify-between rounded-2xl border border-gray-100 bg-white py-4 pl-4 pr-4 dark:border-gray-800 dark:bg-white/[0.03] xl:pr-5"
>
<div class="flex items-center gap-4">
<div
class="flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-theme-pink-500/[0.08] text-theme-pink-500"
>
<svg
class="stroke-current"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.70825 5.93126L6.70825 18.0687C6.70825 19.2416 7.9937 19.9607 8.99315 19.347L18.8765 13.2783C19.83 12.6928 19.83 11.3072 18.8765 10.7217L8.99315 4.65301C7.9937 4.03931 6.70825 4.75844 6.70825 5.93126Z"
stroke=""
stroke-width="1.5"
stroke-linejoin="round"
/>
</svg>
</div>
<div>
<h4
class="mb-1 text-sm font-medium text-gray-800 dark:text-white/90"
>
Videos
</h4>
<span class="block text-sm text-gray-500 dark:text-gray-400">
22% Used
</span>
</div>
</div>
<div>
<span
class="mb-1 block text-right text-sm text-gray-500 dark:text-gray-400"
>
245 files
</span>
<span
class="block text-right text-sm text-gray-500 dark:text-gray-400"
>
26.40 GB
</span>
</div>
</div>
<!-- Media item-->
<div
class="flex items-center justify-between rounded-2xl border border-gray-100 bg-white py-4 pl-4 pr-4 dark:border-gray-800 dark:bg-white/[0.03] xl:pr-5"
>
<div class="flex items-center gap-4">
<div
class="flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-blue-500/[0.08] text-blue-light-500"
>
<svg
class="fill-current"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M21.4166 4.00001C21.4166 3.77689 21.3173 3.56536 21.1456 3.42287C20.9739 3.28039 20.7477 3.22173 20.5284 3.26285L8.52841 5.51285C8.17368 5.57936 7.91663 5.88909 7.91663 6.25001V9.98484C7.91644 9.99437 7.91644 10.0039 7.91663 10.0135V14.4585C7.3716 14.1636 6.72327 14 6.04163 14C5.16738 14 4.34794 14.2691 3.73094 14.7392C3.11333 15.2098 2.66663 15.9138 2.66663 16.75C2.66663 17.5862 3.11333 18.2902 3.73094 18.7608C4.34794 19.2309 5.16738 19.5 6.04163 19.5C6.91587 19.5 7.73532 19.2309 8.35231 18.7608C8.95774 18.2995 9.39893 17.6139 9.41611 16.7993C9.41645 16.79 9.41663 16.7806 9.41663 16.7712V16.75V10.62L19.9166 8.60938V12.2085C19.3716 11.9136 18.7233 11.75 18.0416 11.75C17.1674 11.75 16.3479 12.0191 15.7309 12.4892C15.1133 12.9598 14.6666 13.6638 14.6666 14.5C14.6666 15.3362 15.1133 16.0402 15.7309 16.5108C16.3479 16.9809 17.1674 17.25 18.0416 17.25C18.9159 17.25 19.7353 16.9809 20.3523 16.5108C20.9577 16.0495 21.3989 15.3639 21.4161 14.5493C21.4165 14.54 21.4166 14.5306 21.4166 14.5212V14.5V4.00001ZM19.9166 14.5C19.9166 14.2316 19.7757 13.9357 19.4432 13.6824C19.1102 13.4286 18.6171 13.25 18.0416 13.25C17.4661 13.25 16.9731 13.4286 16.64 13.6824C16.3076 13.9357 16.1666 14.2316 16.1666 14.5C16.1666 14.7684 16.3076 15.0643 16.64 15.3176C16.9731 15.5714 17.4661 15.75 18.0416 15.75C18.6171 15.75 19.1102 15.5714 19.4432 15.3176C19.7757 15.0643 19.9166 14.7684 19.9166 14.5ZM7.44325 15.9324C7.7757 16.1857 7.91663 16.4816 7.91663 16.75C7.91663 17.0184 7.7757 17.3143 7.44325 17.5676C7.11018 17.8214 6.61713 18 6.04163 18C5.46613 18 4.97307 17.8214 4.64 17.5676C4.30755 17.3143 4.16663 17.0184 4.16663 16.75C4.16663 16.4816 4.30755 16.1857 4.64 15.9324C4.97307 15.6786 5.46613 15.5 6.04163 15.5C6.61713 15.5 7.11018 15.6786 7.44325 15.9324ZM19.9166 7.08212V4.9037L9.41663 6.87245V9.09276L19.9166 7.08212Z"
fill=""
/>
</svg>
</div>
<div>
<h4
class="mb-1 text-sm font-medium text-gray-800 dark:text-white/90"
>
Audio
</h4>
<span class="block text-sm text-gray-500 dark:text-gray-400">
24% Used
</span>
</div>
</div>
<div>
<span
class="mb-1 block text-right text-sm text-gray-500 dark:text-gray-400"
>
245 files
</span>
<span
class="block text-right text-sm text-gray-500 dark:text-gray-400"
>
26.40 GB
</span>
</div>
</div>
<!-- Media item-->
<div
class="flex items-center justify-between rounded-2xl border border-gray-100 bg-white py-4 pl-4 pr-4 dark:border-gray-800 dark:bg-white/[0.03] xl:pr-5"
>
<div class="flex items-center gap-4">
<div
class="flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-orange-500/[0.08] text-orange-500"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V8.99998C3.25 10.2426 4.25736 11.25 5.5 11.25H9C10.2426 11.25 11.25 10.2426 11.25 8.99998V5.5C11.25 4.25736 10.2426 3.25 9 3.25H5.5ZM4.75 5.5C4.75 5.08579 5.08579 4.75 5.5 4.75H9C9.41421 4.75 9.75 5.08579 9.75 5.5V8.99998C9.75 9.41419 9.41421 9.74998 9 9.74998H5.5C5.08579 9.74998 4.75 9.41419 4.75 8.99998V5.5ZM5.5 12.75C4.25736 12.75 3.25 13.7574 3.25 15V18.5C3.25 19.7426 4.25736 20.75 5.5 20.75H9C10.2426 20.75 11.25 19.7427 11.25 18.5V15C11.25 13.7574 10.2426 12.75 9 12.75H5.5ZM4.75 15C4.75 14.5858 5.08579 14.25 5.5 14.25H9C9.41421 14.25 9.75 14.5858 9.75 15V18.5C9.75 18.9142 9.41421 19.25 9 19.25H5.5C5.08579 19.25 4.75 18.9142 4.75 18.5V15ZM12.75 5.5C12.75 4.25736 13.7574 3.25 15 3.25H18.5C19.7426 3.25 20.75 4.25736 20.75 5.5V8.99998C20.75 10.2426 19.7426 11.25 18.5 11.25H15C13.7574 11.25 12.75 10.2426 12.75 8.99998V5.5ZM15 4.75C14.5858 4.75 14.25 5.08579 14.25 5.5V8.99998C14.25 9.41419 14.5858 9.74998 15 9.74998H18.5C18.9142 9.74998 19.25 9.41419 19.25 8.99998V5.5C19.25 5.08579 18.9142 4.75 18.5 4.75H15ZM15 12.75C13.7574 12.75 12.75 13.7574 12.75 15V18.5C12.75 19.7426 13.7574 20.75 15 20.75H18.5C19.7426 20.75 20.75 19.7427 20.75 18.5V15C20.75 13.7574 19.7426 12.75 18.5 12.75H15ZM14.25 15C14.25 14.5858 14.5858 14.25 15 14.25H18.5C18.9142 14.25 19.25 14.5858 19.25 15V18.5C19.25 18.9142 18.9142 19.25 18.5 19.25H15C14.5858 19.25 14.25 18.9142 14.25 18.5V15Z"
fill=""
/>
</svg>
</div>
<div>
<h4
class="mb-1 text-sm font-medium text-gray-800 dark:text-white/90"
>
Apps
</h4>
<span class="block text-sm text-gray-500 dark:text-gray-400">
46% Used
</span>
</div>
</div>
<div>
<span
class="mb-1 block text-right text-sm text-gray-500 dark:text-gray-400"
>
245 files
</span>
<span
class="block text-right text-sm text-gray-500 dark:text-gray-400"
>
26.40 GB
</span>
</div>
</div>
<!-- Media item-->
<div
class="flex items-center justify-between rounded-2xl border border-gray-100 bg-white py-4 pl-4 pr-4 dark:border-gray-800 dark:bg-white/[0.03] xl:pr-5"
>
<div class="flex items-center gap-4">
<div
class="flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-warning-500/[0.08] text-warning-500"
>
<svg
class="fill-current"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.8335 19.75C19.8335 20.9926 18.8261 22 17.5835 22H7.0835C5.84086 22 4.8335 20.9926 4.8335 19.75V9.62105C4.8335 9.02455 5.07036 8.45247 5.49201 8.03055L10.8597 2.65951C11.2817 2.23725 11.8542 2 12.4512 2H17.5835C18.8261 2 19.8335 3.00736 19.8335 4.25V19.75ZM17.5835 20.5C17.9977 20.5 18.3335 20.1642 18.3335 19.75V4.25C18.3335 3.83579 17.9977 3.5 17.5835 3.5H12.5815L12.5844 7.49913C12.5853 8.7424 11.5776 9.75073 10.3344 9.75073H6.3335V19.75C6.3335 20.1642 6.66928 20.5 7.0835 20.5H17.5835ZM7.39262 8.25073L11.0823 4.55876L11.0844 7.5002C11.0847 7.91462 10.7488 8.25073 10.3344 8.25073H7.39262ZM8.5835 14.5C8.5835 14.0858 8.91928 13.75 9.3335 13.75H15.3335C15.7477 13.75 16.0835 14.0858 16.0835 14.5C16.0835 14.9142 15.7477 15.25 15.3335 15.25H9.3335C8.91928 15.25 8.5835 14.9142 8.5835 14.5ZM8.5835 17.5C8.5835 17.0858 8.91928 16.75 9.3335 16.75H12.3335C12.7477 16.75 13.0835 17.0858 13.0835 17.5C13.0835 17.9142 12.7477 18.25 12.3335 18.25H9.3335C8.91928 18.25 8.5835 17.9142 8.5835 17.5Z"
fill=""
/>
</svg>
</div>
<div>
<h4
class="mb-1 text-sm font-medium text-gray-800 dark:text-white/90"
>
Docs
</h4>
<span class="block text-sm text-gray-500 dark:text-gray-400">
18% Used
</span>
</div>
</div>
<div>
<span
class="mb-1 block text-right text-sm text-gray-500 dark:text-gray-400"
>
245 files
</span>
<span
class="block text-right text-sm text-gray-500 dark:text-gray-400"
>
26.40 GB
</span>
</div>
</div>
<!-- Media item-->
<div
class="flex items-center justify-between rounded-2xl border border-gray-100 bg-white py-4 pl-4 pr-4 dark:border-gray-800 dark:bg-white/[0.03] xl:pr-5"
>
<div class="flex items-center gap-4">
<div
class="flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-theme-purple-500/[0.08] text-theme-purple-500"
>
<svg
class="fill-current"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.6686 16.75C12.4526 16.75 12.2579 16.6587 12.1211 16.5126L7.5115 11.9059C7.21851 11.6131 7.21836 11.1382 7.51116 10.8452C7.80396 10.5523 8.27883 10.5521 8.57182 10.8449L11.9186 14.1896V4C11.9186 3.58579 12.2544 3.25 12.6686 3.25C13.0828 3.25 13.4186 3.58579 13.4186 4V14.1854L16.7615 10.8449C17.0545 10.5521 17.5294 10.5523 17.8222 10.8453C18.115 11.1383 18.1148 11.6131 17.8218 11.9059L13.2469 16.4776C13.1093 16.644 12.9013 16.75 12.6686 16.75ZM5.41663 16C5.41663 15.5858 5.08084 15.25 4.66663 15.25C4.25241 15.25 3.91663 15.5858 3.91663 16V18.5C3.91663 19.7426 4.92399 20.75 6.16663 20.75H19.1675C20.4101 20.75 21.4175 19.7426 21.4175 18.5V16C21.4175 15.5858 21.0817 15.25 20.6675 15.25C20.2533 15.25 19.9175 15.5858 19.9175 16V18.5C19.9175 18.9142 19.5817 19.25 19.1675 19.25H6.16663C5.75241 19.25 5.41663 18.9142 5.41663 18.5V16Z"
fill=""
/>
</svg>
</div>
<div>
<h4
class="mb-1 text-sm font-medium text-gray-800 dark:text-white/90"
>
Downloads
</h4>
<span class="block text-sm text-gray-500 dark:text-gray-400">
16% Used
</span>
</div>
</div>
<div>
<span
class="mb-1 block text-right text-sm text-gray-500 dark:text-gray-400"
>
245 files
</span>
<span
class="block text-right text-sm text-gray-500 dark:text-gray-400"
>
26.40 GB
</span>
</div>
</div>
</div>
</div>
</div>

119
public/assets/tailadmin/partials/metric-group/metric-group-01.html Normal file
View File

@@ -0,0 +1,119 @@
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6">
<!-- Metric Item Start -->
<div
class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6"
>
<div
class="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-100 dark:bg-gray-800"
>
<svg
class="fill-gray-800 dark:fill-white/90"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.80443 5.60156C7.59109 5.60156 6.60749 6.58517 6.60749 7.79851C6.60749 9.01185 7.59109 9.99545 8.80443 9.99545C10.0178 9.99545 11.0014 9.01185 11.0014 7.79851C11.0014 6.58517 10.0178 5.60156 8.80443 5.60156ZM5.10749 7.79851C5.10749 5.75674 6.76267 4.10156 8.80443 4.10156C10.8462 4.10156 12.5014 5.75674 12.5014 7.79851C12.5014 9.84027 10.8462 11.4955 8.80443 11.4955C6.76267 11.4955 5.10749 9.84027 5.10749 7.79851ZM4.86252 15.3208C4.08769 16.0881 3.70377 17.0608 3.51705 17.8611C3.48384 18.0034 3.5211 18.1175 3.60712 18.2112C3.70161 18.3141 3.86659 18.3987 4.07591 18.3987H13.4249C13.6343 18.3987 13.7992 18.3141 13.8937 18.2112C13.9797 18.1175 14.017 18.0034 13.9838 17.8611C13.7971 17.0608 13.4132 16.0881 12.6383 15.3208C11.8821 14.572 10.6899 13.955 8.75042 13.955C6.81096 13.955 5.61877 14.572 4.86252 15.3208ZM3.8071 14.2549C4.87163 13.2009 6.45602 12.455 8.75042 12.455C11.0448 12.455 12.6292 13.2009 13.6937 14.2549C14.7397 15.2906 15.2207 16.5607 15.4446 17.5202C15.7658 18.8971 14.6071 19.8987 13.4249 19.8987H4.07591C2.89369 19.8987 1.73504 18.8971 2.05628 17.5202C2.28015 16.5607 2.76117 15.2906 3.8071 14.2549ZM15.3042 11.4955C14.4702 11.4955 13.7006 11.2193 13.0821 10.7533C13.3742 10.3314 13.6054 9.86419 13.7632 9.36432C14.1597 9.75463 14.7039 9.99545 15.3042 9.99545C16.5176 9.99545 17.5012 9.01185 17.5012 7.79851C17.5012 6.58517 16.5176 5.60156 15.3042 5.60156C14.7039 5.60156 14.1597 5.84239 13.7632 6.23271C13.6054 5.73284 13.3741 5.26561 13.082 4.84371C13.7006 4.37777 14.4702 4.10156 15.3042 4.10156C17.346 4.10156 19.0012 5.75674 19.0012 7.79851C19.0012 9.84027 17.346 11.4955 15.3042 11.4955ZM19.9248 19.8987H16.3901C16.7014 19.4736 16.9159 18.969 16.9827 18.3987H19.9248C20.1341 18.3987 20.2991 18.3141 20.3936 18.2112C20.4796 18.1175 20.5169 18.0034 20.4837 17.861C20.2969 17.0607 19.913 16.088 19.1382 15.3208C18.4047 14.5945 17.261 13.9921 15.4231 13.9566C15.2232 13.6945 14.9995 13.437 14.7491 13.1891C14.5144 12.9566 14.262 12.7384 13.9916 12.5362C14.3853 12.4831 14.8044 12.4549 15.2503 12.4549C17.5447 12.4549 19.1291 13.2008 20.1936 14.2549C21.2395 15.2906 21.7206 16.5607 21.9444 17.5202C22.2657 18.8971 21.107 19.8987 19.9248 19.8987Z"
fill=""
/>
</svg>
</div>
<div class="mt-5 flex items-end justify-between">
<div>
<span class="text-sm text-gray-500 dark:text-gray-400">Customers</span>
<h4
class="mt-2 text-title-sm font-bold text-gray-800 dark:text-white/90"
>
3,782
</h4>
</div>
<span
class="flex items-center gap-1 rounded-full bg-success-50 py-0.5 pl-2 pr-2.5 text-sm font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.56462 1.62393C5.70193 1.47072 5.90135 1.37432 6.12329 1.37432C6.1236 1.37432 6.12391 1.37432 6.12422 1.37432C6.31631 1.37415 6.50845 1.44731 6.65505 1.59381L9.65514 4.5918C9.94814 4.88459 9.94831 5.35947 9.65552 5.65246C9.36273 5.94546 8.88785 5.94562 8.59486 5.65283L6.87329 3.93247L6.87329 10.125C6.87329 10.5392 6.53751 10.875 6.12329 10.875C5.70908 10.875 5.37329 10.5392 5.37329 10.125L5.37329 3.93578L3.65516 5.65282C3.36218 5.94562 2.8873 5.94547 2.5945 5.65248C2.3017 5.35949 2.30185 4.88462 2.59484 4.59182L5.56462 1.62393Z"
fill=""
/>
</svg>
11.01%
</span>
</div>
</div>
<!-- Metric Item End -->
<!-- Metric Item Start -->
<div
class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6"
>
<div
class="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-100 dark:bg-gray-800"
>
<svg
class="fill-gray-800 dark:fill-white/90"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.665 3.75621C11.8762 3.65064 12.1247 3.65064 12.3358 3.75621L18.7807 6.97856L12.3358 10.2009C12.1247 10.3065 11.8762 10.3065 11.665 10.2009L5.22014 6.97856L11.665 3.75621ZM4.29297 8.19203V16.0946C4.29297 16.3787 4.45347 16.6384 4.70757 16.7654L11.25 20.0366V11.6513C11.1631 11.6205 11.0777 11.5843 10.9942 11.5426L4.29297 8.19203ZM12.75 20.037L19.2933 16.7654C19.5474 16.6384 19.7079 16.3787 19.7079 16.0946V8.19202L13.0066 11.5426C12.9229 11.5844 12.8372 11.6208 12.75 11.6516V20.037ZM13.0066 2.41456C12.3732 2.09786 11.6277 2.09786 10.9942 2.41456L4.03676 5.89319C3.27449 6.27432 2.79297 7.05342 2.79297 7.90566V16.0946C2.79297 16.9469 3.27448 17.726 4.03676 18.1071L10.9942 21.5857L11.3296 20.9149L10.9942 21.5857C11.6277 21.9024 12.3732 21.9024 13.0066 21.5857L19.9641 18.1071C20.7264 17.726 21.2079 16.9469 21.2079 16.0946V7.90566C21.2079 7.05342 20.7264 6.27432 19.9641 5.89319L13.0066 2.41456Z"
fill=""
/>
</svg>
</div>
<div class="mt-5 flex items-end justify-between">
<div>
<span class="text-sm text-gray-500 dark:text-gray-400">Orders</span>
<h4
class="mt-2 text-title-sm font-bold text-gray-800 dark:text-white/90"
>
5,359
</h4>
</div>
<span
class="flex items-center gap-1 rounded-full bg-error-50 py-0.5 pl-2 pr-2.5 text-sm font-medium text-error-600 dark:bg-error-500/15 dark:text-error-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.31462 10.3761C5.45194 10.5293 5.65136 10.6257 5.87329 10.6257C5.8736 10.6257 5.8739 10.6257 5.87421 10.6257C6.0663 10.6259 6.25845 10.5527 6.40505 10.4062L9.40514 7.4082C9.69814 7.11541 9.69831 6.64054 9.40552 6.34754C9.11273 6.05454 8.63785 6.05438 8.34486 6.34717L6.62329 8.06753L6.62329 1.875C6.62329 1.46079 6.28751 1.125 5.87329 1.125C5.45908 1.125 5.12329 1.46079 5.12329 1.875L5.12329 8.06422L3.40516 6.34719C3.11218 6.05439 2.6373 6.05454 2.3445 6.34752C2.0517 6.64051 2.05185 7.11538 2.34484 7.40818L5.31462 10.3761Z"
fill=""
/>
</svg>
9.05%
</span>
</div>
</div>
<!-- Metric Item End -->
</div>

5
public/assets/tailadmin/partials/overlay.html Normal file
View File

@@ -0,0 +1,5 @@
<div
@click="sidebarToggle = false"
:class="sidebarToggle ? 'block lg:hidden' : 'hidden'"
class="fixed w-full h-screen z-9 bg-gray-900/50"
></div>

9
public/assets/tailadmin/partials/preloader.html Normal file
View File

@@ -0,0 +1,9 @@
<div
x-show="loaded"
x-init="window.addEventListener('DOMContentLoaded', () => {setTimeout(() => loaded = false, 500)})"
class="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-white dark:bg-black"
>
<div
class="h-16 w-16 animate-spin rounded-full border-4 border-solid border-brand-500 border-t-transparent"
></div>
</div>

115
public/assets/tailadmin/partials/profile/profile-address-modal.html Normal file
View File

@@ -0,0 +1,115 @@
<div
x-show="isProfileAddressModal"
class="fixed inset-0 flex items-center justify-center p-5 overflow-y-auto z-99999"
>
<div
class="modal-close-btn fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
></div>
<div
@click.outside="isProfileAddressModal = false"
class="no-scrollbar relative flex w-full max-w-[700px] flex-col overflow-y-auto rounded-3xl bg-white p-6 dark:bg-gray-900 lg:p-11"
>
<!-- close btn -->
<button
@click="isProfileAddressModal = false"
class="transition-color absolute right-5 top-5 z-999 flex h-11 w-11 items-center justify-center rounded-full bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:bg-gray-700 dark:bg-white/[0.05] dark:text-gray-400 dark:hover:bg-white/[0.07] dark:hover:text-gray-300"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.04289 16.5418C5.65237 16.9323 5.65237 17.5655 6.04289 17.956C6.43342 18.3465 7.06658 18.3465 7.45711 17.956L11.9987 13.4144L16.5408 17.9565C16.9313 18.347 17.5645 18.347 17.955 17.9565C18.3455 17.566 18.3455 16.9328 17.955 16.5423L13.4129 12.0002L17.955 7.45808C18.3455 7.06756 18.3455 6.43439 17.955 6.04387C17.5645 5.65335 16.9313 5.65335 16.5408 6.04387L11.9987 10.586L7.45711 6.04439C7.06658 5.65386 6.43342 5.65386 6.04289 6.04439C5.65237 6.43491 5.65237 7.06808 6.04289 7.4586L10.5845 12.0002L6.04289 16.5418Z"
fill=""
/>
</svg>
</button>
<div class="px-2 pr-14">
<h4 class="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90">
Edit Address
</h4>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400 lg:mb-7">
Update your details to keep your profile up-to-date.
</p>
</div>
<form class="flex flex-col">
<div class="px-2 overflow-y-auto custom-scrollbar">
<div class="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Country
</label>
<input
type="text"
value="United States"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
City/State
</label>
<input
type="text"
value="Arizona, United States"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Postal Code
</label>
<input
type="text"
value="ERT 2489"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
TAX ID
</label>
<input
type="text"
value="AS4568384"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
</div>
</div>
<div class="flex items-center gap-3 mt-6 lg:justify-end">
<button
@click="isProfileAddressModal = false"
type="button"
class="flex w-full justify-center rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] sm:w-auto"
>
Close
</button>
<button
type="button"
class="flex w-full justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 sm:w-auto"
>
Save Changes
</button>
</div>
</form>
</div>
</div>

196
public/assets/tailadmin/partials/profile/profile-info-modal.html Normal file
View File

@@ -0,0 +1,196 @@
<div
x-show="isProfileInfoModal"
class="fixed inset-0 flex items-center justify-center p-5 overflow-y-auto z-99999"
>
<div
class="modal-close-btn fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
></div>
<div
@click.outside="isProfileInfoModal = false"
class="no-scrollbar relative w-full max-w-[700px] overflow-y-auto rounded-3xl bg-white p-4 dark:bg-gray-900 lg:p-11"
>
<!-- close btn -->
<button
@click="isProfileInfoModal = false"
class="transition-color absolute right-5 top-5 z-999 flex h-11 w-11 items-center justify-center rounded-full bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:bg-gray-700 dark:bg-white/[0.05] dark:text-gray-400 dark:hover:bg-white/[0.07] dark:hover:text-gray-300"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.04289 16.5418C5.65237 16.9323 5.65237 17.5655 6.04289 17.956C6.43342 18.3465 7.06658 18.3465 7.45711 17.956L11.9987 13.4144L16.5408 17.9565C16.9313 18.347 17.5645 18.347 17.955 17.9565C18.3455 17.566 18.3455 16.9328 17.955 16.5423L13.4129 12.0002L17.955 7.45808C18.3455 7.06756 18.3455 6.43439 17.955 6.04387C17.5645 5.65335 16.9313 5.65335 16.5408 6.04387L11.9987 10.586L7.45711 6.04439C7.06658 5.65386 6.43342 5.65386 6.04289 6.04439C5.65237 6.43491 5.65237 7.06808 6.04289 7.4586L10.5845 12.0002L6.04289 16.5418Z"
fill=""
/>
</svg>
</button>
<div class="px-2 pr-14">
<h4 class="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90">
Edit Personal Information
</h4>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400 lg:mb-7">
Update your details to keep your profile up-to-date.
</p>
</div>
<form class="flex flex-col">
<div class="custom-scrollbar h-[450px] overflow-y-auto px-2">
<div>
<h5
class="mb-5 text-lg font-medium text-gray-800 dark:text-white/90 lg:mb-6"
>
Social Links
</h5>
<div class="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Facebook
</label>
<input
type="text"
value="https://facebook.com/PimjoHQ"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
X.com
</label>
<input
type="text"
value="https://x.com/PimjoHQ"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Linkedin
</label>
<input
type="text"
value="https://linkedin.com/PimjoHQ"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div>
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Instagram
</label>
<input
type="text"
value="https://instagram.com/PimjoHQ"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
</div>
</div>
<div class="mt-7">
<h5
class="mb-5 text-lg font-medium text-gray-800 dark:text-white/90 lg:mb-6"
>
Personal Information
</h5>
<div class="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
<div class="col-span-2 lg:col-span-1">
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
First Name
</label>
<input
type="text"
value="Musharof"
class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div class="col-span-2 lg:col-span-1">
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Last Name
</label>
<input
type="text"
value="Chowdhury"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div class="col-span-2 lg:col-span-1">
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Email Address
</label>
<input
type="text"
value="randomuser@pimjo.com"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div class="col-span-2 lg:col-span-1">
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Phone
</label>
<input
type="text"
value="+09 363 398 46"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div class="col-span-2">
<label
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
>
Bio
</label>
<input
type="text"
value="Team Manager"
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-3 px-2 mt-6 lg:justify-end">
<button
@click="isProfileInfoModal = false"
type="button"
class="flex w-full justify-center rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] sm:w-auto"
>
Close
</button>
<button
type="button"
class="flex w-full justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 sm:w-auto"
>
Save Changes
</button>
</div>
</form>
</div>
</div>

779
public/assets/tailadmin/partials/sidebar.html Normal file
View File

@@ -0,0 +1,779 @@
<aside
:class="sidebarToggle ? 'translate-x-0 lg:w-[90px]' : '-translate-x-full'"
class="sidebar fixed left-0 top-0 z-9999 flex h-screen w-[290px] flex-col overflow-y-hidden border-r border-gray-200 bg-white px-5 dark:border-gray-800 dark:bg-black lg:static lg:translate-x-0"
>
<!-- SIDEBAR HEADER -->
<div
:class="sidebarToggle ? 'justify-center' : 'justify-between'"
class="flex items-center gap-2 pt-8 sidebar-header pb-7"
>
<a href="index.html">
<span class="logo" :class="sidebarToggle ? 'hidden' : ''">
<img class="dark:hidden" src="./images/logo/logo.svg" alt="Logo" />
<img
class="hidden dark:block"
src="./images/logo/logo-dark.svg"
alt="Logo"
/>
</span>
<img
class="logo-icon"
:class="sidebarToggle ? 'lg:block' : 'hidden'"
src="./images/logo/logo-icon.svg"
alt="Logo"
/>
</a>
</div>
<!-- SIDEBAR HEADER -->
<div
class="flex flex-col overflow-y-auto duration-300 ease-linear no-scrollbar"
>
<!-- Sidebar Menu -->
<nav x-data="{selected: $persist('Dashboard')}">
<!-- Menu Group -->
<div>
<h3 class="mb-4 text-xs uppercase leading-[20px] text-gray-400">
<span
class="menu-group-title"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
MENU
</span>
<svg
:class="sidebarToggle ? 'lg:block hidden' : 'hidden'"
class="mx-auto fill-current menu-group-icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.99915 10.2451C6.96564 10.2451 7.74915 11.0286 7.74915 11.9951V12.0051C7.74915 12.9716 6.96564 13.7551 5.99915 13.7551C5.03265 13.7551 4.24915 12.9716 4.24915 12.0051V11.9951C4.24915 11.0286 5.03265 10.2451 5.99915 10.2451ZM17.9991 10.2451C18.9656 10.2451 19.7491 11.0286 19.7491 11.9951V12.0051C19.7491 12.9716 18.9656 13.7551 17.9991 13.7551C17.0326 13.7551 16.2491 12.9716 16.2491 12.0051V11.9951C16.2491 11.0286 17.0326 10.2451 17.9991 10.2451ZM13.7491 11.9951C13.7491 11.0286 12.9656 10.2451 11.9991 10.2451C11.0326 10.2451 10.2491 11.0286 10.2491 11.9951V12.0051C10.2491 12.9716 11.0326 13.7551 11.9991 13.7551C12.9656 13.7551 13.7491 12.9716 13.7491 12.0051V11.9951Z"
fill=""
/>
</svg>
</h3>
<ul class="flex flex-col gap-4 mb-6">
<!-- Menu Item Dashboard -->
<li>
<a
href="#"
@click.prevent="selected = (selected === 'Dashboard' ? '':'Dashboard')"
class="menu-item group"
:class=" (selected === 'Dashboard') || (page === 'ecommerce' || page === 'analytics' || page === 'marketing' || page === 'crm' || page === 'stocks') ? 'menu-item-active' : 'menu-item-inactive'"
>
<svg
:class="(selected === 'Dashboard') || (page === 'ecommerce' || page === 'analytics' || page === 'marketing' || page === 'crm' || page === 'stocks') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V8.99998C3.25 10.2426 4.25736 11.25 5.5 11.25H9C10.2426 11.25 11.25 10.2426 11.25 8.99998V5.5C11.25 4.25736 10.2426 3.25 9 3.25H5.5ZM4.75 5.5C4.75 5.08579 5.08579 4.75 5.5 4.75H9C9.41421 4.75 9.75 5.08579 9.75 5.5V8.99998C9.75 9.41419 9.41421 9.74998 9 9.74998H5.5C5.08579 9.74998 4.75 9.41419 4.75 8.99998V5.5ZM5.5 12.75C4.25736 12.75 3.25 13.7574 3.25 15V18.5C3.25 19.7426 4.25736 20.75 5.5 20.75H9C10.2426 20.75 11.25 19.7427 11.25 18.5V15C11.25 13.7574 10.2426 12.75 9 12.75H5.5ZM4.75 15C4.75 14.5858 5.08579 14.25 5.5 14.25H9C9.41421 14.25 9.75 14.5858 9.75 15V18.5C9.75 18.9142 9.41421 19.25 9 19.25H5.5C5.08579 19.25 4.75 18.9142 4.75 18.5V15ZM12.75 5.5C12.75 4.25736 13.7574 3.25 15 3.25H18.5C19.7426 3.25 20.75 4.25736 20.75 5.5V8.99998C20.75 10.2426 19.7426 11.25 18.5 11.25H15C13.7574 11.25 12.75 10.2426 12.75 8.99998V5.5ZM15 4.75C14.5858 4.75 14.25 5.08579 14.25 5.5V8.99998C14.25 9.41419 14.5858 9.74998 15 9.74998H18.5C18.9142 9.74998 19.25 9.41419 19.25 8.99998V5.5C19.25 5.08579 18.9142 4.75 18.5 4.75H15ZM15 12.75C13.7574 12.75 12.75 13.7574 12.75 15V18.5C12.75 19.7426 13.7574 20.75 15 20.75H18.5C19.7426 20.75 20.75 19.7427 20.75 18.5V15C20.75 13.7574 19.7426 12.75 18.5 12.75H15ZM14.25 15C14.25 14.5858 14.5858 14.25 15 14.25H18.5C18.9142 14.25 19.25 14.5858 19.25 15V18.5C19.25 18.9142 18.9142 19.25 18.5 19.25H15C14.5858 19.25 14.25 18.9142 14.25 18.5V15Z"
fill=""
/>
</svg>
<span
class="menu-item-text"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
Dashboard
</span>
<svg
class="menu-item-arrow"
:class="[(selected === 'Dashboard') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
stroke=""
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<!-- Dropdown Menu Start -->
<div
class="overflow-hidden transform translate"
:class="(selected === 'Dashboard') ? 'block' :'hidden'"
>
<ul
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
class="flex flex-col gap-1 mt-2 menu-dropdown pl-9"
>
<li>
<a
href="index.html"
class="menu-dropdown-item group"
:class="page === 'ecommerce' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
eCommerce
</a>
</li>
</ul>
</div>
<!-- Dropdown Menu End -->
</li>
<!-- Menu Item Dashboard -->
<!-- Menu Item Calendar -->
<li>
<a
href="calendar.html"
@click="selected = (selected === 'Calendar' ? '':'Calendar')"
class="menu-item group"
:class=" (selected === 'Calendar') && (page === 'calendar') ? 'menu-item-active' : 'menu-item-inactive'"
>
<svg
:class="(selected === 'Calendar') && (page === 'calendar') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8 2C8.41421 2 8.75 2.33579 8.75 2.75V3.75H15.25V2.75C15.25 2.33579 15.5858 2 16 2C16.4142 2 16.75 2.33579 16.75 2.75V3.75H18.5C19.7426 3.75 20.75 4.75736 20.75 6V9V19C20.75 20.2426 19.7426 21.25 18.5 21.25H5.5C4.25736 21.25 3.25 20.2426 3.25 19V9V6C3.25 4.75736 4.25736 3.75 5.5 3.75H7.25V2.75C7.25 2.33579 7.58579 2 8 2ZM8 5.25H5.5C5.08579 5.25 4.75 5.58579 4.75 6V8.25H19.25V6C19.25 5.58579 18.9142 5.25 18.5 5.25H16H8ZM19.25 9.75H4.75V19C4.75 19.4142 5.08579 19.75 5.5 19.75H18.5C18.9142 19.75 19.25 19.4142 19.25 19V9.75Z"
fill=""
/>
</svg>
<span
class="menu-item-text"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
Calendar
</span>
</a>
</li>
<!-- Menu Item Calendar -->
<!-- Menu Item Profile -->
<li>
<a
href="profile.html"
@click="selected = (selected === 'Profile' ? '':'Profile')"
class="menu-item group"
:class=" (selected === 'Profile') && (page === 'profile') ? 'menu-item-active' : 'menu-item-inactive'"
>
<svg
:class="(selected === 'Profile') && (page === 'profile') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.1526 4.3002 16.1184 5.61936 17.616C6.17279 15.3096 8.24852 13.5955 10.7246 13.5955H13.2746C15.7509 13.5955 17.8268 15.31 18.38 17.6167C19.6996 16.119 20.5 14.153 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM17.0246 18.8566V18.8455C17.0246 16.7744 15.3457 15.0955 13.2746 15.0955H10.7246C8.65354 15.0955 6.97461 16.7744 6.97461 18.8455V18.856C8.38223 19.8895 10.1198 20.5 12 20.5C13.8798 20.5 15.6171 19.8898 17.0246 18.8566ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9991 7.25C10.8847 7.25 9.98126 8.15342 9.98126 9.26784C9.98126 10.3823 10.8847 11.2857 11.9991 11.2857C13.1135 11.2857 14.0169 10.3823 14.0169 9.26784C14.0169 8.15342 13.1135 7.25 11.9991 7.25ZM8.48126 9.26784C8.48126 7.32499 10.0563 5.75 11.9991 5.75C13.9419 5.75 15.5169 7.32499 15.5169 9.26784C15.5169 11.2107 13.9419 12.7857 11.9991 12.7857C10.0563 12.7857 8.48126 11.2107 8.48126 9.26784Z"
fill=""
/>
</svg>
<span
class="menu-item-text"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
User Profile
</span>
</a>
</li>
<!-- Menu Item Profile -->
<!-- Menu Item Forms -->
<li>
<a
href="#"
@click.prevent="selected = (selected === 'Forms' ? '':'Forms')"
class="menu-item group"
:class=" (selected === 'Forms') || (page === 'formElements' || page === 'formLayout' || page === 'proFormElements' || page === 'proFormLayout') ? 'menu-item-active' : 'menu-item-inactive'"
>
<svg
:class="(selected === 'Forms') || (page === 'formElements' || page === 'formLayout' || page === 'proFormElements' || page === 'proFormLayout') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V18.5C3.25 19.7426 4.25736 20.75 5.5 20.75H18.5001C19.7427 20.75 20.7501 19.7426 20.7501 18.5V5.5C20.7501 4.25736 19.7427 3.25 18.5001 3.25H5.5ZM4.75 5.5C4.75 5.08579 5.08579 4.75 5.5 4.75H18.5001C18.9143 4.75 19.2501 5.08579 19.2501 5.5V18.5C19.2501 18.9142 18.9143 19.25 18.5001 19.25H5.5C5.08579 19.25 4.75 18.9142 4.75 18.5V5.5ZM6.25005 9.7143C6.25005 9.30008 6.58583 8.9643 7.00005 8.9643L17 8.96429C17.4143 8.96429 17.75 9.30008 17.75 9.71429C17.75 10.1285 17.4143 10.4643 17 10.4643L7.00005 10.4643C6.58583 10.4643 6.25005 10.1285 6.25005 9.7143ZM6.25005 14.2857C6.25005 13.8715 6.58583 13.5357 7.00005 13.5357H17C17.4143 13.5357 17.75 13.8715 17.75 14.2857C17.75 14.6999 17.4143 15.0357 17 15.0357H7.00005C6.58583 15.0357 6.25005 14.6999 6.25005 14.2857Z"
fill=""
/>
</svg>
<span
class="menu-item-text"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
Forms
</span>
<svg
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
:class="[(selected === 'Forms') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
stroke=""
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<!-- Dropdown Menu Start -->
<div
class="overflow-hidden transform translate"
:class="(selected === 'Forms') ? 'block' :'hidden'"
>
<ul
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
class="flex flex-col gap-1 mt-2 menu-dropdown pl-9"
>
<li>
<a
href="form-elements.html"
class="menu-dropdown-item group"
:class="page === 'formElements' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Form Elements
</a>
</li>
</ul>
</div>
<!-- Dropdown Menu End -->
</li>
<!-- Menu Item Forms -->
<!-- Menu Item Tables -->
<li>
<a
href="#"
@click.prevent="selected = (selected === 'Tables' ? '':'Tables')"
class="menu-item group"
:class="(selected === 'Tables') || (page === 'basicTables' || page === 'dataTables') ? 'menu-item-active' : 'menu-item-inactive'"
>
<svg
:class="(selected === 'Tables') || (page === 'basicTables' || page === 'dataTables') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.25 5.5C3.25 4.25736 4.25736 3.25 5.5 3.25H18.5C19.7426 3.25 20.75 4.25736 20.75 5.5V18.5C20.75 19.7426 19.7426 20.75 18.5 20.75H5.5C4.25736 20.75 3.25 19.7426 3.25 18.5V5.5ZM5.5 4.75C5.08579 4.75 4.75 5.08579 4.75 5.5V8.58325L19.25 8.58325V5.5C19.25 5.08579 18.9142 4.75 18.5 4.75H5.5ZM19.25 10.0833H15.416V13.9165H19.25V10.0833ZM13.916 10.0833L10.083 10.0833V13.9165L13.916 13.9165V10.0833ZM8.58301 10.0833H4.75V13.9165H8.58301V10.0833ZM4.75 18.5V15.4165H8.58301V19.25H5.5C5.08579 19.25 4.75 18.9142 4.75 18.5ZM10.083 19.25V15.4165L13.916 15.4165V19.25H10.083ZM15.416 19.25V15.4165H19.25V18.5C19.25 18.9142 18.9142 19.25 18.5 19.25H15.416Z"
fill=""
/>
</svg>
<span
class="menu-item-text"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
Tables
</span>
<svg
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
:class="[(selected === 'Tables') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
stroke=""
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<!-- Dropdown Menu Start -->
<div
class="overflow-hidden transform translate"
:class="(selected === 'Tables') ? 'block' :'hidden'"
>
<ul
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
class="flex flex-col gap-1 mt-2 menu-dropdown pl-9"
>
<li>
<a
href="basic-tables.html"
class="menu-dropdown-item group"
:class="page === 'basicTables' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Basic Tables
</a>
</li>
</ul>
</div>
<!-- Dropdown Menu End -->
</li>
<!-- Menu Item Tables -->
<!-- Menu Item Pages -->
<li>
<a
href="#"
@click.prevent="selected = (selected === 'Pages' ? '':'Pages')"
class="menu-item group"
:class="(selected === 'Pages') || (page === 'fileManager' || page === 'pricingTables' || page === 'blank' || page === 'page404' || page === 'page500' || page === 'page503' || page === 'success' || page === 'faq' || page === 'comingSoon' || page === 'maintenance') ? 'menu-item-active' : 'menu-item-inactive'"
>
<svg
:class="(selected === 'Pages') || (page === 'fileManager' || page === 'pricingTables' || page === 'blank' || page === 'page404' || page === 'page500' || page === 'page503' || page === 'success' || page === 'faq' || page === 'comingSoon' || page === 'maintenance') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.50391 4.25C8.50391 3.83579 8.83969 3.5 9.25391 3.5H15.2777C15.4766 3.5 15.6674 3.57902 15.8081 3.71967L18.2807 6.19234C18.4214 6.333 18.5004 6.52376 18.5004 6.72268V16.75C18.5004 17.1642 18.1646 17.5 17.7504 17.5H16.248V17.4993H14.748V17.5H9.25391C8.83969 17.5 8.50391 17.1642 8.50391 16.75V4.25ZM14.748 19H9.25391C8.01126 19 7.00391 17.9926 7.00391 16.75V6.49854H6.24805C5.83383 6.49854 5.49805 6.83432 5.49805 7.24854V19.75C5.49805 20.1642 5.83383 20.5 6.24805 20.5H13.998C14.4123 20.5 14.748 20.1642 14.748 19.75L14.748 19ZM7.00391 4.99854V4.25C7.00391 3.00736 8.01127 2 9.25391 2H15.2777C15.8745 2 16.4468 2.23705 16.8687 2.659L19.3414 5.13168C19.7634 5.55364 20.0004 6.12594 20.0004 6.72268V16.75C20.0004 17.9926 18.9931 19 17.7504 19H16.248L16.248 19.75C16.248 20.9926 15.2407 22 13.998 22H6.24805C5.00541 22 3.99805 20.9926 3.99805 19.75V7.24854C3.99805 6.00589 5.00541 4.99854 6.24805 4.99854H7.00391Z"
fill=""
/>
</svg>
<span
class="menu-item-text"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
Pages
</span>
<svg
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
:class="[(selected === 'Pages') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
stroke=""
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<!-- Dropdown Menu Start -->
<div
class="overflow-hidden transform translate"
:class="(selected === 'Pages') ? 'block' :'hidden'"
>
<ul
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
class="flex flex-col gap-1 mt-2 menu-dropdown pl-9"
>
<li>
<a
href="blank.html"
class="menu-dropdown-item group"
:class="page === 'blank' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Blank Page
</a>
</li>
<li>
<a
href="404.html"
class="menu-dropdown-item group"
:class="page === 'page404' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
404 Error
</a>
</li>
</ul>
</div>
<!-- Dropdown Menu End -->
</li>
<!-- Menu Item Pages -->
</ul>
</div>
<!-- Others Group -->
<div>
<h3 class="mb-4 text-xs uppercase leading-[20px] text-gray-400">
<span
class="menu-group-title"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
others
</span>
<svg
:class="sidebarToggle ? 'lg:block hidden' : 'hidden'"
class="mx-auto fill-current menu-group-icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.99915 10.2451C6.96564 10.2451 7.74915 11.0286 7.74915 11.9951V12.0051C7.74915 12.9716 6.96564 13.7551 5.99915 13.7551C5.03265 13.7551 4.24915 12.9716 4.24915 12.0051V11.9951C4.24915 11.0286 5.03265 10.2451 5.99915 10.2451ZM17.9991 10.2451C18.9656 10.2451 19.7491 11.0286 19.7491 11.9951V12.0051C19.7491 12.9716 18.9656 13.7551 17.9991 13.7551C17.0326 13.7551 16.2491 12.9716 16.2491 12.0051V11.9951C16.2491 11.0286 17.0326 10.2451 17.9991 10.2451ZM13.7491 11.9951C13.7491 11.0286 12.9656 10.2451 11.9991 10.2451C11.0326 10.2451 10.2491 11.0286 10.2491 11.9951V12.0051C10.2491 12.9716 11.0326 13.7551 11.9991 13.7551C12.9656 13.7551 13.7491 12.9716 13.7491 12.0051V11.9951Z"
fill=""
/>
</svg>
</h3>
<ul class="flex flex-col gap-4 mb-6">
<!-- Menu Item Charts -->
<li>
<a
href="#"
@click.prevent="selected = (selected === 'Charts' ? '':'Charts')"
class="menu-item group"
:class="(selected === 'Charts') || (page === 'lineChart' || page === 'barChart' || page === 'pieChart') ? 'menu-item-active' : 'menu-item-inactive'"
>
<svg
:class="(selected === 'Charts') || (page === 'lineChart' || page === 'barChart' || page === 'pieChart') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 2C11.5858 2 11.25 2.33579 11.25 2.75V12C11.25 12.4142 11.5858 12.75 12 12.75H21.25C21.6642 12.75 22 12.4142 22 12C22 6.47715 17.5228 2 12 2ZM12.75 11.25V3.53263C13.2645 3.57761 13.7659 3.66843 14.25 3.80098V3.80099C15.6929 4.19606 16.9827 4.96184 18.0104 5.98959C19.0382 7.01734 19.8039 8.30707 20.199 9.75C20.3316 10.2341 20.4224 10.7355 20.4674 11.25H12.75ZM2 12C2 7.25083 5.31065 3.27489 9.75 2.25415V3.80099C6.14748 4.78734 3.5 8.0845 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C15.9155 20.5 19.2127 17.8525 20.199 14.25H21.7459C20.7251 18.6894 16.7492 22 12 22C6.47715 22 2 17.5229 2 12Z"
fill=""
/>
</svg>
<span
class="menu-item-text"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
Charts
</span>
<svg
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
:class="[(selected === 'Charts') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
stroke=""
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<!-- Dropdown Menu Start -->
<div
class="overflow-hidden transform translate"
:class="(selected === 'Charts') ? 'block' :'hidden'"
>
<ul
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
class="flex flex-col gap-1 mt-2 menu-dropdown pl-9"
>
<li>
<a
href="line-chart.html"
class="menu-dropdown-item group"
:class="page === 'lineChart' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Line Chart
</a>
</li>
<li>
<a
href="bar-chart.html"
class="menu-dropdown-item group"
:class="page === 'barChart' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Bar Chart
</a>
</li>
</ul>
</div>
<!-- Dropdown Menu End -->
</li>
<!-- Menu Item Charts -->
<!-- Menu Item Ui Elements -->
<li>
<a
href="#"
@click.prevent="selected = (selected === 'UIElements' ? '':'UIElements')"
class="menu-item group"
:class="(selected === 'UIElements') || (page === 'alerts' || page === 'avatars' || page === 'badge' || page === 'buttons' || page === 'buttonsGroup' || page === 'cards'|| page === 'carousel' || page === 'dropdowns' || page === 'images' || page === 'list' || page === 'modals' || page === 'videos') ? 'menu-item-active' : 'menu-item-inactive'"
>
<svg
:class="(selected === 'UIElements') || (page === 'alerts' || page === 'avatars' || page === 'badge' || page === 'breadcrumb' || page === 'buttons' || page === 'buttonsGroup' || page === 'cards'|| page === 'carousel' || page === 'dropdowns' || page === 'images' || page === 'list' || page === 'modals' || page === 'notifications' || page === 'popovers' || page === 'progress' || page === 'spinners' || page === 'tooltips' || page === 'videos') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.665 3.75618C11.8762 3.65061 12.1247 3.65061 12.3358 3.75618L18.7807 6.97853L12.3358 10.2009C12.1247 10.3064 11.8762 10.3064 11.665 10.2009L5.22014 6.97853L11.665 3.75618ZM4.29297 8.19199V16.0946C4.29297 16.3787 4.45347 16.6384 4.70757 16.7654L11.25 20.0365V11.6512C11.1631 11.6205 11.0777 11.5843 10.9942 11.5425L4.29297 8.19199ZM12.75 20.037L19.2933 16.7654C19.5474 16.6384 19.7079 16.3787 19.7079 16.0946V8.19199L13.0066 11.5425C12.9229 11.5844 12.8372 11.6207 12.75 11.6515V20.037ZM13.0066 2.41453C12.3732 2.09783 11.6277 2.09783 10.9942 2.41453L4.03676 5.89316C3.27449 6.27429 2.79297 7.05339 2.79297 7.90563V16.0946C2.79297 16.9468 3.27448 17.7259 4.03676 18.1071L10.9942 21.5857L11.3296 20.9149L10.9942 21.5857C11.6277 21.9024 12.3732 21.9024 13.0066 21.5857L19.9641 18.1071C20.7264 17.7259 21.2079 16.9468 21.2079 16.0946V7.90563C21.2079 7.05339 20.7264 6.27429 19.9641 5.89316L13.0066 2.41453Z"
fill=""
/>
</svg>
<span
class="menu-item-text"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
UI Elements
</span>
<svg
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
:class="[(selected === 'UIElements') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
stroke=""
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<!-- Dropdown Menu Start -->
<div
class="overflow-hidden transform translate"
:class="(selected === 'UIElements') ? 'block' :'hidden'"
>
<ul
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
class="flex flex-col gap-1 mt-2 menu-dropdown pl-9"
>
<li>
<a
href="alerts.html"
class="menu-dropdown-item group"
:class="page === 'alerts' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Alerts
</a>
</li>
<li>
<a
href="avatars.html"
class="menu-dropdown-item group"
:class="page === 'avatars' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Avatars
</a>
</li>
<li>
<a
href="badge.html"
class="menu-dropdown-item group"
:class="page === 'badge' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Badges
</a>
</li>
<li>
<a
href="buttons.html"
class="menu-dropdown-item group"
:class="page === 'buttons' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Buttons
</a>
</li>
<li>
<a
href="images.html"
class="menu-dropdown-item group"
:class="page === 'images' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Images
</a>
</li>
<li>
<a
href="videos.html"
class="menu-dropdown-item group"
:class="page === 'videos' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Videos
</a>
</li>
</ul>
</div>
<!-- Dropdown Menu End -->
</li>
<!-- Menu Item Ui Elements -->
<!-- Menu Item Authentication -->
<li>
<a
href="#"
@click.prevent="selected = (selected === 'Authentication' ? '':'Authentication')"
class="menu-item group"
:class="(selected === 'Authentication') || (page === 'basicChart' || page === 'advancedChart') ? 'menu-item-active' : 'menu-item-inactive'"
>
<svg
:class="(selected === 'Authentication') || (page === 'basicChart' || page === 'advancedChart') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14 2.75C14 2.33579 14.3358 2 14.75 2C15.1642 2 15.5 2.33579 15.5 2.75V5.73291L17.75 5.73291H19C19.4142 5.73291 19.75 6.0687 19.75 6.48291C19.75 6.89712 19.4142 7.23291 19 7.23291H18.5L18.5 12.2329C18.5 15.5691 15.9866 18.3183 12.75 18.6901V21.25C12.75 21.6642 12.4142 22 12 22C11.5858 22 11.25 21.6642 11.25 21.25V18.6901C8.01342 18.3183 5.5 15.5691 5.5 12.2329L5.5 7.23291H5C4.58579 7.23291 4.25 6.89712 4.25 6.48291C4.25 6.0687 4.58579 5.73291 5 5.73291L6.25 5.73291L8.5 5.73291L8.5 2.75C8.5 2.33579 8.83579 2 9.25 2C9.66421 2 10 2.33579 10 2.75L10 5.73291L14 5.73291V2.75ZM7 7.23291L7 12.2329C7 14.9943 9.23858 17.2329 12 17.2329C14.7614 17.2329 17 14.9943 17 12.2329L17 7.23291L7 7.23291Z"
fill=""
/>
</svg>
<span
class="menu-item-text"
:class="sidebarToggle ? 'lg:hidden' : ''"
>
Authentication
</span>
<svg
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
:class="[(selected === 'Authentication') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
stroke=""
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<!-- Dropdown Menu Start -->
<div
class="overflow-hidden transform translate"
:class="(selected === 'Authentication') ? 'block' :'hidden'"
>
<ul
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
class="flex flex-col gap-1 mt-2 menu-dropdown pl-9"
>
<li>
<a
href="signin.html"
class="menu-dropdown-item group"
:class="page === 'signin' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Sign In
</a>
</li>
<li>
<a
href="signup.html"
class="menu-dropdown-item group"
:class="page === 'signup' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
>
Sign Up
</a>
</li>
</ul>
</div>
<!-- Dropdown Menu End -->
</li>
<!-- Menu Item Authentication -->
</ul>
</div>
</nav>
<!-- Sidebar Menu -->
<!-- Promo Box -->
<div
:class="sidebarToggle ? 'lg:hidden' : ''"
class="mx-auto mb-10 w-full max-w-60 rounded-2xl bg-gray-50 px-4 py-5 text-center dark:bg-white/[0.03]"
>
<h3 class="mb-2 font-semibold text-gray-900 dark:text-white">
#1 Tailwind CSS Dashboard
</h3>
<p class="mb-4 text-gray-500 text-theme-sm dark:text-gray-400">
Leading Tailwind CSS Admin Template with 400+ UI Component and Pages.
</p>
<a
href="https://tailadmin.com/pricing"
target="_blank"
rel="nofollow"
class="flex items-center justify-center p-3 font-medium text-white rounded-lg bg-brand-500 text-theme-sm hover:bg-brand-600"
>
Purchase Plan
</a>
</div>
<!-- Promo Box -->
</div>
</aside>

341
public/assets/tailadmin/partials/table/table-01.html Normal file
View File

@@ -0,0 +1,341 @@
<div
class="overflow-hidden rounded-2xl border border-gray-200 bg-white px-4 pb-3 pt-4 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6"
>
<div
class="flex flex-col gap-2 mb-4 sm:flex-row sm:items-center sm:justify-between"
>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
Recent Orders
</h3>
</div>
<div class="flex items-center gap-3">
<button
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
>
<svg
class="stroke-current fill-white dark:fill-gray-800"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.29004 5.90393H17.7067"
stroke=""
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M17.7075 14.0961H2.29085"
stroke=""
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.0826 3.33331C13.5024 3.33331 14.6534 4.48431 14.6534 5.90414C14.6534 7.32398 13.5024 8.47498 12.0826 8.47498C10.6627 8.47498 9.51172 7.32398 9.51172 5.90415C9.51172 4.48432 10.6627 3.33331 12.0826 3.33331Z"
fill=""
stroke=""
stroke-width="1.5"
/>
<path
d="M7.91745 11.525C6.49762 11.525 5.34662 12.676 5.34662 14.0959C5.34661 15.5157 6.49762 16.6667 7.91745 16.6667C9.33728 16.6667 10.4883 15.5157 10.4883 14.0959C10.4883 12.676 9.33728 11.525 7.91745 11.525Z"
fill=""
stroke=""
stroke-width="1.5"
/>
</svg>
Filter
</button>
<button
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
>
See all
</button>
</div>
</div>
<div class="w-full overflow-x-auto">
<table class="min-w-full">
<!-- table header start -->
<thead>
<tr class="border-gray-100 border-y dark:border-gray-800">
<th class="py-3">
<div class="flex items-center">
<p
class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
>
Products
</p>
</div>
</th>
<th class="py-3">
<div class="flex items-center">
<p
class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
>
Category
</p>
</div>
</th class="py-3">
<th class="py-3">
<div class="flex items-center">
<p
class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
>
Price
</p>
</div>
</th>
<th class="py-3">
<div class="flex items-center col-span-2">
<p
class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
>
Status
</p>
</div>
</th>
</tr>
</thead>
<!-- table header end -->
<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
<tr>
<td class="py-3">
<div class="flex items-center">
<div class="flex items-center gap-3">
<div class="h-[50px] w-[50px] overflow-hidden rounded-md">
<img src="./images/product/product-01.jpg" alt="Product" />
</div>
<div>
<p
class="font-medium text-gray-800 text-theme-sm dark:text-white/90"
>
Macbook pro 13”
</p>
<span class="text-gray-500 text-theme-xs dark:text-gray-400">
2 Variants
</span>
</div>
</div>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
Laptop
</p>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
$2399.00
</p>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p
class="rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500"
>
Delivered
</p>
</div>
</td>
</tr>
<!-- table item -->
<tr>
<td class="py-3">
<div class="flex items-center">
<div class="flex items-center gap-3">
<div class="h-[50px] w-[50px] overflow-hidden rounded-md">
<img src="./images/product/product-02.jpg" alt="Product" />
</div>
<div>
<p
class="font-medium text-gray-800 text-theme-sm dark:text-white/90"
>
Apple Watch Ultra
</p>
<span class="text-gray-500 text-theme-xs dark:text-gray-400">
1 Variants
</span>
</div>
</div>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
Watch
</p>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
$879.00
</p>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p
class="rounded-full bg-warning-50 px-2 py-0.5 text-theme-xs font-medium text-warning-600 dark:bg-warning-500/15 dark:text-orange-400"
>
Pending
</p>
</div>
</td>
</tr>
<!-- table item -->
<tr>
<td class="py-3">
<div class="flex items-center">
<div class="flex items-center gap-3">
<div class="h-[50px] w-[50px] overflow-hidden rounded-md">
<img src="./images/product/product-03.jpg" alt="Product" />
</div>
<div>
<p
class="font-medium text-gray-800 text-theme-sm dark:text-white/90"
>
iPhone 15 Pro Max
</p>
<span class="text-gray-500 text-theme-xs dark:text-gray-400">
2 Variants
</span>
</div>
</div>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
SmartPhone
</p>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
$1869.00
</p>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p
class="rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500"
>
Delivered
</p>
</div>
</td>
</tr>
<!-- table item -->
<tr>
<td class="py-3">
<div class="flex items-center">
<div class="flex items-center gap-3">
<div class="h-[50px] w-[50px] overflow-hidden rounded-md">
<img src="./images/product/product-04.jpg" alt="Product" />
</div>
<div>
<p
class="font-medium text-gray-800 text-theme-sm dark:text-white/90"
>
iPad Pro 3rd Gen
</p>
<span class="text-gray-500 text-theme-xs dark:text-gray-400">
2 Variants
</span>
</div>
</div>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
Electronics
</p>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
$1699.00
</p>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p
class="rounded-full bg-error-50 px-2 py-0.5 text-theme-xs font-medium text-error-600 dark:bg-error-500/15 dark:text-error-500"
>
Canceled
</p>
</div>
</td>
</tr>
<!-- table item -->
<tr>
<td class="py-3">
<div class="flex items-center">
<div class="flex items-center gap-3">
<div class="h-[50px] w-[50px] overflow-hidden rounded-md">
<img src="./images/product/product-05.jpg" alt="Product" />
</div>
<div>
<p
class="font-medium text-gray-800 text-theme-sm dark:text-white/90"
>
Airpods Pro 2nd Gen
</p>
<span class="text-gray-500 text-theme-xs dark:text-gray-400">
1 Variants
</span>
</div>
</div>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
Accessories
</p>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
$240.00
</p>
</div>
</td>
<td class="py-3">
<div class="flex items-center">
<p
class="rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500"
>
Delivered
</p>
</div>
</td>
</tr>
<!-- table body end -->
</tbody>
</table>
</div>
</div>

381
public/assets/tailadmin/partials/table/table-06.html Normal file
View File

@@ -0,0 +1,381 @@
<div
class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
>
<div class="max-w-full overflow-x-auto">
<table class="min-w-full">
<!-- table header start -->
<thead>
<tr class="border-b border-gray-100 dark:border-gray-800">
<th class="px-5 py-3 sm:px-6">
<div class="flex items-center">
<p
class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
>
User
</p>
</div>
</th>
<th class="px-5 py-3 sm:px-6">
<div class="flex items-center">
<p
class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
>
Project Name
</p>
</div>
</th>
<th class="px-5 py-3 sm:px-6">
<div class="flex items-center">
<p
class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
>
Team
</p>
</div>
</th>
<th class="px-5 py-3 sm:px-6">
<div class="flex items-center">
<p
class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
>
Status
</p>
</div>
</th>
<th class="px-5 py-3 sm:px-6">
<div class="flex items-center">
<p
class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
>
Budget
</p>
</div>
</th>
</tr>
</thead>
<!-- table header end -->
<!-- table body start -->
<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
<tr>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex items-center gap-3">
<div class="w-10 h-10 overflow-hidden rounded-full">
<img src="./images/user/user-17.jpg" alt="brand" />
</div>
<div>
<span
class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
>
Lindsey Curtis
</span>
<span
class="block text-gray-500 text-theme-xs dark:text-gray-400"
>
Web Designer
</span>
</div>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
Agency Website
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex -space-x-2">
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-22.jpg" alt="user" />
</div>
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-23.jpg" alt="user" />
</div>
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-24.jpg" alt="user" />
</div>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p
class="rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500"
>
Active
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">3.9K</p>
</div>
</td>
</tr>
<tr>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex items-center gap-3">
<div class="w-10 h-10 overflow-hidden rounded-full">
<img src="./images/user/user-18.jpg" alt="brand" />
</div>
<div>
<span
class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
>
Kaiya George
</span>
<span
class="block text-gray-500 text-theme-xs dark:text-gray-400"
>
Project Manager
</span>
</div>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
Technology
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex -space-x-2">
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-25.jpg" alt="user" />
</div>
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-26.jpg" alt="user" />
</div>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p
class="rounded-full bg-warning-50 px-2 py-0.5 text-theme-xs font-medium text-warning-700 dark:bg-warning-500/15 dark:text-warning-400"
>
Pending
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
24.9K
</p>
</div>
</td>
</tr>
<tr>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex items-center gap-3">
<div class="w-10 h-10 overflow-hidden rounded-full">
<img src="./images/user/user-19.jpg" alt="brand" />
</div>
<div>
<span
class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
>
Zain Geidt
</span>
<span
class="block text-gray-500 text-theme-xs dark:text-gray-400"
>
Content Writer
</span>
</div>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
Blog Writing
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex -space-x-2">
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-27.jpg" alt="user" />
</div>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p
class="rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500"
>
Active
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
12.7K
</p>
</div>
</td>
</tr>
<tr>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex items-center gap-3">
<div class="w-10 h-10 overflow-hidden rounded-full">
<img src="./images/user/user-20.jpg" alt="brand" />
</div>
<div>
<span
class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
>
Abram Schleifer
</span>
<span
class="block text-gray-500 text-theme-xs dark:text-gray-400"
>
Digital Marketer
</span>
</div>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
Social Media
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex -space-x-2">
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-28.jpg" alt="user" />
</div>
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-29.jpg" alt="user" />
</div>
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-30.jpg" alt="user" />
</div>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p
class="rounded-full bg-error-50 px-2 py-0.5 text-theme-xs font-medium text-error-700 dark:bg-error-500/15 dark:text-error-500"
>
Cancel
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">2.8K</p>
</div>
</td>
</tr>
<tr>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex items-center gap-3">
<div class="w-10 h-10 overflow-hidden rounded-full">
<img src="./images/user/user-21.jpg" alt="brand" />
</div>
<div>
<span
class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
>
Carla George
</span>
<span
class="block text-gray-500 text-theme-xs dark:text-gray-400"
>
Front-end Developer
</span>
</div>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">
Website
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex -space-x-2">
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-31.jpg" alt="user" />
</div>
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-32.jpg" alt="user" />
</div>
<div
class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
>
<img src="./images/user/user-33.jpg" alt="user" />
</div>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p
class="rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500"
>
Active
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-theme-sm dark:text-gray-400">4,5K</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

251
public/assets/tailadmin/partials/top-card-group.html Normal file
View File

@@ -0,0 +1,251 @@
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
<!-- Card item -->
<div
class="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03] md:p-6"
>
<div class="flex items-start justify-between">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
Top Channels
</h3>
<div x-data="{openDropDown: false}" class="relative">
<button
@click="openDropDown = !openDropDown"
:class="openDropDown ? 'text-gray-700 dark:text-white' : 'text-gray-400 hover:text-gray-700 dark:hover:text-white'"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.2441 6C10.2441 5.0335 11.0276 4.25 11.9941 4.25H12.0041C12.9706 4.25 13.7541 5.0335 13.7541 6C13.7541 6.9665 12.9706 7.75 12.0041 7.75H11.9941C11.0276 7.75 10.2441 6.9665 10.2441 6ZM10.2441 18C10.2441 17.0335 11.0276 16.25 11.9941 16.25H12.0041C12.9706 16.25 13.7541 17.0335 13.7541 18C13.7541 18.9665 12.9706 19.75 12.0041 19.75H11.9941C11.0276 19.75 10.2441 18.9665 10.2441 18ZM11.9941 10.25C11.0276 10.25 10.2441 11.0335 10.2441 12C10.2441 12.9665 11.0276 13.75 11.9941 13.75H12.0041C12.9706 13.75 13.7541 12.9665 13.7541 12C13.7541 11.0335 12.9706 10.25 12.0041 10.25H11.9941Z"
fill=""
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="absolute right-0 top-full z-40 w-40 space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
View More
</button>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
Delete
</button>
</div>
</div>
</div>
<div class="my-6">
<div
class="flex items-center justify-between border-b border-gray-100 pb-4 dark:border-gray-800"
>
<span class="text-theme-xs text-gray-400"> Source </span>
<span class="text-right text-theme-xs text-gray-400"> Visitors </span>
</div>
<div
class="flex items-center justify-between border-b border-gray-100 py-3 dark:border-gray-800"
>
<span class="text-theme-sm text-gray-500 dark:text-gray-400">
Google
</span>
<span class="text-right text-theme-sm text-gray-500 dark:text-gray-400">
4.7K
</span>
</div>
<div
class="flex items-center justify-between border-b border-gray-100 py-3 dark:border-gray-800"
>
<span class="text-theme-sm text-gray-500 dark:text-gray-400">
Facebook
</span>
<span class="text-right text-theme-sm text-gray-500 dark:text-gray-400">
3.4K
</span>
</div>
<div
class="flex items-center justify-between border-b border-gray-100 py-3 dark:border-gray-800"
>
<span class="text-theme-sm text-gray-500 dark:text-gray-400">
Threads
</span>
<span class="text-right text-theme-sm text-gray-500 dark:text-gray-400">
2.9K
</span>
</div>
<div
class="flex items-center justify-between border-b border-gray-100 py-3 dark:border-gray-800"
>
<span class="text-theme-sm text-gray-500 dark:text-gray-400">
Google
</span>
<span class="text-right text-theme-sm text-gray-500 dark:text-gray-400">
1.5K
</span>
</div>
</div>
<a
href="#"
class="flex justify-center gap-2 rounded-lg border border-gray-300 bg-white p-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
>
Channels Report
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.4175 9.9986C17.4178 10.1909 17.3446 10.3832 17.198 10.53L12.2013 15.5301C11.9085 15.8231 11.4337 15.8233 11.1407 15.5305C10.8477 15.2377 10.8475 14.7629 11.1403 14.4699L14.8604 10.7472L3.33301 10.7472C2.91879 10.7472 2.58301 10.4114 2.58301 9.99715C2.58301 9.58294 2.91879 9.24715 3.33301 9.24715L14.8549 9.24715L11.1403 5.53016C10.8475 5.23717 10.8477 4.7623 11.1407 4.4695C11.4336 4.1767 11.9085 4.17685 12.2013 4.46984L17.1588 9.43049C17.3173 9.568 17.4175 9.77087 17.4175 9.99715C17.4175 9.99763 17.4175 9.99812 17.4175 9.9986Z"
fill=""
/>
</svg>
</a>
</div>
<!-- Card item -->
<div
class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6"
>
<div class="flex items-start justify-between">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
Top Pages
</h3>
<div x-data="{openDropDown: false}" class="relative">
<button
@click="openDropDown = !openDropDown"
:class="openDropDown ? 'text-gray-700 dark:text-white' : 'text-gray-400 hover:text-gray-700 dark:hover:text-white'"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.2441 6C10.2441 5.0335 11.0276 4.25 11.9941 4.25H12.0041C12.9706 4.25 13.7541 5.0335 13.7541 6C13.7541 6.9665 12.9706 7.75 12.0041 7.75H11.9941C11.0276 7.75 10.2441 6.9665 10.2441 6ZM10.2441 18C10.2441 17.0335 11.0276 16.25 11.9941 16.25H12.0041C12.9706 16.25 13.7541 17.0335 13.7541 18C13.7541 18.9665 12.9706 19.75 12.0041 19.75H11.9941C11.0276 19.75 10.2441 18.9665 10.2441 18ZM11.9941 10.25C11.0276 10.25 10.2441 11.0335 10.2441 12C10.2441 12.9665 11.0276 13.75 11.9941 13.75H12.0041C12.9706 13.75 13.7541 12.9665 13.7541 12C13.7541 11.0335 12.9706 10.25 12.0041 10.25H11.9941Z"
fill=""
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="absolute right-0 top-full z-40 w-40 space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
View More
</button>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
Delete
</button>
</div>
</div>
</div>
<div class="my-6">
<div
class="flex items-center justify-between border-b border-gray-100 pb-4 dark:border-gray-800"
>
<span class="text-theme-xs text-gray-400"> Source </span>
<span class="text-right text-theme-xs text-gray-400"> Pageview </span>
</div>
<div
class="flex items-center justify-between border-b border-gray-100 py-3 dark:border-gray-800"
>
<span class="text-theme-sm text-gray-500 dark:text-gray-400">
tailadmin.com
</span>
<span class="text-right text-theme-sm text-gray-500 dark:text-gray-400">
4.7K
</span>
</div>
<div
class="flex items-center justify-between border-b border-gray-100 py-3 dark:border-gray-800"
>
<span class="text-theme-sm text-gray-500 dark:text-gray-400">
preview.tailadmin.com
</span>
<span class="text-right text-theme-sm text-gray-500 dark:text-gray-400">
3.4K
</span>
</div>
<div
class="flex items-center justify-between border-b border-gray-100 py-3 dark:border-gray-800"
>
<span class="text-theme-sm text-gray-500 dark:text-gray-400">
docs.tailadmin.com
</span>
<span class="text-right text-theme-sm text-gray-500 dark:text-gray-400">
2.9K
</span>
</div>
<div
class="flex items-center justify-between border-b border-gray-100 py-3 dark:border-gray-800"
>
<span class="text-theme-sm text-gray-500 dark:text-gray-400">
tailadmin.com/componetns
</span>
<span class="text-right text-theme-sm text-gray-500 dark:text-gray-400">
1.5K
</span>
</div>
</div>
<a
href="#"
class="flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white p-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
>
Channels Report
<svg
class="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.4175 9.9986C17.4178 10.1909 17.3446 10.3832 17.198 10.53L12.2013 15.5301C11.9085 15.8231 11.4337 15.8233 11.1407 15.5305C10.8477 15.2377 10.8475 14.7629 11.1403 14.4699L14.8604 10.7472L3.33301 10.7472C2.91879 10.7472 2.58301 10.4114 2.58301 9.99715C2.58301 9.58294 2.91879 9.24715 3.33301 9.24715L14.8549 9.24715L11.1403 5.53016C10.8475 5.23717 10.8477 4.7623 11.1407 4.4695C11.4336 4.1767 11.9085 4.17685 12.2013 4.46984L17.1588 9.43049C17.3173 9.568 17.4175 9.77087 17.4175 9.99715C17.4175 9.99763 17.4175 9.99812 17.4175 9.9986Z"
fill=""
/>
</svg>
</a>
</div>
</div>

210
public/assets/tailadmin/partials/upcoming-schedule.html Normal file
View File

@@ -0,0 +1,210 @@
<div
class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] sm:p-6"
>
<div class="mb-6 flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
Upcoming Schedule
</h3>
<div x-data="{openDropDown: false}" class="relative">
<button
@click="openDropDown = !openDropDown"
:class="openDropDown ? 'text-gray-700 dark:text-white' : 'text-gray-400 hover:text-gray-700 dark:hover:text-white'"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.2441 6C10.2441 5.0335 11.0276 4.25 11.9941 4.25H12.0041C12.9706 4.25 13.7541 5.0335 13.7541 6C13.7541 6.9665 12.9706 7.75 12.0041 7.75H11.9941C11.0276 7.75 10.2441 6.9665 10.2441 6ZM10.2441 18C10.2441 17.0335 11.0276 16.25 11.9941 16.25H12.0041C12.9706 16.25 13.7541 17.0335 13.7541 18C13.7541 18.9665 12.9706 19.75 12.0041 19.75H11.9941C11.0276 19.75 10.2441 18.9665 10.2441 18ZM11.9941 10.25C11.0276 10.25 10.2441 11.0335 10.2441 12C10.2441 12.9665 11.0276 13.75 11.9941 13.75H12.0041C12.9706 13.75 13.7541 12.9665 13.7541 12C13.7541 11.0335 12.9706 10.25 12.0041 10.25H11.9941Z"
fill=""
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="absolute right-0 top-full z-40 w-40 space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
View More
</button>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
Delete
</button>
</div>
</div>
</div>
<div class="custom-scrollbar max-w-full overflow-x-auto">
<div class="min-w-[500px]">
<div class="flex flex-col gap-2">
<div
x-data="{checked: false}"
@click="checked = !checked"
class="flex cursor-pointer items-center gap-9 rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-white/[0.03]"
>
<div class="flex items-start gap-3">
<div
class="flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]"
:class="checked ? 'border-brand-500 dark:border-brand-500 bg-brand-500' : 'bg-white dark:bg-white/0 border-gray-300 dark:border-gray-700' "
>
<svg
:class="checked ? 'block' : 'hidden'"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.6668 3.5L5.25016 9.91667L2.3335 7"
stroke="white"
stroke-width="1.94437"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div>
<span
class="mb-0.5 block text-theme-xs text-gray-500 dark:text-gray-400"
>
Wed, 11 jan
</span>
<span
class="text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
09:20 AM
</span>
</div>
</div>
<div>
<span
class="mb-1 block text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
Business Analytics Press
</span>
<span class="text-theme-xs text-gray-500 dark:text-gray-400">
Exploring the Future of Data-Driven +6 more
</span>
</div>
</div>
<div
x-data="{checked: false}"
@click="checked = !checked"
class="flex cursor-pointer items-center gap-9 rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-white/[0.03]"
>
<div class="flex items-start gap-3">
<div
class="flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]"
:class="checked ? 'border-brand-500 dark:border-brand-500 bg-brand-500' : 'bg-white dark:bg-white/0 border-gray-300 dark:border-gray-700' "
>
<svg
:class="checked ? 'block' : 'hidden'"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.6668 3.5L5.25016 9.91667L2.3335 7"
stroke="white"
stroke-width="1.94437"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div>
<span
class="mb-0.5 block text-theme-xs text-gray-500 dark:text-gray-400"
>
Fri, 15 feb
</span>
<span
class="text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
10:35 AM
</span>
</div>
</div>
<div>
<span
class="mb-1 block text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
Business Sprint
</span>
<span class="text-theme-xs text-gray-500 dark:text-gray-400">
Techniques from Business Sprint +2 more
</span>
</div>
</div>
<div
x-data="{checked: false}"
@click="checked = !checked"
class="flex cursor-pointer items-center gap-9 rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-white/[0.03]"
>
<div class="flex items-start gap-3">
<div
class="flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]"
:class="checked ? 'border-brand-500 dark:border-brand-500 bg-brand-500' : 'bg-white dark:bg-white/0 border-gray-300 dark:border-gray-700' "
>
<svg
:class="checked ? 'block' : 'hidden'"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.6668 3.5L5.25016 9.91667L2.3335 7"
stroke="white"
stroke-width="1.94437"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div>
<span
class="mb-0.5 block text-theme-xs text-gray-500 dark:text-gray-400"
>
Thu, 18 mar
</span>
<span
class="text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
1:15 AM
</span>
</div>
</div>
<div>
<span
class="mb-1 block text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
Customer Review Meeting
</span>
<span class="text-theme-xs text-gray-500 dark:text-gray-400">
Insights from the Customer Review Meeting +8 more
</span>
</div>
</div>
</div>
</div>
</div>
</div>

11
public/assets/tailadmin/partials/video/video-01.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="overflow-hidden rounded-lg aspect-video">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
class="w-full h-full"
>
</iframe>
</div>

11
public/assets/tailadmin/partials/video/video-02.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="aspect-4/3 overflow-hidden rounded-lg">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
class="w-full h-full"
>
</iframe>
</div>

11
public/assets/tailadmin/partials/video/video-03.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="aspect-21/9 overflow-hidden rounded-lg">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
class="w-full h-full"
>
</iframe>
</div>

11
public/assets/tailadmin/partials/video/video-04.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="overflow-hidden rounded-lg aspect-square">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
class="w-full h-full"
>
</iframe>
</div>

592
public/assets/tailadmin/partials/watchlist.html Normal file
View File

@@ -0,0 +1,592 @@
<div
class="rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]"
>
<div class="mb-6 flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
My Watchlist
</h3>
<div x-data="{openDropDown: false}" class="relative">
<button
@click="openDropDown = !openDropDown"
:class="openDropDown ? 'text-gray-700 dark:text-white' : 'text-gray-400 hover:text-gray-700 dark:hover:text-white'"
>
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.2441 6C10.2441 5.0335 11.0276 4.25 11.9941 4.25H12.0041C12.9706 4.25 13.7541 5.0335 13.7541 6C13.7541 6.9665 12.9706 7.75 12.0041 7.75H11.9941C11.0276 7.75 10.2441 6.9665 10.2441 6ZM10.2441 18C10.2441 17.0335 11.0276 16.25 11.9941 16.25H12.0041C12.9706 16.25 13.7541 17.0335 13.7541 18C13.7541 18.9665 12.9706 19.75 12.0041 19.75H11.9941C11.0276 19.75 10.2441 18.9665 10.2441 18ZM11.9941 10.25C11.0276 10.25 10.2441 11.0335 10.2441 12C10.2441 12.9665 11.0276 13.75 11.9941 13.75H12.0041C12.9706 13.75 13.7541 12.9665 13.7541 12C13.7541 11.0335 12.9706 10.25 12.0041 10.25H11.9941Z"
fill=""
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="absolute right-0 top-full z-40 w-40 space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
View More
</button>
<button
class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
Delete
</button>
</div>
</div>
</div>
<div class="flex h-[372px] flex-col">
<div class="custom-scrollbar flex h-auto flex-col overflow-y-auto pr-3">
<!-- Watchlist item -->
<div
class="flex items-center justify-between border-b border-gray-200 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0 dark:border-gray-800"
>
<div class="flex items-center gap-3">
<div class="h-10 w-10">
<img src="./images/brand/brand-07.svg" alt="brand" />
</div>
<div>
<h3
class="text-base font-semibold text-gray-800 dark:text-white/90"
>
AAPL
</h3>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
Apple, Inc
</span>
</div>
</div>
<div>
<div>
<h4
class="mb-1 text-right text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
$4,008.65
</h4>
</div>
<span
class="flex items-center justify-end gap-1 text-theme-xs font-medium text-success-600 dark:text-success-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.56462 1.62394C5.70193 1.47073 5.90135 1.37433 6.12329 1.37433C6.1236 1.37433 6.12391 1.37433 6.12422 1.37433C6.31631 1.37416 6.50845 1.44732 6.65505 1.59381L9.65514 4.59181C9.94814 4.8846 9.94831 5.35947 9.65552 5.65247C9.36273 5.94546 8.88785 5.94563 8.59486 5.65284L6.87329 3.93248L6.87329 10.125C6.87329 10.5392 6.53751 10.875 6.12329 10.875C5.70908 10.875 5.37329 10.5392 5.37329 10.125L5.37329 3.93579L3.65516 5.65282C3.36218 5.94562 2.8873 5.94547 2.5945 5.65249C2.3017 5.3595 2.30185 4.88463 2.59484 4.59183L5.56462 1.62394Z"
fill=""
/>
</svg>
11.01%
</span>
</div>
</div>
<!-- Watchlist item -->
<div
class="flex items-center justify-between border-b border-gray-200 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0 dark:border-gray-800"
>
<div class="flex items-center gap-3">
<div class="h-10 w-10">
<img src="./images/brand/brand-11.svg" alt="brand" />
</div>
<div>
<h3
class="text-base font-semibold text-gray-800 dark:text-white/90"
>
SPOT
</h3>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
Spotify.com
</span>
</div>
</div>
<div>
<div>
<h4
class="mb-1 text-right text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
$11,689.00
</h4>
</div>
<span
class="flex items-center justify-end gap-1 text-theme-xs font-medium text-success-600 dark:text-success-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.56462 1.62394C5.70193 1.47073 5.90135 1.37433 6.12329 1.37433C6.1236 1.37433 6.12391 1.37433 6.12422 1.37433C6.31631 1.37416 6.50845 1.44732 6.65505 1.59381L9.65514 4.59181C9.94814 4.8846 9.94831 5.35947 9.65552 5.65247C9.36273 5.94546 8.88785 5.94563 8.59486 5.65284L6.87329 3.93248L6.87329 10.125C6.87329 10.5392 6.53751 10.875 6.12329 10.875C5.70908 10.875 5.37329 10.5392 5.37329 10.125L5.37329 3.93579L3.65516 5.65282C3.36218 5.94562 2.8873 5.94547 2.5945 5.65249C2.3017 5.3595 2.30185 4.88463 2.59484 4.59183L5.56462 1.62394Z"
fill=""
/>
</svg>
9.48%
</span>
</div>
</div>
<!-- Watchlist item -->
<div
class="flex items-center justify-between border-b border-gray-200 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0 dark:border-gray-800"
>
<div class="flex items-center gap-3">
<div class="h-10 w-10">
<img src="./images/brand/brand-12.svg" alt="brand" />
</div>
<div>
<h3
class="text-base font-semibold text-gray-800 dark:text-white/90"
>
ABNB
</h3>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
Airbnb, Inc
</span>
</div>
</div>
<div>
<div>
<h4
class="mb-1 text-right text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
$32,227.00
</h4>
</div>
<span
class="flex items-center justify-end gap-1 text-theme-xs font-medium text-error-600 dark:text-error-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.31462 10.3761C5.45194 10.5293 5.65136 10.6257 5.87329 10.6257C5.8736 10.6257 5.8739 10.6257 5.87421 10.6257C6.0663 10.6259 6.25845 10.5527 6.40505 10.4062L9.40514 7.4082C9.69814 7.11541 9.69831 6.64054 9.40552 6.34754C9.11273 6.05454 8.63785 6.05438 8.34486 6.34717L6.62329 8.06753L6.62329 1.875C6.62329 1.46079 6.28751 1.125 5.87329 1.125C5.45908 1.125 5.12329 1.46079 5.12329 1.875L5.12329 8.06422L3.40516 6.34719C3.11218 6.05439 2.6373 6.05454 2.3445 6.34752C2.0517 6.64051 2.05185 7.11538 2.34484 7.40818L5.31462 10.3761Z"
fill=""
/>
</svg>
0.29%
</span>
</div>
</div>
<!-- Watchlist item -->
<div
class="flex items-center justify-between border-b border-gray-200 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0 dark:border-gray-800"
>
<div class="flex items-center gap-3">
<div class="h-10 w-10">
<img src="./images/brand/brand-13.svg" alt="brand" />
</div>
<div>
<h3
class="text-base font-semibold text-gray-800 dark:text-white/90"
>
ENVT
</h3>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
Envato, Inc
</span>
</div>
</div>
<div>
<div>
<h4
class="mb-1 text-right text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
$13,895.00
</h4>
</div>
<span
class="flex items-center justify-end gap-1 text-theme-xs font-medium text-success-600 dark:text-success-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.56462 1.62394C5.70193 1.47073 5.90135 1.37433 6.12329 1.37433C6.1236 1.37433 6.12391 1.37433 6.12422 1.37433C6.31631 1.37416 6.50845 1.44732 6.65505 1.59381L9.65514 4.59181C9.94814 4.8846 9.94831 5.35947 9.65552 5.65247C9.36273 5.94546 8.88785 5.94563 8.59486 5.65284L6.87329 3.93248L6.87329 10.125C6.87329 10.5392 6.53751 10.875 6.12329 10.875C5.70908 10.875 5.37329 10.5392 5.37329 10.125L5.37329 3.93579L3.65516 5.65282C3.36218 5.94562 2.8873 5.94547 2.5945 5.65249C2.3017 5.3595 2.30185 4.88463 2.59484 4.59183L5.56462 1.62394Z"
fill=""
/>
</svg>
3.79%
</span>
</div>
</div>
<!-- Watchlist item -->
<div
class="flex items-center justify-between border-b border-gray-200 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0 dark:border-gray-800"
>
<div class="flex items-center gap-3">
<div class="h-10 w-10">
<img src="./images/brand/brand-14.svg" alt="brand" />
</div>
<div>
<h3
class="text-base font-semibold text-gray-800 dark:text-white/90"
>
QIWI
</h3>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
qiwi.com, Inc
</span>
</div>
</div>
<div>
<div>
<h4
class="mb-1 text-right text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
$4,008.65
</h4>
</div>
<span
class="flex items-center justify-end gap-1 text-theme-xs font-medium text-success-600 dark:text-success-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.56462 1.62394C5.70193 1.47073 5.90135 1.37433 6.12329 1.37433C6.1236 1.37433 6.12391 1.37433 6.12422 1.37433C6.31631 1.37416 6.50845 1.44732 6.65505 1.59381L9.65514 4.59181C9.94814 4.8846 9.94831 5.35947 9.65552 5.65247C9.36273 5.94546 8.88785 5.94563 8.59486 5.65284L6.87329 3.93248L6.87329 10.125C6.87329 10.5392 6.53751 10.875 6.12329 10.875C5.70908 10.875 5.37329 10.5392 5.37329 10.125L5.37329 3.93579L3.65516 5.65282C3.36218 5.94562 2.8873 5.94547 2.5945 5.65249C2.3017 5.3595 2.30185 4.88463 2.59484 4.59183L5.56462 1.62394Z"
fill=""
/>
</svg>
4.52%
</span>
</div>
</div>
<!-- Watchlist item -->
<div
class="flex items-center justify-between border-b border-gray-200 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0 dark:border-gray-800"
>
<div class="flex items-center gap-3">
<div class="h-10 w-10">
<img src="./images/brand/brand-07.svg" alt="brand" />
</div>
<div>
<h3
class="text-base font-semibold text-gray-800 dark:text-white/90"
>
AAPL
</h3>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
Apple, Inc
</span>
</div>
</div>
<div>
<div>
<h4
class="mb-1 text-right text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
$4,008.65
</h4>
</div>
<span
class="flex items-center justify-end gap-1 text-theme-xs font-medium text-success-600 dark:text-success-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.56462 1.62394C5.70193 1.47073 5.90135 1.37433 6.12329 1.37433C6.1236 1.37433 6.12391 1.37433 6.12422 1.37433C6.31631 1.37416 6.50845 1.44732 6.65505 1.59381L9.65514 4.59181C9.94814 4.8846 9.94831 5.35947 9.65552 5.65247C9.36273 5.94546 8.88785 5.94563 8.59486 5.65284L6.87329 3.93248L6.87329 10.125C6.87329 10.5392 6.53751 10.875 6.12329 10.875C5.70908 10.875 5.37329 10.5392 5.37329 10.125L5.37329 3.93579L3.65516 5.65282C3.36218 5.94562 2.8873 5.94547 2.5945 5.65249C2.3017 5.3595 2.30185 4.88463 2.59484 4.59183L5.56462 1.62394Z"
fill=""
/>
</svg>
11.01%
</span>
</div>
</div>
<!-- Watchlist item -->
<div
class="flex items-center justify-between border-b border-gray-200 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0 dark:border-gray-800"
>
<div class="flex items-center gap-3">
<div class="h-10 w-10">
<img src="./images/brand/brand-11.svg" alt="brand" />
</div>
<div>
<h3
class="text-base font-semibold text-gray-800 dark:text-white/90"
>
SPOT
</h3>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
Spotify.com
</span>
</div>
</div>
<div>
<div>
<h4
class="mb-1 text-right text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
$11,689.00
</h4>
</div>
<span
class="flex items-center justify-end gap-1 text-theme-xs font-medium text-success-600 dark:text-success-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.56462 1.62394C5.70193 1.47073 5.90135 1.37433 6.12329 1.37433C6.1236 1.37433 6.12391 1.37433 6.12422 1.37433C6.31631 1.37416 6.50845 1.44732 6.65505 1.59381L9.65514 4.59181C9.94814 4.8846 9.94831 5.35947 9.65552 5.65247C9.36273 5.94546 8.88785 5.94563 8.59486 5.65284L6.87329 3.93248L6.87329 10.125C6.87329 10.5392 6.53751 10.875 6.12329 10.875C5.70908 10.875 5.37329 10.5392 5.37329 10.125L5.37329 3.93579L3.65516 5.65282C3.36218 5.94562 2.8873 5.94547 2.5945 5.65249C2.3017 5.3595 2.30185 4.88463 2.59484 4.59183L5.56462 1.62394Z"
fill=""
/>
</svg>
9.48%
</span>
</div>
</div>
<!-- Watchlist item -->
<div
class="flex items-center justify-between border-b border-gray-200 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0 dark:border-gray-800"
>
<div class="flex items-center gap-3">
<div class="h-10 w-10">
<img src="./images/brand/brand-12.svg" alt="brand" />
</div>
<div>
<h3
class="text-base font-semibold text-gray-800 dark:text-white/90"
>
ABNB
</h3>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
Airbnb, Inc
</span>
</div>
</div>
<div>
<div>
<h4
class="mb-1 text-right text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
$32,227.00
</h4>
</div>
<span
class="flex items-center justify-end gap-1 text-theme-xs font-medium text-error-600 dark:text-error-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.31462 10.3761C5.45194 10.5293 5.65136 10.6257 5.87329 10.6257C5.8736 10.6257 5.8739 10.6257 5.87421 10.6257C6.0663 10.6259 6.25845 10.5527 6.40505 10.4062L9.40514 7.4082C9.69814 7.11541 9.69831 6.64054 9.40552 6.34754C9.11273 6.05454 8.63785 6.05438 8.34486 6.34717L6.62329 8.06753L6.62329 1.875C6.62329 1.46079 6.28751 1.125 5.87329 1.125C5.45908 1.125 5.12329 1.46079 5.12329 1.875L5.12329 8.06422L3.40516 6.34719C3.11218 6.05439 2.6373 6.05454 2.3445 6.34752C2.0517 6.64051 2.05185 7.11538 2.34484 7.40818L5.31462 10.3761Z"
fill=""
/>
</svg>
0.29%
</span>
</div>
</div>
<!-- Watchlist item -->
<div
class="flex items-center justify-between border-b border-gray-200 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0 dark:border-gray-800"
>
<div class="flex items-center gap-3">
<div class="h-10 w-10">
<img src="./images/brand/brand-13.svg" alt="brand" />
</div>
<div>
<h3
class="text-base font-semibold text-gray-800 dark:text-white/90"
>
ENVT
</h3>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
Envato, Inc
</span>
</div>
</div>
<div>
<div>
<h4
class="mb-1 text-right text-theme-sm font-medium text-gray-600 dark:text-gray-400"
>
$13,895.00
</h4>
</div>
<span
class="flex items-center justify-end gap-1 text-theme-xs font-medium text-success-700 dark:text-success-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.56462 1.62394C5.70193 1.47073 5.90135 1.37433 6.12329 1.37433C6.1236 1.37433 6.12391 1.37433 6.12422 1.37433C6.31631 1.37416 6.50845 1.44732 6.65505 1.59381L9.65514 4.59181C9.94814 4.8846 9.94831 5.35947 9.65552 5.65247C9.36273 5.94546 8.88785 5.94563 8.59486 5.65284L6.87329 3.93248L6.87329 10.125C6.87329 10.5392 6.53751 10.875 6.12329 10.875C5.70908 10.875 5.37329 10.5392 5.37329 10.125L5.37329 3.93579L3.65516 5.65282C3.36218 5.94562 2.8873 5.94547 2.5945 5.65249C2.3017 5.3595 2.30185 4.88463 2.59484 4.59183L5.56462 1.62394Z"
fill=""
/>
</svg>
3.79%
</span>
</div>
</div>
<!-- Watchlist item -->
<div
class="flex items-center justify-between border-b border-gray-200 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0 dark:border-gray-800"
>
<div class="flex items-center gap-3">
<div class="h-10 w-10">
<img src="./images/brand/brand-14.svg" alt="brand" />
</div>
<div>
<h3
class="text-base font-semibold text-gray-800 dark:text-white/90"
>
QIWI
</h3>
<span class="block text-theme-xs text-gray-500 dark:text-gray-400">
qiwi.com, Inc
</span>
</div>
</div>
<div>
<div>
<h4
class="mb-1 text-right text-theme-sm font-medium text-gray-700 dark:text-gray-400"
>
$4,008.65
</h4>
</div>
<span
class="flex items-center justify-end gap-1 text-theme-xs font-medium text-success-600 dark:text-success-500"
>
<svg
class="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.56462 1.62394C5.70193 1.47073 5.90135 1.37433 6.12329 1.37433C6.1236 1.37433 6.12391 1.37433 6.12422 1.37433C6.31631 1.37416 6.50845 1.44732 6.65505 1.59381L9.65514 4.59181C9.94814 4.8846 9.94831 5.35947 9.65552 5.65247C9.36273 5.94546 8.88785 5.94563 8.59486 5.65284L6.87329 3.93248L6.87329 10.125C6.87329 10.5392 6.53751 10.875 6.12329 10.875C5.70908 10.875 5.37329 10.5392 5.37329 10.125L5.37329 3.93579L3.65516 5.65282C3.36218 5.94562 2.8873 5.94547 2.5945 5.65249C2.3017 5.3595 2.30185 4.88463 2.59484 4.59183L5.56462 1.62394Z"
fill=""
/>
</svg>
4.52%
</span>
</div>
</div>
</div>
</div>
</div>