1172 lines
71 KiB
HTML
1172 lines
71 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="h-full">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!--:Code snippet style:-->
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
|
|
<title>Raven - Admin Dashboard</title>
|
|
<link rel="icon" href="images/favicon.png" type="image/png">
|
|
<!--Simplebar-->
|
|
<link rel="stylesheet" href="vendor/css/simplebar.css">
|
|
<!--:Fonts:-->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
|
|
<!--:Main Style:-->
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
</head>
|
|
|
|
<body
|
|
class="font-theme flex flex-col h-full text-base font-normal bg-zinc-50 dark:bg-zinc-950 text-zinc-600 dark:text-zinc-300">
|
|
<aside
|
|
class="shadow-card bg-white dark:bg-zinc-900 fixed start-0 transition-all ltr:-translate-x-full ltr:lg:-translate-x-0 rtl:translate-x-full rtl:lg:translate-x-0 top-0 w-64 h-full flex flex-col z-[52] app-sidebar">
|
|
<div class="shrink-0 h-16 px-5 flex items-center">
|
|
<div class="relative flex items-center justify-between w-full">
|
|
<a href="index.html" class="flex items-center relative z-[1]">
|
|
<span
|
|
class="flex size-8 items-center justify-center rounded-full bg-gradient-to-tl from-primary via-primary-deep to-primary-deep text-white shrink-0 font-normal">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px"
|
|
fill="currentColor">
|
|
<path
|
|
d="m400-240-51 123q-6 15-21.5 21.5T297-95q-15-6-21.5-21.5T275-147l43-104q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l191 78q13 5 12.5 18.5T512-742l-112 42v60l426 271q7 5 11 11.5t6 14.5l28 140q3 17-7.5 30T836-160h-14q-11 0-19-5.5T790-180l-30-60H560v120q0 17-11.5 28.5T520-80q-17 0-28.5-11.5T480-120v-120h-80ZM240-680q-17 0-28.5-11.5T200-720q0-17 11.5-28.5T240-760q17 0 28.5 11.5T280-720q0 17-11.5 28.5T240-680Zm160 320Zm0 40h353l-63-40H400q-36 0-67.5-14.5T279-415q-13-14-25-38.5T242-498q0-17 11.5-28.5T282-538q15 0 26 10t14 24q5 28 27 46t51 18h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70Z" />
|
|
</svg>
|
|
</span>
|
|
<h5 class="text-2xl ms-3 logo-text font-display">Raven</h5>
|
|
</a>
|
|
<!--Sidebar mini for lg screen-->
|
|
<button id="isSidebarMini"
|
|
class="btn-sidebar-min hidden lg:flex size-7 flex items-center justify-center hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-md cursor-w-resize">
|
|
<span class="icon-[lucide--sidebar] rtl:rotate-180"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col h-full overflow-y-auto" data-simplebar>
|
|
<div class="flex flex-col py-3 px-3">
|
|
<nav class="flex flex-col space-y-0.5" id="SidebarCollapseGroup">
|
|
<!--:Menu title:-->
|
|
<span class="text-xs text-zinc-400 mb-2 ps-4 sidebar-title uppercase font-semibold whitespace-nowrap">Overview</span>
|
|
<a href="index.html" class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--file-chart-column]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Analytic</span>
|
|
</a>
|
|
<a href="index-ecommerce.html" class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--shopping-bag]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Ecommerce</span>
|
|
</a>
|
|
<a href="index-marketing.html" class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--diamond-percent]"></span>
|
|
</span>
|
|
<span class="sidebar-text">marketing</span>
|
|
</a>
|
|
<a href="index-restaurant.html" class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--pizza]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Restaurant</span>
|
|
<span class="ms-auto badge bg-primary text-white">New</span>
|
|
</a>
|
|
<a href="index-education.html" class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--book-open]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Education</span>
|
|
</a>
|
|
<a href="index-social.html" class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--at-sign]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Social</span>
|
|
</a>
|
|
|
|
<a href="index-jobs.html" class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--briefcase-business]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Jobs</span>
|
|
</a>
|
|
<a href="widgets.html" class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--wand-sparkles]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Widgets</span> <span
|
|
class="ms-auto badge bg-green-500/10 text-green-500">50+</span>
|
|
</a>
|
|
<!--:Menu title:-->
|
|
<span class="text-xs text-zinc-400 mt-5 mb-2 ps-4 sidebar-title uppercase font-semibold whitespace-nowrap">Concepts</span>
|
|
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cApps"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--component]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Apps</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cApps"
|
|
class="collapse sidebar-collapse w-48 z-50 ">
|
|
<div class="py-1">
|
|
<a href="app-api.html" class="sidebar-collapse-item @@app_api">API </a>
|
|
<a href="app-inbox.html" class="sidebar-collapse-item @@app_inbox">Inbox</a>
|
|
<a href="app-chat.html" class="sidebar-collapse-item @@app_chat">Chat</a>
|
|
<a href="app-calendar.html" class="sidebar-collapse-item @@app_calendar">Calendar</a>
|
|
<a href="app-file-manager.html" class="sidebar-collapse-item @@app_file_manager">File
|
|
manager</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cAccount"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--circle-user-round]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Account</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cAccount"
|
|
class="collapse sidebar-collapse w-48 z-50 ">
|
|
<div class="py-1">
|
|
<a href="account-profile.html"
|
|
class="sidebar-collapse-item @@account_profile">Profile</a>
|
|
<a href="account-settings.html"
|
|
class="sidebar-collapse-item @@account_settings">Settings</a>
|
|
<a href="account-activity-log.html"
|
|
class="sidebar-collapse-item @@account_activty">Acitivity
|
|
log</a>
|
|
<a href="account-roles-permissions.html" class="sidebar-collapse-item @@account_roles">Roles
|
|
&
|
|
permissions</a>
|
|
<a href="account-pricing.html" class="sidebar-collapse-item @@account_pricing">Pricing</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cEducation"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--book-open]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Education</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cEducation"
|
|
class="collapse sidebar-collapse w-48 z-50 ">
|
|
<div class="py-1">
|
|
<a href="education-courses.html"
|
|
class="sidebar-collapse-item @@edu_courses">Courses</a>
|
|
<a href="education-course-details.html"
|
|
class="sidebar-collapse-item @@edu_course_details">Course details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cProjects"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--folder-open]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Projects</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cProjects"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="project-scrum-board.html" class="sidebar-collapse-item @@project_scrum">Scrum
|
|
board</a>
|
|
<a href="projects-list.html" class="sidebar-collapse-item @@projects_list">List</a>
|
|
<a href="project-details.html" class="sidebar-collapse-item @@project_details">Details</a>
|
|
<a href="project-tasks.html" class="sidebar-collapse-item @@project_tasks">Tasks</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cProducts"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--baggage-claim]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Products</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cProducts"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="products-list.html" class="sidebar-collapse-item @@products_list">List</a>
|
|
<a href="product-details.html" class="sidebar-collapse-item @@product_details">Details</a>
|
|
<a href="product-edit.html" class="sidebar-collapse-item @@product_edit">Edit</a>
|
|
<a href="product-add.html" class="sidebar-collapse-item @@product_add">Add</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-display="static" data-bs-toggle="collapse" href="#cCustomers"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--users]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Customers</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cCustomers"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="customer-list.html" class="sidebar-collapse-item @@customer_list">List</a>
|
|
<a href="customer-details.html" class="sidebar-collapse-item @@customer_details">Details</a>
|
|
<a href="customer-edit.html" class="sidebar-collapse-item @@customer_edit">Edit</a>
|
|
<a href="customer-create.html" class="sidebar-collapse-item @@customer_create">Create</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-display="static" data-bs-toggle="collapse" href="#cHelp"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--life-buoy]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Help Center</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cHelp"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="support-hub.html" class="sidebar-collapse-item @@support_hub">Support hub</a>
|
|
<a href="support-articles.html"
|
|
class="sidebar-collapse-item @@support_articles">Articles</a>
|
|
<a href="support-article.html" class="sidebar-collapse-item @@support_article">Article</a>
|
|
<a href="support-articles-manage.html"
|
|
class="sidebar-collapse-item @@support_articles_manage">Manage
|
|
articles</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Menu title:-->
|
|
<span class="text-xs text-zinc-400 mt-5 mb-2 ps-4 sidebar-title uppercase font-semibold whitespace-nowrap">Pages</span>
|
|
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cAuth" class="sidebar-link">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--key-round]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Auth</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cAuth" class="collapse sidebar-collapse">
|
|
<div class="py-1">
|
|
<a href="auth-signin-side.html" class="sidebar-collapse-item">Side layouts</a>
|
|
<a href="auth-signin.html" class="sidebar-collapse-item">Signin</a>
|
|
<a href="auth-signup.html" class="sidebar-collapse-item">Signup</a>
|
|
<a href="auth-forgot-password.html" class="sidebar-collapse-item">Forgot password</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cExtras"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--layers-2]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Extras</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cExtras"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="page-invoice.html" class="sidebar-collapse-item components_invoice">Invoice</a>
|
|
<a href="page-search-results.html" class="sidebar-collapse-item components_search">Search
|
|
results</a>
|
|
<a href="page-blank.html" class="sidebar-collapse-item components_blank">Blank</a>
|
|
<a href="page-error-404.html" class="sidebar-collapse-item components_404">Error 404</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Menu title:-->
|
|
<span class="text-xs text-zinc-400 mt-5 mb-2 ps-4 sidebar-title uppercase font-semibold whitespace-nowrap">Layouts</span>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cLayouts"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--layout]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Layouts</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cLayouts"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="layout-default.html" class="sidebar-collapse-item @@layout_default">Default</a>
|
|
<a href="layout-compact.html" class="sidebar-collapse-item @@layout_compact">Compact</a>
|
|
<a href="layout-horizontal.html"
|
|
class="sidebar-collapse-item @@layout_horizontal">Horizontal</a>
|
|
<a href="layout-combo.html"
|
|
class="sidebar-collapse-item @@layout_combo">Combo <span class="badge bg-pink-500/10 text-pink-500 ms-auto">Hot</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Menu title:-->
|
|
<span class="text-xs text-zinc-400 mt-5 mb-2 ps-4 sidebar-title uppercase font-semibold whitespace-nowrap">Components</span>
|
|
|
|
<div class="static">
|
|
<a data-bs-display="static" data-bs-toggle="collapse" href="#cComponents"
|
|
class="sidebar-link active">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--file-code-2]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Components</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cComponents"
|
|
class="collapse sidebar-collapse show">
|
|
<div class="py-1">
|
|
<a href="component-alert.html" class="sidebar-collapse-item active">Alert</a>
|
|
<a href="component-avatar.html" class="sidebar-collapse-item @@component_avatar">Avatar</a>
|
|
<a href="component-animation.html"
|
|
class="sidebar-collapse-item @@component_animation">Animation</a>
|
|
<a href="component-button.html" class="sidebar-collapse-item @@component_button">Button</a>
|
|
<a href="component-badge.html" class="sidebar-collapse-item @@component_badge">Badge</a>
|
|
<a href="component-breadcrum.html"
|
|
class="sidebar-collapse-item @@component_breadcrumb">Breadcrumb</a>
|
|
<a href="component-card.html" class="sidebar-collapse-item @@component_card">Card</a>
|
|
<a href="component-collapse.html"
|
|
class="sidebar-collapse-item @@component_collapse">Collapse</a>
|
|
<a href="component-dropdown.html"
|
|
class="sidebar-collapse-item @@component_dropdown">Dropdown</a>
|
|
<a href="component-icons.html" class="sidebar-collapse-item @@component_icons">Icons</a>
|
|
<a href="component-grid.html" class="sidebar-collapse-item @@component_grid">Grid</a>
|
|
<a href="component-modal.html" class="sidebar-collapse-item @@component_modal">Modal</a>
|
|
|
|
<a href="component-navs.html"
|
|
class="sidebar-collapse-item @@component_navs">Navs</a>
|
|
<a href="component-offcanvas.html"
|
|
class="sidebar-collapse-item @@component_offcanvas">Offcanvas</a>
|
|
<a href="component-progress.html"
|
|
class="sidebar-collapse-item @@component_progress">Progress</a>
|
|
<a href="component-pagination.html"
|
|
class="sidebar-collapse-item @@component_pagination">Pagination</a>
|
|
<a href="component-tabbed-content.html"
|
|
class="sidebar-collapse-item @@component_tabs">Tabbed
|
|
Content</a>
|
|
<a href="component-typography.html"
|
|
class="sidebar-collapse-item @@component_typography">Typography</a>
|
|
<a href="component-tooltip.html"
|
|
class="sidebar-collapse-item @@component_tooltip">Tooltip &
|
|
popovers</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="modal-examples.html" class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--app-window]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Modal examples</span> <span
|
|
class="ms-auto badge bg-green-500/10 text-green-500">Hot</span>
|
|
</a>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cAdvancedUI"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--award]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Advance UI</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cAdvancedUI"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="advanceui-sortablejs.html" class="sidebar-collapse-item @@advanceUI_sortablejs">Sortable Js</a>
|
|
<a href="advanceui-sweet-alerts.html" class="sidebar-collapse-item @@advanceUI_swal">Sweet Alerts</a>
|
|
<a href="advanceui-step-wizard.html" class="sidebar-collapse-item @@advanceUI_wizard">Step Wizard</a>
|
|
<a href="advanceui-text-divider.html" class="sidebar-collapse-item @@advanceUI_divider">Text Divider</a>
|
|
<a href="advanceui-timeline.html" class="sidebar-collapse-item @@advanceUI_timeline">Timeline</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cGraphs"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--file-chart-line]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Graphs</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cGraphs"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="graphs-echarts.html" class="sidebar-collapse-item @@graph_echarts">Echarts</a>
|
|
<a href="graphs-map.html" class="sidebar-collapse-item @@graph_map">Map</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cForms"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--file-edit]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Forms</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cForms"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="forms-input.html" class="sidebar-collapse-item @@form_input">Input</a>
|
|
<a href="forms-radio-checkbox.html"
|
|
class="sidebar-collapse-item @@form_radio_checkbox">Radio &
|
|
checkbox</a>
|
|
<a href="forms-select.html" class="sidebar-collapse-item @@form_select">Select</a>
|
|
<a href="forms-validation.html"
|
|
class="sidebar-collapse-item @@form_validation">Validation</a>
|
|
<a href="forms-autosize.html"
|
|
class="sidebar-collapse-item @@form_autosize">Autosize</a>
|
|
<a href="forms-cleave-js.html"
|
|
class="sidebar-collapse-item @@form_cleave">Cleave Inputs</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cTables"
|
|
class="sidebar-link ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--table]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Tables</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cTables"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="tables-default.html" class="sidebar-collapse-item @@tables_default">Default</a>
|
|
<a href="tables-datatables.html" class="sidebar-collapse-item @@tables_datatables">Datatables</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Menu title:-->
|
|
<span class="text-xs text-zinc-400 mt-5 mb-2 ps-4 sidebar-title uppercase font-semibold whitespace-nowrap">Others</span>
|
|
<a href="https://uigator.com/tailwindcss/raven-v2.8.5/landing/" target="_blank"
|
|
class="sidebar-link flex items-center">
|
|
<span class="sidebar-icon text-primary !opacity-100">
|
|
<span class="icon-[lucide--eye]"></span>
|
|
</span>
|
|
<span class="sidebar-text">landing page</span>
|
|
</a>
|
|
<a href="https://uigator.com/tailwindcss/raven-v2.8.5/demo2/" target="_blank"
|
|
class="sidebar-link flex items-center">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--layout]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Demo 2</span>
|
|
</a>
|
|
<a href="#!"
|
|
class="sidebar-link flex items-center ">
|
|
<span class="sidebar-icon text-amber-500 !opacity-100">
|
|
<span class="icon-[lucide--stars]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Special Menu</span>
|
|
</a>
|
|
<a href="#!"
|
|
class="sidebar-link flex items-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--list-restart]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Label Menu</span>
|
|
<span class="ms-auto badge bg-sky-500 text-white">Label</span>
|
|
</a>
|
|
<a href="#!"
|
|
class="sidebar-link flex items-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--panel-left-right-dashed]"></span>
|
|
</span>
|
|
<span class="sidebar-text">
|
|
<span class="block leading-tight">Description</span>
|
|
<span class="text-sm text-gray-400 truncate leading-tight">Lorem ipsum dollar sit amet goes here</span>
|
|
</span>
|
|
</a>
|
|
<a href="#!"
|
|
class="sidebar-link disabled [.disabled]:pointer-events-none [.disabled]:opacity-70 flex items-center ">
|
|
<span class="sidebar-icon !opacity-100">
|
|
<span class="icon-[lucide--ban]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Disabled Menu</span>
|
|
</a>
|
|
<div class="static">
|
|
<a data-bs-toggle="collapse" href="#cMLevels" class="sidebar-link">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--layers]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Multi level</span>
|
|
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
|
|
</a>
|
|
<div data-bs-parent="#SidebarCollapseGroup" id="cMLevels"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="#!" class="sidebar-collapse-item">Level 1</a>
|
|
<a href="#!" class="sidebar-collapse-item">Level 1</a>
|
|
<a href="#cMLevel2" data-bs-toggle="collapse"
|
|
class="sidebar-collapse-item flex items-center">Level 2
|
|
<span class="icon-[lucide--chevron-up] sidebar-collapse-item-arrow ms-auto"></span></a>
|
|
<div class="sidebar-collapse-level-1">
|
|
<div id="cMLevel2"
|
|
class="collapse sidebar-collapse ">
|
|
<div class="py-1">
|
|
<a href="#!" class="sidebar-collapse-item">Level 1</a>
|
|
<a href="#!" class="sidebar-collapse-item">Level 1</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!--:CTA:-->
|
|
<div class="text-center sidebar-cta pt-4">
|
|
<div class="p-4 rounded-xl bg-gradient-to-tr from-blue-500 to-primary">
|
|
<img src="images/illustrations/wallet.png" alt="" class="w-16 mx-auto block mb-4">
|
|
<h5 class="mb-3 !text-white">
|
|
Unlock premium features and elevate your workflow
|
|
</h5>
|
|
<button type="button"
|
|
class="btn btn-sm bg-white text-zinc-700 hover:bg-zinc-100 hover:text-primary">Upgrade to
|
|
Pro</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-3 px-5 flex flex-col shrink-0">
|
|
<div class="static">
|
|
<a data-bs-auto-close="outside" data-bs-offset="10,10" data-bs-boundry="viewport" data-bs-toggle="dropdown"
|
|
href="#" class="block">
|
|
<div class="flex flex-nowrap items-center gap-3.5 rounded-lg">
|
|
<img src="images/avatars/thumb-1.jpg" class="min-w-8 mx-auto block max-w-8 rounded-full shrink-0" alt="">
|
|
<div class="flex-grow shrink-0 flex items-center justify-between">
|
|
<h6 class="!text-current user-text">Emily Docker</h6>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="dropdown-menu w-54 z-50">
|
|
<div class="flex items-center gap-3.5 p-2 mb-2 rounded-lg bg-zinc-50 dark:bg-zinc-800">
|
|
<img src="images/avatars/thumb-1.jpg" class="w-7 shrink-0 rounded-full shrink-0" alt="">
|
|
<div class="flex-grow">
|
|
<p class="text-sm text-muted">Signed in as</p>
|
|
<p class="text-sm">emily.d@mail.com</p>
|
|
</div>
|
|
<span class="shrink-0 pl-2">
|
|
<span class="icon-[solar--verified-check-bold] text-green-500"></span>
|
|
</span>
|
|
</div>
|
|
<a href="account-profile.html" class="dropdown-item">
|
|
<span class="dropdown-icon">
|
|
<span class="icon-[lucide--user]"></span>
|
|
</span>Profile</a>
|
|
<a href="account-settings.html" class="dropdown-item">
|
|
<span class="dropdown-icon">
|
|
<span class="icon-[lucide--settings]"></span>
|
|
</span>Settings</a>
|
|
<hr class="border-zinc-100 dark:border-zinc-800 my-2">
|
|
<a href="auth-signin.html" class="dropdown-item">
|
|
<span class="dropdown-icon">
|
|
<span class="icon-[lucide--log-out]"></span>
|
|
</span>Sign out</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
<main class="flex-1 lg:ms-64 flex flex-col app-content">
|
|
<div
|
|
class="bg-zinc-50/80 backdrop-blur-sm dark:bg-zinc-950 flex shrink-0 items-center justify-between px-4 lg:px-8 h-16 z-50 sticky top-0 app-header">
|
|
<div class="shrink-0 flex items-center space-x-1">
|
|
<!--:Sidebar toggler:-->
|
|
<button type="button" data-toggle="app_sidebar"
|
|
class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800 lg:hidden">
|
|
<span class="icon-[iconoir--menu] text-lg"></span>
|
|
</button>
|
|
<!--:Search:-->
|
|
<button data-bs-target="#modal_search" data-bs-toggle="modal"
|
|
class="cursor-pointer relative flex items-center justify-center w-8 h-8 lg:w-auto lg:ps-3 lg:pe-2 lg:bg-white dark:lg:bg-zinc-800 lg:rounded-md rounded-lg hover:bg-zinc-200 lg:hover:bg-white lg:dark:hover:bg-zinc-800 dark:hover:text-white dark:hover:bg-zinc-800 relative">
|
|
<span class="icon-[lucide--search] text-lg lg:text-base"></span>
|
|
<span class="text-muted ms-2 hidden lg:flex items-center gap-2">Search <span class="border border-zinc-200 dark:border-zinc-600 block px-1.5 rounded-sm text-sm">Ctrl+k</span></span>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center space-x-1">
|
|
<!--:TLang:-->
|
|
<!--:Theme Lang switcher:-->
|
|
<div class="relative">
|
|
<button data-bs-auto-close="outside" type="button"
|
|
class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800"
|
|
data-bs-toggle="dropdown" data-bs-display="static">
|
|
<img src="images/countries/US.png" class="size-4 rounded-full" alt="">
|
|
</button>
|
|
<div class="dropdown-menu absolute min-w-36 abslute ltr:right-0 rtl:left-0 top-full z-50 mt-4.5">
|
|
<a href="#!" class="dropdown-item active group gap-2.5">
|
|
<img src="images/countries/US.png" class="size-5 rounded-full" alt=""> English
|
|
<span class="icon-[lucide--check] ml-auto hidden group-[.active]:block"></span>
|
|
</a>
|
|
<a href="#!" class="dropdown-item group gap-2.5">
|
|
<img src="images/countries/ES.png" class="size-5 rounded-full" alt=""> Espanol
|
|
<span class="icon-[lucide--check] ml-auto hidden group-[.active]:block"></span>
|
|
</a>
|
|
<a href="#!" class="dropdown-item group gap-2.5">
|
|
<img src="images/countries/JP.png" class="size-5 rounded-full" alt=""> Japanese
|
|
<span class="icon-[lucide--check] ml-auto hidden group-[.active]:block"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!--:Notifications:-->
|
|
<div class="sm:relative">
|
|
<button data-bs-auto-close="outside" type="button"
|
|
class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800 relative"
|
|
data-bs-toggle="dropdown" data-bs-display="static">
|
|
<span class="icon-[lucide--bell] text-lg"></span>
|
|
<!--:Notification badge with animation:-->
|
|
<span class="absolute right-1 top-1 flex size-2">
|
|
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-orange-400 opacity-75"></span>
|
|
<span class="relative inline-flex size-2 rounded-full bg-orange-500"></span>
|
|
</span>
|
|
</button>
|
|
<div class="dropdown-menu absolute w-[94%] left-[3%] sm:w-96 abslute rtl:sm:left-0 ltr:sm:right-0 sm:left-auto top-full z-50 !p-0 mt-0.5 lg:mt-4.5 overflow-hidden">
|
|
<div class="px-3 pt-3 flex justify-between items-center">
|
|
<h5 class="text-lg">Notifications</h5>
|
|
<button type="button" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Mark all as read" class="hover:text-primary cursor-pointer">
|
|
<span class="icon-[lucide--mail-open]"></span>
|
|
</button>
|
|
</div>
|
|
<div class="p-3 space-y-0.5 max-h-96 overflow-y-auto" data-simplebar>
|
|
<!--:Notification item:-->
|
|
<a href="#!" class="px-3 py-2 gap-3 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex">
|
|
<span class="size-8 rounded-full bg-red-500 text-white flex items-center justify-center shrink-0">
|
|
<span class="icon-[lucide--database] text-lg"></span>
|
|
</span>
|
|
<div class="flex-grow">
|
|
<div class="leading-normal"><span class="h5">Critical alert:</span> Server crash detected</div>
|
|
<small class="text-muted">Just now</small>
|
|
</div>
|
|
</a>
|
|
<!--:Notification item:-->
|
|
<a href="#!" class="px-3 py-2 gap-3 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex">
|
|
<span class="size-8 rounded-full bg-red-500 text-white flex items-center justify-center shrink-0">
|
|
<img alt="" src="images/avatars/thumb-2.jpg" class="size-8 shrink-0 rounded-full">
|
|
</span>
|
|
<div class="flex-grow">
|
|
<div class="leading-normal"><span class="h5">Emiliya</span> mentioned in you a comment</div>
|
|
<small class="text-muted">1h</small>
|
|
</div>
|
|
</a>
|
|
<!--:Notification item:-->
|
|
<a href="#!" class="px-3 py-2 gap-3 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex">
|
|
<span class="size-8 rounded-full bg-green-500 text-white flex items-center justify-center shrink-0">
|
|
<span class="icon-[lucide--check] text-lg"></span>
|
|
</span>
|
|
<div class="flex-grow">
|
|
<div class="leading-normal">Backup completed successfully</div>
|
|
<small class="text-muted">2h</small>
|
|
</div>
|
|
</a>
|
|
<!--:Notification item:-->
|
|
<a href="#!" class="px-3 py-2 gap-3 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex">
|
|
<span class="size-8 rounded-full bg-cyan-500 text-white flex items-center justify-center shrink-0">
|
|
<span class="icon-[lucide--user] text-lg"></span>
|
|
</span>
|
|
<div class="flex-grow">
|
|
<div class="leading-normal">Profile updated successfully</div>
|
|
<small class="text-muted">3h</small>
|
|
</div>
|
|
</a>
|
|
<!--:Notification item:-->
|
|
<a href="#!" class="px-3 py-2 gap-3 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex">
|
|
<span class="size-8 rounded-full bg-yellow-500 text-white flex items-center justify-center shrink-0">
|
|
<img alt="" src="images/avatars/thumb-3.jpg" class="size-8 shrink-0 rounded-full">
|
|
</span>
|
|
<div class="flex-grow">
|
|
<div class="leading-normal mb-1"><span class="h5">Nikita</span> sent you a friend request</div>
|
|
<div><span
|
|
class="btn relative z-[1] cursor-pointer btn-sm !text-xs !py-1 bg-green-500 hover:bg-green-600 text-white">Accept</span>
|
|
</div>
|
|
<small class="text-muted">2d</small>
|
|
</div>
|
|
</a>
|
|
<!--:Notification item:-->
|
|
<a href="#!" class="px-3 py-2 gap-3 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex">
|
|
<span class="size-8 rounded-full bg-primary text-white flex items-center justify-center shrink-0">
|
|
<span class="icon-[lucide--component] text-lg"></span>
|
|
</span>
|
|
<div class="flex-grow">
|
|
<div class="leading-normal">API updated</div>
|
|
<small class="text-muted">3d</small>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="px-4 py-2.5 text-center border-t border-zinc-100 dark:border-zinc-800">
|
|
<a href="#!"
|
|
class="inline-block border-b border-dashed text-primary font-semibold hover:text-primary-deep text-sm">View
|
|
All</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--:Apps:-->
|
|
<div class="lg:relative hidden lg:block">
|
|
<button data-bs-auto-close="outside" type="button"
|
|
class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800"
|
|
data-bs-toggle="dropdown" data-bs-display="static">
|
|
<span class="icon-[lucide--component] text-lg"></span>
|
|
</button>
|
|
<div class="dropdown-menu absolute w-56 abslute ltr:right-5 ltr:lg:right-0 rtl:lg:left-0 rtl:left-5 top-full z-50 !p-0 lg:mt-4.5">
|
|
<div class="flex flex-wrap p-2">
|
|
<div class="text-center w-1/2 p-2">
|
|
<a href="#!" class="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex flex-col">
|
|
<img alt="" src="images/brands/mailchimp.svg" class="h-6 w-auto block mx-auto mb-2">
|
|
<span>Mailchimp</span>
|
|
</a>
|
|
</div>
|
|
<div class="text-center w-1/2 p-2">
|
|
<a href="#!" class="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex flex-col">
|
|
<img alt="" src="images/brands/google-analytics.svg" class="h-6 w-auto block mx-auto mb-2">
|
|
<span class="truncate block">Analytics</span>
|
|
</a>
|
|
</div>
|
|
<div class="text-center w-1/2 p-2">
|
|
<a href="#!" class="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex flex-col">
|
|
<img alt="" src="images/brands/google-webdev.svg" class="h-6 w-auto block mx-auto mb-2">
|
|
<span>WebDev</span>
|
|
</a>
|
|
</div>
|
|
<div class="text-center w-1/2 p-2">
|
|
<a href="#!" class="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex flex-col">
|
|
<img alt="" src="images/brands/jira.svg" class="h-6 w-auto block mx-auto mb-2">
|
|
<span>Jira</span>
|
|
</a>
|
|
</div>
|
|
<div class="text-center w-1/2 p-2">
|
|
<a href="#!" class="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex flex-col">
|
|
<img alt="" src="images/brands/gitlab.svg" class="h-6 w-auto block mx-auto mb-2">
|
|
<span>Gitlab</span>
|
|
</a>
|
|
</div>
|
|
<div class="text-center w-1/2 p-2">
|
|
<a href="#!" class="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex flex-col">
|
|
<img alt="" src="images/brands/evernote.svg" class="h-6 w-auto block mx-auto mb-2">
|
|
<span>Evernote</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-2.5 text-center border-t border-zinc-100 dark:border-zinc-800">
|
|
<a href="#!"
|
|
class="inline-block border-b border-dashed text-primary font-semibold hover:text-primary-deep text-sm">View
|
|
All</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Theme color switcher:-->
|
|
<div class="relative">
|
|
<button type="button"
|
|
class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800"
|
|
data-bs-toggle="dropdown" data-bs-display="static" data-bs-auto-close="outside">
|
|
<span class="icon-[lucide--settings] text-lg"></span>
|
|
</button>
|
|
<div class="dropdown-menu absolute min-w-56 abslute ltr:right-0 rtl:left-0 top-full z-50 !p-2 mt-4.5">
|
|
<div class="mb-3 px-3 pt-2">
|
|
<h5>Theme</h5>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap px-3 pb-2 gap-2">
|
|
<button id="indigoTheme" class="theme-switcher cursor-pointer">
|
|
<span class="flex items-center justify-center size-7 rounded-full text-white"
|
|
style="background-color: #636DFF;">
|
|
<span class="icon-[lucide--check] theme-check text-lg"></span>
|
|
</span>
|
|
</button>
|
|
<button id="navyTheme" class="theme-switcher cursor-pointer">
|
|
<span class="flex items-center justify-center size-7 rounded-full text-white"
|
|
style="background-color: #0E6DD9;">
|
|
<span class="icon-[lucide--check] theme-check text-lg"></span>
|
|
</span>
|
|
</button>
|
|
<button id="emeraldTheme" class="theme-switcher cursor-pointer">
|
|
<span class="flex items-center justify-center size-7 rounded-full text-white"
|
|
style="background-color: #049772;">
|
|
<span class="icon-[lucide--check] theme-check text-lg"></span>
|
|
</span>
|
|
</button>
|
|
<button id="purpleTheme" class="theme-switcher cursor-pointer">
|
|
<span class="flex items-center justify-center size-7 rounded-full text-white"
|
|
style="background-color: #D300C5;">
|
|
<span class="icon-[lucide--check] theme-check text-lg"></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="pt-2 mt-2 border-t border-dashed border-zinc-200 dark:border-zinc-700">
|
|
<label class="flex items-center cursor-pointer dropdown-item">
|
|
<span class="icon-[lucide--sun-moon] me-1"></span>
|
|
<span class="flex-grow text-sm me-2">Dark mode</span>
|
|
<input class="input-switch" data-theme-switch="dark" name="check_theme" type="checkbox" value="1">
|
|
</label>
|
|
</div>
|
|
<div class="pt-2 mt-2 border-t border-dashed border-zinc-200 dark:border-zinc-700">
|
|
<label for="toggleRTL" class="flex items-center justify-between cursor-pointer dropdown-item">
|
|
<span class="text-sm">Enable RTL</span>
|
|
<input type="checkbox" class="input-switch" id="toggleRTL" />
|
|
</label>
|
|
|
|
</div>
|
|
<div class="pt-2 dark:hidden mt-2 border-t border-dashed border-zinc-200 dark:border-zinc-700">
|
|
<h5 class="px-3 mb-2">Sidebar</h5>
|
|
<div class="radio-group flex items-center">
|
|
<div class="radio-option flex-grow">
|
|
<input class="appearance-none hidden" type="radio" id="sidebarLight" name="sidebarTheme" value="light" checked>
|
|
<label for="sidebarLight" class="block text-center cursor-pointer sidebar-label">
|
|
<span class="w-24 h-16 mb-2 overflow-hidden flex mx-auto p-1 rounded-sm bg-zinc-100 dark:bg-zinc-950 border border-dashed border-zinc-200">
|
|
<span class="w-6 h-full bg-white rounded-sm"></span>
|
|
</span>
|
|
<span class="block text-sm text-zinc-400">
|
|
Light
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="radio-option flex-grow">
|
|
<input class="appearance-none hidden" type="radio" id="sidebarDark" name="sidebarTheme" value="dark">
|
|
<label for="sidebarDark" class="block text-center cursor-pointer sidebar-label">
|
|
<span class="w-24 h-16 mb-2 overflow-hidden flex mx-auto p-1 rounded-sm bg-zinc-100 dark:bg-zinc-950 border border-dashed border-zinc-200">
|
|
<span class="w-6 h-full bg-zinc-900 rounded-sm"></span>
|
|
</span>
|
|
<span class="block text-sm text-zinc-400">
|
|
Dark
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--:Search Modal:-->
|
|
<div id="modal_search" role="dialog" class="modal fade fixed w-full h-full left-0 top-0 z-[60]"
|
|
tabindex="-1">
|
|
<div class="modal-dialog relative m-4 pointer-events-none">
|
|
<!--:Content:-->
|
|
<div class="modal-content max-w-[30rem] mx-auto bg-white dark:bg-zinc-900 rounded-xl w-full pointer-events-auto">
|
|
<div class="relative">
|
|
<span
|
|
class="pointer-events-none text-base absolute rtl:right-3 ltr:left-3 top-1/2 -translate-y-1/2 opacity-50 leading-none">
|
|
<span class="icon-[lucide--search] text-lg"></span>
|
|
</span>
|
|
<button type="button"
|
|
class="absolute rtl:left-0 ltr:right-0 top-1/2 -translate-y-1/2 w-8 text-center me-3 cursor-pointer text-sm text-muted"
|
|
data-bs-dismiss="modal">
|
|
Esc
|
|
</button>
|
|
<input name="search" type="text"
|
|
class="w-full pl-4 !pl-9 !pr-10 py-2 h-12 focus:outline-0 rounded-t-xl border-0" placeholder="Search..."
|
|
autofocus />
|
|
</div>
|
|
<!--:Search results:-->
|
|
<div class="border-t border-zinc-200 dark:border-zinc-800 max-h-[340px]" data-simplebar>
|
|
<h5 class="mb-2 px-4 pt-4 text-muted">Recently Browses</h5>
|
|
<ul class="flex flex-col pb-2">
|
|
<li class="flex items-center gap-1 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800 px-4 py-2">
|
|
<span class="bg-zinc-500 opacity-25 block size-1.5 me-1 rounded-full"></span>
|
|
<span>Apps</span>
|
|
<span class="icon-[lucide--chevron-right] opacity-50"></span>
|
|
<span>Api</span>
|
|
</li>
|
|
<li class="flex items-center gap-1 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800 px-4 py-2">
|
|
<span class="bg-zinc-500 opacity-25 block size-1.5 me-1 rounded-full"></span>
|
|
<span>Dashboard</span>
|
|
<span class="icon-[lucide--chevron-right] opacity-50"></span>
|
|
<span>Marketing</span>
|
|
</li>
|
|
</ul>
|
|
<hr class="border-zinc-200 dark:border-zinc-800">
|
|
<h5 class="mb-2 px-4 pt-4 text-muted">Memebers</h5>
|
|
<ul class="divide-y pb-2 px-4 divide-zinc-200 dark:divide-zinc-800 divide-dashed">
|
|
<li class="flex items-center py-3 justify-between gap-2.5">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="shrink-0">
|
|
<img alt="" class="h-8 rounded-full" src="images/avatars/thumb-7.jpg">
|
|
</div>
|
|
<div class="flex flex-col gap-0.5">
|
|
<a class="flex items-center gap-1.5 leading-none h6 hover:!text-primary" href="#">Ethan Smith</a>
|
|
<span class="text-sm text-muted">Backend Developer</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="flex items-center py-3 justify-between gap-2.5">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="shrink-0">
|
|
<img alt="" class="h-8 rounded-full" src="images/avatars/thumb-5.jpg">
|
|
</div>
|
|
<div class="flex flex-col gap-0.5">
|
|
<a class="flex items-center gap-1.5 leading-none h6 hover:!text-primary" href="#">Isabella Garcia</a>
|
|
<span class="text-sm text-muted">Digital Marketer</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="flex items-center py-3 justify-between gap-2.5">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="shrink-0">
|
|
<img alt="" class="h-8 rounded-full" src="images/avatars/thumb-6.jpg">
|
|
</div>
|
|
<div class="flex flex-col gap-0.5">
|
|
<a class="flex items-center gap-1.5 leading-none h6 hover:!text-primary" href="#">Noah Walker</a>
|
|
<span class="text-sm text-muted">Full Stack Developer</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<hr class="border-zinc-200 dark:border-zinc-800">
|
|
<h5 class="mb-2 px-4 pt-4 text-muted">Filters</h5>
|
|
<ul class="flex flex-col pb-4">
|
|
<li class="flex items-center gap-2 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800 px-4 py-2">
|
|
<span class="badge bg-amber-500/20 text-amber-500">customers:</span>
|
|
<div class="flex-1 fs-10 title">All customers list</div>
|
|
</li>
|
|
<li class="flex items-center gap-2 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800 px-4 py-2">
|
|
<span class="badge bg-green-500/20 text-green-500">products:</span>
|
|
<div class="flex-1 fs-10 title">Bestselling products</div>
|
|
</li>
|
|
<li class="flex items-center gap-2 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800 px-4 py-2">
|
|
<span class="badge bg-sky-500/20 text-sky-500">events:</span>
|
|
<div class="flex-1 fs-10 title">All upcoming events</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--:Page Header:-->
|
|
<div class="px-4 lg:px-8 py-4">
|
|
<h2 class="text-xl mb-2">Alert</h2>
|
|
<!--:Breadcrumbs:-->
|
|
<ol class="flex gap-1 items-center text-sm">
|
|
<li class="flex items-center"><a href="index.html"
|
|
class="text-zinc-400 hover:text-zinc-700 dark:hover:text-white">Home</a></li>
|
|
<li class="flex items-center opacity-30 leading-none">
|
|
<span class="icon-[lucide--chevron-right] rtl:rotate-180"></span></li>
|
|
<li class="flex items-center"><span class="pointer-events-none">Components</span></li>
|
|
<li class="flex items-center opacity-30 leading-none">
|
|
<span class="icon-[lucide--chevron-right] rtl:rotate-180"></span></li>
|
|
<li class="flex items-center"><span class="pointer-events-none">Alert</span></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!--:Page content:-->
|
|
<div class="content flex flex-col flex-grow px-4 lg:px-8">
|
|
<!--:Card:-->
|
|
<div
|
|
class="rounded-xl bg-white dark:bg-zinc-900 shadow-card mb-4">
|
|
<div class="px-4 pt-4">
|
|
<h5 class="text-lg">Alert Basic</h5>
|
|
</div>
|
|
<div class="p-4 table">
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
|
|
Database fetched successfully
|
|
</div>
|
|
</div>
|
|
<div class="px-4 leading-none code-snippet pb-2 border-t border-zinc-200 dark:border-zinc-800">
|
|
<pre class="mt-0 !p-0"><code class="language-html mt-0 !p-0 !pb-2 !bg-transparent">
|
|
<div role="alert" class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
|
|
Database fetched successfully
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div
|
|
class="rounded-xl bg-white dark:bg-zinc-900 shadow-card mb-4">
|
|
<div class="px-4 pt-4">
|
|
<h5 class="text-lg">Icon</h5>
|
|
</div>
|
|
<div class="p-4 table">
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="flex gap-2.5 items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
|
|
<span class="icon-[lucide--database-zap] text-xl shrink-0"></span>
|
|
<div class="flex-grow">
|
|
Database fetched successfully
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 leading-none code-snippet pb-2 border-t border-zinc-200 dark:border-zinc-800">
|
|
<pre class="mt-0 !p-0"><code class="language-html mt-0 !p-0 !pb-2 !bg-transparent">
|
|
<div role="alert" class="flex gap-2.5 items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
|
|
<span class="icon-[lucide--database-zap] text-xl shrink-0"></span>
|
|
<div class="flex-grow">
|
|
Database fetched successfully
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div
|
|
class="rounded-xl bg-white dark:bg-zinc-900 shadow-card mb-4">
|
|
<div class="px-4 pt-4">
|
|
<h5 class="text-lg">Title</h5>
|
|
</div>
|
|
<div class="p-4 table">
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="flex gap-2.5 items-start px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
|
|
<span class="icon-[lucide--database-zap] text-xl shrink-0 mt-1"></span>
|
|
<div class="flex-grow">
|
|
<span class="text-lg font-semibold">
|
|
Database fetched successfully
|
|
</span>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 leading-none code-snippet pb-2 border-t border-zinc-200 dark:border-zinc-800">
|
|
<pre class="mt-0 !p-0"><code class="language-html mt-0 !p-0 !pb-2 !bg-transparent">
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="flex gap-2.5 items-start px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
|
|
<span class="icon-[lucide--database-zap] text-xl shrink-0 mt-1"></span>
|
|
<div class="flex-grow">
|
|
<span class="text-lg font-semibold">
|
|
Database fetched successfully
|
|
</span>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div
|
|
class="rounded-xl bg-white dark:bg-zinc-900 shadow-card mb-4">
|
|
<div class="px-4 pt-4">
|
|
<h5 class="text-lg">Closable</h5>
|
|
</div>
|
|
<div class="p-4 table">
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="alert fade show flex flex-wrap items-center justify-between px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
|
|
Database fetched successfully
|
|
<span data-bs-dismiss="alert" aria-label="Close" class="icon-[lucide--x] text-xl cursor-pointer ms-3"></span>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 leading-none code-snippet pb-2 border-t border-zinc-200 dark:border-zinc-800">
|
|
<pre class="mt-0 !p-0"><code class="language-html mt-0 !p-0 !pb-2 !bg-transparent">
|
|
<div role="alert"
|
|
class="alert fade show flex flex-wrap items-center justify-between px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
|
|
Database fetched successfully
|
|
<!--:Close alert:-->
|
|
<span data-bs-dismiss="alert" aria-label="Close" class="icon-[lucide--x] text-xl cursor-pointer ms-3"></span>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!--:Card:-->
|
|
<div
|
|
class="overflow-hidden rounded-xl bg-white dark:bg-zinc-900 shadow-card mb-4">
|
|
<div class="px-4 pt-4">
|
|
<h5 class="text-lg">Variant</h5>
|
|
</div>
|
|
<div class="p-4 flex flex-col gap-2">
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-primary/20 text-primary-deep dark:text-primary">
|
|
This is a Primary alert
|
|
</div>
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-zinc-100 dark:bg-zinc-800">
|
|
This is a Default alert
|
|
</div>
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-yellow-500/20 text-yellow-800 dark:text-yellow-200">
|
|
This is a Warning alert
|
|
</div>
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-sky-500/10 text-blue-800 dark:text-blue-200">
|
|
This is a Info alert
|
|
</div>
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
|
|
This is a Success alert
|
|
</div>
|
|
<!--alert-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-red-500/10 text-red-800 dark:text-red-200">
|
|
This is a Danger alert
|
|
</div>
|
|
|
|
</div>
|
|
<div class="px-4 leading-none max-h-[50vh] overflow-y-auto code-snippet pb-2 border-t border-zinc-200 dark:border-zinc-800">
|
|
<pre class="mt-0 !p-0"><code class="language-html mt-0 !p-0 !pb-2 !bg-transparent">
|
|
<!--alert primary-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-primary/20 text-primary-deep dark:text-primary">
|
|
This is a Primary alert
|
|
</div>
|
|
<!--alert default-->
|
|
<div role="alert" class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-zinc-100 dark:bg-zinc-800">
|
|
This is a Default alert
|
|
</div>
|
|
<!--alert warning-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-yellow-500/20 text-yellow-800 dark:text-yellow-200">
|
|
This is a Warning alert
|
|
</div>
|
|
<!--alert info-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-sky-500/10 text-blue-800 dark:text-blue-200">
|
|
This is a Info alert
|
|
</div>
|
|
<!--alert success-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
|
|
This is a Success alert
|
|
</div>
|
|
<!--alert danger-->
|
|
<div role="alert"
|
|
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-red-500/10 text-red-800 dark:text-red-200">
|
|
This is a Danger alert
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<!--:Scripts:-->
|
|
<script src="js/theme.js"></script>
|
|
<!--:Code snippet:-->
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
|
|
<script>
|
|
hljs.highlightAll();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |