684 lines
44 KiB
HTML
684 lines
44 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">
|
|
<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-950 fixed start-0 transition-all ltr:-translate-x-full rtl:translate-x-full ltr:lg:-translate-x-0 rtl:lg:translate-x-0 top-0 w-24 h-full flex flex-col z-[52] app-sidebar app-sidebar-compact">
|
|
<div class="shrink-0 h-16 flex items-center justify-center">
|
|
<a href="index.html" class="flex items-center px-2">
|
|
<span
|
|
class="flex w-10 h-10 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>
|
|
</a>
|
|
</div>
|
|
<div class="flex flex-col h-full overflow-y-auto app-menu">
|
|
<nav class="flex flex-col space-y-2 px-2 py-2 items-center">
|
|
<div class="static">
|
|
<a data-bs-boundry="viewport" data-bs-toggle="dropdown" href="#"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--file-chart-column]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Boards</span>
|
|
</a>
|
|
<div class="dropdown-menu w-48 z-50">
|
|
<a href="index.html" class="dropdown-item ">Analytics</a>
|
|
<a href="index-ecommerce.html"
|
|
class="dropdown-item ">Ecommerce</a>
|
|
<a href="index-marketing.html"
|
|
class="dropdown-item ">Marketing</a>
|
|
<a href="index-social.html"
|
|
class="dropdown-item ">Social</a>
|
|
<a href="index-jobs.html" class="dropdown-item ">Jobs</a>
|
|
</div>
|
|
</div>
|
|
<a href="widgets.html"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--wand-sparkles]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Widgets</span>
|
|
</a>
|
|
<div class="static">
|
|
<a data-bs-boundry="viewport" data-bs-toggle="dropdown" href="#"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--component]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Apps</span>
|
|
</a>
|
|
<div class="dropdown-menu w-48 z-50">
|
|
<a href="app-inbox.html" class="dropdown-item @@app_inbox">Inbox</a>
|
|
<a href="app-chat.html" class="dropdown-item @@app_chat">Chat</a>
|
|
<a href="app-calendar.html" class="dropdown-item @@app_calendar">Calendar</a>
|
|
<a href="app-file-manager.html" class="dropdown-item @@app_file_manager">File manager</a>
|
|
<a href="app-api.html" class="dropdown-item @@app_api">API</a>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-offset="80,-54" data-bs-boundry="viewport" data-bs-toggle="dropdown" href="#"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--user-cog]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Account</span>
|
|
</a>
|
|
<div class="dropdown-menu w-48 z-50">
|
|
<a href="account-profile.html" class="dropdown-item @@account_settings">Profile</a>
|
|
<a href="account-settings.html" class="dropdown-item @@account_settings">Settings</a>
|
|
<a href="account-activity-log.html" class="dropdown-item @@account_activty">Acitivity log</a>
|
|
<a href="account-roles-permissions.html" class="dropdown-item @@account_roles">Roles &
|
|
permissions</a>
|
|
<a href="account-pricing.html" class="dropdown-item @@account_pricing">Pricing</a>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-offset="80,-54" data-bs-boundry="viewport" data-bs-toggle="dropdown" href="#"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--folder-open]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Projects</span>
|
|
</a>
|
|
<div class="dropdown-menu w-48 z-50">
|
|
<a href="project-scrum-board.html" class="dropdown-item @@project_scrum">Scrum board</a>
|
|
<a href="projects-list.html" class="dropdown-item @@projects_list">List</a>
|
|
<a href="project-details.html" class="dropdown-item @@project_details">Details</a>
|
|
<a href="project-tasks.html" class="dropdown-item @@project_tasks">Tasks</a>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-offset="80,-54" data-bs-boundry="viewport" data-bs-toggle="dropdown" href="#"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--shirt]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Products</span>
|
|
</a>
|
|
<div class="dropdown-menu w-48 z-50">
|
|
<a href="products-list.html" class="dropdown-item @@products_list">List</a>
|
|
<a href="product-details.html" class="dropdown-item @@product_details">Details</a>
|
|
<a href="product-edit.html" class="dropdown-item @@product_edit">Edit</a>
|
|
<a href="product-add.html" class="dropdown-item @@product_add">Add</a>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-offset="80,-54" data-bs-boundry="viewport" data-bs-toggle="dropdown" href="#"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--users]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Customers</span>
|
|
</a>
|
|
<div class="dropdown-menu w-48 z-50">
|
|
<a href="customer-list.html" class="dropdown-item @@customer_list">List</a>
|
|
<a href="customer-details.html" class="dropdown-item @@customer_details">Details</a>
|
|
<a href="customer-edit.html" class="dropdown-item @@customer_edit">Edit</a>
|
|
<a href="customer-create.html" class="dropdown-item @@customer_create">Create</a>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-offset="80,-54" data-bs-boundry="viewport" data-bs-toggle="dropdown" href="#"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--life-buoy]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Help center</span>
|
|
</a>
|
|
<div class="dropdown-menu w-48 z-50">
|
|
<a href="support-hub.html" class="dropdown-item @@support_hub">Support hub</a>
|
|
<a href="support-articles.html" class="dropdown-item @@support_articles">Articles</a>
|
|
<a href="support-article.html" class="dropdown-item @@support_article">Article</a>
|
|
<a href="support-articles-manage.html" class="dropdown-item @@support_articles_manage">Manage
|
|
articles</a>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-offset="80,-54" data-bs-boundry="viewport" data-bs-toggle="dropdown" href="#"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--file-code-2]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Components</span>
|
|
</a>
|
|
<div class="dropdown-menu w-48 z-50 overflow-hidden">
|
|
<div class=" max-h-[320px] overflow-y-auto">
|
|
|
|
<span class="block px-2 pt-2 pb-1 text-xs opacity-50">Basic</span>
|
|
<a href="component-alert.html" class="dropdown-item @@component_alert">Alert</a>
|
|
<a href="component-avatar.html" class="dropdown-item @@component_avatar">Avatar</a>
|
|
<a href="component-animation.html" class="dropdown-item @@component_animation">Animation</a>
|
|
<a href="component-button.html" class="dropdown-item @@component_button">Button</a>
|
|
<a href="component-badge.html" class="dropdown-item @@component_badge">Badge</a>
|
|
<a href="component-breadcrum.html" class="dropdown-item @@component_breadcrumb">Breadcrumb</a>
|
|
<a href="component-card.html" class="dropdown-item @@component_card">Card</a>
|
|
<a href="component-collapse.html" class="dropdown-item @@component_collapse">Collapse</a>
|
|
<a href="component-dropdown.html" class="dropdown-item @@component_dropdown">Dropdown</a>
|
|
<a href="component-icons.html" class="dropdown-item @@component_icons">Icons</a>
|
|
<a href="component-grid.html" class="dropdown-item @@component_grid">Grid</a>
|
|
<a href="component-modal.html" class="dropdown-item @@component_modal">Modal</a>
|
|
<a href="component-notifications.html"
|
|
class="dropdown-item @@component_notifications">Notifications</a>
|
|
<a href="component-offcanvas.html" class="dropdown-item @@component_offcanvas">Offcanvas</a>
|
|
<a href="component-progress.html" class="dropdown-item @@component_progress">Progress</a>
|
|
<a href="component-pagination.html" class="dropdown-item @@component_pagination">Pagination</a>
|
|
<a href="component-tabbed-content.html" class="dropdown-item @@component_tabs">Tabbed
|
|
Content</a>
|
|
<a href="component-table.html" class="dropdown-item @@component_table">Table</a>
|
|
<a href="component-typography.html" class="dropdown-item @@component_typography">Typography</a>
|
|
<a href="component-tooltip.html" class="dropdown-item @@component_tooltip">Tooltip &
|
|
popovers</a>
|
|
|
|
|
|
<span class="block px-2 pt-2 pb-1 text-xs opacity-50">Graph</span>
|
|
<a href="graphs-echarts.html" class="dropdown-item @@graph_chart">Echarts</a>
|
|
<a href="graphs-map.html" class="dropdown-item @@grap_map">Map</a>
|
|
|
|
|
|
<span class="block px-2 pt-2 pb-1 text-xs opacity-50">Forms</span>
|
|
<a href="forms-input.html" class="dropdown-item @@form_input">Input</a>
|
|
<a href="forms-radio-checkbox.html" class="dropdown-item @@form_radio_checkbox">Radio &
|
|
checkbox</a>
|
|
<a href="forms-select.html" class="dropdown-item @@form_select">Select</a>
|
|
<a href="forms-validation.html" class="dropdown-item @@form_validation">Validation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-offset="80,-54" data-bs-boundry="viewport" data-bs-toggle="dropdown" href="#"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center active">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--layout]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Layouts</span>
|
|
</a>
|
|
<div class="dropdown-menu w-48 z-50">
|
|
<a href="layout-default.html" class="dropdown-item @@layout_default">Default</a>
|
|
<a href="layout-compact.html" class="dropdown-item active">Compact
|
|
</a>
|
|
<a href="layout-horizontal.html" class="dropdown-item @@layout_horizontal">Horizontal</a>
|
|
<a href="layout-combo.html" class="dropdown-item @@layout_combo">Combo</a>
|
|
</div>
|
|
</div>
|
|
<div class="static">
|
|
<a data-bs-auto-close="outside" data-bs-offset="80,-54" data-bs-boundry="viewport"
|
|
data-bs-toggle="dropdown" href="#"
|
|
class="w-16 h-14 sidebar-compact-link rounded-lg flex flex-col items-center justify-center ">
|
|
<span class="sidebar-icon">
|
|
<span class="icon-[lucide--files]"></span>
|
|
</span>
|
|
<span class="sidebar-text">Pages</span>
|
|
</a>
|
|
<div class="dropdown-menu w-48 z-50 overflow-hidden">
|
|
<div class="max-h-[320px] overflow-y-auto">
|
|
<span class="block px-3 py-2 text-sm opacity-50">Extras</span>
|
|
<a href="page-invoice.html" class="dropdown-item layouts_invoice">Invoice</a>
|
|
<a href="page-search-results.html" class="dropdown-item layouts_search">Search results</a>
|
|
<span class="block px-3 py-2 text-sm opacity-50">Misc</span>
|
|
<a href="page-blank.html" class="dropdown-item layouts_blank">Blank</a>
|
|
<a href="page-error-404.html" class="dropdown-item layouts_404">Error 404</a>
|
|
|
|
<span class="block px-3 py-2 text-sm opacity-50">Authentication</span>
|
|
<a href="auth-signin.html" class="dropdown-item">Signin</a>
|
|
<a href="auth-signup.html" class="dropdown-item">Signup</a>
|
|
<a href="auth-forgot-password.html" class="dropdown-item">Forgot password</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="px-2 py-4 flex flex-col items-center justify-center shrink-0">
|
|
<div class="static">
|
|
<a data-bs-auto-close="outside" data-bs-offset="0,10" data-bs-boundry="viewport" data-bs-toggle="dropdown"
|
|
href="#" class="w-8 h-8 flex flex-col items-center justify-center">
|
|
<img src="images/avatars/thumb-1.jpg" class="w-8 rounded-full" alt="">
|
|
</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-8 rounded-full shrink-0" alt="">
|
|
<div class="flex-grow">
|
|
<h6 class="font-semibold">Emily Docker</h6>
|
|
<p class="text-xs text-zinc-500">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-24 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 py-4 lg:px-8">
|
|
<h2 class="text-xl mb-2">Compact Layout</h2>
|
|
<!--:Breadcrumbs:-->
|
|
<ol class="flex gap-1 items-center text-sm">
|
|
<li class="flex items-center"><a href="index.html"
|
|
class="text-zinc-400 hover:text-zinc-700 dark:hover:text-white">Home</a></li>
|
|
<li class="flex items-center opacity-30 leading-none">
|
|
<span class="icon-[lucide--chevron-right] rtl:rotate-180"></span>
|
|
</li>
|
|
<li class="flex items-center"><span class="pointer-events-none">Layouts</span></li>
|
|
<li class="flex items-center opacity-30 leading-none">
|
|
<span class="icon-[lucide--chevron-right] rtl:rotate-180"></span>
|
|
</li>
|
|
<li class="flex items-center"><span class="pointer-events-none">Compact</span></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!--:Page content:-->
|
|
<div class="content flex flex-col flex-grow px-4 lg:px-8">
|
|
|
|
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<!--:Scripts:-->
|
|
<script src="js/theme.js"></script>
|
|
</body>
|
|
|
|
</html> |