1557 lines
104 KiB
HTML
1557 lines
104 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">
|
|
<!--:Edit css:-->
|
|
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
|
|
<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 active">
|
|
<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 show">
|
|
<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 active">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 apps_invoice">Invoice</a>
|
|
<a href="page-search-results.html" class="sidebar-collapse-item apps_search">Search
|
|
results</a>
|
|
<a href="page-blank.html" class="sidebar-collapse-item apps_blank">Blank</a>
|
|
<a href="page-error-404.html" class="sidebar-collapse-item apps_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 ">
|
|
<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 ">
|
|
<div class="py-1">
|
|
<a href="component-alert.html" class="sidebar-collapse-item @@component_alert">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 content:-->
|
|
<div class="content apps_wrapper flex flex-grow relative overflow-hidden h-full">
|
|
<div
|
|
class="absolute layout_secondary inset-y-4 inset-x-4 rounded-xl bg-white dark:bg-zinc-900 shadow-card overflow-hidden z[1]">
|
|
|
|
<!--:App Sidebar:-->
|
|
<div
|
|
class="w-64 absolute ltr:-translate-x-full rtl:translate-x-full ltr:lg:-translate-x-0 rtl:lg:translate-x-0 transition-transform ltr:left-0 right:right-0 top-0 h-full bg-white border-e border-zinc-200 dark:bg-zinc-900 dark:border-zinc-800 flex flex-col z-10 p-4 overflow-y-auto sidebar-secondary">
|
|
<div class="mb-4 flex items-center justify-between gap-3.5">
|
|
<h5 class="text-lg">Inbox</h5>
|
|
<div class="shrink-0">
|
|
<button type="button" data-bs-toggle="modal" data-bs-target="#modalComposeEmail"
|
|
class="btn btn-sm bg-zinc-600 text-white hover:bg-zinc-700">
|
|
Compose</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<nav class="flex flex-col space-y-0.5">
|
|
<a href="app-inbox.html"
|
|
class="px-3 py-2 gap-2.5 rounded-lg flex items-center active [.active]:bg-primary-subtle dark:[.active]:bg-zinc-800 [.active]:text-primary hover:bg-primary-subtle dark:hover:bg-zinc-800">
|
|
<span class="icon-[lucide--mail] text-lg"></span>
|
|
Inbox
|
|
</a>
|
|
<a href="#!"
|
|
class="px-3 py-2 gap-2.5 rounded-lg flex items-center [.active]:bg-primary-subtle hover:text-primary dark:[.active]:bg-zinc-800 [.active]:text-primary hover:bg-primary-subtle dark:hover:bg-zinc-800">
|
|
<span class="icon-[lucide--send] text-lg"></span>
|
|
Sent
|
|
</a>
|
|
<a href="#!"
|
|
class="px-3 py-2 gap-2.5 rounded-lg flex items-center [.active]:bg-primary-subtle hover:text-primary dark:[.active]:bg-zinc-800 [.active]:text-primary hover:bg-primary-subtle dark:hover:bg-zinc-800">
|
|
<span class="icon-[lucide--edit] text-lg"></span>
|
|
Draft
|
|
</a>
|
|
<a href="#!"
|
|
class="px-3 py-2 gap-2.5 rounded-lg flex items-center [.active]:bg-primary-subtle hover:text-primary dark:[.active]:bg-zinc-800 [.active]:text-primary hover:bg-primary-subtle dark:hover:bg-zinc-800">
|
|
<span class="icon-[lucide--star] text-lg"></span>
|
|
Starred
|
|
</a>
|
|
<a href="#!"
|
|
class="px-3 py-2 gap-2.5 rounded-lg flex items-center [.active]:bg-primary-subtle hover:text-primary dark:[.active]:bg-zinc-800 [.active]:text-primary hover:bg-primary-subtle dark:hover:bg-zinc-800">
|
|
<span class="icon-[lucide--trash] text-lg"></span>
|
|
Trash
|
|
</a>
|
|
</nav>
|
|
<hr class="border-zinc-100 dark:border-zinc-800 my-5">
|
|
<p class="text-muted text-sm mb-2">Labels</p>
|
|
<nav class="flex flex-col">
|
|
<a href="#!"
|
|
class="px-3 py-2 gap-2.5 rounded-lg flex items-center [.active]:bg-primary-subtle hover:text-primary dark:[.active]:bg-zinc-800 [.active]:text-primary hover:bg-primary-subtle dark:hover:bg-zinc-800">
|
|
<span class="size-2 bg-green-300 rounded-full"></span>
|
|
Work
|
|
</a>
|
|
<a href="#!"
|
|
class="px-3 py-2 gap-2.5 rounded-lg flex items-center [.active]:bg-primary-subtle hover:text-primary dark:[.active]:bg-zinc-800 [.active]:text-primary hover:bg-primary-subtle dark:hover:bg-zinc-800">
|
|
<span class="size-2 bg-blue-300 rounded-full"></span>
|
|
Private
|
|
</a>
|
|
<a href="#!"
|
|
class="px-3 py-2 gap-2.5 rounded-lg flex items-center [.active]:bg-primary-subtle hover:text-primary dark:[.active]:bg-zinc-800 [.active]:text-primary hover:bg-primary-subtle dark:hover:bg-zinc-800">
|
|
<span class="size-2 bg-orange-300 rounded-full"></span>
|
|
Tasks
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<!--:App Content:-->
|
|
<div class="lg:ms-64 h-full flex flex-col">
|
|
<!--:Apps Header content:-->
|
|
<div
|
|
class="px-4 py-2.5 bg-white border-b border-zinc-200 dark:bg-zinc-900 dark:border-zinc-800 shrink-0 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_emails">
|
|
<!--:Buttons group:-->
|
|
<div class="flex items-center" role="group">
|
|
<button data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Move to Trash"
|
|
type="button"
|
|
class="size-8 flex items-center justify-center cursor-pointer rounded-s-lg border border-e-0 border-zinc-200 shadow-xs dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800">
|
|
<span class="icon-[lucide--trash] text-lg"></span>
|
|
</button>
|
|
<button data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Move to Archive"
|
|
type="button"
|
|
class="size-8 flex items-center justify-center cursor-pointer border border-e-0 border-zinc-200 shadow-xs dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800">
|
|
<span class="icon-[lucide--archive] text-lg"></span>
|
|
</button>
|
|
<button data-bs-toggle="tooltip" data-bs-placement="top"
|
|
data-bs-title="Mark all as read" type="button"
|
|
class="size-8 flex items-center justify-center cursor-pointer border border-e-0 border-zinc-200 shadow-xs dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800">
|
|
<span class="icon-[lucide--mail-open] text-lg"></span>
|
|
</button>
|
|
<div class="relative">
|
|
<button data-bs-toggle="dropdown" type="button"
|
|
class="size-8 flex items-center justify-center cursor-pointer border border-e-0 border-zinc-200 shadow-xs dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800">
|
|
<span data-bs-toggle="tooltip" data-bs-placement="top"
|
|
data-bs-title="Move to folder"
|
|
class="icon-[lucide--folder] text-lg">folder</span>
|
|
</button>
|
|
<div class="dropdown-menu absolute top-full">
|
|
<a href="#!" class="dropdown-item"><span
|
|
class="icon-[lucide--folder] dropdown-icon"></span>Private</a>
|
|
<a href="#!" class="dropdown-item"><span
|
|
class="icon-[lucide--folder] dropdown-icon"></span>Work</a>
|
|
<a href="#!" class="dropdown-item"><span
|
|
class="icon-[lucide--folder] dropdown-icon"></span>Tasks</a>
|
|
</div>
|
|
</div>
|
|
<button data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Forward"
|
|
type="button"
|
|
class="size-8 flex items-center justify-center cursor-pointer border rounded-e-lg border-zinc-200 shadow-xs dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800">
|
|
<span class="icon-[lucide--forward] text-lg">forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-3">
|
|
<div class="relative max-w-44 hidden sm:block">
|
|
<input class="input input-sm !px-4 !rounded-full" type="text" placeholder="Search Emails">
|
|
</div>
|
|
<!--:Sidebar inner toggler:-->
|
|
<button type="button" data-toggle="sidebar_secondary"
|
|
class="size-8 lg:hidden cursor-pointer rounded-full hover:bg-zinc-200 dark:hover:bg-zinc-800 flex items-center justify-center">
|
|
<span class="icon-[lucide--sliders-horizontal] text-lg"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!--:Apps inner content:-->
|
|
<div class="flex-grow overflow-y-auto">
|
|
<!--:Email List:-->
|
|
<ul class="divide-y divide-zinc-200 dark:divide-zinc-800">
|
|
<li
|
|
class="unread flex px-4 py-2.5 items-center gap-3.5 relative hover:bg-zinc-50 dark:hover:bg-zinc-950 text-zinc-600 dark:text-zinc-400">
|
|
<!--:Check and starred:-->
|
|
<div class="flex items-center gap-2.5 mt-1">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_email">
|
|
<button
|
|
class="cursor-pointer group [.active]:text-orange-500 relative z-[1] leading-none hidden sm:block"
|
|
type="button" data-bs-toggle="button">
|
|
<span class="icon-[lucide--star] leading-none"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Sender/Subject:-->
|
|
<div class="flex-grow flex flex-col overflow-hidden items-center">
|
|
<div class="flex items-center flex-grow w-full gap-3.5">
|
|
<img alt="" src="images/avatars/thumb-2.jpg" class="size-8 rounded-full shrink-0">
|
|
<div class="flex flex-col flex-grow overflow-hidden">
|
|
<span class="truncate">Maria Sharapova</span>
|
|
<div class="flex items-center overflow-hidden">
|
|
<span class="truncate subject sm:min-w-48 sm:me-3">Minimalisting photos of figma
|
|
project</span>
|
|
<p class="truncate hidden sm:block">
|
|
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>
|
|
<!--:Time/Label/files:-->
|
|
<div class="flex items-center shrink-0 gap-2 pl-2">
|
|
<span class="icon-[lucide--paperclip] file hidden sm:block"></span>
|
|
<span class="text-xs time">12:30PM</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Link:-->
|
|
<a href="app-inbox-view.html" class="absolute inset-0"></a>
|
|
</li>
|
|
<li
|
|
class="unread flex px-4 py-2.5 items-center gap-3.5 relative hover:bg-zinc-50 dark:hover:bg-zinc-950 text-zinc-600 dark:text-zinc-400">
|
|
<!--:Check and starred:-->
|
|
<div class="flex items-center gap-2.5 mt-1">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_email">
|
|
<button
|
|
class="cursor-pointer group [.active]:text-orange-500 relative z-[1] leading-none hidden sm:block"
|
|
type="button" data-bs-toggle="button">
|
|
<span class="icon-[lucide--star] leading-none"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Sender/Subject:-->
|
|
<div class="flex-grow flex flex-col overflow-hidden items-center">
|
|
<div class="flex items-center flex-grow w-full gap-3.5">
|
|
<img alt="" src="images/avatars/thumb-10.jpg" class="size-8 rounded-full shrink-0">
|
|
<div class="flex flex-col flex-grow overflow-hidden">
|
|
<span class="truncate">Michael Smith</span>
|
|
<div class="flex items-center overflow-hidden">
|
|
<span class="truncate subject sm:min-w-48 sm:me-3">
|
|
From its medieval origins to the digital era
|
|
</span>
|
|
<p class="truncate hidden sm:block">
|
|
From its medieval origins to the digital era, learn everything there is to know about the ubiquitous lorem ipsum passage.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Time/Label/files:-->
|
|
<div class="flex items-center shrink-0 gap-2 pl-2">
|
|
<span class="icon-[lucide--paperclip] file hidden sm:block"></span>
|
|
<span class="text-xs time">Yesterday</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Link:-->
|
|
<a href="app-inbox-view.html" class="absolute inset-0"></a>
|
|
</li>
|
|
<li
|
|
class="flex px-4 py-2.5 items-center gap-3.5 relative hover:bg-zinc-50 dark:hover:bg-zinc-950 text-zinc-600 dark:text-zinc-400">
|
|
<!--:Check and starred:-->
|
|
<div class="flex items-center gap-2.5 mt-1">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_email">
|
|
<button
|
|
class="cursor-pointer group [.active]:text-orange-500 relative z-[1] leading-none hidden sm:block"
|
|
type="button" data-bs-toggle="button">
|
|
<span class="icon-[lucide--star] leading-none"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Sender/Subject:-->
|
|
<div class="flex-grow flex flex-col overflow-hidden items-center">
|
|
<div class="flex items-center flex-grow w-full gap-3.5">
|
|
<img alt="" src="images/avatars/thumb-6.jpg" class="size-8 rounded-full shrink-0">
|
|
<div class="flex flex-col flex-grow overflow-hidden">
|
|
<span class="truncate">David Wilson</span>
|
|
<div class="flex items-center overflow-hidden">
|
|
<span class="truncate subject sm:min-w-48 sm:me-3">
|
|
Lorem ipsum, or lipsum as it is sometimes known
|
|
</span>
|
|
<p class="truncate hidden sm:block">
|
|
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Time/Label/files:-->
|
|
<div class="flex items-center shrink-0 gap-2 pl-2">
|
|
<span class="icon-[lucide--paperclip] file hidden sm:block"></span>
|
|
<span class="text-xs time">2d</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Link:-->
|
|
<a href="app-inbox-view.html" class="absolute inset-0"></a>
|
|
</li>
|
|
<li
|
|
class="flex px-4 py-2.5 items-center gap-3.5 relative hover:bg-zinc-50 dark:hover:bg-zinc-950 text-zinc-600 dark:text-zinc-400">
|
|
<!--:Check and starred:-->
|
|
<div class="flex items-center gap-2.5 mt-1">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_email">
|
|
<button
|
|
class="cursor-pointer group [.active]:text-orange-500 relative z-[1] leading-none hidden sm:block"
|
|
type="button" data-bs-toggle="button">
|
|
<span class="icon-[lucide--star] leading-none"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Sender/Subject:-->
|
|
<div class="flex-grow flex flex-col overflow-hidden items-center">
|
|
<div class="flex items-center flex-grow w-full gap-3.5">
|
|
<span class="size-8 flex items-center justify-center rounded-full bg-red-500/10 text-red-500 font-semibold shrink-0 leading-none">E</span>
|
|
<div class="flex flex-col flex-grow overflow-hidden">
|
|
<span class="truncate">Emma Claire</span>
|
|
<div class="flex items-center overflow-hidden">
|
|
<span class="truncate subject sm:min-w-48 sm:me-3">
|
|
The passage is attributed to an unknown typesetter
|
|
</span>
|
|
<p class="truncate hidden sm:block">
|
|
The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Time/Label/files:-->
|
|
<div class="flex items-center shrink-0 gap-2 pl-2">
|
|
<span class="text-xs time">3d</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Link:-->
|
|
<a href="app-inbox-view.html" class="absolute inset-0"></a>
|
|
</li>
|
|
<li
|
|
class="flex px-4 py-2.5 items-center gap-3.5 relative hover:bg-zinc-50 dark:hover:bg-zinc-950 text-zinc-600 dark:text-zinc-400">
|
|
<!--:Check and starred:-->
|
|
<div class="flex items-center gap-2.5 mt-1">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_email">
|
|
<button
|
|
class="cursor-pointer group [.active]:text-orange-500 relative z-[1] leading-none hidden sm:block"
|
|
type="button" data-bs-toggle="button">
|
|
<span class="icon-[lucide--star] leading-none"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Sender/Subject:-->
|
|
<div class="flex-grow flex flex-col overflow-hidden items-center">
|
|
<div class="flex items-center flex-grow w-full gap-3.5">
|
|
<img alt="" src="images/avatars/thumb-4.jpg" class="size-8 rounded-full shrink-0">
|
|
<div class="flex flex-col flex-grow overflow-hidden">
|
|
<span class="truncate">Sophia Anne White</span>
|
|
<div class="flex items-center overflow-hidden">
|
|
<span class="truncate subject sm:min-w-48 sm:me-3">
|
|
The passage experienced a surge in popularity during the 1960s
|
|
</span>
|
|
<p class="truncate hidden sm:block">
|
|
The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Time/Label/files:-->
|
|
<div class="flex items-center shrink-0 gap-2 pl-2">
|
|
<span class="icon-[lucide--paperclip] file hidden sm:block"></span>
|
|
<span class="text-xs time">4d</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Link:-->
|
|
<a href="app-inbox-view.html" class="absolute inset-0"></a>
|
|
</li>
|
|
<li
|
|
class="flex px-4 py-2.5 items-center gap-3.5 relative hover:bg-zinc-50 dark:hover:bg-zinc-950 text-zinc-600 dark:text-zinc-400">
|
|
<!--:Check and starred:-->
|
|
<div class="flex items-center gap-2.5 mt-1">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_email">
|
|
<button
|
|
class="cursor-pointer group [.active]:text-orange-500 relative z-[1] leading-none hidden sm:block"
|
|
type="button" data-bs-toggle="button">
|
|
<span class="icon-[lucide--star] leading-none"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Sender/Subject:-->
|
|
<div class="flex-grow flex flex-col overflow-hidden items-center">
|
|
<div class="flex items-center flex-grow w-full gap-3.5">
|
|
<img alt="" src="images/avatars/thumb-7.jpg" class="size-8 rounded-full shrink-0">
|
|
<div class="flex flex-col flex-grow overflow-hidden">
|
|
<span class="truncate">Benjamin Joseph</span>
|
|
<div class="flex items-center overflow-hidden">
|
|
<span class="truncate subject sm:min-w-48 sm:me-3">
|
|
Until recently, the prevailing view assumed
|
|
</span>
|
|
<p class="truncate hidden sm:block">
|
|
The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Time/Label/files:-->
|
|
<div class="flex items-center shrink-0 gap-2 pl-2">
|
|
<span class="text-xs time">1w</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Link:-->
|
|
<a href="app-inbox-view.html" class="absolute inset-0"></a>
|
|
</li>
|
|
|
|
<li
|
|
class="flex px-4 py-2.5 items-center gap-3.5 relative hover:bg-zinc-50 dark:hover:bg-zinc-950 text-zinc-600 dark:text-zinc-400">
|
|
<!--:Check and starred:-->
|
|
<div class="flex items-center gap-2.5 mt-1">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_email">
|
|
<button
|
|
class="cursor-pointer group [.active]:text-orange-500 relative z-[1] leading-none hidden sm:block"
|
|
type="button" data-bs-toggle="button">
|
|
<span class="icon-[lucide--star] leading-none"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Sender/Subject:-->
|
|
<div class="flex-grow flex flex-col overflow-hidden items-center">
|
|
<div class="flex items-center flex-grow w-full gap-3.5">
|
|
<img alt="" src="images/avatars/thumb-6.jpg" class="size-8 rounded-full shrink-0">
|
|
<div class="flex flex-col flex-grow overflow-hidden">
|
|
<span class="truncate">David Wilson</span>
|
|
<div class="flex items-center overflow-hidden">
|
|
<span class="truncate subject sm:min-w-48 sm:me-3">
|
|
Lorem ipsum, or lipsum as it is sometimes known
|
|
</span>
|
|
<p class="truncate hidden sm:block">
|
|
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Time/Label/files:-->
|
|
<div class="flex items-center shrink-0 gap-2 pl-2">
|
|
<span class="icon-[lucide--paperclip] file hidden sm:block"></span>
|
|
<span class="text-xs time">2w</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Link:-->
|
|
<a href="app-inbox-view.html" class="absolute inset-0"></a>
|
|
</li>
|
|
<li
|
|
class="flex px-4 py-2.5 items-center gap-3.5 relative hover:bg-zinc-50 dark:hover:bg-zinc-950 text-zinc-600 dark:text-zinc-400">
|
|
<!--:Check and starred:-->
|
|
<div class="flex items-center gap-2.5 mt-1">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_email">
|
|
<button
|
|
class="cursor-pointer group [.active]:text-orange-500 relative z-[1] leading-none hidden sm:block"
|
|
type="button" data-bs-toggle="button">
|
|
<span class="icon-[lucide--star] leading-none"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Sender/Subject:-->
|
|
<div class="flex-grow flex flex-col overflow-hidden items-center">
|
|
<div class="flex items-center flex-grow w-full gap-3.5">
|
|
<span class="size-8 flex items-center justify-center rounded-full bg-zinc-500 text-white font-semibold shrink-0 leading-none">S</span>
|
|
<div class="flex flex-col flex-grow overflow-hidden">
|
|
<span class="truncate">Sarah Elizabeth Davis</span>
|
|
<div class="flex items-center overflow-hidden">
|
|
<span class="truncate subject sm:min-w-48 sm:me-3">
|
|
The passage is attributed to an unknown typesetter
|
|
</span>
|
|
<p class="truncate hidden sm:block">
|
|
The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Time/Label/files:-->
|
|
<div class="flex items-center shrink-0 gap-2 pl-2">
|
|
<span class="text-xs time">3w</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Link:-->
|
|
<a href="app-inbox-view.html" class="absolute inset-0"></a>
|
|
</li>
|
|
<li
|
|
class="flex px-4 py-2.5 items-center gap-3.5 relative hover:bg-zinc-50 dark:hover:bg-zinc-950 text-zinc-600 dark:text-zinc-400">
|
|
<!--:Check and starred:-->
|
|
<div class="flex items-center gap-2.5 mt-1">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_email">
|
|
<button
|
|
class="cursor-pointer group [.active]:text-orange-500 relative z-[1] leading-none hidden sm:block"
|
|
type="button" data-bs-toggle="button">
|
|
<span class="icon-[lucide--star] leading-none"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Sender/Subject:-->
|
|
<div class="flex-grow flex flex-col overflow-hidden items-center">
|
|
<div class="flex items-center flex-grow w-full gap-3.5">
|
|
<img alt="" src="images/avatars/thumb-3.jpg" class="size-8 rounded-full shrink-0">
|
|
<div class="flex flex-col flex-grow overflow-hidden">
|
|
<span class="truncate">Olivia Rose</span>
|
|
<div class="flex items-center overflow-hidden">
|
|
<span class="truncate subject sm:min-w-48 sm:me-3">
|
|
The passage experienced a surge in popularity during the 1960s
|
|
</span>
|
|
<p class="truncate hidden sm:block">
|
|
The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Time/Label/files:-->
|
|
<div class="flex items-center shrink-0 gap-2 pl-2">
|
|
<span class="icon-[lucide--paperclip] file hidden sm:block"></span>
|
|
<span class="text-xs time">1m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Link:-->
|
|
<a href="app-inbox-view.html" class="absolute inset-0"></a>
|
|
</li>
|
|
<li
|
|
class="flex px-4 py-2.5 items-center gap-3.5 relative hover:bg-zinc-50 dark:hover:bg-zinc-950 text-zinc-600 dark:text-zinc-400">
|
|
<!--:Check and starred:-->
|
|
<div class="flex items-center gap-2.5 mt-1">
|
|
<input type="checkbox" class="input-checkbox relative z-[1]" name="check_email">
|
|
<button
|
|
class="cursor-pointer group [.active]:text-orange-500 relative z-[1] leading-none hidden sm:block"
|
|
type="button" data-bs-toggle="button">
|
|
<span class="icon-[lucide--star] leading-none"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Sender/Subject:-->
|
|
<div class="flex-grow flex flex-col overflow-hidden items-center">
|
|
<div class="flex items-center flex-grow w-full gap-3.5">
|
|
<img alt="" src="images/avatars/thumb-9.jpg" class="size-8 rounded-full shrink-0">
|
|
<div class="flex flex-col flex-grow overflow-hidden">
|
|
<span class="truncate">Matthew Thomas</span>
|
|
<div class="flex items-center overflow-hidden">
|
|
<span class="truncate subject sm:min-w-48 sm:me-3">
|
|
Until recently, the prevailing view assumed
|
|
</span>
|
|
<p class="truncate hidden sm:block">
|
|
The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Time/Label/files:-->
|
|
<div class="flex items-center shrink-0 gap-2 pl-2">
|
|
<span class="text-xs time">1m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Link:-->
|
|
<a href="app-inbox-view.html" class="absolute inset-0"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="shrink-0 px-4 py-3.5 gap-3.5 flex items-center justify-end border-t border-zinc-200 dark:border-zinc-800">
|
|
<small class="text-muted">Showing 1-9 from 548 entries</small>
|
|
<div class="shrink-0 flex items-center gap-1">
|
|
<button disabled
|
|
class="size-8 btn btn-default !p-0 !rounded-full disabled:opacity-50 disabled:pointer-events-none">
|
|
<span class="icon-[lucide--chevron-left] leading-none text-lg rtl:rotate-180"></span>
|
|
</button>
|
|
<button
|
|
class="size-8 btn btn-default !p-0 !rounded-full">
|
|
<span class="icon-[lucide--chevron-right] leading-none text-lg rtl:rotate-180"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<!--:Modal New chat users list:-->
|
|
<div id="modalComposeEmail" role="dialog" class="modal fixed w-full h-full left-0 top-0 z-[60] overflow-y-auto"
|
|
tabindex="-1">
|
|
<div
|
|
class="modal-dialog m-4 flex pointer-events-none">
|
|
<div class="modal-content relative max-w-[40rem] mx-auto bg-white dark:bg-zinc-900 rounded-xl w-full pointer-events-auto">
|
|
<button type="button"
|
|
class="absolute ltr:right-2 rtl:left-2 top-2 size-8 !rounded-full btn btn-default !p-0"
|
|
data-bs-dismiss="modal">
|
|
<span class="icon-[lucide--x] text-lg"></span>
|
|
</button>
|
|
<div class="p-4">
|
|
<div class="mb-4">
|
|
<h5 class="text-xl">New message</h5>
|
|
</div>
|
|
<!--:Search:-->
|
|
<div class="relative mb-4">
|
|
<label for="email_to" class="block mb-1.5">To</label>
|
|
<input name="search" id="email_to" type="email" class="w-full input" placeholder="Search..."
|
|
autofocus />
|
|
</div>
|
|
|
|
<div class="relative mb-4">
|
|
<label for="email_Subject" class="block mb-1.5">Subject</label>
|
|
<input name="search" type="text" id="email_Subject" class="w-full input" placeholder="Search..." />
|
|
</div>
|
|
<div class="relative mb-4">
|
|
<label class="block mb-1.5">Message</label>
|
|
<div id="editorEmail">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button type="button" class="btn hover:bg-zinc-500 hover:text-white gap-2" data-bs-dismiss="modal"><span class="icon-[lucide--trash]"></span>Discard</button>
|
|
<button type="submit" class="btn bg-primary hover:bg-primary-deep text-white gap-2">Send <span class="icon-[lucide--send]"></span></button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Scripts:-->
|
|
<script src="js/theme.js"></script>
|
|
|
|
<!--:Checkbox:-->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const parentCheckbox = document.querySelector('input[name="check_emails"]');
|
|
const childCheckboxes = document.querySelectorAll('input[name="check_email"]');
|
|
|
|
function updateParentState() {
|
|
const total = childCheckboxes.length;
|
|
const checked = Array.from(childCheckboxes).filter(cb => cb.checked).length;
|
|
|
|
if (checked === 0) {
|
|
parentCheckbox.checked = false;
|
|
parentCheckbox.indeterminate = false;
|
|
} else if (checked === total) {
|
|
parentCheckbox.checked = true;
|
|
parentCheckbox.indeterminate = false;
|
|
} else {
|
|
parentCheckbox.checked = false;
|
|
parentCheckbox.indeterminate = true;
|
|
}
|
|
}
|
|
|
|
parentCheckbox.addEventListener('change', function () {
|
|
childCheckboxes.forEach(cb => {
|
|
cb.checked = parentCheckbox.checked;
|
|
});
|
|
parentCheckbox.indeterminate = false; // Reset indeterminate state
|
|
});
|
|
|
|
childCheckboxes.forEach(cb => {
|
|
cb.addEventListener('change', updateParentState);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!--:Editor:-->
|
|
<script src="vendor/js/quill.js"></script>
|
|
<script>
|
|
const quill = new Quill('#editorEmail', {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: [
|
|
['bold', 'italic', 'underline'],
|
|
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
|
['blockquote', 'code'],
|
|
['image'],
|
|
],
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |