2725 lines
142 KiB
HTML
Executable File
2725 lines
142 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
|
/>
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<title>
|
|
Form Elements | TailAdmin - Tailwind CSS Admin Dashboard Template
|
|
</title>
|
|
<link rel="icon" href="favicon.ico"><link href="style.css" rel="stylesheet"></head>
|
|
<body
|
|
x-data="{ page: 'formElements', 'loaded': true, 'darkMode': false, 'stickyMenu': false, 'sidebarToggle': false, 'scrollTop': false }"
|
|
x-init="
|
|
darkMode = JSON.parse(localStorage.getItem('darkMode'));
|
|
$watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))"
|
|
:class="{'dark bg-gray-900': darkMode === true}"
|
|
>
|
|
<!-- ===== Preloader Start ===== -->
|
|
<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>
|
|
|
|
<!-- ===== Preloader End ===== -->
|
|
|
|
<!-- ===== Page Wrapper Start ===== -->
|
|
<div class="flex h-screen overflow-hidden">
|
|
<!-- ===== Sidebar Start ===== -->
|
|
<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="src/images/logo/logo.svg" alt="Logo" />
|
|
<img
|
|
class="hidden dark:block"
|
|
src="src/images/logo/logo-dark.svg"
|
|
alt="Logo"
|
|
/>
|
|
</span>
|
|
|
|
<img
|
|
class="logo-icon"
|
|
:class="sidebarToggle ? 'lg:block' : 'hidden'"
|
|
src="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' : ''"
|
|
>
|
|
mcServControl
|
|
</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">
|
|
<li>
|
|
<a
|
|
href="index.html"
|
|
@click="selected = (selected === 'Home' ? '':'Home')"
|
|
class="menu-item group"
|
|
:class=" (selected === 'Home') && (page === 'home') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Home') && (page === 'home') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 -960 960 960"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Home
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 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 -960 960 960"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M300-720q-25 0-42.5 17.5T240-660q0 25 17.5 42.5T300-600q25 0 42.5-17.5T360-660q0-25-17.5-42.5T300-720Zm0 400q-25 0-42.5 17.5T240-260q0 25 17.5 42.5T300-200q25 0 42.5-17.5T360-260q0-25-17.5-42.5T300-320ZM160-840h640q17 0 28.5 11.5T840-800v280q0 17-11.5 28.5T800-480H160q-17 0-28.5-11.5T120-520v-280q0-17 11.5-28.5T160-840Zm40 80v200h560v-200H200Zm-40 320h640q17 0 28.5 11.5T840-400v280q0 17-11.5 28.5T800-80H160q-17 0-28.5-11.5T120-120v-280q0-17 11.5-28.5T160-440Zm40 80v200h560v-200H200Zm0-400v200-200Zm0 400v200-200Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Servers
|
|
</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"
|
|
id="server_menue"
|
|
>
|
|
</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>
|
|
|
|
<!-- ===== Sidebar End ===== -->
|
|
|
|
<!-- ===== Content Area Start ===== -->
|
|
<div
|
|
class="relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto"
|
|
>
|
|
<!-- Small Device Overlay Start -->
|
|
<div
|
|
@click="sidebarToggle = false"
|
|
:class="sidebarToggle ? 'block lg:hidden' : 'hidden'"
|
|
class="fixed w-full h-screen z-9 bg-gray-900/50"
|
|
></div>
|
|
<!-- Small Device Overlay End -->
|
|
|
|
<!-- ===== Header Start ===== -->
|
|
<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="src/images/logo/logo.svg" alt="Logo" />
|
|
<img
|
|
class="hidden dark:block"
|
|
src="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="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 -->
|
|
|
|
<!-- 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="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>
|
|
<!-- ===== Header End ===== -->
|
|
|
|
<!-- ===== Main Content Start ===== -->
|
|
<main>
|
|
<div class="mx-auto max-w-(--breakpoint-2xl) p-4 md:p-6">
|
|
<!-- Breadcrumb Start -->
|
|
<div x-data="{ pageName: `Form Elements`}">
|
|
<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>
|
|
</div>
|
|
<!-- Breadcrumb End -->
|
|
|
|
<!-- ====== Form Elements Section Start -->
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
|
<div class="space-y-6">
|
|
<div
|
|
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
|
|
>
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<h3
|
|
class="text-base font-medium text-gray-800 dark:text-white/90"
|
|
>
|
|
Default Inputs
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
|
|
>
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Input
|
|
</label>
|
|
<input
|
|
type="text"
|
|
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-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Input with Placeholder
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="info@gmail.com"
|
|
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-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Select Input
|
|
</label>
|
|
<div
|
|
x-data="{ isOptionSelected: false }"
|
|
class="relative z-20 bg-transparent"
|
|
>
|
|
<select
|
|
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 appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
:class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
|
|
@change="isOptionSelected = true"
|
|
>
|
|
<option
|
|
value=""
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
Select Option
|
|
</option>
|
|
<option
|
|
value=""
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
Marketing
|
|
</option>
|
|
<option
|
|
value=""
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
Template
|
|
</option>
|
|
<option
|
|
value=""
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
Development
|
|
</option>
|
|
</select>
|
|
<span
|
|
class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400"
|
|
>
|
|
<svg
|
|
class="stroke-current"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Password Input
|
|
</label>
|
|
<div x-data="{ showPassword: false }" class="relative">
|
|
<input
|
|
:type="showPassword ? 'text' : 'password'"
|
|
placeholder="Enter your password"
|
|
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 appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
<span
|
|
@click="showPassword = !showPassword"
|
|
class="absolute top-1/2 right-4 z-30 -translate-y-1/2 cursor-pointer"
|
|
>
|
|
<svg
|
|
x-show="!showPassword"
|
|
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="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z"
|
|
/>
|
|
</svg>
|
|
|
|
<svg
|
|
x-show="showPassword"
|
|
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="M4.63803 3.57709C4.34513 3.2842 3.87026 3.2842 3.57737 3.57709C3.28447 3.86999 3.28447 4.34486 3.57737 4.63775L4.85323 5.91362C3.74609 6.84199 2.89363 8.06395 2.4155 9.45936C2.3615 9.61694 2.3615 9.78801 2.41549 9.94558C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C11.255 15.3619 12.4422 15.0737 13.4994 14.5598L15.3625 16.4229C15.6554 16.7158 16.1302 16.7158 16.4231 16.4229C16.716 16.13 16.716 15.6551 16.4231 15.3622L4.63803 3.57709ZM12.3608 13.4212L10.4475 11.5079C10.3061 11.5423 10.1584 11.5606 10.0064 11.5606H9.99151C8.96527 11.5606 8.13333 10.7286 8.13333 9.70237C8.13333 9.5461 8.15262 9.39434 8.18895 9.24933L5.91885 6.97923C5.03505 7.69015 4.34057 8.62704 3.92328 9.70247C4.86803 12.1373 7.23361 13.8619 10.0002 13.8619C10.8326 13.8619 11.6287 13.7058 12.3608 13.4212ZM16.0771 9.70249C15.7843 10.4569 15.3552 11.1432 14.8199 11.7311L15.8813 12.7925C16.6329 11.9813 17.2187 11.0143 17.5849 9.94561C17.6389 9.78803 17.6389 9.61696 17.5849 9.45938C16.5055 6.30925 13.5184 4.04303 10.0002 4.04303C9.13525 4.04303 8.30244 4.17999 7.52218 4.43338L8.75139 5.66259C9.1556 5.58413 9.57311 5.54303 10.0002 5.54303C12.7667 5.54303 15.1323 7.26768 16.0771 9.70249Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Date Picker Input
|
|
</label>
|
|
|
|
<div class="relative">
|
|
<input
|
|
type="date"
|
|
placeholder="Select date"
|
|
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 appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
onclick="this.showPicker()"
|
|
/>
|
|
<span
|
|
class="pointer-events-none absolute top-1/2 right-3 -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="M6.66659 1.5415C7.0808 1.5415 7.41658 1.87729 7.41658 2.2915V2.99984H12.5833V2.2915C12.5833 1.87729 12.919 1.5415 13.3333 1.5415C13.7475 1.5415 14.0833 1.87729 14.0833 2.2915V2.99984L15.4166 2.99984C16.5212 2.99984 17.4166 3.89527 17.4166 4.99984V7.49984V15.8332C17.4166 16.9377 16.5212 17.8332 15.4166 17.8332H4.58325C3.47868 17.8332 2.58325 16.9377 2.58325 15.8332V7.49984V4.99984C2.58325 3.89527 3.47868 2.99984 4.58325 2.99984L5.91659 2.99984V2.2915C5.91659 1.87729 6.25237 1.5415 6.66659 1.5415ZM6.66659 4.49984H4.58325C4.30711 4.49984 4.08325 4.7237 4.08325 4.99984V6.74984H15.9166V4.99984C15.9166 4.7237 15.6927 4.49984 15.4166 4.49984H13.3333H6.66659ZM15.9166 8.24984H4.08325V15.8332C4.08325 16.1093 4.30711 16.3332 4.58325 16.3332H15.4166C15.6927 16.3332 15.9166 16.1093 15.9166 15.8332V8.24984Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Time Select Input
|
|
</label>
|
|
<div class="relative">
|
|
<input
|
|
type="time"
|
|
placeholder="12:00 AM"
|
|
onclick="this.showPicker()"
|
|
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 appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
<span
|
|
class="absolute top-1/2 right-3 -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.04175 9.99984C3.04175 6.15686 6.1571 3.0415 10.0001 3.0415C13.8431 3.0415 16.9584 6.15686 16.9584 9.99984C16.9584 13.8428 13.8431 16.9582 10.0001 16.9582C6.1571 16.9582 3.04175 13.8428 3.04175 9.99984ZM10.0001 1.5415C5.32867 1.5415 1.54175 5.32843 1.54175 9.99984C1.54175 14.6712 5.32867 18.4582 10.0001 18.4582C14.6715 18.4582 18.4584 14.6712 18.4584 9.99984C18.4584 5.32843 14.6715 1.5415 10.0001 1.5415ZM9.99998 10.7498C9.58577 10.7498 9.24998 10.4141 9.24998 9.99984V5.4165C9.24998 5.00229 9.58577 4.6665 9.99998 4.6665C10.4142 4.6665 10.75 5.00229 10.75 5.4165V9.24984H13.3334C13.7476 9.24984 14.0834 9.58562 14.0834 9.99984C14.0834 10.4141 13.7476 10.7498 13.3334 10.7498H10.0001H9.99998Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Input with Payment
|
|
</label>
|
|
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Card number"
|
|
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 appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pl-[62px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
<span
|
|
class="absolute top-1/2 left-0 flex h-11 w-[46px] -translate-y-1/2 items-center justify-center border-r border-gray-200 dark:border-gray-800"
|
|
>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
cx="6.25"
|
|
cy="10"
|
|
r="5.625"
|
|
fill="#E80B26"
|
|
/>
|
|
<circle
|
|
cx="13.75"
|
|
cy="10"
|
|
r="5.625"
|
|
fill="#F59D31"
|
|
/>
|
|
<path
|
|
d="M10 14.1924C11.1508 13.1625 11.875 11.6657 11.875 9.99979C11.875 8.33383 11.1508 6.8371 10 5.80713C8.84918 6.8371 8.125 8.33383 8.125 9.99979C8.125 11.6657 8.84918 13.1625 10 14.1924Z"
|
|
fill="#FC6020"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
|
|
>
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<h3
|
|
class="text-base font-medium text-gray-800 dark:text-white/90"
|
|
>
|
|
Select Inputs
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
|
|
>
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Select Input
|
|
</label>
|
|
<div
|
|
x-data="{ isOptionSelected: false }"
|
|
class="relative z-20 bg-transparent"
|
|
>
|
|
<select
|
|
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 appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
:class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
|
|
@change="isOptionSelected = true"
|
|
>
|
|
<option
|
|
value=""
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
Select Option
|
|
</option>
|
|
<option
|
|
value=""
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
Marketing
|
|
</option>
|
|
<option
|
|
value=""
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
Template
|
|
</option>
|
|
<option
|
|
value=""
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
Development
|
|
</option>
|
|
</select>
|
|
<span
|
|
class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-700 dark:text-gray-400"
|
|
>
|
|
<svg
|
|
class="stroke-current"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Multiple Select Options
|
|
</label>
|
|
<div>
|
|
<select class="hidden" x-cloak id="select">
|
|
<option value="1">Option 2</option>
|
|
<option value="2">Option 3</option>
|
|
<option value="3">Option 4</option>
|
|
<option value="4">Option 5</option>
|
|
</select>
|
|
|
|
<div
|
|
x-data="dropdown()"
|
|
x-init="loadOptions()"
|
|
class="flex flex-col items-center"
|
|
>
|
|
<input
|
|
name="values"
|
|
type="hidden"
|
|
:value="selectedValues()"
|
|
/>
|
|
<div class="relative z-20 inline-block w-full">
|
|
<div class="relative flex flex-col items-center">
|
|
<div @click="open" class="w-full">
|
|
<div
|
|
class="shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-300 mb-2 flex h-11 rounded-lg border border-gray-300 py-1.5 pr-3 pl-3 outline-hidden transition dark:border-gray-700 dark:bg-gray-900"
|
|
>
|
|
<div class="flex flex-auto flex-wrap gap-2">
|
|
<template
|
|
x-for="(option,index) in selected"
|
|
:key="index"
|
|
>
|
|
<div
|
|
class="group flex items-center justify-center rounded-full border-[0.7px] border-transparent bg-gray-100 py-1 pr-2 pl-2.5 text-sm text-gray-800 hover:border-gray-200 dark:bg-gray-800 dark:text-white/90 dark:hover:border-gray-800"
|
|
>
|
|
<div
|
|
class="max-w-full flex-initial"
|
|
x-model="options[option]"
|
|
x-text="options[option].text"
|
|
></div>
|
|
<div
|
|
class="flex flex-auto flex-row-reverse"
|
|
>
|
|
<div
|
|
@click="remove(index,option)"
|
|
class="cursor-pointer pl-2 text-gray-500 group-hover:text-gray-400 dark:text-gray-400"
|
|
>
|
|
<svg
|
|
class="fill-current"
|
|
role="button"
|
|
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="M3.40717 4.46881C3.11428 4.17591 3.11428 3.70104 3.40717 3.40815C3.70006 3.11525 4.17494 3.11525 4.46783 3.40815L6.99943 5.93975L9.53095 3.40822C9.82385 3.11533 10.2987 3.11533 10.5916 3.40822C10.8845 3.70112 10.8845 4.17599 10.5916 4.46888L8.06009 7.00041L10.5916 9.53193C10.8845 9.82482 10.8845 10.2997 10.5916 10.5926C10.2987 10.8855 9.82385 10.8855 9.53095 10.5926L6.99943 8.06107L4.46783 10.5927C4.17494 10.8856 3.70006 10.8856 3.40717 10.5927C3.11428 10.2998 3.11428 9.8249 3.40717 9.53201L5.93877 7.00041L3.40717 4.46881Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div
|
|
x-show="selected.length == 0"
|
|
class="flex-1"
|
|
>
|
|
<input
|
|
placeholder="Select option"
|
|
class="h-full w-full appearance-none border-0 bg-transparent p-1 pr-2 text-sm outline-hidden placeholder:text-gray-800 focus:border-0 focus:ring-0 focus:outline-hidden dark:placeholder:text-white/90"
|
|
:value="selectedValues()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex w-7 items-center py-1 pr-1 pl-1"
|
|
>
|
|
<button
|
|
type="button"
|
|
@click="open"
|
|
class="h-5 w-5 cursor-pointer text-gray-700 outline-hidden focus:outline-hidden dark:text-gray-400"
|
|
:class="isOpen() === true ? 'rotate-180' : ''"
|
|
>
|
|
<svg
|
|
class="stroke-current"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.39551L10.0001 12.6038L15.2084 7.39551"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full px-4">
|
|
<div
|
|
x-show.transition.origin.top="isOpen()"
|
|
class="max-h-select absolute top-full left-0 z-40 w-full overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900"
|
|
@click.outside="close"
|
|
>
|
|
<div class="flex w-full flex-col">
|
|
<template
|
|
x-for="(option,index) in options"
|
|
:key="index"
|
|
>
|
|
<div>
|
|
<div
|
|
class="hover:bg-primary/5 w-full cursor-pointer rounded-t border-b border-gray-200 dark:border-gray-800"
|
|
@click="select(index,$event)"
|
|
>
|
|
<div
|
|
:class="option.selected ? 'border-primary' : ''"
|
|
class="relative flex w-full items-center border-l-2 border-transparent p-2 pl-2"
|
|
>
|
|
<div
|
|
class="flex w-full items-center"
|
|
>
|
|
<div
|
|
class="mx-2 leading-6 text-gray-800 dark:text-white/90"
|
|
x-model="option"
|
|
x-text="option.text"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
|
|
>
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<h3
|
|
class="text-base font-medium text-gray-800 dark:text-white/90"
|
|
>
|
|
Textarea input field
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
|
|
>
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Description
|
|
</label>
|
|
<textarea
|
|
placeholder="Enter a description..."
|
|
type="text"
|
|
rows="6"
|
|
class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-300 dark:text-white/15"
|
|
>
|
|
Description
|
|
</label>
|
|
<textarea
|
|
placeholder="Enter a description..."
|
|
type="text"
|
|
rows="6"
|
|
disabled
|
|
class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-0 focus:outline-hidden disabled:border-gray-100 disabled:bg-gray-50 disabled:placeholder:text-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:disabled:border-gray-800 dark:disabled:bg-white/[0.03] dark:disabled:placeholder:text-white/15"
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Description
|
|
</label>
|
|
<textarea
|
|
placeholder="Enter a description..."
|
|
type="text"
|
|
rows="6"
|
|
class="dark:bg-dark-900 border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
></textarea>
|
|
<p class="text-theme-xs text-error-500">
|
|
Please enter a message in the textarea.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
|
|
>
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<h3
|
|
class="text-base font-medium text-gray-800 dark:text-white/90"
|
|
>
|
|
Input States
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
Validation styles for error, success and disabled states
|
|
on form controls.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
|
|
>
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Email
|
|
</label>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
value="demoemail"
|
|
class="dark:bg-dark-900 border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 w-full rounded-lg border bg-transparent px-4 py-2.5 pr-10 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
<span
|
|
class="absolute top-1/2 right-3.5 -translate-y-1/2"
|
|
>
|
|
<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="M2.58325 7.99967C2.58325 5.00813 5.00838 2.58301 7.99992 2.58301C10.9915 2.58301 13.4166 5.00813 13.4166 7.99967C13.4166 10.9912 10.9915 13.4163 7.99992 13.4163C5.00838 13.4163 2.58325 10.9912 2.58325 7.99967ZM7.99992 1.08301C4.17995 1.08301 1.08325 4.17971 1.08325 7.99967C1.08325 11.8196 4.17995 14.9163 7.99992 14.9163C11.8199 14.9163 14.9166 11.8196 14.9166 7.99967C14.9166 4.17971 11.8199 1.08301 7.99992 1.08301ZM7.09932 5.01639C7.09932 5.51345 7.50227 5.91639 7.99932 5.91639H7.99999C8.49705 5.91639 8.89999 5.51345 8.89999 5.01639C8.89999 4.51933 8.49705 4.11639 7.99999 4.11639H7.99932C7.50227 4.11639 7.09932 4.51933 7.09932 5.01639ZM7.99998 11.8306C7.58576 11.8306 7.24998 11.4948 7.24998 11.0806V7.29627C7.24998 6.88206 7.58576 6.54627 7.99998 6.54627C8.41419 6.54627 8.74998 6.88206 8.74998 7.29627V11.0806C8.74998 11.4948 8.41419 11.8306 7.99998 11.8306Z"
|
|
fill="#F04438"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
|
|
<p class="text-theme-xs text-error-500 mt-1.5">
|
|
This is an error message.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Email
|
|
</label>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
value="demoemail@gmail.com"
|
|
class="dark:bg-dark-900 border-success-300 shadow-theme-xs focus:border-success-300 focus:ring-success-500/10 dark:border-success-700 dark:focus:border-success-800 w-full rounded-lg border bg-transparent px-4 py-2.5 pr-10 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
<span
|
|
class="absolute top-1/2 right-3.5 -translate-y-1/2"
|
|
>
|
|
<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="M2.61792 8.00034C2.61792 5.02784 5.0276 2.61816 8.00009 2.61816C10.9726 2.61816 13.3823 5.02784 13.3823 8.00034C13.3823 10.9728 10.9726 13.3825 8.00009 13.3825C5.0276 13.3825 2.61792 10.9728 2.61792 8.00034ZM8.00009 1.11816C4.19917 1.11816 1.11792 4.19942 1.11792 8.00034C1.11792 11.8013 4.19917 14.8825 8.00009 14.8825C11.801 14.8825 14.8823 11.8013 14.8823 8.00034C14.8823 4.19942 11.801 1.11816 8.00009 1.11816ZM10.5192 7.266C10.8121 6.97311 10.8121 6.49823 10.5192 6.20534C10.2264 5.91245 9.75148 5.91245 9.45858 6.20534L7.45958 8.20434L6.54162 7.28638C6.24873 6.99349 5.77385 6.99349 5.48096 7.28638C5.18807 7.57927 5.18807 8.05415 5.48096 8.34704L6.92925 9.79533C7.0699 9.93599 7.26067 10.015 7.45958 10.015C7.6585 10.015 7.84926 9.93599 7.98991 9.79533L10.5192 7.266Z"
|
|
fill="#12B76A"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
|
|
<p class="text-theme-xs text-success-500 mt-1.5">
|
|
This is an success message.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-300 dark:text-white/15"
|
|
>
|
|
Email
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="info@gmail.com"
|
|
disabled
|
|
class="shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-300 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:outline-hidden disabled:border-gray-100 disabled:placeholder:text-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-gray-400 dark:disabled:border-gray-800 dark:disabled:placeholder:text-white/15"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div
|
|
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
|
|
>
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<h3
|
|
class="text-base font-medium text-gray-800 dark:text-white/90"
|
|
>
|
|
Input Group
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
|
|
>
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Email
|
|
</label>
|
|
<div class="relative">
|
|
<span
|
|
class="absolute top-1/2 left-0 -translate-y-1/2 border-r border-gray-200 px-3.5 py-3 text-gray-500 dark:border-gray-800 dark:text-gray-400"
|
|
>
|
|
<svg
|
|
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 7.06206V14.375C3.04175 14.6511 3.26561 14.875 3.54175 14.875H16.4584C16.7346 14.875 16.9584 14.6511 16.9584 14.375V7.06245L11.1443 11.1168C10.457 11.5961 9.54373 11.5961 8.85638 11.1168L3.04175 7.06206ZM16.9584 5.19262C16.9584 5.19341 16.9584 5.1942 16.9584 5.19498V5.20026C16.9572 5.22216 16.946 5.24239 16.9279 5.25501L10.2864 9.88638C10.1145 10.0062 9.8862 10.0062 9.71437 9.88638L3.07255 5.25485C3.05342 5.24151 3.04202 5.21967 3.04202 5.19636C3.042 5.15695 3.07394 5.125 3.11335 5.125H16.8871C16.9253 5.125 16.9564 5.15494 16.9584 5.19262ZM18.4584 5.21428V14.375C18.4584 15.4796 17.563 16.375 16.4584 16.375H3.54175C2.43718 16.375 1.54175 15.4796 1.54175 14.375V5.19498C1.54175 5.1852 1.54194 5.17546 1.54231 5.16577C1.55858 4.31209 2.25571 3.625 3.11335 3.625H16.8871C17.7549 3.625 18.4584 4.32843 18.4585 5.19622C18.4585 5.20225 18.4585 5.20826 18.4584 5.21428Z"
|
|
fill="#667085"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
placeholder="info@gmail.com"
|
|
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-300 bg-transparent px-4 py-2.5 pl-[62px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div
|
|
x-data="{
|
|
selectedCountry: 'US',
|
|
countryCodes: {
|
|
'US': '+1',
|
|
'GB': '+44',
|
|
'CA': '+1',
|
|
'AU': '+61'
|
|
},
|
|
phoneNumber: ''
|
|
}"
|
|
>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Phone
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute">
|
|
<select
|
|
x-model="selectedCountry"
|
|
@change="phoneNumber = countryCodes[selectedCountry]"
|
|
class="focus:border-brand-300 focus:ring-brand-500/10 appearance-none rounded-l-lg border-0 border-r border-gray-200 bg-transparent bg-none py-3 pr-8 pl-3.5 leading-tight text-gray-700 focus:ring-3 focus:outline-hidden dark:border-gray-800 dark:text-gray-400"
|
|
>
|
|
<option
|
|
value="US"
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
US
|
|
</option>
|
|
<option
|
|
value="GB"
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
GB
|
|
</option>
|
|
<option
|
|
value="CA"
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
CA
|
|
</option>
|
|
<option
|
|
value="AU"
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
AU
|
|
</option>
|
|
<!-- Add more country codes as needed -->
|
|
</select>
|
|
<div
|
|
class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-700 dark:text-gray-400"
|
|
>
|
|
<svg
|
|
class="stroke-current"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<input
|
|
placeholder="+1 (555) 000-0000"
|
|
x-model="phoneNumber"
|
|
type="tel"
|
|
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-300 bg-transparent py-3 pr-4 pl-[84px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div
|
|
x-data="{
|
|
selectedCountry: 'US',
|
|
countryCodes: {
|
|
'US': '+1',
|
|
'GB': '+44',
|
|
'CA': '+1',
|
|
'AU': '+61'
|
|
},
|
|
phoneNumber: ''
|
|
}"
|
|
>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Phone
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute right-0">
|
|
<select
|
|
x-model="selectedCountry"
|
|
@change="phoneNumber = countryCodes[selectedCountry]"
|
|
class="focus:border-brand-300 focus:ring-brand-500/10 appearance-none rounded-r-lg border-0 border-l border-gray-200 bg-transparent bg-none py-3 pr-8 pl-3.5 leading-tight text-gray-700 focus:ring-3 focus:outline-hidden dark:border-gray-800 dark:text-gray-400"
|
|
>
|
|
<option
|
|
value="US"
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
US
|
|
</option>
|
|
<option
|
|
value="GB"
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
GB
|
|
</option>
|
|
<option
|
|
value="CA"
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
CA
|
|
</option>
|
|
<option
|
|
value="AU"
|
|
class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
|
|
>
|
|
AU
|
|
</option>
|
|
<!-- Add more country codes as needed -->
|
|
</select>
|
|
<div
|
|
class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-700 dark:text-gray-400"
|
|
>
|
|
<svg
|
|
class="stroke-current"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<input
|
|
placeholder="+1 (555) 000-0000"
|
|
x-model="phoneNumber"
|
|
type="tel"
|
|
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-300 bg-transparent py-3 pr-[84px] pl-3 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
URL
|
|
</label>
|
|
<div class="relative">
|
|
<span
|
|
class="absolute top-1/2 left-0 inline-flex h-11 -translate-y-1/2 items-center justify-center border-r border-gray-200 py-3 pr-3 pl-3.5 text-gray-500 dark:border-gray-800 dark:text-gray-400"
|
|
>
|
|
http://
|
|
</span>
|
|
<input
|
|
type="url"
|
|
placeholder="www.tailadmin.com"
|
|
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-300 bg-transparent px-4 py-2.5 pl-[90px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div id="copy-input">
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Website
|
|
</label>
|
|
<div class="relative">
|
|
<button
|
|
id="copy-button"
|
|
class="absolute top-1/2 right-0 inline-flex -translate-y-1/2 cursor-pointer items-center gap-1 border-l border-gray-200 py-3 pr-3 pl-3.5 text-sm font-medium text-gray-700 dark:border-gray-800 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="M6.58822 4.58398C6.58822 4.30784 6.81207 4.08398 7.08822 4.08398H15.4154C15.6915 4.08398 15.9154 4.30784 15.9154 4.58398L15.9154 12.9128C15.9154 13.189 15.6916 13.4128 15.4154 13.4128H7.08821C6.81207 13.4128 6.58822 13.189 6.58822 12.9128V4.58398ZM7.08822 2.58398C5.98365 2.58398 5.08822 3.47942 5.08822 4.58398V5.09416H4.58496C3.48039 5.09416 2.58496 5.98959 2.58496 7.09416V15.4161C2.58496 16.5207 3.48039 17.4161 4.58496 17.4161H12.9069C14.0115 17.4161 14.9069 16.5207 14.9069 15.4161L14.9069 14.9128H15.4154C16.52 14.9128 17.4154 14.0174 17.4154 12.9128L17.4154 4.58398C17.4154 3.47941 16.52 2.58398 15.4154 2.58398H7.08822ZM13.4069 14.9128H7.08821C5.98364 14.9128 5.08822 14.0174 5.08822 12.9128V6.59416H4.58496C4.30882 6.59416 4.08496 6.81801 4.08496 7.09416V15.4161C4.08496 15.6922 4.30882 15.9161 4.58496 15.9161H12.9069C13.183 15.9161 13.4069 15.6922 13.4069 15.4161L13.4069 14.9128Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
<div id="copy-text">Copy</div>
|
|
</button>
|
|
<input
|
|
value="www.tailadmin.com"
|
|
type="url"
|
|
id="website-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-300 bg-transparent py-3 pr-[90px] pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
|
|
>
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<h3
|
|
class="text-base font-medium text-gray-800 dark:text-white/90"
|
|
>
|
|
File Input
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
|
|
>
|
|
<!-- Elements -->
|
|
<div>
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Upload file
|
|
</label>
|
|
<input
|
|
type="file"
|
|
class="focus:border-ring-brand-300 shadow-theme-xs focus:file:ring-brand-300 h-11 w-full overflow-hidden rounded-lg border border-gray-300 bg-transparent text-sm text-gray-500 transition-colors file:mr-5 file:border-collapse file:cursor-pointer file:rounded-l-lg file:border-0 file:border-r file:border-solid file:border-gray-200 file:bg-gray-50 file:py-3 file:pr-3 file:pl-3.5 file:text-sm file:text-gray-700 placeholder:text-gray-400 hover:file:bg-gray-100 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:text-white/90 dark:file:border-gray-800 dark:file:bg-white/[0.03] dark:file:text-gray-400 dark:placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
|
|
>
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<h3
|
|
class="text-base font-medium text-gray-800 dark:text-white/90"
|
|
>
|
|
Checkboxes
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
|
|
>
|
|
<!-- Elements -->
|
|
<div class="flex flex-wrap items-center gap-8">
|
|
<div x-data="{ checkboxToggle: false }">
|
|
<label
|
|
for="checkboxLabelOne"
|
|
class="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="checkboxLabelOne"
|
|
class="sr-only"
|
|
@change="checkboxToggle = !checkboxToggle"
|
|
/>
|
|
<div
|
|
:class="checkboxToggle ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'"
|
|
class="f hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]"
|
|
>
|
|
<span :class="checkboxToggle ? '' : 'opacity-0'">
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
|
|
stroke="white"
|
|
stroke-width="1.94437"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
Default
|
|
</label>
|
|
</div>
|
|
|
|
<div x-data="{ checkboxToggle: true }">
|
|
<label
|
|
for="checkboxLabelTwo"
|
|
class="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="checkboxLabelTwo"
|
|
class="sr-only"
|
|
@change="checkboxToggle = !checkboxToggle"
|
|
/>
|
|
<div
|
|
:class="checkboxToggle ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'"
|
|
class="hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]"
|
|
>
|
|
<span :class="checkboxToggle ? '' : 'opacity-0'">
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
|
|
stroke="white"
|
|
stroke-width="1.94437"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
Checked
|
|
</label>
|
|
</div>
|
|
|
|
<div x-data="{ checkboxToggle: true }">
|
|
<label
|
|
for="checkboxLabelThree"
|
|
class="flex cursor-pointer items-center text-sm font-medium text-gray-300 select-none dark:text-gray-700"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="checkboxLabelThree"
|
|
class="peer sr-only"
|
|
@change="checkboxToggle = !checkboxToggle"
|
|
disabled
|
|
/>
|
|
<div
|
|
:class="checkboxToggle ? 'bg-transparent border-gray-200 dark:border-gray-800' : 'border-brand-500 bg-brand-500'"
|
|
class="mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]"
|
|
>
|
|
<span :class="checkboxToggle ? '' : 'opacity-0'">
|
|
<svg
|
|
class="stroke-gray-200 dark:stroke-gray-800"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
|
|
stroke=""
|
|
stroke-width="2.33333"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
Disabled
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
|
|
>
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<h3
|
|
class="text-base font-medium text-gray-800 dark:text-white/90"
|
|
>
|
|
Radio Buttons
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
|
|
>
|
|
<!-- Elements -->
|
|
<div class="flex flex-wrap items-center gap-8">
|
|
<div x-data="{ checkboxToggle: false }">
|
|
<label
|
|
for="radioLabelOne"
|
|
class="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="radioLabelOne"
|
|
class="sr-only"
|
|
@change="checkboxToggle = !checkboxToggle"
|
|
/>
|
|
<div
|
|
:class="checkboxToggle ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'"
|
|
class="hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px]"
|
|
>
|
|
<span
|
|
class="h-2 w-2 rounded-full"
|
|
:class="checkboxToggle ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
Default
|
|
</label>
|
|
</div>
|
|
|
|
<div x-data="{ checkboxToggle: true }">
|
|
<label
|
|
for="radioLabelTwo"
|
|
class="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="radioLabelTwo"
|
|
class="sr-only"
|
|
@change="checkboxToggle = !checkboxToggle"
|
|
/>
|
|
<div
|
|
:class="checkboxToggle ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'"
|
|
class="hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px]"
|
|
>
|
|
<span
|
|
class="h-2 w-2 rounded-full"
|
|
:class="checkboxToggle ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
Secondary
|
|
</label>
|
|
</div>
|
|
|
|
<div x-data="{ checkboxToggle: false }">
|
|
<label
|
|
for="radioLabelThree"
|
|
class="flex cursor-pointer items-center text-sm font-medium text-gray-300 select-none dark:text-gray-700"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="radioLabelThree"
|
|
class="peer sr-only"
|
|
@change="checkboxToggle = !checkboxToggle"
|
|
disabled
|
|
/>
|
|
<div
|
|
:class="checkboxToggle ? 'bg-transparent border-gray-300 dark:border-gray-700' : 'border-brand-500 bg-brand-500'"
|
|
class="mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px]"
|
|
>
|
|
<span
|
|
class="h-2 w-2 rounded-full"
|
|
:class="checkboxToggle ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
Disabled Secondary
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
|
|
>
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<h3
|
|
class="text-base font-medium text-gray-800 dark:text-white/90"
|
|
>
|
|
Toggle switch input
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
|
|
>
|
|
<!-- Elements -->
|
|
<div
|
|
class="mb-6 flex flex-wrap items-center gap-6 sm:gap-8"
|
|
>
|
|
<div x-data="{ switcherToggle: false }">
|
|
<label
|
|
for="toggle1"
|
|
class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="toggle1"
|
|
class="sr-only"
|
|
@change="switcherToggle = !switcherToggle"
|
|
/>
|
|
<div
|
|
class="block h-6 w-11 rounded-full"
|
|
:class="switcherToggle ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'"
|
|
></div>
|
|
<div
|
|
:class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
|
|
class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
|
|
></div>
|
|
</div>
|
|
|
|
Default
|
|
</label>
|
|
</div>
|
|
|
|
<div x-data="{ switcherToggle: true }">
|
|
<label
|
|
for="toggle2"
|
|
class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="toggle2"
|
|
class="sr-only"
|
|
@change="switcherToggle = !switcherToggle"
|
|
/>
|
|
<div
|
|
class="block h-6 w-11 rounded-full"
|
|
:class="switcherToggle ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'"
|
|
></div>
|
|
<div
|
|
:class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
|
|
class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
|
|
></div>
|
|
</div>
|
|
|
|
Checked
|
|
</label>
|
|
</div>
|
|
|
|
<div x-data="{ switcherToggle: false }">
|
|
<label
|
|
for="toggle3"
|
|
class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-400 select-none"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="toggle3"
|
|
class="sr-only"
|
|
@change="switcherToggle = !switcherToggle"
|
|
disabled
|
|
/>
|
|
<div
|
|
class="block h-6 w-11 rounded-full"
|
|
:class="switcherToggle ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-100 dark:bg-gray-800'"
|
|
></div>
|
|
<div
|
|
:class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
|
|
class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-gray-50 duration-300 ease-linear"
|
|
></div>
|
|
</div>
|
|
|
|
Disabled
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elements -->
|
|
<div class="flex flex-wrap items-center gap-6 sm:gap-8">
|
|
<div x-data="{ switcherToggle: false }">
|
|
<label
|
|
for="toggle11"
|
|
class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="toggle11"
|
|
class="sr-only"
|
|
@change="switcherToggle = !switcherToggle"
|
|
/>
|
|
<div
|
|
class="block h-6 w-11 rounded-full bg-gray-700 dark:bg-white/10"
|
|
></div>
|
|
<div
|
|
:class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
|
|
class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
|
|
></div>
|
|
</div>
|
|
|
|
Default
|
|
</label>
|
|
</div>
|
|
|
|
<div x-data="{ switcherToggle: true }">
|
|
<label
|
|
for="toggle22"
|
|
class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="toggle22"
|
|
class="sr-only"
|
|
@change="switcherToggle = !switcherToggle"
|
|
/>
|
|
<div
|
|
class="block h-6 w-11 rounded-full bg-gray-700 dark:bg-white/10"
|
|
></div>
|
|
<div
|
|
:class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
|
|
class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
|
|
></div>
|
|
</div>
|
|
|
|
Checked
|
|
</label>
|
|
</div>
|
|
|
|
<div x-data="{ switcherToggle: false }">
|
|
<label
|
|
for="toggle33"
|
|
class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-400 select-none"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="toggle33"
|
|
class="sr-only"
|
|
@change="switcherToggle = !switcherToggle"
|
|
disabled
|
|
/>
|
|
<div
|
|
class="block h-6 w-11 rounded-full bg-gray-100 dark:bg-gray-800"
|
|
></div>
|
|
<div
|
|
:class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
|
|
class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-gray-50 duration-300 ease-linear"
|
|
></div>
|
|
</div>
|
|
|
|
Disabled
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
|
|
>
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<h3
|
|
class="text-base font-medium text-gray-800 dark:text-white/90"
|
|
>
|
|
Dropzone
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
|
|
>
|
|
<form
|
|
class="dropzone hover:border-brand-500! dark:hover:border-brand-500! rounded-xl border border-dashed! border-gray-300! bg-gray-50 p-7 lg:p-10 dark:border-gray-700! dark:bg-gray-900"
|
|
id="demo-upload"
|
|
action="/upload"
|
|
>
|
|
<div class="dz-message m-0!">
|
|
<div class="mb-[22px] flex justify-center">
|
|
<div
|
|
class="flex h-[68px] w-[68px] items-center justify-center rounded-full bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-400"
|
|
>
|
|
<svg
|
|
class="fill-current"
|
|
width="29"
|
|
height="28"
|
|
viewBox="0 0 29 28"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M14.5019 3.91699C14.2852 3.91699 14.0899 4.00891 13.953 4.15589L8.57363 9.53186C8.28065 9.82466 8.2805 10.2995 8.5733 10.5925C8.8661 10.8855 9.34097 10.8857 9.63396 10.5929L13.7519 6.47752V18.667C13.7519 19.0812 14.0877 19.417 14.5019 19.417C14.9161 19.417 15.2519 19.0812 15.2519 18.667V6.48234L19.3653 10.5929C19.6583 10.8857 20.1332 10.8855 20.426 10.5925C20.7188 10.2995 20.7186 9.82463 20.4256 9.53184L15.0838 4.19378C14.9463 4.02488 14.7367 3.91699 14.5019 3.91699ZM5.91626 18.667C5.91626 18.2528 5.58047 17.917 5.16626 17.917C4.75205 17.917 4.41626 18.2528 4.41626 18.667V21.8337C4.41626 23.0763 5.42362 24.0837 6.66626 24.0837H22.3339C23.5766 24.0837 24.5839 23.0763 24.5839 21.8337V18.667C24.5839 18.2528 24.2482 17.917 23.8339 17.917C23.4197 17.917 23.0839 18.2528 23.0839 18.667V21.8337C23.0839 22.2479 22.7482 22.5837 22.3339 22.5837H6.66626C6.25205 22.5837 5.91626 22.2479 5.91626 21.8337V18.667Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<h4
|
|
class="text-theme-xl mb-3 font-semibold text-gray-800 dark:text-white/90"
|
|
>
|
|
Drop File Here
|
|
</h4>
|
|
<span
|
|
class="mx-auto mb-5 block w-full max-w-[290px] text-sm text-gray-700 dark:text-gray-400"
|
|
>
|
|
Drag and drop your PNG, JPG, WebP, SVG images here or
|
|
browse
|
|
</span>
|
|
|
|
<span
|
|
class="text-theme-sm text-brand-500 font-medium underline"
|
|
>
|
|
Browse File
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ====== Form Elements Section End -->
|
|
</div>
|
|
</main>
|
|
<!-- ===== Main Content End ===== -->
|
|
</div>
|
|
<!-- ===== Content Area End ===== -->
|
|
</div>
|
|
<!-- ===== Page Wrapper End ===== -->
|
|
|
|
<script>
|
|
function dropdown() {
|
|
return {
|
|
options: [],
|
|
selected: [],
|
|
show: false,
|
|
open() {
|
|
this.show = true;
|
|
},
|
|
close() {
|
|
this.show = false;
|
|
},
|
|
isOpen() {
|
|
return this.show === true;
|
|
},
|
|
select(index, event) {
|
|
if (!this.options[index].selected) {
|
|
this.options[index].selected = true;
|
|
this.options[index].element = event.target;
|
|
this.selected.push(index);
|
|
} else {
|
|
this.selected.splice(this.selected.lastIndexOf(index), 1);
|
|
this.options[index].selected = false;
|
|
}
|
|
},
|
|
remove(index, option) {
|
|
this.options[option].selected = false;
|
|
this.selected.splice(index, 1);
|
|
},
|
|
loadOptions() {
|
|
const options = document.getElementById("select").options;
|
|
for (let i = 0; i < options.length; i++) {
|
|
this.options.push({
|
|
value: options[i].value,
|
|
text: options[i].innerText,
|
|
selected:
|
|
options[i].getAttribute("selected") != null
|
|
? options[i].getAttribute("selected")
|
|
: false,
|
|
});
|
|
}
|
|
},
|
|
selectedValues() {
|
|
return this.selected.map((option) => {
|
|
return this.options[option].value;
|
|
});
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
<script defer src="bundle.js"></script></body>
|
|
</html>
|