2860 lines
182 KiB
HTML
2860 lines
182 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">
|
|
<!--:Page styles:-->
|
|
<link href="vendor/css/choices.min.css" rel="stylesheet">
|
|
<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 active">
|
|
<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 widgets_invoice">Invoice</a>
|
|
<a href="page-search-results.html" class="sidebar-collapse-item widgets_search">Search
|
|
results</a>
|
|
<a href="page-blank.html" class="sidebar-collapse-item widgets_blank">Blank</a>
|
|
<a href="page-error-404.html" class="sidebar-collapse-item widgets_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 Header:-->
|
|
<div class="px-4 lg:px-8 py-4">
|
|
<h4 class="text-xl mb-2">Widgets</h4>
|
|
<p class="text-muted">
|
|
Exclusive bonus cards for your next project, Choose any and integrate seamlessly wherever you need.
|
|
</p>
|
|
</div>
|
|
|
|
<!--:Page content:-->
|
|
<div class="content relative lg:px-4 flex-grow">
|
|
<!--:Prelaoder:-->
|
|
<div id="preloader" class="absolute inset-0 w-full h-[75vh] flex items-center justify-center z-50">
|
|
<div class="size-12 bg-white shadow-xl rounded-full flex items-center justify-center">
|
|
<div class="animate-spin rounded-full size-10 border-b-2 border-primary"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 mb-4">
|
|
<div class="border border-dashed border-zinc-200 dark:border-zinc-800 rounded-xl py-4">
|
|
<p class="px-4 mb-3">POS Cards</p>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 px-4">
|
|
<div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl group relative bg-white dark:bg-zinc-900 shadow-card text-center">
|
|
<img src="images/restaurant/popular5.jpg" class="max-w-full rounded-t-xl mx-auto"
|
|
alt="">
|
|
<div class="p-4">
|
|
<h5 class="text-lg mb-2">Grilled Steaks</h5>
|
|
<p class="text-red-500">$9.99</p>
|
|
</div>
|
|
<!--:Card overlay:-->
|
|
<ul class="flex flex-col absolute end-5 top-5 gap-2">
|
|
<li
|
|
class="transition-all duration-200 translate-x-5 opacity-0 group-hover:opacity-100 group-hover:translate-x-0">
|
|
<button type="button"
|
|
class="size-8 flex items-center justify-center bg-zinc-700 text-white rounded-full cursor-pointer hover:bg-zinc-800">
|
|
<span class="icon-[lucide--edit-2] text-lg"></span>
|
|
</button>
|
|
</li>
|
|
<li
|
|
class="transition-all duration-200 translate-x-5 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 delay-100">
|
|
<button type="button"
|
|
class="size-8 flex items-center justify-center bg-zinc-700 text-white rounded-full cursor-pointer hover:bg-zinc-800">
|
|
<span class="icon-[lucide--trash-2] text-lg"></span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6 class="flex items-center mb-3 gap-1"><span class="icon-[lucide--shopping-bag]"></span>
|
|
Order #27</h6>
|
|
<!--:Order card:-->
|
|
<div class="rounded-xl mb-4 p-4 group relative bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="flex items-start gap-4">
|
|
<img src="images/restaurant/popular3.jpg" class="w-12 h-auto rounded-lg shrink-0" alt="">
|
|
<div class="flex-grow mb-4 overflow-hidden">
|
|
<h6 class="truncate mb-0.5">Fresh basil salad</h6>
|
|
<p>
|
|
$10 x 2 = <span class="font-semibold text-primary">$20</span>
|
|
</p>
|
|
</div>
|
|
<div class="shrink-0">
|
|
<button type="button"
|
|
class="text-zinc-400 hover:text-red-500 cursor-pointer">
|
|
<span class="icon-[lucide--trash-2]"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<!--:QTY:-->
|
|
<div class="flex items-center gap-2 shrink-0 flex-grow">
|
|
<button
|
|
class="size-5 flex items-center justify-center cursor-pointer rounded-full bg-zinc-200 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-700"
|
|
type="button" role="button">
|
|
<span class="icon-[lucide--minus]"></span>
|
|
</button>
|
|
<input type="text" readonly class="w-3.5 text-center p-0 block outline-0"
|
|
value="2" min="1" max="9">
|
|
<button
|
|
class="size-5 flex items-center justify-center cursor-pointer rounded-full bg-zinc-200 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-700"
|
|
type="button" role="button">
|
|
<span class="icon-[lucide--plus]"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Notes:-->
|
|
<button type="button" role="button"
|
|
class="btn btn-sm btn-default gap-1">
|
|
<span class="icon-[lucide--clipboard-edit]"></span> Add notes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!--:Order card:-->
|
|
<div class="rounded-xl p-4 group relative bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="flex items-start gap-4">
|
|
<img src="images/restaurant/popular4.jpg" class="w-12 h-auto rounded-lg shrink-0" alt="">
|
|
<div class="flex-grow mb-4 overflow-hidden">
|
|
<h6 class="truncate mb-0.5">Cheese Burger
|
|
Combo</h6>
|
|
<p>
|
|
$9.99 x 2 = <span class="font-semibold text-primary">$19.98</span>
|
|
</p>
|
|
</div>
|
|
<div class="shrink-0">
|
|
<button type="button"
|
|
class="text-zinc-400 hover:text-red-500 cursor-pointer">
|
|
<span class="icon-[lucide--trash-2]"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<!--:QTY:-->
|
|
<div class="flex items-center gap-2 shrink-0 flex-grow">
|
|
<button
|
|
class="size-5 flex items-center justify-center cursor-pointer rounded-full bg-zinc-200 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-700"
|
|
type="button" role="button">
|
|
<span class="icon-[lucide--minus]"></span>
|
|
</button>
|
|
<input type="text" readonly class="w-3.5 text-center p-0 block outline-0"
|
|
value="2" min="1" max="9">
|
|
<button
|
|
class="size-5 flex items-center justify-center cursor-pointer rounded-full bg-zinc-200 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-700"
|
|
type="button" role="button">
|
|
<span class="icon-[lucide--plus]"></span>
|
|
</button>
|
|
</div>
|
|
<!--:Notes:-->
|
|
<button type="button" role="button"
|
|
class="btn btn-sm btn-default gap-1">
|
|
<span class="icon-[lucide--clipboard-edit]"></span> Add notes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="rounded-xl p-4 group relative bg-white dark:bg-zinc-900 shadow-card">
|
|
<ul class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
|
<li class="py-2 flex items-center justify-between">
|
|
<span>Subtotal:</span>
|
|
<span>$44.98</span>
|
|
</li>
|
|
<li class="py-2 flex items-center justify-between">
|
|
<span>Product discount:</span>
|
|
<span>$10.00</span>
|
|
</li>
|
|
<li class="py-2 flex items-center justify-between">
|
|
<span>Coupon discount:</span>
|
|
<span class="flex items-center gap-2">
|
|
<a href="#!">
|
|
<span class="icon-[lucide--edit-2] text-sm"></span>
|
|
</a>
|
|
$0.00</span>
|
|
</li>
|
|
<li class="py-2 flex items-center justify-between">
|
|
<h6>Total:</h6>
|
|
<h6>$34.98</h6>
|
|
</li>
|
|
<li class="py-2 flex gap-2 items-center">
|
|
<button type="button" class="btn btn-sm bg-primary text-white hover:bg-primary-deep flex-grow cursor-pointer">
|
|
Bill & payment
|
|
</button>
|
|
<button type="button" class="btn btn-sm bg-zinc-700 text-white hover:bg-zinc-800 flex-grow cursor-pointer">
|
|
Print
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4 px-4">
|
|
|
|
<div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<!--:Card header:-->
|
|
<div class="flex items-center justify-between gap-4 p-4">
|
|
<h5 class="truncate text-lg">
|
|
Team Designers
|
|
</h5>
|
|
<!--:dropdown:-->
|
|
<div class="relative">
|
|
<button
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5"
|
|
type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="icon-[lucide--more-vertical] text-lg"></span>
|
|
</button>
|
|
<div class="dropdown-menu z-50 absolute min-w-36 top-full !end-0 !start-auto">
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--eye] dropdown-icon"></span> View
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--edit] dropdown-icon"></span> Edit
|
|
</a>
|
|
<a href="#!" class="dropdown-item !text-red-500">
|
|
<span class="icon-[lucide--trash] dropdown-icon"></span> Delete
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Team members:-->
|
|
<div class="px-4 pb-4">
|
|
<span class="text-zinc-400 text-sm block mb-2">6 memebers</span>
|
|
<div class="flex items-center -space-x-3 shrink-0">
|
|
<img data-bs-toggle="tooltip" data-bs-title="Emily" src="images/avatars/thumb-1.jpg"
|
|
class="size-8 border-2 border-white dark:border-zinc-900 rounded-full relative">
|
|
<img data-bs-toggle="tooltip" data-bs-title="Nikkita" src="images/avatars/thumb-2.jpg"
|
|
class="size-8 border-2 border-white dark:border-zinc-900 rounded-full relative">
|
|
<img data-bs-toggle="tooltip" data-bs-title="John" src="images/avatars/thumb-9.jpg"
|
|
class="size-8 border-2 border-white dark:border-zinc-900 rounded-full relative">
|
|
<img data-bs-toggle="tooltip" data-bs-title="Emily" src="images/avatars/thumb-5.jpg"
|
|
class="size-8 border-2 border-white dark:border-zinc-900 rounded-full relative">
|
|
<img data-bs-toggle="tooltip" data-bs-title="Nikkita" src="images/avatars/thumb-7.jpg"
|
|
class="size-8 border-2 border-white dark:border-zinc-900 rounded-full relative">
|
|
<img data-bs-toggle="tooltip" data-bs-title="John" src="images/avatars/thumb-10.jpg"
|
|
class="size-8 border-2 border-white dark:border-zinc-900 rounded-full relative">
|
|
</div>
|
|
</div>
|
|
<!--:About team:-->
|
|
<div class="px-4 pb-4">
|
|
<span class="text-zinc-400 text-sm block mb-1">About team</span>
|
|
<p>
|
|
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing
|
|
industries for previewing layouts and visual mockups.
|
|
</p>
|
|
</div>
|
|
<!--:About team:-->
|
|
<div class="px-4 pb-4">
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="p-3 rounded-lg flex-grow border border-dashed border-zinc-200 dark:border-zinc-800">
|
|
<span class="text-sm text-zinc-400">Projects</span>
|
|
<h5 class="text-lg">5</h5>
|
|
</div>
|
|
<div
|
|
class="p-3 rounded-lg flex-grow border border-dashed border-zinc-200 dark:border-zinc-800">
|
|
<span class="text-sm text-zinc-400">Budget</span>
|
|
<h5 class="text-lg">$768K</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Progress:-->
|
|
<div class="px-4 pb-4">
|
|
<div class="flex items-center justify-between gap-2 mb-2 text-sm">
|
|
<p>Overall progress</p>
|
|
<span class="text-primary font-semibold">
|
|
65%
|
|
</span>
|
|
</div>
|
|
<!--:Progress:-->
|
|
<div class="h-1.5 bg-primary-subtle rounded-full flex-grow">
|
|
<div class="progress-bg h-1.5 bg-primary rounded-full" style="width: 65%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Action:-->
|
|
<div class="flex items-center justify-between gap-4 px-4 pb-4">
|
|
<span class="text-zinc-400 text-sm"><span class="icon-[lucide--history]"></span> Updated 3h
|
|
ago</span>
|
|
<a href="#!" class="btn btn-sm bg-primary text-white hover:bg-primary-deep">View details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<!--:Card header:-->
|
|
<div class="flex items-center gap-4 p-4">
|
|
<div class="shrink-0">
|
|
<img src="images/brands/figma.svg" class="w-10 h-auto" alt="">
|
|
</div>
|
|
<div class="flex-grow">
|
|
<h5 class="truncate text-lg mb-1">
|
|
Figma inc.
|
|
</h5>
|
|
<span class="flex items-center gap-2 text-sm">
|
|
<span class="text-zinc-400 flex items-center gap-1">
|
|
<span class="icon-[tabler--star-filled] text-amber-500"></span>4.5
|
|
</span>
|
|
<span class="text-zinc-400">274.5K Reviews</span>
|
|
</span>
|
|
|
|
</div>
|
|
<!--:dropdown:-->
|
|
<div class="relative shrink-0">
|
|
<button
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5"
|
|
type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="icon-[lucide--more-vertical] text-lg"></span>
|
|
</button>
|
|
<div class="dropdown-menu z-50 absolute min-w-36 top-full !end-0 !start-auto">
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--eye] dropdown-icon"></span> View details
|
|
</a>
|
|
<a href="#!" class="dropdown-item !text-red-500">
|
|
<span class="icon-[lucide--trash] dropdown-icon"></span> Remove
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Company info:-->
|
|
<ul class="px-4 pb-4 gap-3 flex flex-col">
|
|
<li class="flex items-center gap-2">
|
|
<span class="icon-[lucide--map-pin] text-zinc-400"></span>
|
|
<span>Austin, Texas, United States</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<span class="icon-[lucide--briefcase-business] text-zinc-400"></span>
|
|
<span>Technology</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<span class="icon-[lucide--users] text-zinc-400"></span>
|
|
<span>120,000 employees</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<span class="icon-[lucide--code] text-zinc-400"></span>
|
|
<span>Java, Python, C++</span>
|
|
</li>
|
|
</ul>
|
|
<!--:About company:-->
|
|
<div class="px-4 pb-4">
|
|
<hr class="mb-3 border-dashed border-zinc-200 dark:border-zinc-800">
|
|
<p>
|
|
Figma is the leading collaborative design platform for building meaningful products.
|
|
Design, prototype, and build products faster—while gathering feedback...
|
|
<a href="#!" class="text-primary">Read more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4 px-4">
|
|
<div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4 flex items-center justify-between">
|
|
<h5 class="text-lg">Task completion rate</h5>
|
|
<a href="#!"
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5">
|
|
<span class="icon-[lucide--arrow-up-right]"></span>
|
|
</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="flex items-center mb-3 gap-3.5 justify-between">
|
|
<div class="flex-grow">
|
|
<div class="flex items-end gap-2 mb-3">
|
|
<h5 class="text-2xl leading-none">92%</h5>
|
|
<span class="flex items-center text-sm text-green-500">
|
|
<span class="icon-[lucide--chevron-up]"></span>
|
|
<span>12%</span>
|
|
</span>
|
|
</div>
|
|
<!--:Progress:-->
|
|
<div class="h-1.5 bg-green-500/10 rounded-full flex-grow">
|
|
<div class="progress-bg h-1.5 bg-green-500 rounded-full" style="width: 92%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="shrink-0">
|
|
<div class="flex items-center -space-x-3 shrink-0">
|
|
<img alt="" data-bs-toggle="tooltip" data-bs-title="Nikkita"
|
|
src="images/avatars/thumb-2.jpg"
|
|
class="size-6 border-2 border-white dark:border-zinc-900 rounded-full relative">
|
|
<img alt="" data-bs-toggle="tooltip" data-bs-title="John"
|
|
src="images/avatars/thumb-9.jpg"
|
|
class="size-6 border-2 border-white dark:border-zinc-900 rounded-full relative">
|
|
<span data-bs-toggle="tooltip" data-bs-title="3 more members"
|
|
class="size-6 flex items-center justify-center bg-zinc-500 text-white border-2 borderwhite dark:border-zinc-900 rounded-full relative text-xs">+3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm">Almost all tasks completed on time.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4 flex items-center justify-between">
|
|
<h5 class="text-lg">Sales target</h5>
|
|
<a href="#!"
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5">
|
|
<span class="icon-[lucide--arrow-up-right]"></span>
|
|
</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="flex items-center gap-3.5 justify-between">
|
|
<div class="shrink-0">
|
|
<!--:Progress Circle:-->
|
|
<div class="relative w-14 h-14" data-progress="40" data-show-value="true">
|
|
<!-- Background circle -->
|
|
<svg class="w-14 h-14 transform -rotate-90" viewBox="0 0 100 100">
|
|
<circle class="text-primary-subtle" stroke-width="6" stroke="currentColor"
|
|
fill="transparent" r="45" cx="50" cy="50" />
|
|
<circle class="text-primary progress-ring" stroke-width="6"
|
|
stroke="currentColor" fill="transparent" r="45" cx="50" cy="50"
|
|
stroke-linecap="round"
|
|
style="stroke-dasharray: 282.6; stroke-dashoffset: 282.6; transition: stroke-dashoffset 1s ease;" />
|
|
</svg>
|
|
<!--:Label:-->
|
|
<span
|
|
class="absolute inset-0 flex items-center justify-center text-sm value-label hidden">0%</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<h5 class="text-2xl mb-2">
|
|
<span>1970</span>/<span class="text-zinc-400">5000</span>
|
|
</h5>
|
|
<p class="text-sm">Less than
|
|
<span class="text-green-500">40%</span> of your sales target will be achieved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4 flex items-center justify-between">
|
|
<h5 class="text-lg">Conversion rate</h5>
|
|
<a href="#!"
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5">
|
|
<span class="icon-[lucide--arrow-up-right]"></span>
|
|
</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<!--:Progress:-->
|
|
<div class="h-2.5 gap-1 rounded-sm flex items-center w-full mb-4">
|
|
<div class="progress-bg h-2.5 bg-primary rounded-s-sm flex-grow" style="width: 73.3%;">
|
|
</div>
|
|
<div class="progress-bg h-2.5 bg-sky-500 rounded-e-sm flex-grow" style="width: 26.7%;">
|
|
</div>
|
|
</div>
|
|
<!--:Item:-->
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<span class="bg-primary w-1 h-3.5 rounded-sm"></span>
|
|
<h6>75.3%</h6>
|
|
<span class="flex items-center text-sm text-green-500">
|
|
<span class="icon-[lucide--chevron-up]"></span>
|
|
<span>1.4%</span>
|
|
</span>
|
|
</div>
|
|
<div class="shrink-0">
|
|
<p class="text-sm">678K visitors</p>
|
|
</div>
|
|
</div>
|
|
<!--:Item:-->
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="bg-sky-500 w-1 h-3.5 rounded-sm"></span>
|
|
<h6>24.7%</h6>
|
|
<span class="flex items-center text-sm text-green-500">
|
|
<span class="icon-[lucide--chevron-up]"></span>
|
|
<span>0.4%</span>
|
|
</span>
|
|
</div>
|
|
<div class="shrink-0">
|
|
<p class="text-sm">167.4K product sales</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 mb-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card p-4 sm:p-6 text-center">
|
|
<img src="images/illustrations/multi.svg" alt="" class="block mb-6 w-48 h-auto mx-auto">
|
|
<h5 class="text-xl mb-2">Earn referral income</h5>
|
|
<p class="text-muted mb-6">
|
|
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries
|
|
for previewing layouts.
|
|
</p>
|
|
<div class="flex items-center flex-wrap justify-center gap-4">
|
|
<button type="button" class="btn bg-primary text-white hover:bg-primary-deep">Reffer to a
|
|
friend</button>
|
|
<button type="button" class="text-primary cursor-pointer flex items-center gap-2">
|
|
Learn more about<span class="icon-[lucide--external-link]"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4 pb-1.5 flex items-center justify-between">
|
|
<h5 class="text-lg">FAQs</h5>
|
|
</div>
|
|
<div class="divide-y px-4 divide-zinc-100 dark:divide-zinc-900" id="accordionExample">
|
|
<!--:Collapse item:-->
|
|
<div class="collapse-item">
|
|
<button class="flex w-full items-center justify-between cursor-pointer py-2.5" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
|
|
aria-controls="collapseOne">
|
|
<span class="flex-grow truncate text-start block h5">Can these templates be integrated
|
|
with other
|
|
frameworks?</span>
|
|
<span
|
|
class="icon-[lucide--chevron-up] collapse-arrow shrink-0 size-4 flex items-center justify-center"></span>
|
|
</button>
|
|
<div id="collapseOne" class="collapse show" data-bs-parent="#accordionExample">
|
|
<div class="pb-4">
|
|
Nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
|
sunt in
|
|
culpa qui officia deserunt mollit anim id est laborum.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Collapse item:-->
|
|
<div class="collapse-item">
|
|
<button class="flex w-full items-center justify-between cursor-pointer py-2.5 collapsed"
|
|
type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
|
|
aria-expanded="false" aria-controls="collapseTwo">
|
|
<span class="flex-grow truncate text-start h5 block">Are the templates fully responsive
|
|
and
|
|
mobile-friendly?</span>
|
|
<span
|
|
class="icon-[lucide--chevron-up] collapse-arrow shrink-0 size-4 flex items-center justify-center"></span>
|
|
</button>
|
|
<div id="collapseTwo" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionExample">
|
|
<div class="pb-4">
|
|
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
|
sunt in
|
|
culpa qui officia deserunt mollit anim id est laborum.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Collapse item:-->
|
|
<div class="collapse-item">
|
|
<button class="flex w-full items-center justify-between cursor-pointer py-2.5 collapsed"
|
|
type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
|
|
aria-expanded="false" aria-controls="collapseThree">
|
|
<span class="flex-grow truncate text-start h5 block">Can I customize the colors, fonts,
|
|
and
|
|
layouts?</span>
|
|
<span
|
|
class="icon-[lucide--chevron-up] collapse-arrow shrink-0 size-4 flex items-center justify-center"></span>
|
|
</button>
|
|
<div id="collapseThree" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionExample">
|
|
<div class="pb-4">
|
|
Veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
|
sunt in
|
|
culpa qui officia deserunt mollit anim id est laborum.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Collapse item:-->
|
|
<div class="collapse-item">
|
|
<button class="flex w-full items-center justify-between cursor-pointer py-2.5 collapsed"
|
|
type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour"
|
|
aria-expanded="false" aria-controls="collapseFour">
|
|
<span class="flex-grow truncate text-start block h5">Do I need prior coding
|
|
knowledge?</span>
|
|
<span
|
|
class="icon-[lucide--chevron-up] collapse-arrow shrink-0 size-4 flex items-center justify-center"></span>
|
|
</button>
|
|
<div id="collapseFour" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionExample">
|
|
<div class="pb-4">
|
|
Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
|
sunt in
|
|
culpa qui officia deserunt mollit anim id est laborum.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Collapse item:-->
|
|
<div class="collapse-item">
|
|
<button class="flex w-full items-center justify-between cursor-pointer py-2.5 collapsed"
|
|
type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive"
|
|
aria-expanded="false" aria-controls="collapseFive">
|
|
<span class="flex-grow truncate text-start block h5">What type of license is included
|
|
with this
|
|
template?</span>
|
|
<span
|
|
class="icon-[lucide--chevron-up] collapse-arrow shrink-0 size-4 flex items-center justify-center"></span>
|
|
</button>
|
|
<div id="collapseFive" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionExample">
|
|
<div class="pb-4">
|
|
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
|
sunt in
|
|
culpa qui officia deserunt mollit anim id est laborum.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="px-4">
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card mb-4">
|
|
<div class="grid grid-cols-1 p-2 md:grid-cols-4">
|
|
<!--:Card:-->
|
|
<div class="flex items-center gap-3.5 p-4">
|
|
<div
|
|
class="flex items-center justify-center p-4 rounded-lg shrink-0 bg-red-500/10 text-red-500">
|
|
<span class="icon-[lucide--shopping-bag] text-xl"></span>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<p class="mb-1">Orders completed</p>
|
|
<h5 class="text-xl !text-red-500">23,849</h5>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="flex items-center gap-3.5 p-4">
|
|
<div
|
|
class="flex items-center justify-center p-4 rounded-lg shrink-0 bg-sky-500/10 text-sky-500">
|
|
<span class="icon-[lucide--dollar-sign] text-xl"></span>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<p class="mb-1">Revenue made</p>
|
|
<h5 class="text-xl !text-blue-500">$887,654</h5>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="flex items-center gap-3.5 p-4">
|
|
<div
|
|
class="flex items-center justify-center p-4 rounded-lg shrink-0 bg-primary/20 text-primary">
|
|
<span class="icon-[lucide--mouse-pointer-2] text-xl"></span>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<p class="mb-1">Impression</p>
|
|
<h5 class="text-xl !text-primary">2,523,849</h5>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="flex items-center gap-3.5 p-4">
|
|
<div
|
|
class="flex items-center justify-center p-4 rounded-lg shrink-0 bg-yellow-500/20 text-yellow-500">
|
|
<span class="icon-[lucide--truck] text-xl"></span>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<p class="mb-1">Returns</p>
|
|
<h5 class="text-xl !text-yellow-500">23,321</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 px-4 mb-4">
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card p-4">
|
|
<div class="flex items-center justify-between">
|
|
<p class="mb-1">Visitor</p>
|
|
<!--:Icon:-->
|
|
<span
|
|
class="text-lg size-12 bg-sky-500/10 text-sky-500 !flex items-center justify-center rounded-full">
|
|
<span class="icon-[lucide--users]"></span>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl mb-1">149,328</h4>
|
|
<p class="text-sm text-muted">
|
|
<span class="text-green-500">+5.2%</span>
|
|
vs last month
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card p-4">
|
|
<div class="flex items-center justify-between">
|
|
<p class="mb-1">Conversion rate</p>
|
|
<!--:Icon:-->
|
|
<span
|
|
class="text-lg size-12 bg-primary/20 text-primary !flex items-center justify-center rounded-full">
|
|
<span class="icon-[lucide--dollar-sign]"></span>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl mb-1">12.5%</h4>
|
|
<p class="text-sm text-muted">
|
|
<span class="text-red-500">-0.2%</span>
|
|
vs last month
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card p-4">
|
|
<div class="flex items-center justify-between">
|
|
<p class="mb-1">Ad campaign clicks</p>
|
|
<!--:Icon:-->
|
|
<span
|
|
class="text-lg size-12 bg-red-500/10 text-red-500 !flex items-center justify-center rounded-full">
|
|
<span class="icon-[lucide--mouse-pointer-2] text-xl"></span>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl mb-1">17,333</h4>
|
|
<p class="text-sm text-muted">
|
|
<span class="text-green-500">+2.5%</span>
|
|
vs last month
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4">
|
|
<div class="mb-4 p-4 rounded-xl bg-white dark:bg-zinc-900 shadow-card overflow-hidden">
|
|
<div class="mb-2.5 flex items-center justify-between">
|
|
<h5 class="text-lg">KPI summary</h5>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
|
|
<!--:Card:-->
|
|
<div class="overflow-hidden p-4 bg-zinc-50 dark:bg-white/3 rounded-xl">
|
|
<div
|
|
class="flex items-center justify-center mb-3 size-12 flex rounded-full shrink-0 bg-yellow-500 text-white">
|
|
<span class="icon-[lucide--dollar-sign] text-xl"></span>
|
|
</div>
|
|
<p class="mb-2">Total spend</p>
|
|
<h5 class="text-xl mb-2">394,858</h5>
|
|
<span class="text-xs text-muted flex items-center gap-1"><span
|
|
class="text-green-500">+5%</span>vs last
|
|
year</span>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="overflow-hidden p-4 bg-zinc-50 dark:bg-white/3 rounded-xl">
|
|
<div
|
|
class="flex items-center justify-center mb-3 size-12 flex rounded-full shrink-0 bg-primary text-white">
|
|
<span class="icon-[lucide--refresh-ccw-dot] text-xl"></span>
|
|
</div>
|
|
<p class="mb-2">ROI</p>
|
|
<h5 class="text-xl mb-2">67%</h5>
|
|
<span class="text-xs text-muted flex items-center gap-1"><span
|
|
class="text-green-500">+2.3%</span>vs
|
|
last year</span>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="overflow-hidden p-4 bg-zinc-50 dark:bg-white/3 rounded-xl">
|
|
<div
|
|
class="flex items-center justify-center mb-3 size-12 flex rounded-full shrink-0 bg-blue-500 text-white">
|
|
<span class="icon-[lucide--percent] text-xl"></span>
|
|
</div>
|
|
<p class="mb-2">Conversion rates</p>
|
|
<h5 class="text-xl mb-2">6.5%</h5>
|
|
<span class="text-xs text-muted flex items-center gap-1"><span
|
|
class="text-green-500">+0.8%</span>vs
|
|
last year</span>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="overflow-hidden p-4 bg-zinc-50 dark:bg-white/3 rounded-xl">
|
|
<div
|
|
class="flex items-center justify-center mb-3 size-12 flex rounded-full shrink-0 bg-red-500 text-white">
|
|
<span class="icon-[lucide--magnet] text-xl"></span>
|
|
</div>
|
|
<p class="mb-2">Total leads</p>
|
|
<h5 class="text-xl mb-2">3829</h5>
|
|
<span class="text-xs text-muted flex items-center gap-1"><span
|
|
class="text-green-500">+1.3%</span>vs
|
|
last year</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 mb-4">
|
|
<div class="md:col-span-4">
|
|
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="p-1">
|
|
<img src="images/projects/3.jpg" class="max-w-full rounded-lg" alt="">
|
|
</div>
|
|
<div class="p-4 pt-2">
|
|
<h5 class="text-lg mb-1">Abstract design</h5>
|
|
<p class="line-clamp-2">
|
|
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing
|
|
industries for previewing layouts and visual mockups.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between px-4 pb-4">
|
|
<div class="flex items-center gap-2">
|
|
<img src="images/avatars/thumb-1.jpg" class="rounded-full w-6" alt="">
|
|
<h6>Kethy Miller</h6>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="inline-flex items-center text-sm gap-1">
|
|
<span class="icon-[lucide--heart]"></span>
|
|
27
|
|
</div>
|
|
<div class="inline-flex items-center text-sm gap-1">
|
|
<span class="icon-[lucide--message-circle-more]"></span>
|
|
16
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
<!--: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">Skills</h5>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2 p-4">
|
|
<span class="badge bg-primary-subtle text-primary">Product Development</span>
|
|
<span class="badge bg-primary-subtle text-primary">Webflow</span>
|
|
<span class="badge bg-primary-subtle text-primary">Management</span>
|
|
<span class="badge bg-primary-subtle text-primary">Figma</span>
|
|
<span class="badge bg-primary-subtle text-primary">Web Design</span>
|
|
<span class="badge bg-primary-subtle text-primary">Html / Css</span>
|
|
<span class="badge bg-primary-subtle text-primary">Angular</span>
|
|
<span class="badge bg-primary-subtle text-primary">Figma</span>
|
|
<span class="badge bg-primary-subtle text-primary">React</span>
|
|
<span class="badge bg-primary-subtle text-primary">Vue</span>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4 flex items-center justify-between">
|
|
<h5 class="text-lg">My files</h5>
|
|
<!--:Dropdown:-->
|
|
<div class="relative">
|
|
<button
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5"
|
|
type="button" data-bs-toggle="dropdown">
|
|
<span class="icon-[lucide--more-vertical] text-lg"></span>
|
|
</button>
|
|
<div class="dropdown-menu z-50 absolute min-w-36 !start-auto !end-0 top-full">
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--activity] dropdown-icon"></span>
|
|
Activity
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--share] dropdown-icon"></span>
|
|
Share
|
|
</a>
|
|
<hr class="border-zinc-200 dark:border-white/3 my-2">
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--settings] dropdown-icon"></span>
|
|
Settings
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:File list:-->
|
|
<div class="grid gap-2.5 lg:gap-5 p-4">
|
|
<!--:File item:-->
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center grow gap-2.5">
|
|
<img alt="" class="h-6 w-auto" src="images/files/pdf.svg">
|
|
<div class="flex flex-col">
|
|
<h6 class="cursor-pointer hover:!text-primary transition-all mb-1">
|
|
project-map.pdf
|
|
</h6>
|
|
<span class="text-sm text-muted">
|
|
2.1
|
|
MB 27 Jul 2025 15:17 PM
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!--:Dropdown:-->
|
|
<div class="relative">
|
|
<button
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5"
|
|
type="button" data-bs-toggle="dropdown">
|
|
<span class="icon-[lucide--more-vertical] text-lg"></span>
|
|
</button>
|
|
<div class="dropdown-menu z-50 absolute min-w-36 !start-auto !end-0 top-full">
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--download] dropdown-icon"></span>
|
|
Download
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--trash] dropdown-icon"></span>
|
|
Delete
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--share] dropdown-icon"></span>
|
|
Share
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:File item:-->
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center grow gap-2.5">
|
|
<img alt="" class="h-6 w-auto" src="images/files/ai.svg">
|
|
<div class="flex flex-col">
|
|
<h6 class="cursor-pointer hover:!text-primary transition-all mb-1">
|
|
illustration.ai
|
|
</h6>
|
|
<span class="text-sm text-muted">
|
|
5.5
|
|
MB 27 Jul 2025 15:17 PM
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!--:Dropdown:-->
|
|
<div class="relative">
|
|
<button
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5"
|
|
type="button" data-bs-toggle="dropdown">
|
|
<span class="icon-[lucide--more-vertical] text-lg"></span>
|
|
</button>
|
|
<div class="dropdown-menu z-50 absolute min-w-36 !start-auto !end-0 top-full">
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--download] dropdown-icon"></span>
|
|
Download
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--trash] dropdown-icon"></span>
|
|
Delete
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--share] dropdown-icon"></span>
|
|
Share
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:File item:-->
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center grow gap-2.5">
|
|
<img alt="" class="h-6 w-auto" src="images/files/js.svg">
|
|
<div class="flex flex-col">
|
|
<h6 class="cursor-pointer hover:!text-primary transition-all mb-1">
|
|
dashboard-alt.js
|
|
</h6>
|
|
<span class="text-sm text-muted">
|
|
40
|
|
KB 27 Jul 2025
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!--:Dropdown:-->
|
|
<div class="relative">
|
|
<button
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5"
|
|
type="button" data-bs-toggle="dropdown">
|
|
<span class="icon-[lucide--more-vertical] text-lg"></span>
|
|
</button>
|
|
<div class="dropdown-menu z-50 absolute min-w-36 !start-auto !end-0 top-full">
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--download] dropdown-icon"></span>
|
|
Download
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--trash] dropdown-icon"></span>
|
|
Delete
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--share] dropdown-icon"></span>
|
|
Share
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:File item:-->
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center grow gap-2.5">
|
|
<img alt="" class="h-6 w-auto" src="images/files/doc.svg">
|
|
<div class="flex flex-col">
|
|
<h6 class="cursor-pointer hover:!text-primary transition-all mb-1">
|
|
profile-changes.doc
|
|
</h6>
|
|
<span class="text-sm text-muted">
|
|
1.1
|
|
MB 27 Jul 2025
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!--:Dropdown:-->
|
|
<div class="relative">
|
|
<button
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5"
|
|
type="button" data-bs-toggle="dropdown">
|
|
<span class="icon-[lucide--more-vertical] text-lg"></span>
|
|
</button>
|
|
<div class="dropdown-menu z-50 absolute min-w-36 !start-auto !end-0 top-full">
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--download] dropdown-icon"></span>
|
|
Download
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--trash] dropdown-icon"></span>
|
|
Delete
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--share] dropdown-icon"></span>
|
|
Share
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 pb-4">
|
|
<a href="#!"
|
|
class="inline-block border-b border-dashed text-primary text-sm font-semibold hover:text-current">All
|
|
files</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card mb-4">
|
|
<div class="flex items-center justify-between p-4 pb-0">
|
|
<img class="h-10 w-auto shrink-0" src="images/brands/google-analytics.svg" alt="">
|
|
<a href="#!" class="size-8 btn btn-default !p-0 !rounded-full">
|
|
<span class="icon-[lucide--arrow-up-right] text-lg"></span>
|
|
</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<a href="#!" class="hover:!text-primary block text-lg mb-2 h6">
|
|
Google Analytics
|
|
</a>
|
|
<p>
|
|
Insights into website traffic and marketing effectiveness.
|
|
</p>
|
|
</div>
|
|
<!--:Footer:-->
|
|
<div class="flex items-center justify-between px-4 pb-4">
|
|
<a href="#!" class="btn btn-sm gap-1 btn-default">
|
|
<span class="icon-[lucide--component] text-base"></span>
|
|
Connect</a>
|
|
<div><input class="input-switch" name="integration" type="checkbox" value="1"></div>
|
|
</div>
|
|
</div>
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
|
|
<div class="text-center px-4 lg:px-6 py-4">
|
|
<img src="images/illustrations/analytic.png" alt=""
|
|
class="w-32 mb-4 h-auto mx-auto block">
|
|
<h5 class="text-lg mb-2">Add New Integration</h5>
|
|
<p class="mb-5">
|
|
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing
|
|
industries
|
|
</p>
|
|
<a href="#!" class="btn bg-primary text-white hover:bg-primary-deep">Start now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 mb-4">
|
|
<div class="md:col-span-4">
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4">
|
|
<h5 class="text-lg">Block List</h5>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2 p-4">
|
|
<p class="mb-2">
|
|
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing
|
|
industries
|
|
</p>
|
|
<div class="flex items-center w-full gap-1 mb-2">
|
|
<input id="widget_block_user" class="input flex-grow" placeholder="Block new user"
|
|
type="text" value="">
|
|
<span class="btn bg-primary hover:bg-primary-deep text-white">
|
|
Add
|
|
</span>
|
|
</div>
|
|
<!--:Blocked users list:-->
|
|
<ul class="flex flex-col w-full divide-y divide-zinc-500/10 dark:divide-zinc-800">
|
|
<!--:Blocked users item:-->
|
|
<li class="flex items-center py-2.5 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-1.jpg">
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<a class="flex items-center gap-1.5 leading-none h6 hover:!text-primary"
|
|
href="#">
|
|
Emily Johnson
|
|
</a>
|
|
<span class="text-sm text-muted">
|
|
12 commits
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2.5">
|
|
<a class="btn btn-sm btn-default" href="#">
|
|
Unblock
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<!--:Blocked users item:-->
|
|
<li class="flex items-center py-2.5 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-2.jpg">
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<a class="flex items-center gap-1.5 leading-none h6 hover:!text-primary"
|
|
href="#">
|
|
Nikita Miller
|
|
</a>
|
|
<span class="text-sm text-muted">
|
|
14 commits
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2.5">
|
|
<a class="btn btn-sm btn-default" href="#">
|
|
Unblock
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<!--:Blocked users item:-->
|
|
<li class="flex items-center py-2.5 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-3.jpg">
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<a class="flex items-center gap-1.5 leading-none h6 hover:!text-primary"
|
|
href="#">
|
|
Lissa Handrics
|
|
</a>
|
|
<span class="text-sm text-muted">
|
|
5 commits
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2.5">
|
|
<a class="btn btn-sm btn-default" href="#">
|
|
Unblock
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<!--:Blocked users item:-->
|
|
<li class="flex items-center py-2.5 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-4.jpg">
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<a class="flex items-center gap-1.5 leading-none h6 hover:!text-primary"
|
|
href="#">
|
|
John Doe
|
|
</a>
|
|
<span class="text-sm text-muted">
|
|
3 commits
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2.5">
|
|
<a class="btn btn-sm btn-default" href="#">
|
|
Unblock
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4">
|
|
<h5 class="text-lg">About</h5>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2 p-4">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-muted pb-3.5 pe-3">
|
|
Age
|
|
</td>
|
|
<td class="pb-3.5">
|
|
29
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted pb-3.5 pe-3">
|
|
City:
|
|
</td>
|
|
<td class="pb-3.5">
|
|
San Fransisco
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted pb-3.5 pe-3">
|
|
State:
|
|
</td>
|
|
<td class="pb-3.5">
|
|
California
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted pb-3.5 pe-3">
|
|
Country:
|
|
</td>
|
|
<td class="pb-3.5">
|
|
United States
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted pb-3.5 pe-3">
|
|
Postcode:
|
|
</td>
|
|
<td class="pb-3.5">
|
|
2730 CL
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted pb-3.5 pe-3">
|
|
Phone:
|
|
</td>
|
|
<td class="pb-3.5">
|
|
+01 1 1234 56 78
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted pe-3">
|
|
Email:
|
|
</td>
|
|
<td>
|
|
<a class="hover:text-primary" href="#">
|
|
email@domain.com
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4">
|
|
<h5 class="text-lg">Password</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<form>
|
|
<div class="mb-4">
|
|
<label for="userCurrentPassword" class="block mb-1">Current
|
|
Password</label>
|
|
<input id="userCurrentPassword" type="password" class="input"
|
|
placeholder="Current password">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="userNewPassword" class="block mb-1">New Password</label>
|
|
<input id="userNewPassword" type="password" class="input"
|
|
placeholder="New password">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="userConfirmNewPassword" class="block mb-1">Confirm New
|
|
Password</label>
|
|
<input id="userConfirmNewPassword" type="password" class="input"
|
|
placeholder="Confirm new password">
|
|
</div>
|
|
<div class="text-right">
|
|
<button type="submit"
|
|
class="btn bg-primary text-white hover:bg-primary-deep">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 mb-4">
|
|
<div class="md:col-span-6">
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4 flex items-center justify-between">
|
|
<h5 class="text-lg">Activity list</h5>
|
|
<label class="flex items-center text-sm gap-2 cursor-pointer">
|
|
<span class="flex-grow text-muted">Auto refresh</span>
|
|
<input class="input-switch" name="activityRefresh" type="checkbox" value="1">
|
|
</label>
|
|
</div>
|
|
<div class="p-4">
|
|
<span class="font-semibold text-sm block mb-2 text-muted">Today</span>
|
|
<!--:Timeline:-->
|
|
<ul class="timeline">
|
|
<li class="timeline-item">
|
|
<div class="timeline-item-wrapper">
|
|
<div class="timeline-item-media shrink-0">
|
|
<div class="timeline-item-media-content">
|
|
<!--:Avatar:-->
|
|
<img alt="" src="images/avatars/thumb-3.jpg"
|
|
class="rounded-full size-7">
|
|
</div>
|
|
<div class="timeline-connect"></div>
|
|
</div>
|
|
<div class="timeline-item-content">
|
|
<div class="mt-1">
|
|
<p class="mb-1"><span class="h6">Angelina
|
|
Gotelli</span><span> has changed </span><span
|
|
class="font-semibold">#ts-212</span><span>
|
|
status to </span><span
|
|
class="font-semibold text-green-500">Completed</span>
|
|
<span class="block mt-1 text-xs text-muted">10:15
|
|
AM</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!--:Timeline item:-->
|
|
<li class="timeline-item">
|
|
<div class="timeline-item-wrapper">
|
|
<div class="timeline-item-media shrink-0">
|
|
<div class="timeline-item-media-content">
|
|
<!--:Avatar:-->
|
|
<img alt="" src="images/avatars/thumb-6.jpg"
|
|
class="rounded-full size-7">
|
|
</div>
|
|
<div class="timeline-connect"></div>
|
|
</div>
|
|
<div class="timeline-item-content">
|
|
<div class="mt-1">
|
|
<p class="mb-1"><span class="h6">Max Alexander</span>
|
|
comment on your post
|
|
<a href="#!"
|
|
class="font-semibold text-primary hover:text-primary-deep">Top
|
|
10 Tech Trends</a>
|
|
<span class="text-xs mt-1 text-muted block">11:50
|
|
AM</span>
|
|
</p>
|
|
<div class="p-3 rounded-lg bg-zinc-50 dark:bg-zinc-800">
|
|
<p class="mb-2">
|
|
Lorem ipsum is text commonly used in the print, and
|
|
publishing industries for previewing layouts and visual
|
|
mockups
|
|
</p>
|
|
<a href="#!"
|
|
class="hover:text-primary border-b text-sm font-semibold border-dashed">
|
|
<span class="icon-[lucide--reply]"></span>
|
|
Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!--:Timeline item:-->
|
|
<li class="timeline-item">
|
|
<div class="timeline-item-wrapper">
|
|
<div class="timeline-item-media shrink-0">
|
|
<div class="timeline-item-media-content">
|
|
<!--:Avatar:-->
|
|
<span
|
|
class="size-7 flex items-center justify-center rounded-full bg-primary text-white">
|
|
<span class="icon-[lucide--hash]"></span>
|
|
</span>
|
|
</div>
|
|
<div class="timeline-connect"></div>
|
|
</div>
|
|
<div class="timeline-item-content">
|
|
<div class="mt-1">
|
|
<p class="mb-1"><span class="h6">Eugene
|
|
Stewart</span><span> added tags </span>
|
|
<span
|
|
class="badge bg-sky-500/10 text-sky-500">Tailwindcss</span>
|
|
<span class="badge bg-red-500/10 text-red-500">Gulp</span>
|
|
|
|
<span class="block text-xs mt-1 text-muted">12:50
|
|
PM</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!--:Footer:-->
|
|
<div class="px-4 pb-4">
|
|
<a href="#!"
|
|
class="inline-block border-b border-dashed text-primary text-sm font-semibold hover:text-current">View
|
|
all Activity</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-6">
|
|
<!--:Card:-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card relative overflow-hidden">
|
|
<div class="px-4 pt-4 flex items-center justify-between">
|
|
<span class="badge bg-green-500/10 text-green-500">Active</span>
|
|
<!--:Dropdown:-->
|
|
<div class="relative">
|
|
<button
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5"
|
|
type="button" data-bs-toggle="dropdown">
|
|
<span class="icon-[lucide--more-vertical] text-lg"></span>
|
|
</button>
|
|
|
|
<div class="dropdown-menu z-50 absolute min-w-32 top-full">
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--settings] dropdown-icon"></span>
|
|
Settings
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[iconoir--pause] dropdown-icon"></span>
|
|
Paush
|
|
</a>
|
|
<a href="#!" class="dropdown-item">
|
|
<span class="icon-[lucide--info] dropdown-icon"></span>
|
|
Details
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-6">
|
|
<div class="flex flex-col items-center justify-center text-center mb-5">
|
|
<img alt="" src="images/brands/mailchimp.svg" class="w-10 h-auto block mb-2">
|
|
<a href="#!" class="hover:text-primary text-lg h6">Email Engagement</a>
|
|
<p class="text-sm">Mailchimp email engagement</p>
|
|
</div>
|
|
<div class="flex items-center justify-center flex-wrap gap-2 lg:gap-5">
|
|
<div
|
|
class="flex flex-col flex-grow gap-1.5 border border-zinc-200 dark:border-zinc-800 border-dashed border-input rounded-md p-3">
|
|
<h6 class="font-semibold">23.4K</h6>
|
|
<small class="text-muted">Subscribers</small>
|
|
</div>
|
|
<div
|
|
class="flex flex-col flex-grow gap-1.5 border border-zinc-200 dark:border-zinc-800 border-dashed border-input rounded-md p-3">
|
|
<h6 class="font-semibold">22%</h6>
|
|
<small class="text-muted">Traffic Rise</small>
|
|
</div>
|
|
<div
|
|
class="flex flex-col flex-grow gap-1.5 border border-zinc-200 dark:border-zinc-800 border-dashed border-input rounded-md p-3">
|
|
<h6 class="font-semibold">$311.75K</h6>
|
|
<small class="text-muted">Total Sales</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--:Footer:-->
|
|
<div class="px-4 pb-4 text-center">
|
|
<a href="#!"
|
|
class="inline-block border-b border-dashed text-primary text-sm font-semibold hover:text-current">View
|
|
all Campaigns</a>
|
|
</div>
|
|
|
|
<!--:Campaign progress:-->
|
|
<div class="h-1 w-full absolute bottom-0 left-0 bg-blue-500/10" role="progressbar"
|
|
aria-label="Basic example" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="h-1 bg-blue-500" style="width:37%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 mb-4">
|
|
<div class="md:col-span-4">
|
|
|
|
<!--:Card:-->
|
|
<div class="rounded-xl overflow-hidden bg-white dark:bg-zinc-900 shadow-card">
|
|
<!--:Cover:-->
|
|
<div class="h-32">
|
|
<img src="images/bg-cover.jpg" alt="" class="object-cover w-full h-full object-top">
|
|
</div>
|
|
<div class="relative">
|
|
<img src="images/avatars/thumb-1.jpg" alt=""
|
|
class="size-20 -mt-10 rounded-full border-4 border-white dark:border-zinc-900 block mx-auto">
|
|
<div class="p-4 pt-2">
|
|
<div class="mb-4 text-center">
|
|
<h5 class="text-lg mb-1">Emily Docker</h5>
|
|
<p class="text-sm text-muted">UI/UX Designer</p>
|
|
</div>
|
|
<div
|
|
class="grid grid-cols-3 gap-4 mb-4 divide-x divide-dashed divide-zinc-200 dark:divide-zinc-800">
|
|
<div class="text-center">
|
|
<p class="text-sm text-muted"><a href="#!">Projects</a></p>
|
|
<p>20</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-sm text-muted"><a href="#!">Tasks</a></p>
|
|
<p>15</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-sm text-muted"><a href="#!">Position</a></p>
|
|
<p>Employee</p>
|
|
</div>
|
|
</div>
|
|
<p class="line-clamp-2 mb-4">
|
|
Lorem ipsum is text commonly used in the print, and publishing industries for
|
|
previewing layouts and visual mockups
|
|
</p>
|
|
<div class="flex flex-wrap justify-center items-center gap-1">
|
|
<a href="#!"
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5">
|
|
<span class="icon-[iconoir--facebook] text-lg"></span>
|
|
</a>
|
|
<a href="#!"
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5">
|
|
<span class="icon-[iconoir--x] text-lg"></span>
|
|
</a>
|
|
<a href="#!"
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5">
|
|
<span class="icon-[iconoir--linkedin] text-lg"></span>
|
|
</a>
|
|
<a href="#!"
|
|
class="btn text-muted hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary !p-1.5">
|
|
<span class="icon-[iconoir--discord] text-lg"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
|
|
<!--:Card:-->
|
|
<div class="rounded-xl overflow-hidden bg-white dark:bg-zinc-900 shadow-card">
|
|
<!--:Cover:-->
|
|
<div class="h-42">
|
|
<img src="images/bg-cover-2.jpg" alt="" class="object-cover w-full h-full object-top">
|
|
</div>
|
|
<div class="relative">
|
|
<img src="images/avatars/thumb-7.jpg" alt=""
|
|
class="size-20 -mt-10 rounded-full border-4 border-white dark:border-zinc-900 block mx-auto">
|
|
<div class="p-4 pt-2">
|
|
<div class="mb-4 text-center">
|
|
<h5 class="text-lg mb-1">Liam Johnson</h5>
|
|
<p class="text-sm text-muted">Digital Marketer</p>
|
|
</div>
|
|
<div
|
|
class="grid grid-cols-3 gap-4 mb-4 divide-x divide-dashed divide-zinc-200 dark:divide-zinc-800">
|
|
<div class="text-center">
|
|
<p class="text-lg">123</p>
|
|
<p class="text-sm text-muted"><a href="#!">Posts</a></p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-lg">493K</p>
|
|
<p class="text-sm text-muted"><a href="#!">Followers</a></p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-lg">256</p>
|
|
<p class="text-sm text-muted"><a href="#!">Following</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap justify-center items-center gap-1">
|
|
<a href="#!" class="btn bg-primary text-white hover:bg-primary-deep">
|
|
Follow Now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
|
|
<!--:Card:-->
|
|
<div class="rounded-xl overflow-hidden bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4 pb-2 flex items-center justify-between">
|
|
<h5 class="text-lg">Contacts</h5>
|
|
<a href="#!" class="border-b border-dashed text-primary hover:text-current">View
|
|
All</a>
|
|
</div>
|
|
<ul class="divide-y 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-1.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="#">Nikita Miller</a>
|
|
<span class="text-sm text-muted">UI/UX Developer</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2.5">
|
|
<a class="btn btn-sm btn-default" href="#">Message</a>
|
|
</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-8.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="#">Liam Johnson</a>
|
|
<span class="text-sm text-muted">Frontend Engineer</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2.5">
|
|
<a class="btn btn-sm btn-default" href="#">Message</a>
|
|
</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-3.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="#">Sophia Lee</a>
|
|
<span class="text-sm text-muted">Product Designer</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2.5">
|
|
<a class="btn btn-sm btn-default" href="#">Message</a>
|
|
</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-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>
|
|
<div class="flex items-center gap-2.5">
|
|
<a class="btn btn-sm btn-default" href="#">Message</a>
|
|
</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>
|
|
<div class="flex items-center gap-2.5">
|
|
<a class="btn btn-sm btn-default" href="#">Message</a>
|
|
</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>
|
|
<div class="flex items-center gap-2.5">
|
|
<a class="btn btn-sm btn-default" href="#">Message</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
|
|
<!--:Card:-->
|
|
<div class="rounded-xl overflow-hidden bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4 pb-2 flex items-center justify-between">
|
|
<h5 class="text-lg">Reminders</h5>
|
|
<a href="#!" class="border-b border-dashed text-primary hover:text-current">View
|
|
All</a>
|
|
</div>
|
|
<ul class="divide-y 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 flex-col gap-1 overflow-hidden">
|
|
<a class="block" href="#">
|
|
<h6 class="truncate">Waree Energy Meeting goes down there</h6>
|
|
</a>
|
|
<span class="text-sm text-muted">Today - 14:30AM</span>
|
|
</div>
|
|
<div class="flex items-center shrink-0">
|
|
<a class="badge bg-primary-subtle text-primary hover:bg-primary hover:text-white"
|
|
href="#">
|
|
<span class="icon-[lucide--users] me-1.5"></span> Meeting</a>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-center py-3 justify-between gap-2.5">
|
|
<div class="flex flex-col gap-1 overflow-hidden">
|
|
<a class="block" href="#">
|
|
<h6 class="truncate">Jackob Doherty</h6>
|
|
</a>
|
|
<span class="text-sm text-muted">Tomorrow</span>
|
|
</div>
|
|
<div class="flex items-center shrink-0">
|
|
<a class="badge bg-amber-500/10 text-amber-500 hover:bg-amber-500 hover:text-white items-center"
|
|
href="#">
|
|
<span class="icon-[lucide--cake] me-1.5"></span>
|
|
Birthday</a>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-center py-3 justify-between gap-2.5">
|
|
<div class="flex flex-col gap-1 overflow-hidden">
|
|
<a class="block" href="#">
|
|
<h6 class="truncate">Contract revision- update banking details</h6>
|
|
</a>
|
|
<span class="text-sm text-muted">Tomorrow - 2:30PM</span>
|
|
</div>
|
|
<div class="flex items-center shrink-0">
|
|
<a class="badge bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white items-center"
|
|
href="#">
|
|
<span class="icon-[lucide--triangle-alert] me-1.5"></span>
|
|
Deadline </a>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-center py-3 justify-between gap-2.5">
|
|
<div class="flex flex-col gap-1 overflow-hidden">
|
|
<a class="block" href="#">
|
|
<h6 class="truncate">Designers & developers meet for Waree projects</h6>
|
|
</a>
|
|
<span class="text-sm text-muted">Friday - 12:30AM</span>
|
|
</div>
|
|
<div class="flex items-center shrink-0">
|
|
<a class="badge bg-primary-subtle text-primary hover:bg-primary hover:text-white"
|
|
href="#">
|
|
<span class="icon-[lucide--users] me-1.5"></span> Meeting</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
|
|
<!--:Card:-->
|
|
<div
|
|
class="rounded-xl relative bg-gradient-to-tl from-primary-deep via-purple-700 to-pink-900 shadow-card p-6 overflow-hidden">
|
|
<img src="images/projects/1.jpg" alt="" class="w-full h-full absolute inset-0 object-cover">
|
|
<div class="relative z-[1]">
|
|
<span class="relative animate-bounce my-4 flex size-16 rounded-full mx-auto">
|
|
<img src="images/avatars/thumb-1.jpg" alt=""
|
|
class="size-16 rounded-full shadow-xl block mx-auto">
|
|
</span>
|
|
|
|
<!--info-->
|
|
<div class="mb-7 text-center">
|
|
<h5 class="text-lg mb-1 !text-white">Emily calling you</h5>
|
|
<p class="text-sm text-white/75">Raven support</p>
|
|
</div>
|
|
|
|
<!--:Call buttons:-->
|
|
<div class="flex items-center justify-center gap-6 lg:gap-10">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<button type="button"
|
|
class="size-12 bg-red-500 hover:bg-red-600 cursor-pointer text-white flex items-center justify-center rounded-full">
|
|
<span class="icon-[lucide--phone-off] text-2xl"></span>
|
|
</button>
|
|
<span class="text-white">Decline</span>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<button type="button"
|
|
class="size-12 bg-lime-500 hover:bg-lime-600 cursor-pointer text-white flex items-center justify-center rounded-full">
|
|
<span class="icon-[lucide--phone-call] text-2xl"></span>
|
|
</button>
|
|
<span class="text-white">Answer</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
|
|
<!--:Card:-->
|
|
<div class="rounded-xl overflow-hidden bg-white dark:bg-zinc-900 shadow-card">
|
|
<div class="px-4 pt-4 pb-2 flex items-center justify-between">
|
|
<h5 class="text-lg">Open Positions</h5>
|
|
<a href="#!" class="border-b border-dashed text-primary hover:text-current">View
|
|
All</a>
|
|
</div>
|
|
<div class="overflow-x-auto px-4">
|
|
<table class="table-default table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Departement</th>
|
|
<th class="!text-end">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="whitespace-nowrap">
|
|
<td>UI/UX designer</td>
|
|
<td>Service</td>
|
|
<td class="!text-end">
|
|
<span class="flex justify-end items-center gap-1">
|
|
<span
|
|
class="icon-[iconoir--clock-solid] text-lg text-sky-500"></span>
|
|
<span>Process</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="whitespace-nowrap">
|
|
<td>Web developer</td>
|
|
<td>IT</td>
|
|
<td class="!text-end">
|
|
<span class="flex justify-end items-center gap-1">
|
|
<span
|
|
class="icon-[iconoir--check-circle-solid] text-lg text-green-500"></span>
|
|
<span>Active</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="whitespace-nowrap">
|
|
<td>BE developer</td>
|
|
<td>IT</td>
|
|
<td class="!text-end">
|
|
<span class="flex justify-end items-center gap-1">
|
|
<span
|
|
class="icon-[iconoir--clock-solid] text-lg text-sky-500"></span>
|
|
<span>Process</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="whitespace-nowrap">
|
|
<td>HR Manager</td>
|
|
<td>HR</td>
|
|
<td class="!text-end">
|
|
<span class="flex justify-end items-center gap-1">
|
|
<span
|
|
class="icon-[iconoir--check-circle-solid] text-lg text-green-500"></span>
|
|
<span>Active</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="whitespace-nowrap">
|
|
<td>Project manager</td>
|
|
<td>Manager</td>
|
|
<td class="!text-end">
|
|
<span class="flex justify-end items-center gap-1">
|
|
<span
|
|
class="icon-[iconoir--check-circle-solid] text-lg text-green-500"></span>
|
|
<span>Active</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4">
|
|
<!--alert cta-->
|
|
<div class="rounded-xl bg-white dark:bg-zinc-900 shadow-card p-2">
|
|
<div
|
|
class="p-4 lg:p-6 overflow-hidden rounded-xl bg-orange-100 dark:bg-orange-950 border border-orange-500/10">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-grow me-4">
|
|
<h6 class="text-xl mb-2">Your free trial expires in <span class="text-yellow-600">17
|
|
days</span></h6>
|
|
<p class="mb-4 dark:text-white/70">Upgrade your plan now to keep uninterrupted access to
|
|
all
|
|
features.</p>
|
|
<button type="button" class="btn bg-primary text-white hover:bg-primary-deep">Upgrade
|
|
Now <span class="icon-[lucide--external-link] ms-2"></span></button>
|
|
</div>
|
|
<div class="shrink-0 w-24">
|
|
<img src="images/illustrations/wallet.png" class="max-w-full" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--:Footer:-->
|
|
<footer class="footer px-4 lg:px-8 py-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
|
|
<div class="md:col-span-5 order-last md:order-1">
|
|
<span class="text-sm text-muted text-center md:text-start block">
|
|
© Copyright 2025. <strong>Raven</strong> all rights reserved
|
|
</span>
|
|
</div>
|
|
<div class="md:col-span-7 md:order-last order-1">
|
|
<ul class="flex flex-wrap w-full items-center gap-1.5 text-sm md:justify-end justify-center">
|
|
<li><a href="#!" class="text-muted hover:!text-primary">Support</a></li>
|
|
<li class="size-1 bg-current rounded-full mx-1 opacity-30"></li>
|
|
<li><a href="#!" class="text-muted hover:!text-primary">Changelog</a></li>
|
|
<li class="size-1 bg-current rounded-full mx-1 opacity-30"></li>
|
|
<li><a href="#!" class="text-muted hover:!text-primary">Privacy policy</a></li>
|
|
<li class="size-1 bg-current rounded-full mx-1 opacity-30"></li>
|
|
<li><a href="#!" class="text-muted hover:!text-primary">Terms & conditions</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
|
|
<!--:Scripts:-->
|
|
<script src="js/theme.js"></script>
|
|
</body>
|
|
|
|
</html> |