7858 lines
331 KiB
HTML
7858 lines
331 KiB
HTML
<!DOCTYPE html>
|
|
<html
|
|
lang="en"
|
|
data-layout="vertical"
|
|
data-topbar="light"
|
|
data-sidebar="dark"
|
|
data-sidebar-size="lg"
|
|
data-sidebar-image="none"
|
|
data-preloader="disable"
|
|
data-theme="default"
|
|
data-theme-colors="default"
|
|
>
|
|
<!-- Mirrored from themesbrand.com/velzon/html/master/apps-chat.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 08 May 2025 07:13:41 GMT -->
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Chat | Velzon - Admin & Dashboard Template</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
content="Premium Multipurpose Admin & Dashboard Template"
|
|
name="description"
|
|
/>
|
|
<meta content="Themesbrand" name="author" />
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico" />
|
|
|
|
<!-- glightbox css -->
|
|
<link rel="stylesheet" href="assets/libs/glightbox/css/glightbox.min.css" />
|
|
|
|
<!-- Layout config Js -->
|
|
<script src="assets/js/layout.js"></script>
|
|
<!-- Bootstrap Css -->
|
|
<link
|
|
href="assets/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
<!-- Icons Css -->
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- App Css-->
|
|
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- custom Css-->
|
|
<link href="assets/css/custom.min.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Begin page -->
|
|
<div id="layout-wrapper">
|
|
<header id="page-topbar">
|
|
<div class="layout-width">
|
|
<div class="navbar-header">
|
|
<div class="d-flex">
|
|
<!-- LOGO -->
|
|
<div class="navbar-brand-box horizontal-logo">
|
|
<a href="index.html" class="logo logo-dark">
|
|
<span class="logo-sm">
|
|
<img src="assets/images/logo-sm.png" alt="" height="22" />
|
|
</span>
|
|
<span class="logo-lg">
|
|
<img src="assets/images/logo-dark.png" alt="" height="17" />
|
|
</span>
|
|
</a>
|
|
|
|
<a href="index.html" class="logo logo-light">
|
|
<span class="logo-sm">
|
|
<img src="assets/images/logo-sm.png" alt="" height="22" />
|
|
</span>
|
|
<span class="logo-lg">
|
|
<img
|
|
src="assets/images/logo-light.png"
|
|
alt=""
|
|
height="17"
|
|
/>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm px-3 fs-16 header-item vertical-menu-btn topnav-hamburger material-shadow-none"
|
|
id="topnav-hamburger-icon"
|
|
>
|
|
<span class="hamburger-icon">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span>
|
|
</button>
|
|
|
|
<!-- App Search-->
|
|
<form class="app-search d-none d-md-block">
|
|
<div class="position-relative">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Search..."
|
|
autocomplete="off"
|
|
id="search-options"
|
|
value=""
|
|
/>
|
|
<span class="mdi mdi-magnify search-widget-icon"></span>
|
|
<span
|
|
class="mdi mdi-close-circle search-widget-icon search-widget-icon-close d-none"
|
|
id="search-close-options"
|
|
></span>
|
|
</div>
|
|
<div
|
|
class="dropdown-menu dropdown-menu-lg"
|
|
id="search-dropdown"
|
|
>
|
|
<div data-simplebar style="max-height: 320px">
|
|
<!-- item-->
|
|
<div class="dropdown-header">
|
|
<h6 class="text-overflow text-muted mb-0 text-uppercase">
|
|
Recent Searches
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="dropdown-item bg-transparent text-wrap">
|
|
<a
|
|
href="index.html"
|
|
class="btn btn-soft-secondary btn-sm rounded-pill"
|
|
>how to setup <i class="mdi mdi-magnify ms-1"></i
|
|
></a>
|
|
<a
|
|
href="index.html"
|
|
class="btn btn-soft-secondary btn-sm rounded-pill"
|
|
>buttons <i class="mdi mdi-magnify ms-1"></i
|
|
></a>
|
|
</div>
|
|
<!-- item-->
|
|
<div class="dropdown-header mt-2">
|
|
<h6 class="text-overflow text-muted mb-1 text-uppercase">
|
|
Pages
|
|
</h6>
|
|
</div>
|
|
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item"
|
|
>
|
|
<i
|
|
class="ri-bubble-chart-line align-middle fs-18 text-muted me-2"
|
|
></i>
|
|
<span>Analytics Dashboard</span>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item"
|
|
>
|
|
<i
|
|
class="ri-lifebuoy-line align-middle fs-18 text-muted me-2"
|
|
></i>
|
|
<span>Help Center</span>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item"
|
|
>
|
|
<i
|
|
class="ri-user-settings-line align-middle fs-18 text-muted me-2"
|
|
></i>
|
|
<span>My account settings</span>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<div class="dropdown-header mt-2">
|
|
<h6 class="text-overflow text-muted mb-2 text-uppercase">
|
|
Members
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="notification-list">
|
|
<!-- item -->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item py-2"
|
|
>
|
|
<div class="d-flex">
|
|
<img
|
|
src="assets/images/users/avatar-2.jpg"
|
|
class="me-3 rounded-circle avatar-xs"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<h6 class="m-0">Angela Bernier</h6>
|
|
<span class="fs-11 mb-0 text-muted">Manager</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- item -->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item py-2"
|
|
>
|
|
<div class="d-flex">
|
|
<img
|
|
src="assets/images/users/avatar-3.jpg"
|
|
class="me-3 rounded-circle avatar-xs"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<h6 class="m-0">David Grasso</h6>
|
|
<span class="fs-11 mb-0 text-muted"
|
|
>Web Designer</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- item -->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item py-2"
|
|
>
|
|
<div class="d-flex">
|
|
<img
|
|
src="assets/images/users/avatar-5.jpg"
|
|
class="me-3 rounded-circle avatar-xs"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<h6 class="m-0">Mike Bunch</h6>
|
|
<span class="fs-11 mb-0 text-muted"
|
|
>React Developer</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center pt-3 pb-1">
|
|
<a
|
|
href="pages-search-results.html"
|
|
class="btn btn-primary btn-sm"
|
|
>View All Results <i class="ri-arrow-right-line ms-1"></i
|
|
></a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center">
|
|
<div class="dropdown d-md-none topbar-head-dropdown header-item">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-topbar material-shadow-none btn-ghost-secondary rounded-circle"
|
|
id="page-header-search-dropdown"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="bx bx-search fs-22"></i>
|
|
</button>
|
|
<div
|
|
class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
|
|
aria-labelledby="page-header-search-dropdown"
|
|
>
|
|
<form class="p-3">
|
|
<div class="form-group m-0">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Search ..."
|
|
aria-label="Recipient's username"
|
|
/>
|
|
<button class="btn btn-primary" type="submit">
|
|
<i class="mdi mdi-magnify"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown ms-1 topbar-head-dropdown header-item">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-topbar material-shadow-none btn-ghost-secondary rounded-circle"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<img
|
|
id="header-lang-img"
|
|
src="assets/images/flags/us.svg"
|
|
alt="Header Language"
|
|
height="20"
|
|
class="rounded"
|
|
/>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item language py-2"
|
|
data-lang="en"
|
|
title="English"
|
|
>
|
|
<img
|
|
src="assets/images/flags/us.svg"
|
|
alt="user-image"
|
|
class="me-2 rounded"
|
|
height="18"
|
|
/>
|
|
<span class="align-middle">English</span>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item language"
|
|
data-lang="sp"
|
|
title="Spanish"
|
|
>
|
|
<img
|
|
src="assets/images/flags/spain.svg"
|
|
alt="user-image"
|
|
class="me-2 rounded"
|
|
height="18"
|
|
/>
|
|
<span class="align-middle">Española</span>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item language"
|
|
data-lang="gr"
|
|
title="German"
|
|
>
|
|
<img
|
|
src="assets/images/flags/germany.svg"
|
|
alt="user-image"
|
|
class="me-2 rounded"
|
|
height="18"
|
|
/>
|
|
<span class="align-middle">Deutsche</span>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item language"
|
|
data-lang="it"
|
|
title="Italian"
|
|
>
|
|
<img
|
|
src="assets/images/flags/italy.svg"
|
|
alt="user-image"
|
|
class="me-2 rounded"
|
|
height="18"
|
|
/>
|
|
<span class="align-middle">Italiana</span>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item language"
|
|
data-lang="ru"
|
|
title="Russian"
|
|
>
|
|
<img
|
|
src="assets/images/flags/russia.svg"
|
|
alt="user-image"
|
|
class="me-2 rounded"
|
|
height="18"
|
|
/>
|
|
<span class="align-middle">русский</span>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item language"
|
|
data-lang="ch"
|
|
title="Chinese"
|
|
>
|
|
<img
|
|
src="assets/images/flags/china.svg"
|
|
alt="user-image"
|
|
class="me-2 rounded"
|
|
height="18"
|
|
/>
|
|
<span class="align-middle">中国人</span>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item language"
|
|
data-lang="fr"
|
|
title="French"
|
|
>
|
|
<img
|
|
src="assets/images/flags/french.svg"
|
|
alt="user-image"
|
|
class="me-2 rounded"
|
|
height="18"
|
|
/>
|
|
<span class="align-middle">français</span>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="dropdown-item notify-item language"
|
|
data-lang="ar"
|
|
title="Arabic"
|
|
>
|
|
<img
|
|
src="assets/images/flags/ae.svg"
|
|
alt="user-image"
|
|
class="me-2 rounded"
|
|
height="18"
|
|
/>
|
|
<span class="align-middle">Arabic</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown topbar-head-dropdown ms-1 header-item">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-topbar material-shadow-none btn-ghost-secondary rounded-circle"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="bx bx-category-alt fs-22"></i>
|
|
</button>
|
|
<div
|
|
class="dropdown-menu dropdown-menu-lg p-0 dropdown-menu-end"
|
|
>
|
|
<div
|
|
class="p-3 border-top-0 border-start-0 border-end-0 border-dashed border"
|
|
>
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="m-0 fw-semibold fs-15">Web Apps</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="#!" class="btn btn-sm btn-soft-info">
|
|
View All Apps
|
|
<i class="ri-arrow-right-s-line align-middle"></i
|
|
></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-2">
|
|
<div class="row g-0">
|
|
<div class="col">
|
|
<a class="dropdown-icon-item" href="#!">
|
|
<img
|
|
src="assets/images/brands/github.png"
|
|
alt="Github"
|
|
/>
|
|
<span>GitHub</span>
|
|
</a>
|
|
</div>
|
|
<div class="col">
|
|
<a class="dropdown-icon-item" href="#!">
|
|
<img
|
|
src="assets/images/brands/bitbucket.png"
|
|
alt="bitbucket"
|
|
/>
|
|
<span>Bitbucket</span>
|
|
</a>
|
|
</div>
|
|
<div class="col">
|
|
<a class="dropdown-icon-item" href="#!">
|
|
<img
|
|
src="assets/images/brands/dribbble.png"
|
|
alt="dribbble"
|
|
/>
|
|
<span>Dribbble</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<div class="col">
|
|
<a class="dropdown-icon-item" href="#!">
|
|
<img
|
|
src="assets/images/brands/dropbox.png"
|
|
alt="dropbox"
|
|
/>
|
|
<span>Dropbox</span>
|
|
</a>
|
|
</div>
|
|
<div class="col">
|
|
<a class="dropdown-icon-item" href="#!">
|
|
<img
|
|
src="assets/images/brands/mail_chimp.png"
|
|
alt="mail_chimp"
|
|
/>
|
|
<span>Mail Chimp</span>
|
|
</a>
|
|
</div>
|
|
<div class="col">
|
|
<a class="dropdown-icon-item" href="#!">
|
|
<img
|
|
src="assets/images/brands/slack.png"
|
|
alt="slack"
|
|
/>
|
|
<span>Slack</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown topbar-head-dropdown ms-1 header-item">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-topbar material-shadow-none btn-ghost-secondary rounded-circle"
|
|
id="page-header-cart-dropdown"
|
|
data-bs-toggle="dropdown"
|
|
data-bs-auto-close="outside"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="bx bx-shopping-bag fs-22"></i>
|
|
<span
|
|
class="position-absolute topbar-badge cartitem-badge fs-10 translate-middle badge rounded-pill bg-info"
|
|
>5</span
|
|
>
|
|
</button>
|
|
<div
|
|
class="dropdown-menu dropdown-menu-xl dropdown-menu-end p-0 dropdown-menu-cart"
|
|
aria-labelledby="page-header-cart-dropdown"
|
|
>
|
|
<div
|
|
class="p-3 border-top-0 border-start-0 border-end-0 border-dashed border"
|
|
>
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="m-0 fs-16 fw-semibold">My Cart</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<span class="badge bg-warning-subtle text-warning fs-13"
|
|
><span class="cartitem-badge">7</span> items</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div data-simplebar style="max-height: 300px">
|
|
<div class="p-2">
|
|
<div class="text-center empty-cart" id="empty-cart">
|
|
<div class="avatar-md mx-auto my-3">
|
|
<div
|
|
class="avatar-title bg-info-subtle text-info fs-36 rounded-circle"
|
|
>
|
|
<i class="bx bx-cart"></i>
|
|
</div>
|
|
</div>
|
|
<h5 class="mb-3">Your Cart is Empty!</h5>
|
|
<a
|
|
href="apps-ecommerce-products.html"
|
|
class="btn btn-success w-md mb-3"
|
|
>Shop Now</a
|
|
>
|
|
</div>
|
|
<div
|
|
class="d-block dropdown-item dropdown-item-cart text-wrap px-3 py-2"
|
|
>
|
|
<div class="d-flex align-items-center">
|
|
<img
|
|
src="assets/images/products/img-1.png"
|
|
class="me-3 rounded-circle avatar-sm p-2 bg-light"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mt-0 mb-1 fs-14">
|
|
<a
|
|
href="apps-ecommerce-product-details.html"
|
|
class="text-reset"
|
|
>Branded T-Shirts</a
|
|
>
|
|
</h6>
|
|
<p class="mb-0 fs-12 text-muted">
|
|
Quantity: <span>10 x $32</span>
|
|
</p>
|
|
</div>
|
|
<div class="px-2">
|
|
<h5 class="m-0 fw-normal">
|
|
$<span class="cart-item-price">320</span>
|
|
</h5>
|
|
</div>
|
|
<div class="ps-2">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-sm btn-ghost-secondary remove-item-btn"
|
|
>
|
|
<i class="ri-close-fill fs-16"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="d-block dropdown-item dropdown-item-cart text-wrap px-3 py-2"
|
|
>
|
|
<div class="d-flex align-items-center">
|
|
<img
|
|
src="assets/images/products/img-2.png"
|
|
class="me-3 rounded-circle avatar-sm p-2 bg-light"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mt-0 mb-1 fs-14">
|
|
<a
|
|
href="apps-ecommerce-product-details.html"
|
|
class="text-reset"
|
|
>Bentwood Chair</a
|
|
>
|
|
</h6>
|
|
<p class="mb-0 fs-12 text-muted">
|
|
Quantity: <span>5 x $18</span>
|
|
</p>
|
|
</div>
|
|
<div class="px-2">
|
|
<h5 class="m-0 fw-normal">
|
|
$<span class="cart-item-price">89</span>
|
|
</h5>
|
|
</div>
|
|
<div class="ps-2">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-sm btn-ghost-secondary remove-item-btn"
|
|
>
|
|
<i class="ri-close-fill fs-16"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="d-block dropdown-item dropdown-item-cart text-wrap px-3 py-2"
|
|
>
|
|
<div class="d-flex align-items-center">
|
|
<img
|
|
src="assets/images/products/img-3.png"
|
|
class="me-3 rounded-circle avatar-sm p-2 bg-light"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mt-0 mb-1 fs-14">
|
|
<a
|
|
href="apps-ecommerce-product-details.html"
|
|
class="text-reset"
|
|
>
|
|
Borosil Paper Cup</a
|
|
>
|
|
</h6>
|
|
<p class="mb-0 fs-12 text-muted">
|
|
Quantity: <span>3 x $250</span>
|
|
</p>
|
|
</div>
|
|
<div class="px-2">
|
|
<h5 class="m-0 fw-normal">
|
|
$<span class="cart-item-price">750</span>
|
|
</h5>
|
|
</div>
|
|
<div class="ps-2">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-sm btn-ghost-secondary remove-item-btn"
|
|
>
|
|
<i class="ri-close-fill fs-16"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="d-block dropdown-item dropdown-item-cart text-wrap px-3 py-2"
|
|
>
|
|
<div class="d-flex align-items-center">
|
|
<img
|
|
src="assets/images/products/img-6.png"
|
|
class="me-3 rounded-circle avatar-sm p-2 bg-light"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mt-0 mb-1 fs-14">
|
|
<a
|
|
href="apps-ecommerce-product-details.html"
|
|
class="text-reset"
|
|
>Gray Styled T-Shirt</a
|
|
>
|
|
</h6>
|
|
<p class="mb-0 fs-12 text-muted">
|
|
Quantity: <span>1 x $1250</span>
|
|
</p>
|
|
</div>
|
|
<div class="px-2">
|
|
<h5 class="m-0 fw-normal">
|
|
$ <span class="cart-item-price">1250</span>
|
|
</h5>
|
|
</div>
|
|
<div class="ps-2">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-sm btn-ghost-secondary remove-item-btn"
|
|
>
|
|
<i class="ri-close-fill fs-16"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="d-block dropdown-item dropdown-item-cart text-wrap px-3 py-2"
|
|
>
|
|
<div class="d-flex align-items-center">
|
|
<img
|
|
src="assets/images/products/img-5.png"
|
|
class="me-3 rounded-circle avatar-sm p-2 bg-light"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mt-0 mb-1 fs-14">
|
|
<a
|
|
href="apps-ecommerce-product-details.html"
|
|
class="text-reset"
|
|
>Stillbird Helmet</a
|
|
>
|
|
</h6>
|
|
<p class="mb-0 fs-12 text-muted">
|
|
Quantity: <span>2 x $495</span>
|
|
</p>
|
|
</div>
|
|
<div class="px-2">
|
|
<h5 class="m-0 fw-normal">
|
|
$<span class="cart-item-price">990</span>
|
|
</h5>
|
|
</div>
|
|
<div class="ps-2">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-sm btn-ghost-secondary remove-item-btn"
|
|
>
|
|
<i class="ri-close-fill fs-16"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="p-3 border-bottom-0 border-start-0 border-end-0 border-dashed border"
|
|
id="checkout-elem"
|
|
>
|
|
<div
|
|
class="d-flex justify-content-between align-items-center pb-3"
|
|
>
|
|
<h5 class="m-0 text-muted">Total:</h5>
|
|
<div class="px-2">
|
|
<h5 class="m-0" id="cart-item-total">$1258.58</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<a
|
|
href="apps-ecommerce-checkout.html"
|
|
class="btn btn-success text-center w-100"
|
|
>
|
|
Checkout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ms-1 header-item d-none d-sm-flex">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-topbar material-shadow-none btn-ghost-secondary rounded-circle"
|
|
data-toggle="fullscreen"
|
|
>
|
|
<i class="bx bx-fullscreen fs-22"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="ms-1 header-item d-none d-sm-flex">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-topbar material-shadow-none btn-ghost-secondary rounded-circle light-dark-mode"
|
|
>
|
|
<i class="bx bx-moon fs-22"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="dropdown topbar-head-dropdown ms-1 header-item"
|
|
id="notificationDropdown"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon btn-topbar material-shadow-none btn-ghost-secondary rounded-circle"
|
|
id="page-header-notifications-dropdown"
|
|
data-bs-toggle="dropdown"
|
|
data-bs-auto-close="outside"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="bx bx-bell fs-22"></i>
|
|
<span
|
|
class="position-absolute topbar-badge fs-10 translate-middle badge rounded-pill bg-danger"
|
|
>3<span class="visually-hidden">unread messages</span></span
|
|
>
|
|
</button>
|
|
<div
|
|
class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
|
|
aria-labelledby="page-header-notifications-dropdown"
|
|
>
|
|
<div class="dropdown-head bg-primary bg-pattern rounded-top">
|
|
<div class="p-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="m-0 fs-16 fw-semibold text-white">
|
|
Notifications
|
|
</h6>
|
|
</div>
|
|
<div class="col-auto dropdown-tabs">
|
|
<span class="badge bg-light text-body fs-13">
|
|
4 New</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-2 pt-2">
|
|
<ul
|
|
class="nav nav-tabs dropdown-tabs nav-tabs-custom"
|
|
data-dropdown-tabs="true"
|
|
id="notificationItemsTab"
|
|
role="tablist"
|
|
>
|
|
<li class="nav-item waves-effect waves-light">
|
|
<a
|
|
class="nav-link active"
|
|
data-bs-toggle="tab"
|
|
href="#all-noti-tab"
|
|
role="tab"
|
|
aria-selected="true"
|
|
>
|
|
All (4)
|
|
</a>
|
|
</li>
|
|
<li class="nav-item waves-effect waves-light">
|
|
<a
|
|
class="nav-link"
|
|
data-bs-toggle="tab"
|
|
href="#messages-tab"
|
|
role="tab"
|
|
aria-selected="false"
|
|
>
|
|
Messages
|
|
</a>
|
|
</li>
|
|
<li class="nav-item waves-effect waves-light">
|
|
<a
|
|
class="nav-link"
|
|
data-bs-toggle="tab"
|
|
href="#alerts-tab"
|
|
role="tab"
|
|
aria-selected="false"
|
|
>
|
|
Alerts
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="tab-content position-relative"
|
|
id="notificationItemsTabContent"
|
|
>
|
|
<div
|
|
class="tab-pane fade show active py-2 ps-2"
|
|
id="all-noti-tab"
|
|
role="tabpanel"
|
|
>
|
|
<div
|
|
data-simplebar
|
|
style="max-height: 300px"
|
|
class="pe-2"
|
|
>
|
|
<div
|
|
class="text-reset notification-item d-block dropdown-item position-relative"
|
|
>
|
|
<div class="d-flex">
|
|
<div class="avatar-xs me-3 flex-shrink-0">
|
|
<span
|
|
class="avatar-title bg-info-subtle text-info rounded-circle fs-16"
|
|
>
|
|
<i class="bx bx-badge-check"></i>
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<a href="#!" class="stretched-link">
|
|
<h6 class="mt-0 mb-2 lh-base">
|
|
Your <b>Elite</b> author Graphic Optimization
|
|
<span class="text-secondary">reward</span> is
|
|
ready!
|
|
</h6>
|
|
</a>
|
|
<p
|
|
class="mb-0 fs-11 fw-medium text-uppercase text-muted"
|
|
>
|
|
<span
|
|
><i class="mdi mdi-clock-outline"></i> Just 30
|
|
sec ago</span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="px-2 fs-15">
|
|
<div class="form-check notification-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
value=""
|
|
id="all-notification-check01"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="all-notification-check01"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-reset notification-item d-block dropdown-item position-relative"
|
|
>
|
|
<div class="d-flex">
|
|
<img
|
|
src="assets/images/users/avatar-2.jpg"
|
|
class="me-3 rounded-circle avatar-xs flex-shrink-0"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<a href="#!" class="stretched-link">
|
|
<h6 class="mt-0 mb-1 fs-13 fw-semibold">
|
|
Angela Bernier
|
|
</h6>
|
|
</a>
|
|
<div class="fs-13 text-muted">
|
|
<p class="mb-1">
|
|
Answered to your comment on the cash flow
|
|
forecast's graph 🔔.
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="mb-0 fs-11 fw-medium text-uppercase text-muted"
|
|
>
|
|
<span
|
|
><i class="mdi mdi-clock-outline"></i> 48 min
|
|
ago</span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="px-2 fs-15">
|
|
<div class="form-check notification-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
value=""
|
|
id="all-notification-check02"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="all-notification-check02"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-reset notification-item d-block dropdown-item position-relative"
|
|
>
|
|
<div class="d-flex">
|
|
<div class="avatar-xs me-3 flex-shrink-0">
|
|
<span
|
|
class="avatar-title bg-danger-subtle text-danger rounded-circle fs-16"
|
|
>
|
|
<i class="bx bx-message-square-dots"></i>
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<a href="#!" class="stretched-link">
|
|
<h6 class="mt-0 mb-2 fs-13 lh-base">
|
|
You have received
|
|
<b class="text-success">20</b> new messages in
|
|
the conversation
|
|
</h6>
|
|
</a>
|
|
<p
|
|
class="mb-0 fs-11 fw-medium text-uppercase text-muted"
|
|
>
|
|
<span
|
|
><i class="mdi mdi-clock-outline"></i> 2 hrs
|
|
ago</span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="px-2 fs-15">
|
|
<div class="form-check notification-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
value=""
|
|
id="all-notification-check03"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="all-notification-check03"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-reset notification-item d-block dropdown-item position-relative"
|
|
>
|
|
<div class="d-flex">
|
|
<img
|
|
src="assets/images/users/avatar-8.jpg"
|
|
class="me-3 rounded-circle avatar-xs flex-shrink-0"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<a href="#!" class="stretched-link">
|
|
<h6 class="mt-0 mb-1 fs-13 fw-semibold">
|
|
Maureen Gibson
|
|
</h6>
|
|
</a>
|
|
<div class="fs-13 text-muted">
|
|
<p class="mb-1">
|
|
We talked about a project on linkedin.
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="mb-0 fs-11 fw-medium text-uppercase text-muted"
|
|
>
|
|
<span
|
|
><i class="mdi mdi-clock-outline"></i> 4 hrs
|
|
ago</span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="px-2 fs-15">
|
|
<div class="form-check notification-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
value=""
|
|
id="all-notification-check04"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="all-notification-check04"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-3 text-center view-all">
|
|
<button
|
|
type="button"
|
|
class="btn btn-soft-success waves-effect waves-light"
|
|
>
|
|
View All Notifications
|
|
<i class="ri-arrow-right-line align-middle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="tab-pane fade py-2 ps-2"
|
|
id="messages-tab"
|
|
role="tabpanel"
|
|
aria-labelledby="messages-tab"
|
|
>
|
|
<div
|
|
data-simplebar
|
|
style="max-height: 300px"
|
|
class="pe-2"
|
|
>
|
|
<div
|
|
class="text-reset notification-item d-block dropdown-item"
|
|
>
|
|
<div class="d-flex">
|
|
<img
|
|
src="assets/images/users/avatar-3.jpg"
|
|
class="me-3 rounded-circle avatar-xs"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<a href="#!" class="stretched-link">
|
|
<h6 class="mt-0 mb-1 fs-13 fw-semibold">
|
|
James Lemire
|
|
</h6>
|
|
</a>
|
|
<div class="fs-13 text-muted">
|
|
<p class="mb-1">
|
|
We talked about a project on linkedin.
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="mb-0 fs-11 fw-medium text-uppercase text-muted"
|
|
>
|
|
<span
|
|
><i class="mdi mdi-clock-outline"></i> 30 min
|
|
ago</span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="px-2 fs-15">
|
|
<div class="form-check notification-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
value=""
|
|
id="messages-notification-check01"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="messages-notification-check01"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-reset notification-item d-block dropdown-item"
|
|
>
|
|
<div class="d-flex">
|
|
<img
|
|
src="assets/images/users/avatar-2.jpg"
|
|
class="me-3 rounded-circle avatar-xs"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<a href="#!" class="stretched-link">
|
|
<h6 class="mt-0 mb-1 fs-13 fw-semibold">
|
|
Angela Bernier
|
|
</h6>
|
|
</a>
|
|
<div class="fs-13 text-muted">
|
|
<p class="mb-1">
|
|
Answered to your comment on the cash flow
|
|
forecast's graph 🔔.
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="mb-0 fs-11 fw-medium text-uppercase text-muted"
|
|
>
|
|
<span
|
|
><i class="mdi mdi-clock-outline"></i> 2 hrs
|
|
ago</span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="px-2 fs-15">
|
|
<div class="form-check notification-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
value=""
|
|
id="messages-notification-check02"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="messages-notification-check02"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-reset notification-item d-block dropdown-item"
|
|
>
|
|
<div class="d-flex">
|
|
<img
|
|
src="assets/images/users/avatar-6.jpg"
|
|
class="me-3 rounded-circle avatar-xs"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<a href="#!" class="stretched-link">
|
|
<h6 class="mt-0 mb-1 fs-13 fw-semibold">
|
|
Kenneth Brown
|
|
</h6>
|
|
</a>
|
|
<div class="fs-13 text-muted">
|
|
<p class="mb-1">
|
|
Mentionned you in his comment on 📃 invoice
|
|
#12501.
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="mb-0 fs-11 fw-medium text-uppercase text-muted"
|
|
>
|
|
<span
|
|
><i class="mdi mdi-clock-outline"></i> 10 hrs
|
|
ago</span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="px-2 fs-15">
|
|
<div class="form-check notification-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
value=""
|
|
id="messages-notification-check03"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="messages-notification-check03"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-reset notification-item d-block dropdown-item"
|
|
>
|
|
<div class="d-flex">
|
|
<img
|
|
src="assets/images/users/avatar-8.jpg"
|
|
class="me-3 rounded-circle avatar-xs"
|
|
alt="user-pic"
|
|
/>
|
|
<div class="flex-grow-1">
|
|
<a href="#!" class="stretched-link">
|
|
<h6 class="mt-0 mb-1 fs-13 fw-semibold">
|
|
Maureen Gibson
|
|
</h6>
|
|
</a>
|
|
<div class="fs-13 text-muted">
|
|
<p class="mb-1">
|
|
We talked about a project on linkedin.
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="mb-0 fs-11 fw-medium text-uppercase text-muted"
|
|
>
|
|
<span
|
|
><i class="mdi mdi-clock-outline"></i> 3 days
|
|
ago</span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="px-2 fs-15">
|
|
<div class="form-check notification-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
value=""
|
|
id="messages-notification-check04"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="messages-notification-check04"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-3 text-center view-all">
|
|
<button
|
|
type="button"
|
|
class="btn btn-soft-success waves-effect waves-light"
|
|
>
|
|
View All Messages
|
|
<i class="ri-arrow-right-line align-middle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="tab-pane fade p-4"
|
|
id="alerts-tab"
|
|
role="tabpanel"
|
|
aria-labelledby="alerts-tab"
|
|
></div>
|
|
|
|
<div class="notification-actions" id="notification-actions">
|
|
<div class="d-flex text-muted justify-content-center">
|
|
Select
|
|
<div
|
|
id="select-content"
|
|
class="text-body fw-semibold px-1"
|
|
>
|
|
0
|
|
</div>
|
|
Result
|
|
<button
|
|
type="button"
|
|
class="btn btn-link link-danger p-0 ms-3"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#removeNotificationModal"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown ms-sm-3 header-item topbar-user">
|
|
<button
|
|
type="button"
|
|
class="btn material-shadow-none"
|
|
id="page-header-user-dropdown"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<span class="d-flex align-items-center">
|
|
<img
|
|
class="rounded-circle header-profile-user"
|
|
src="assets/images/users/avatar-1.jpg"
|
|
alt="Header Avatar"
|
|
/>
|
|
<span class="text-start ms-xl-2">
|
|
<span
|
|
class="d-none d-xl-inline-block ms-1 fw-medium user-name-text"
|
|
>Anna Adame</span
|
|
>
|
|
<span
|
|
class="d-none d-xl-block ms-1 fs-12 user-name-sub-text"
|
|
>Founder</span
|
|
>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<!-- item-->
|
|
<h6 class="dropdown-header">Welcome Anna!</h6>
|
|
<a class="dropdown-item" href="pages-profile.html"
|
|
><i
|
|
class="mdi mdi-account-circle text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Profile</span></a
|
|
>
|
|
<a class="dropdown-item" href="apps-chat.html"
|
|
><i
|
|
class="mdi mdi-message-text-outline text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Messages</span></a
|
|
>
|
|
<a class="dropdown-item" href="apps-tasks-kanban.html"
|
|
><i
|
|
class="mdi mdi-calendar-check-outline text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Taskboard</span></a
|
|
>
|
|
<a class="dropdown-item" href="pages-faqs.html"
|
|
><i
|
|
class="mdi mdi-lifebuoy text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Help</span></a
|
|
>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="pages-profile.html"
|
|
><i
|
|
class="mdi mdi-wallet text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle"
|
|
>Balance : <b>$5971.67</b></span
|
|
></a
|
|
>
|
|
<a class="dropdown-item" href="pages-profile-settings.html"
|
|
><span
|
|
class="badge bg-success-subtle text-success mt-1 float-end"
|
|
>New</span
|
|
><i
|
|
class="mdi mdi-cog-outline text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Settings</span></a
|
|
>
|
|
<a class="dropdown-item" href="auth-lockscreen-basic.html"
|
|
><i
|
|
class="mdi mdi-lock text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Lock screen</span></a
|
|
>
|
|
<a class="dropdown-item" href="auth-logout-basic.html"
|
|
><i
|
|
class="mdi mdi-logout text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle" data-key="t-logout"
|
|
>Logout</span
|
|
></a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- removeNotificationModal -->
|
|
<div
|
|
id="removeNotificationModal"
|
|
class="modal fade zoomIn"
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
id="NotificationModalbtn-close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mt-2 text-center">
|
|
<lord-icon
|
|
src="https://cdn.lordicon.com/gsqxdxog.json"
|
|
trigger="loop"
|
|
colors="primary:#f7b84b,secondary:#f06548"
|
|
style="width: 100px; height: 100px"
|
|
></lord-icon>
|
|
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
|
<h4>Are you sure ?</h4>
|
|
<p class="text-muted mx-4 mb-0">
|
|
Are you sure you want to remove this Notification ?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
|
<button
|
|
type="button"
|
|
class="btn w-sm btn-light"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn w-sm btn-danger"
|
|
id="delete-notification"
|
|
>
|
|
Yes, Delete It!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<!-- ========== App Menu ========== -->
|
|
<div class="app-menu navbar-menu">
|
|
<!-- LOGO -->
|
|
<div class="navbar-brand-box">
|
|
<!-- Dark Logo-->
|
|
<a href="index.html" class="logo logo-dark">
|
|
<span class="logo-sm">
|
|
<img src="assets/images/logo-sm.png" alt="" height="22" />
|
|
</span>
|
|
<span class="logo-lg">
|
|
<img src="assets/images/logo-dark.png" alt="" height="17" />
|
|
</span>
|
|
</a>
|
|
<!-- Light Logo-->
|
|
<a href="index.html" class="logo logo-light">
|
|
<span class="logo-sm">
|
|
<img src="assets/images/logo-sm.png" alt="" height="22" />
|
|
</span>
|
|
<span class="logo-lg">
|
|
<img src="assets/images/logo-light.png" alt="" height="17" />
|
|
</span>
|
|
</a>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm p-0 fs-20 header-item float-end btn-vertical-sm-hover"
|
|
id="vertical-hover"
|
|
>
|
|
<i class="ri-record-circle-line"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="dropdown sidebar-user m-1 rounded">
|
|
<button
|
|
type="button"
|
|
class="btn material-shadow-none"
|
|
id="page-header-user-dropdown"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<span class="d-flex align-items-center gap-2">
|
|
<img
|
|
class="rounded header-profile-user"
|
|
src="assets/images/users/avatar-1.jpg"
|
|
alt="Header Avatar"
|
|
/>
|
|
<span class="text-start">
|
|
<span class="d-block fw-medium sidebar-user-name-text"
|
|
>Anna Adame</span
|
|
>
|
|
<span class="d-block fs-14 sidebar-user-name-sub-text"
|
|
><i
|
|
class="ri ri-circle-fill fs-10 text-success align-baseline"
|
|
></i>
|
|
<span class="align-middle">Online</span></span
|
|
>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<!-- item-->
|
|
<h6 class="dropdown-header">Welcome Anna!</h6>
|
|
<a class="dropdown-item" href="pages-profile.html"
|
|
><i
|
|
class="mdi mdi-account-circle text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Profile</span></a
|
|
>
|
|
<a class="dropdown-item" href="apps-chat.html"
|
|
><i
|
|
class="mdi mdi-message-text-outline text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Messages</span></a
|
|
>
|
|
<a class="dropdown-item" href="apps-tasks-kanban.html"
|
|
><i
|
|
class="mdi mdi-calendar-check-outline text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Taskboard</span></a
|
|
>
|
|
<a class="dropdown-item" href="pages-faqs.html"
|
|
><i
|
|
class="mdi mdi-lifebuoy text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Help</span></a
|
|
>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="pages-profile.html"
|
|
><i class="mdi mdi-wallet text-muted fs-16 align-middle me-1"></i>
|
|
<span class="align-middle">Balance : <b>$5971.67</b></span></a
|
|
>
|
|
<a class="dropdown-item" href="pages-profile-settings.html"
|
|
><span class="badge bg-success-subtle text-success mt-1 float-end"
|
|
>New</span
|
|
><i
|
|
class="mdi mdi-cog-outline text-muted fs-16 align-middle me-1"
|
|
></i>
|
|
<span class="align-middle">Settings</span></a
|
|
>
|
|
<a class="dropdown-item" href="auth-lockscreen-basic.html"
|
|
><i class="mdi mdi-lock text-muted fs-16 align-middle me-1"></i>
|
|
<span class="align-middle">Lock screen</span></a
|
|
>
|
|
<a class="dropdown-item" href="auth-logout-basic.html"
|
|
><i class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i>
|
|
<span class="align-middle" data-key="t-logout">Logout</span></a
|
|
>
|
|
</div>
|
|
</div>
|
|
<div id="scrollbar">
|
|
<div class="container-fluid">
|
|
<div id="two-column-menu"></div>
|
|
<ul class="navbar-nav" id="navbar-nav">
|
|
<li class="menu-title"><span data-key="t-menu">Menu</span></li>
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarDashboards"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarDashboards"
|
|
>
|
|
<i class="ri-dashboard-2-line"></i>
|
|
<span data-key="t-dashboards">Dashboards</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarDashboards">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="dashboard-analytics.html"
|
|
class="nav-link"
|
|
data-key="t-analytics"
|
|
>
|
|
Analytics
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="dashboard-crm.html"
|
|
class="nav-link"
|
|
data-key="t-crm"
|
|
>
|
|
CRM
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="index.html"
|
|
class="nav-link"
|
|
data-key="t-ecommerce"
|
|
>
|
|
Ecommerce
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="dashboard-crypto.html"
|
|
class="nav-link"
|
|
data-key="t-crypto"
|
|
>
|
|
Crypto
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="dashboard-projects.html"
|
|
class="nav-link"
|
|
data-key="t-projects"
|
|
>
|
|
Projects
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="dashboard-nft.html"
|
|
class="nav-link"
|
|
data-key="t-nft"
|
|
>
|
|
NFT</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="dashboard-job.html"
|
|
class="nav-link"
|
|
data-key="t-job"
|
|
>Job</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="dashboard-blog.html" class="nav-link"
|
|
><span data-key="t-blog">Blog</span>
|
|
<span class="badge bg-success" data-key="t-new"
|
|
>New</span
|
|
></a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<!-- end Dashboard Menu -->
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarApps"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarApps"
|
|
>
|
|
<i class="ri-apps-2-line"></i>
|
|
<span data-key="t-apps">Apps</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarApps">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarCalendar"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarCalendar"
|
|
data-key="t-calender"
|
|
>
|
|
Calendar
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarCalendar">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-calendar.html"
|
|
class="nav-link"
|
|
data-key="t-main-calender"
|
|
>
|
|
Main Calender
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-calendar-month-grid.html"
|
|
class="nav-link"
|
|
data-key="t-month-grid"
|
|
>
|
|
Month Grid
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-chat.html"
|
|
class="nav-link"
|
|
data-key="t-chat"
|
|
>
|
|
Chat
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarEmail"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarEmail"
|
|
data-key="t-email"
|
|
>
|
|
Email
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarEmail">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-mailbox.html"
|
|
class="nav-link"
|
|
data-key="t-mailbox"
|
|
>
|
|
Mailbox
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebaremailTemplates"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebaremailTemplates"
|
|
data-key="t-email-templates"
|
|
>
|
|
Email Templates
|
|
</a>
|
|
<div
|
|
class="collapse menu-dropdown"
|
|
id="sidebaremailTemplates"
|
|
>
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-email-basic.html"
|
|
class="nav-link"
|
|
data-key="t-basic-action"
|
|
>
|
|
Basic Action
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-email-ecommerce.html"
|
|
class="nav-link"
|
|
data-key="t-ecommerce-action"
|
|
>
|
|
Ecommerce Action
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarEcommerce"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarEcommerce"
|
|
data-key="t-ecommerce"
|
|
>
|
|
Ecommerce
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarEcommerce">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-ecommerce-products.html"
|
|
class="nav-link"
|
|
data-key="t-products"
|
|
>
|
|
Products
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-ecommerce-product-details.html"
|
|
class="nav-link"
|
|
data-key="t-product-Details"
|
|
>
|
|
Product Details
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-ecommerce-add-product.html"
|
|
class="nav-link"
|
|
data-key="t-create-product"
|
|
>
|
|
Create Product
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-ecommerce-orders.html"
|
|
class="nav-link"
|
|
data-key="t-orders"
|
|
>
|
|
Orders
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-ecommerce-order-details.html"
|
|
class="nav-link"
|
|
data-key="t-order-details"
|
|
>
|
|
Order Details
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-ecommerce-customers.html"
|
|
class="nav-link"
|
|
data-key="t-customers"
|
|
>
|
|
Customers
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-ecommerce-cart.html"
|
|
class="nav-link"
|
|
data-key="t-shopping-cart"
|
|
>
|
|
Shopping Cart
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-ecommerce-checkout.html"
|
|
class="nav-link"
|
|
data-key="t-checkout"
|
|
>
|
|
Checkout
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-ecommerce-sellers.html"
|
|
class="nav-link"
|
|
data-key="t-sellers"
|
|
>
|
|
Sellers
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-ecommerce-seller-details.html"
|
|
class="nav-link"
|
|
data-key="t-sellers-details"
|
|
>
|
|
Seller Details
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarProjects"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarProjects"
|
|
data-key="t-projects"
|
|
>
|
|
Projects
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarProjects">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-projects-list.html"
|
|
class="nav-link"
|
|
data-key="t-list"
|
|
>
|
|
List
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-projects-overview.html"
|
|
class="nav-link"
|
|
data-key="t-overview"
|
|
>
|
|
Overview
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-projects-create.html"
|
|
class="nav-link"
|
|
data-key="t-create-project"
|
|
>
|
|
Create Project
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarTasks"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarTasks"
|
|
data-key="t-tasks"
|
|
>
|
|
Tasks
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarTasks">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-tasks-kanban.html"
|
|
class="nav-link"
|
|
data-key="t-kanbanboard"
|
|
>
|
|
Kanban Board
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-tasks-list-view.html"
|
|
class="nav-link"
|
|
data-key="t-list-view"
|
|
>
|
|
List View
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-tasks-details.html"
|
|
class="nav-link"
|
|
data-key="t-task-details"
|
|
>
|
|
Task Details
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarCRM"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarCRM"
|
|
data-key="t-crm"
|
|
>
|
|
CRM
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarCRM">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-crm-contacts.html"
|
|
class="nav-link"
|
|
data-key="t-contacts"
|
|
>
|
|
Contacts
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-crm-companies.html"
|
|
class="nav-link"
|
|
data-key="t-companies"
|
|
>
|
|
Companies
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-crm-deals.html"
|
|
class="nav-link"
|
|
data-key="t-deals"
|
|
>
|
|
Deals
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-crm-leads.html"
|
|
class="nav-link"
|
|
data-key="t-leads"
|
|
>
|
|
Leads
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarCrypto"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarCrypto"
|
|
data-key="t-crypto"
|
|
>
|
|
Crypto
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarCrypto">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-crypto-transactions.html"
|
|
class="nav-link"
|
|
data-key="t-transactions"
|
|
>
|
|
Transactions
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-crypto-buy-sell.html"
|
|
class="nav-link"
|
|
data-key="t-buy-sell"
|
|
>
|
|
Buy & Sell
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-crypto-orders.html"
|
|
class="nav-link"
|
|
data-key="t-orders"
|
|
>
|
|
Orders
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-crypto-wallet.html"
|
|
class="nav-link"
|
|
data-key="t-my-wallet"
|
|
>
|
|
My Wallet
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-crypto-ico.html"
|
|
class="nav-link"
|
|
data-key="t-ico-list"
|
|
>
|
|
ICO List
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-crypto-kyc.html"
|
|
class="nav-link"
|
|
data-key="t-kyc-application"
|
|
>
|
|
KYC Application
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarInvoices"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarInvoices"
|
|
data-key="t-invoices"
|
|
>
|
|
Invoices
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarInvoices">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-invoices-list.html"
|
|
class="nav-link"
|
|
data-key="t-list-view"
|
|
>
|
|
List View
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-invoices-details.html"
|
|
class="nav-link"
|
|
data-key="t-details"
|
|
>
|
|
Details
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-invoices-create.html"
|
|
class="nav-link"
|
|
data-key="t-create-invoice"
|
|
>
|
|
Create Invoice
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarTickets"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarTickets"
|
|
data-key="t-supprt-tickets"
|
|
>
|
|
Support Tickets
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarTickets">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-tickets-list.html"
|
|
class="nav-link"
|
|
data-key="t-list-view"
|
|
>
|
|
List View
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-tickets-details.html"
|
|
class="nav-link"
|
|
data-key="t-ticket-details"
|
|
>
|
|
Ticket Details
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarnft"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarnft"
|
|
data-key="t-nft-marketplace"
|
|
>
|
|
NFT Marketplace
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarnft">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-nft-marketplace.html"
|
|
class="nav-link"
|
|
data-key="t-marketplace"
|
|
>
|
|
Marketplace
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-nft-explore.html"
|
|
class="nav-link"
|
|
data-key="t-explore-now"
|
|
>
|
|
Explore Now
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-nft-auction.html"
|
|
class="nav-link"
|
|
data-key="t-live-auction"
|
|
>
|
|
Live Auction
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-nft-item-details.html"
|
|
class="nav-link"
|
|
data-key="t-item-details"
|
|
>
|
|
Item Details
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-nft-collections.html"
|
|
class="nav-link"
|
|
data-key="t-collections"
|
|
>
|
|
Collections
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-nft-creators.html"
|
|
class="nav-link"
|
|
data-key="t-creators"
|
|
>
|
|
Creators
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-nft-ranking.html"
|
|
class="nav-link"
|
|
data-key="t-ranking"
|
|
>
|
|
Ranking
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-nft-wallet.html"
|
|
class="nav-link"
|
|
data-key="t-wallet-connect"
|
|
>
|
|
Wallet Connect
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-nft-create.html"
|
|
class="nav-link"
|
|
data-key="t-create-nft"
|
|
>
|
|
Create NFT
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="apps-file-manager.html" class="nav-link">
|
|
<span data-key="t-file-manager">File Manager</span></a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="apps-todo.html" class="nav-link">
|
|
<span data-key="t-to-do">To Do</span></a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarjobs"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarjobs"
|
|
data-key="t-jobs"
|
|
>
|
|
Jobs</a
|
|
>
|
|
<div class="collapse menu-dropdown" id="sidebarjobs">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-job-statistics.html"
|
|
class="nav-link"
|
|
data-key="t-statistics"
|
|
>
|
|
Statistics
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarJoblists"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarJoblists"
|
|
data-key="t-job-lists"
|
|
>
|
|
Job Lists
|
|
</a>
|
|
<div
|
|
class="collapse menu-dropdown"
|
|
id="sidebarJoblists"
|
|
>
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-job-lists.html"
|
|
class="nav-link"
|
|
data-key="t-list"
|
|
>
|
|
List
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-job-grid-lists.html"
|
|
class="nav-link"
|
|
data-key="t-grid"
|
|
>
|
|
Grid
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-job-details.html"
|
|
class="nav-link"
|
|
data-key="t-overview"
|
|
>
|
|
Overview</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarCandidatelists"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarCandidatelists"
|
|
data-key="t-candidate-lists"
|
|
>
|
|
Candidate Lists
|
|
</a>
|
|
<div
|
|
class="collapse menu-dropdown"
|
|
id="sidebarCandidatelists"
|
|
>
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-job-candidate-lists.html"
|
|
class="nav-link"
|
|
data-key="t-list-view"
|
|
>
|
|
List View
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-job-candidate-grid.html"
|
|
class="nav-link"
|
|
data-key="t-grid-view"
|
|
>
|
|
Grid View</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-job-application.html"
|
|
class="nav-link"
|
|
data-key="t-application"
|
|
>
|
|
Application
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-job-new.html"
|
|
class="nav-link"
|
|
data-key="t-new-job"
|
|
>
|
|
New Job
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-job-companies-lists.html"
|
|
class="nav-link"
|
|
data-key="t-companies-list"
|
|
>
|
|
Companies List
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-job-categories.html"
|
|
class="nav-link"
|
|
data-key="t-job-categories"
|
|
>
|
|
Job Categories</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="apps-api-key.html"
|
|
class="nav-link"
|
|
data-key="t-api-key"
|
|
>API Key</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarLayouts"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarLayouts"
|
|
>
|
|
<i class="ri-layout-3-line"></i>
|
|
<span data-key="t-layouts">Layouts</span>
|
|
<span class="badge badge-pill bg-danger" data-key="t-hot"
|
|
>Hot</span
|
|
>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarLayouts">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="layouts-horizontal.html"
|
|
target="_blank"
|
|
class="nav-link"
|
|
data-key="t-horizontal"
|
|
>Horizontal</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="layouts-detached.html"
|
|
target="_blank"
|
|
class="nav-link"
|
|
data-key="t-detached"
|
|
>Detached</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="layouts-two-column.html"
|
|
target="_blank"
|
|
class="nav-link"
|
|
data-key="t-two-column"
|
|
>Two Column</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="layouts-vertical-hovered.html"
|
|
target="_blank"
|
|
class="nav-link"
|
|
data-key="t-hovered"
|
|
>Hovered</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<!-- end Dashboard Menu -->
|
|
|
|
<li class="menu-title">
|
|
<i class="ri-more-fill"></i>
|
|
<span data-key="t-pages">Pages</span>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarAuth"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarAuth"
|
|
>
|
|
<i class="ri-account-circle-line"></i>
|
|
<span data-key="t-authentication">Authentication</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarAuth">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarSignIn"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarSignIn"
|
|
data-key="t-signin"
|
|
>
|
|
Sign In
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarSignIn">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-signin-basic.html"
|
|
class="nav-link"
|
|
data-key="t-basic"
|
|
>
|
|
Basic
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-signin-cover.html"
|
|
class="nav-link"
|
|
data-key="t-cover"
|
|
>
|
|
Cover
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarSignUp"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarSignUp"
|
|
data-key="t-signup"
|
|
>
|
|
Sign Up
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarSignUp">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-signup-basic.html"
|
|
class="nav-link"
|
|
data-key="t-basic"
|
|
>
|
|
Basic
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-signup-cover.html"
|
|
class="nav-link"
|
|
data-key="t-cover"
|
|
>
|
|
Cover
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarResetPass"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarResetPass"
|
|
data-key="t-password-reset"
|
|
>
|
|
Password Reset
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarResetPass">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-pass-reset-basic.html"
|
|
class="nav-link"
|
|
data-key="t-basic"
|
|
>
|
|
Basic
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-pass-reset-cover.html"
|
|
class="nav-link"
|
|
data-key="t-cover"
|
|
>
|
|
Cover
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarchangePass"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarchangePass"
|
|
data-key="t-password-create"
|
|
>
|
|
Password Create
|
|
</a>
|
|
<div
|
|
class="collapse menu-dropdown"
|
|
id="sidebarchangePass"
|
|
>
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-pass-change-basic.html"
|
|
class="nav-link"
|
|
data-key="t-basic"
|
|
>
|
|
Basic
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-pass-change-cover.html"
|
|
class="nav-link"
|
|
data-key="t-cover"
|
|
>
|
|
Cover
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarLockScreen"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarLockScreen"
|
|
data-key="t-lock-screen"
|
|
>
|
|
Lock Screen
|
|
</a>
|
|
<div
|
|
class="collapse menu-dropdown"
|
|
id="sidebarLockScreen"
|
|
>
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-lockscreen-basic.html"
|
|
class="nav-link"
|
|
data-key="t-basic"
|
|
>
|
|
Basic
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-lockscreen-cover.html"
|
|
class="nav-link"
|
|
data-key="t-cover"
|
|
>
|
|
Cover
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarLogout"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarLogout"
|
|
data-key="t-logout"
|
|
>
|
|
Logout
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarLogout">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-logout-basic.html"
|
|
class="nav-link"
|
|
data-key="t-basic"
|
|
>
|
|
Basic
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-logout-cover.html"
|
|
class="nav-link"
|
|
data-key="t-cover"
|
|
>
|
|
Cover
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarSuccessMsg"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarSuccessMsg"
|
|
data-key="t-success-message"
|
|
>
|
|
Success Message
|
|
</a>
|
|
<div
|
|
class="collapse menu-dropdown"
|
|
id="sidebarSuccessMsg"
|
|
>
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-success-msg-basic.html"
|
|
class="nav-link"
|
|
data-key="t-basic"
|
|
>
|
|
Basic
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-success-msg-cover.html"
|
|
class="nav-link"
|
|
data-key="t-cover"
|
|
>
|
|
Cover
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarTwoStep"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarTwoStep"
|
|
data-key="t-two-step-verification"
|
|
>
|
|
Two Step Verification
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarTwoStep">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-twostep-basic.html"
|
|
class="nav-link"
|
|
data-key="t-basic"
|
|
>
|
|
Basic
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-twostep-cover.html"
|
|
class="nav-link"
|
|
data-key="t-cover"
|
|
>
|
|
Cover
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarErrors"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarErrors"
|
|
data-key="t-errors"
|
|
>
|
|
Errors
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarErrors">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-404-basic.html"
|
|
class="nav-link"
|
|
data-key="t-404-basic"
|
|
>
|
|
404 Basic
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-404-cover.html"
|
|
class="nav-link"
|
|
data-key="t-404-cover"
|
|
>
|
|
404 Cover
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-404-alt.html"
|
|
class="nav-link"
|
|
data-key="t-404-alt"
|
|
>
|
|
404 Alt
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-500.html"
|
|
class="nav-link"
|
|
data-key="t-500"
|
|
>
|
|
500
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="auth-offline.html"
|
|
class="nav-link"
|
|
data-key="t-offline-page"
|
|
>
|
|
Offline Page
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarPages"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarPages"
|
|
>
|
|
<i class="ri-pages-line"></i>
|
|
<span data-key="t-pages">Pages</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarPages">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-starter.html"
|
|
class="nav-link"
|
|
data-key="t-starter"
|
|
>
|
|
Starter
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarProfile"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarProfile"
|
|
data-key="t-profile"
|
|
>
|
|
Profile
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarProfile">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-profile.html"
|
|
class="nav-link"
|
|
data-key="t-simple-page"
|
|
>
|
|
Simple Page
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-profile-settings.html"
|
|
class="nav-link"
|
|
data-key="t-settings"
|
|
>
|
|
Settings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-team.html"
|
|
class="nav-link"
|
|
data-key="t-team"
|
|
>
|
|
Team
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-timeline.html"
|
|
class="nav-link"
|
|
data-key="t-timeline"
|
|
>
|
|
Timeline
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-faqs.html"
|
|
class="nav-link"
|
|
data-key="t-faqs"
|
|
>
|
|
FAQs
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-pricing.html"
|
|
class="nav-link"
|
|
data-key="t-pricing"
|
|
>
|
|
Pricing
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-gallery.html"
|
|
class="nav-link"
|
|
data-key="t-gallery"
|
|
>
|
|
Gallery
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-maintenance.html"
|
|
class="nav-link"
|
|
data-key="t-maintenance"
|
|
>
|
|
Maintenance
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-coming-soon.html"
|
|
class="nav-link"
|
|
data-key="t-coming-soon"
|
|
>
|
|
Coming Soon
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-sitemap.html"
|
|
class="nav-link"
|
|
data-key="t-sitemap"
|
|
>
|
|
Sitemap
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-search-results.html"
|
|
class="nav-link"
|
|
data-key="t-search-results"
|
|
>
|
|
Search Results
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-privacy-policy.html"
|
|
class="nav-link"
|
|
data-key="t-privacy-policy"
|
|
>Privacy Policy</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-term-conditions.html"
|
|
class="nav-link"
|
|
data-key="t-term-conditions"
|
|
>Term & Conditions</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarBlogs"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarBlogs"
|
|
>
|
|
<span data-key="t-blogs">Blogs</span>
|
|
<span
|
|
class="badge badge-pill bg-success"
|
|
data-key="t-new"
|
|
>New</span
|
|
>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarBlogs">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-blog-list.html"
|
|
class="nav-link"
|
|
data-key="t-list-view"
|
|
>List View</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-blog-grid.html"
|
|
class="nav-link"
|
|
data-key="t-grid-view"
|
|
>Grid View</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="pages-blog-overview.html"
|
|
class="nav-link"
|
|
data-key="t-overview"
|
|
>Overview</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarLanding"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarLanding"
|
|
>
|
|
<i class="ri-rocket-line"></i>
|
|
<span data-key="t-landing">Landing</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarLanding">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="landing.html"
|
|
class="nav-link"
|
|
data-key="t-one-page"
|
|
>
|
|
One Page
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="nft-landing.html"
|
|
class="nav-link"
|
|
data-key="t-nft-landing"
|
|
>
|
|
NFT Landing
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="job-landing.html"
|
|
class="nav-link"
|
|
data-key="t-job"
|
|
>Job</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="menu-title">
|
|
<i class="ri-more-fill"></i>
|
|
<span data-key="t-components">Components</span>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarUI"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarUI"
|
|
>
|
|
<i class="ri-pencil-ruler-2-line"></i>
|
|
<span data-key="t-base-ui">Base UI</span>
|
|
</a>
|
|
<div
|
|
class="collapse menu-dropdown mega-dropdown-menu"
|
|
id="sidebarUI"
|
|
>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-alerts.html"
|
|
class="nav-link"
|
|
data-key="t-alerts"
|
|
>Alerts</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-badges.html"
|
|
class="nav-link"
|
|
data-key="t-badges"
|
|
>Badges</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-buttons.html"
|
|
class="nav-link"
|
|
data-key="t-buttons"
|
|
>Buttons</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-colors.html"
|
|
class="nav-link"
|
|
data-key="t-colors"
|
|
>Colors</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-cards.html"
|
|
class="nav-link"
|
|
data-key="t-cards"
|
|
>Cards</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-carousel.html"
|
|
class="nav-link"
|
|
data-key="t-carousel"
|
|
>Carousel</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-dropdowns.html"
|
|
class="nav-link"
|
|
data-key="t-dropdowns"
|
|
>Dropdowns</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-grid.html"
|
|
class="nav-link"
|
|
data-key="t-grid"
|
|
>Grid</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-images.html"
|
|
class="nav-link"
|
|
data-key="t-images"
|
|
>Images</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-tabs.html"
|
|
class="nav-link"
|
|
data-key="t-tabs"
|
|
>Tabs</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-accordions.html"
|
|
class="nav-link"
|
|
data-key="t-accordion-collapse"
|
|
>Accordion & Collapse</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-modals.html"
|
|
class="nav-link"
|
|
data-key="t-modals"
|
|
>Modals</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-offcanvas.html"
|
|
class="nav-link"
|
|
data-key="t-offcanvas"
|
|
>Offcanvas</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-placeholders.html"
|
|
class="nav-link"
|
|
data-key="t-placeholders"
|
|
>Placeholders</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-progress.html"
|
|
class="nav-link"
|
|
data-key="t-progress"
|
|
>Progress</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-notifications.html"
|
|
class="nav-link"
|
|
data-key="t-notifications"
|
|
>Notifications</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-media.html"
|
|
class="nav-link"
|
|
data-key="t-media-object"
|
|
>Media object</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-embed-video.html"
|
|
class="nav-link"
|
|
data-key="t-embed-video"
|
|
>Embed Video</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-typography.html"
|
|
class="nav-link"
|
|
data-key="t-typography"
|
|
>Typography</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-lists.html"
|
|
class="nav-link"
|
|
data-key="t-lists"
|
|
>Lists</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="ui-links.html" class="nav-link"
|
|
><span data-key="t-links">Links</span>
|
|
<span
|
|
class="badge badge-pill bg-success"
|
|
data-key="t-new"
|
|
>New</span
|
|
></a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-general.html"
|
|
class="nav-link"
|
|
data-key="t-general"
|
|
>General</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-ribbons.html"
|
|
class="nav-link"
|
|
data-key="t-ribbons"
|
|
>Ribbons</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="ui-utilities.html"
|
|
class="nav-link"
|
|
data-key="t-utilities"
|
|
>Utilities</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarAdvanceUI"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarAdvanceUI"
|
|
>
|
|
<i class="ri-stack-line"></i>
|
|
<span data-key="t-advance-ui">Advance UI</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarAdvanceUI">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="advance-ui-sweetalerts.html"
|
|
class="nav-link"
|
|
data-key="t-sweet-alerts"
|
|
>Sweet Alerts</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="advance-ui-nestable.html"
|
|
class="nav-link"
|
|
data-key="t-nestable-list"
|
|
>Nestable List</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="advance-ui-scrollbar.html"
|
|
class="nav-link"
|
|
data-key="t-scrollbar"
|
|
>Scrollbar</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="advance-ui-animation.html"
|
|
class="nav-link"
|
|
data-key="t-animation"
|
|
>Animation</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="advance-ui-tour.html"
|
|
class="nav-link"
|
|
data-key="t-tour"
|
|
>Tour</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="advance-ui-swiper.html"
|
|
class="nav-link"
|
|
data-key="t-swiper-slider"
|
|
>Swiper Slider</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="advance-ui-ratings.html"
|
|
class="nav-link"
|
|
data-key="t-ratings"
|
|
>Ratings</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="advance-ui-highlight.html"
|
|
class="nav-link"
|
|
data-key="t-highlight"
|
|
>Highlight</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="advance-ui-scrollspy.html"
|
|
class="nav-link"
|
|
data-key="t-scrollSpy"
|
|
>ScrollSpy</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link menu-link" href="widgets.html">
|
|
<i class="ri-honour-line"></i>
|
|
<span data-key="t-widgets">Widgets</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarForms"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarForms"
|
|
>
|
|
<i class="ri-file-list-3-line"></i>
|
|
<span data-key="t-forms">Forms</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarForms">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-elements.html"
|
|
class="nav-link"
|
|
data-key="t-basic-elements"
|
|
>Basic Elements</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-select.html"
|
|
class="nav-link"
|
|
data-key="t-form-select"
|
|
>
|
|
Form Select
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-checkboxs-radios.html"
|
|
class="nav-link"
|
|
data-key="t-checkboxs-radios"
|
|
>Checkboxs & Radios</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-pickers.html"
|
|
class="nav-link"
|
|
data-key="t-pickers"
|
|
>
|
|
Pickers
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-masks.html"
|
|
class="nav-link"
|
|
data-key="t-input-masks"
|
|
>Input Masks</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-advanced.html"
|
|
class="nav-link"
|
|
data-key="t-advanced"
|
|
>Advanced</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-range-sliders.html"
|
|
class="nav-link"
|
|
data-key="t-range-slider"
|
|
>
|
|
Range Slider
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-validation.html"
|
|
class="nav-link"
|
|
data-key="t-validation"
|
|
>Validation</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-wizard.html"
|
|
class="nav-link"
|
|
data-key="t-wizard"
|
|
>Wizard</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-editors.html"
|
|
class="nav-link"
|
|
data-key="t-editors"
|
|
>Editors</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-file-uploads.html"
|
|
class="nav-link"
|
|
data-key="t-file-uploads"
|
|
>File Uploads</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-layouts.html"
|
|
class="nav-link"
|
|
data-key="t-form-layouts"
|
|
>Form Layouts</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="forms-select2.html"
|
|
class="nav-link"
|
|
data-key="t-select2"
|
|
>Select2</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarTables"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarTables"
|
|
>
|
|
<i class="ri-layout-grid-line"></i>
|
|
<span data-key="t-tables">Tables</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarTables">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="tables-basic.html"
|
|
class="nav-link"
|
|
data-key="t-basic-tables"
|
|
>Basic Tables</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="tables-gridjs.html"
|
|
class="nav-link"
|
|
data-key="t-grid-js"
|
|
>Grid Js</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="tables-listjs.html"
|
|
class="nav-link"
|
|
data-key="t-list-js"
|
|
>List Js</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="tables-datatables.html"
|
|
class="nav-link"
|
|
data-key="t-datatables"
|
|
>Datatables</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarCharts"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarCharts"
|
|
>
|
|
<i class="ri-pie-chart-line"></i>
|
|
<span data-key="t-charts">Charts</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarCharts">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarApexcharts"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarApexcharts"
|
|
data-key="t-apexcharts"
|
|
>
|
|
Apexcharts
|
|
</a>
|
|
<div
|
|
class="collapse menu-dropdown"
|
|
id="sidebarApexcharts"
|
|
>
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-line.html"
|
|
class="nav-link"
|
|
data-key="t-line"
|
|
>
|
|
Line
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-area.html"
|
|
class="nav-link"
|
|
data-key="t-area"
|
|
>
|
|
Area
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-column.html"
|
|
class="nav-link"
|
|
data-key="t-column"
|
|
>
|
|
Column
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-bar.html"
|
|
class="nav-link"
|
|
data-key="t-bar"
|
|
>
|
|
Bar
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-mixed.html"
|
|
class="nav-link"
|
|
data-key="t-mixed"
|
|
>
|
|
Mixed
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-timeline.html"
|
|
class="nav-link"
|
|
data-key="t-timeline"
|
|
>
|
|
Timeline
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-range-area.html"
|
|
class="nav-link"
|
|
data-key="t-range-area"
|
|
>Range Area</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-funnel.html"
|
|
class="nav-link"
|
|
data-key="t-funnel"
|
|
>Funnel</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-candlestick.html"
|
|
class="nav-link"
|
|
data-key="t-candlstick"
|
|
>
|
|
Candlstick
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-boxplot.html"
|
|
class="nav-link"
|
|
data-key="t-boxplot"
|
|
>
|
|
Boxplot
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-bubble.html"
|
|
class="nav-link"
|
|
data-key="t-bubble"
|
|
>
|
|
Bubble
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-scatter.html"
|
|
class="nav-link"
|
|
data-key="t-scatter"
|
|
>
|
|
Scatter
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-heatmap.html"
|
|
class="nav-link"
|
|
data-key="t-heatmap"
|
|
>
|
|
Heatmap
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-treemap.html"
|
|
class="nav-link"
|
|
data-key="t-treemap"
|
|
>
|
|
Treemap
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-pie.html"
|
|
class="nav-link"
|
|
data-key="t-pie"
|
|
>
|
|
Pie
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-radialbar.html"
|
|
class="nav-link"
|
|
data-key="t-radialbar"
|
|
>
|
|
Radialbar
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-radar.html"
|
|
class="nav-link"
|
|
data-key="t-radar"
|
|
>
|
|
Radar
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-apex-polar.html"
|
|
class="nav-link"
|
|
data-key="t-polar-area"
|
|
>
|
|
Polar Area
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="charts-apex-slope.html" class="nav-link"
|
|
><span data-key="t-slope">Slope</span>
|
|
<span
|
|
class="badge badge-pill bg-success"
|
|
data-key="t-new"
|
|
>New</span
|
|
></a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-chartjs.html"
|
|
class="nav-link"
|
|
data-key="t-chartjs"
|
|
>
|
|
Chartjs
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="charts-echarts.html"
|
|
class="nav-link"
|
|
data-key="t-echarts"
|
|
>
|
|
Echarts
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarIcons"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarIcons"
|
|
>
|
|
<i class="ri-compasses-2-line"></i>
|
|
<span data-key="t-icons">Icons</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarIcons">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a href="icons-remix.html" class="nav-link"
|
|
><span data-key="t-remix">Remix</span>
|
|
<span class="badge badge-pill bg-info">v4.3</span></a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="icons-boxicons.html" class="nav-link"
|
|
><span data-key="t-boxicons">Boxicons</span>
|
|
<span class="badge badge-pill bg-info">v2.1.4</span></a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="icons-materialdesign.html" class="nav-link"
|
|
><span data-key="t-material-design"
|
|
>Material Design</span
|
|
>
|
|
<span class="badge badge-pill bg-info">v7.2.96</span></a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="icons-lineawesome.html"
|
|
class="nav-link"
|
|
data-key="t-line-awesome"
|
|
>Line Awesome</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="icons-feather.html" class="nav-link"
|
|
><span data-key="t-feather">Feather</span>
|
|
<span class="badge badge-pill bg-info">v4.29.2</span></a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="icons-crypto.html" class="nav-link">
|
|
<span data-key="t-crypto-svg">Crypto SVG</span></a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarMaps"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarMaps"
|
|
>
|
|
<i class="ri-map-pin-line"></i>
|
|
<span data-key="t-maps">Maps</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarMaps">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="maps-google.html"
|
|
class="nav-link"
|
|
data-key="t-google"
|
|
>
|
|
Google
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="maps-vector.html"
|
|
class="nav-link"
|
|
data-key="t-vector"
|
|
>
|
|
Vector
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="maps-leaflet.html"
|
|
class="nav-link"
|
|
data-key="t-leaflet"
|
|
>
|
|
Leaflet
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link menu-link"
|
|
href="#sidebarMultilevel"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarMultilevel"
|
|
>
|
|
<i class="ri-share-line"></i>
|
|
<span data-key="t-multi-level">Multi Level</span>
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarMultilevel">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" data-key="t-level-1.1">
|
|
Level 1.1
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarAccount"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarAccount"
|
|
data-key="t-level-1.2"
|
|
>
|
|
Level 1.2
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarAccount">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" data-key="t-level-2.1">
|
|
Level 2.1
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#sidebarCrm"
|
|
class="nav-link"
|
|
data-bs-toggle="collapse"
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-controls="sidebarCrm"
|
|
data-key="t-level-2.2"
|
|
>
|
|
Level 2.2
|
|
</a>
|
|
<div class="collapse menu-dropdown" id="sidebarCrm">
|
|
<ul class="nav nav-sm flex-column">
|
|
<li class="nav-item">
|
|
<a
|
|
href="#"
|
|
class="nav-link"
|
|
data-key="t-level-3.1"
|
|
>
|
|
Level 3.1
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="#"
|
|
class="nav-link"
|
|
data-key="t-level-3.2"
|
|
>
|
|
Level 3.2
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Sidebar -->
|
|
</div>
|
|
|
|
<div class="sidebar-background"></div>
|
|
</div>
|
|
<!-- Left Sidebar End -->
|
|
<!-- Vertical Overlay-->
|
|
<div class="vertical-overlay"></div>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start right Content here -->
|
|
<!-- ============================================================== -->
|
|
<div class="main-content">
|
|
<div class="page-content">
|
|
<div class="container-fluid">
|
|
<div class="chat-wrapper d-lg-flex gap-1 mx-n4 mt-n4 p-1">
|
|
<div class="chat-leftsidebar minimal-border">
|
|
<div class="px-4 pt-4 mb-3">
|
|
<div class="d-flex align-items-start">
|
|
<div class="flex-grow-1">
|
|
<h5 class="mb-4">Chats</h5>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<div
|
|
data-bs-toggle="tooltip"
|
|
data-bs-trigger="hover"
|
|
data-bs-placement="bottom"
|
|
title="Add Contact"
|
|
>
|
|
<!-- Button trigger modal -->
|
|
<button
|
|
type="button"
|
|
class="btn btn-soft-success btn-sm material-shadow-none"
|
|
>
|
|
<i class="ri-add-line align-bottom"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="search-box">
|
|
<input
|
|
type="text"
|
|
class="form-control bg-light border-light"
|
|
placeholder="Search here..."
|
|
/>
|
|
<i class="ri-search-2-line search-icon"></i>
|
|
</div>
|
|
</div>
|
|
<!-- .p-4 -->
|
|
|
|
<ul
|
|
class="nav nav-tabs nav-tabs-custom nav-success nav-justified"
|
|
role="tablist"
|
|
>
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link active"
|
|
data-bs-toggle="tab"
|
|
href="#chats"
|
|
role="tab"
|
|
>
|
|
Chats
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link"
|
|
data-bs-toggle="tab"
|
|
href="#contacts"
|
|
role="tab"
|
|
>
|
|
Contacts
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content text-muted">
|
|
<div class="tab-pane active" id="chats" role="tabpanel">
|
|
<div class="chat-room-list pt-3" data-simplebar>
|
|
<div class="d-flex align-items-center px-4 mb-2">
|
|
<div class="flex-grow-1">
|
|
<h4 class="mb-0 fs-11 text-muted text-uppercase">
|
|
Direct Messages
|
|
</h4>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<div
|
|
data-bs-toggle="tooltip"
|
|
data-bs-trigger="hover"
|
|
data-bs-placement="bottom"
|
|
title="New Message"
|
|
>
|
|
<!-- Button trigger modal -->
|
|
<button
|
|
type="button"
|
|
class="btn btn-soft-success btn-sm shadow-none material-shadow"
|
|
>
|
|
<i class="ri-add-line align-bottom"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-message-list">
|
|
<ul
|
|
class="list-unstyled chat-list chat-user-list"
|
|
id="userList"
|
|
>
|
|
<li
|
|
id="contact-id-1"
|
|
data-name="direct-message"
|
|
class="active"
|
|
>
|
|
<a href="javascript: void(0);">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img online align-self-center me-2 ms-0"
|
|
>
|
|
<div class="avatar-xxs">
|
|
<img
|
|
src="assets/images/users/avatar-2.jpg"
|
|
class="rounded-circle img-fluid userprofile"
|
|
alt=""
|
|
/><span class="user-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<p class="text-truncate mb-0 fw-500 text-15">
|
|
Lisa Parker
|
|
</p>
|
|
<div class="chat-message">
|
|
<i class="bx bx-check tick-icon"></i>
|
|
|
|
<p
|
|
class="text-truncate mb-0 fw-400 chat-before"
|
|
>
|
|
Lorem ipsum dolor, sit amet consectetur
|
|
adipisicing elit. Recusandae, excepturi?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
id="contact-id-2"
|
|
data-name="direct-message"
|
|
class=""
|
|
>
|
|
<a
|
|
href="javascript: void(0);"
|
|
class="unread-msg-user"
|
|
>
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img online align-self-center me-2 ms-0"
|
|
>
|
|
<div class="avatar-xxs">
|
|
<img
|
|
src="assets/images/users/avatar-3.jpg"
|
|
class="rounded-circle img-fluid userprofile"
|
|
alt=""
|
|
/><span class="user-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<p class="text-truncate mb-0 fw-500 text-15">
|
|
Frank Thomas
|
|
</p>
|
|
<div class="chat-message">
|
|
<i
|
|
class="bx bx-check-double tick-icon active"
|
|
></i>
|
|
|
|
<p
|
|
class="text-truncate mb-0 fw-400 chat-before"
|
|
>
|
|
Lorem ipsum dolor, sit amet consectetur
|
|
adipisicing elit. Recusandae, excepturi?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<span
|
|
class="badge bg-dark-subtle text-body rounded p-1"
|
|
>8</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
id="contact-id-3"
|
|
data-name="direct-message"
|
|
class=""
|
|
>
|
|
<a href="javascript: void(0);">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img away align-self-center me-2 ms-0"
|
|
>
|
|
<div class="avatar-xxs">
|
|
<div
|
|
class="avatar-title rounded-circle bg-primary text-white fs-10"
|
|
>
|
|
CT
|
|
</div>
|
|
<span class="user-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<p class="text-truncate mb-0 fw-500 text-15">
|
|
Clifford Taylor
|
|
</p>
|
|
<div class="chat-message">
|
|
<i class="bx bx-check tick-icon"></i>
|
|
|
|
<p
|
|
class="text-truncate mb-0 fw-400 chat-before"
|
|
>
|
|
Lorem ipsum dolor, sit amet consectetur
|
|
adipisicing elit. Recusandae, excepturi?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
id="contact-id-4"
|
|
data-name="direct-message"
|
|
class=""
|
|
>
|
|
<a href="javascript: void(0);">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img online align-self-center me-2 ms-0"
|
|
>
|
|
<div class="avatar-xxs">
|
|
<img
|
|
src="assets/images/users/avatar-4.jpg"
|
|
class="rounded-circle img-fluid userprofile"
|
|
alt=""
|
|
/><span class="user-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<p class="text-truncate mb-0 fw-500 text-15">
|
|
Janette Caster
|
|
</p>
|
|
<div class="chat-message">
|
|
<i
|
|
class="bx bx-check-double tick-icon active"
|
|
></i>
|
|
|
|
<p
|
|
class="text-truncate mb-0 fw-400 chat-before"
|
|
>
|
|
Lorem ipsum dolor, sit amet consectetur
|
|
adipisicing elit. Recusandae, excepturi?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
id="contact-id-5"
|
|
data-name="direct-message"
|
|
class=""
|
|
>
|
|
<a
|
|
href="javascript: void(0);"
|
|
class="unread-msg-user"
|
|
>
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img online align-self-center me-2 ms-0"
|
|
>
|
|
<div class="avatar-xxs">
|
|
<img
|
|
src="assets/images/users/avatar-5.jpg"
|
|
class="rounded-circle img-fluid userprofile"
|
|
alt=""
|
|
/><span class="user-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<p class="text-truncate mb-0">
|
|
Sarah Beattie
|
|
</p>
|
|
<div class="chat-message">
|
|
<i class="bx bx-check tick-icon"></i>
|
|
|
|
<p
|
|
class="text-truncate mb-0 fw-400 chat-before"
|
|
>
|
|
Lorem ipsum dolor, sit amet consectetur
|
|
adipisicing elit. Recusandae, excepturi?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<span
|
|
class="badge bg-dark-subtle text-body rounded p-1"
|
|
>5</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
id="contact-id-6"
|
|
data-name="direct-message"
|
|
class=""
|
|
>
|
|
<a
|
|
href="javascript: void(0);"
|
|
class="unread-msg-user"
|
|
>
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img away align-self-center me-2 ms-0"
|
|
>
|
|
<div class="avatar-xxs">
|
|
<img
|
|
src="assets/images/users/avatar-6.jpg"
|
|
class="rounded-circle img-fluid userprofile"
|
|
alt=""
|
|
/><span class="user-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<p class="text-truncate mb-0">
|
|
Nellie Cornett
|
|
</p>
|
|
<div class="chat-message">
|
|
<i class="bx bx-check tick-icon"></i>
|
|
|
|
<p
|
|
class="text-truncate mb-0 fw-400 chat-before"
|
|
>
|
|
Lorem ipsum dolor, sit amet consectetur
|
|
adipisicing elit. Recusandae, excepturi?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<span
|
|
class="badge bg-dark-subtle text-body rounded p-1"
|
|
>2</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
id="contact-id-7"
|
|
data-name="direct-message"
|
|
class=""
|
|
>
|
|
<a href="javascript: void(0);">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img online align-self-center me-2 ms-0"
|
|
>
|
|
<div class="avatar-xxs">
|
|
<div
|
|
class="avatar-title rounded-circle bg-primary text-white fs-10"
|
|
>
|
|
CK
|
|
</div>
|
|
<span class="user-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<p class="text-truncate mb-0">
|
|
Chris Kiernan
|
|
</p>
|
|
<div class="chat-message">
|
|
<i class="bx bx-check tick-icon"></i>
|
|
|
|
<p
|
|
class="text-truncate mb-0 fw-400 chat-before"
|
|
>
|
|
Lorem ipsum dolor, sit amet consectetur
|
|
adipisicing elit. Recusandae, excepturi?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
id="contact-id-8"
|
|
data-name="direct-message"
|
|
class=""
|
|
>
|
|
<a href="javascript: void(0);">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img away align-self-center me-2 ms-0"
|
|
>
|
|
<div class="avatar-xxs">
|
|
<div
|
|
class="avatar-title rounded-circle bg-primary text-white fs-10"
|
|
>
|
|
EE
|
|
</div>
|
|
<span class="user-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<p class="text-truncate mb-0">Edith Evans</p>
|
|
<div class="chat-message">
|
|
<i class="bx bx-check tick-icon"></i>
|
|
|
|
<p
|
|
class="text-truncate mb-0 fw-400 chat-before"
|
|
>
|
|
Lorem ipsum dolor, sit amet consectetur
|
|
adipisicing elit. Recusandae, excepturi?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
id="contact-id-9"
|
|
data-name="direct-message"
|
|
class=""
|
|
>
|
|
<a href="javascript: void(0);">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img away align-self-center me-2 ms-0"
|
|
>
|
|
<div class="avatar-xxs">
|
|
<img
|
|
src="assets/images/users/avatar-7.jpg"
|
|
class="rounded-circle img-fluid userprofile"
|
|
alt=""
|
|
/><span class="user-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<p class="text-truncate mb-0">
|
|
Joseph Siegel
|
|
</p>
|
|
<div class="chat-message">
|
|
<i class="bx bx-check tick-icon"></i>
|
|
|
|
<p
|
|
class="text-truncate mb-0 fw-400 chat-before"
|
|
>
|
|
Lorem ipsum dolor, sit amet consectetur
|
|
adipisicing elit. Recusandae, excepturi?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- <div class="d-flex align-items-center px-4 mt-4 pt-2 mb-2">
|
|
<div class="flex-grow-1">
|
|
<h4 class="mb-0 fs-11 text-muted text-uppercase">Channels</h4>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom" title="Create group">
|
|
|
|
<button type="button" class="btn btn-soft-success btn-sm">
|
|
<i class="ri-add-line align-bottom"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<div class="chat-message-list">
|
|
<ul
|
|
class="list-unstyled chat-list chat-user-list mb-0"
|
|
id="channelList"
|
|
></ul>
|
|
</div>
|
|
<!-- End chat-message-list -->
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="contacts" role="tabpanel">
|
|
<div class="chat-room-list pt-3" data-simplebar>
|
|
<div class="sort-contact"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end tab contact -->
|
|
</div>
|
|
<!-- end chat leftsidebar -->
|
|
<!-- Start User chat -->
|
|
<div class="user-chat w-100 overflow-hidden minimal-border">
|
|
<div class="chat-content d-lg-flex">
|
|
<!-- start chat conversation section -->
|
|
<div class="w-100 overflow-hidden position-relative">
|
|
<!-- conversation user -->
|
|
<div class="position-relative">
|
|
<div class="position-relative" id="users-chat">
|
|
<div class="p-3 user-chat-topbar">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm-4 col-8">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 d-block d-lg-none me-3"
|
|
>
|
|
<a
|
|
href="javascript: void(0);"
|
|
class="user-chat-remove fs-18 p-1"
|
|
><i
|
|
class="ri-arrow-left-s-line align-bottom"
|
|
></i
|
|
></a>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img online user-own-img align-self-center me-3 ms-0"
|
|
>
|
|
<img
|
|
src="assets/images/users/avatar-2.jpg"
|
|
class="rounded-circle avatar-xs"
|
|
alt=""
|
|
/>
|
|
<span class="user-status"></span>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<h5 class="text-truncate mb-0 fs-16">
|
|
<a
|
|
class="text-reset username"
|
|
data-bs-toggle="offcanvas"
|
|
href="#userProfileCanvasExample"
|
|
aria-controls="userProfileCanvasExample"
|
|
>Lisa Parker</a
|
|
>
|
|
</h5>
|
|
<p
|
|
class="text-truncate text-muted fs-14 mb-0 userStatus"
|
|
>
|
|
<small>Online</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8 col-4">
|
|
<ul
|
|
class="list-inline user-chat-nav text-end mb-0"
|
|
>
|
|
<li class="list-inline-item m-0">
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-ghost-secondary btn-icon material-shadow-none"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i
|
|
data-feather="search"
|
|
class="icon-sm"
|
|
></i>
|
|
</button>
|
|
<div
|
|
class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg"
|
|
>
|
|
<div class="p-2">
|
|
<div class="search-box">
|
|
<input
|
|
type="text"
|
|
class="form-control bg-light border-light"
|
|
placeholder="Search here..."
|
|
onkeyup="searchMessages()"
|
|
id="searchMessage"
|
|
/>
|
|
<i
|
|
class="ri-search-2-line search-icon"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li
|
|
class="list-inline-item d-none d-lg-inline-block m-0"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost-secondary btn-icon material-shadow-none"
|
|
data-bs-toggle="offcanvas"
|
|
data-bs-target="#userProfileCanvasExample"
|
|
aria-controls="userProfileCanvasExample"
|
|
>
|
|
<i data-feather="info" class="icon-sm"></i>
|
|
</button>
|
|
</li>
|
|
|
|
<li class="list-inline-item m-0">
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-ghost-secondary btn-icon material-shadow-none"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i
|
|
data-feather="more-vertical"
|
|
class="icon-sm"
|
|
></i>
|
|
</button>
|
|
<div
|
|
class="dropdown-menu dropdown-menu-end"
|
|
>
|
|
<a
|
|
class="dropdown-item d-block d-lg-none user-profile-show"
|
|
href="#"
|
|
><i
|
|
class="ri-user-2-fill align-bottom text-muted me-2"
|
|
></i>
|
|
View Profile</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-inbox-archive-line align-bottom text-muted me-2"
|
|
></i>
|
|
Archive</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-mic-off-line align-bottom text-muted me-2"
|
|
></i>
|
|
Muted</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-delete-bin-5-line align-bottom text-muted me-2"
|
|
></i>
|
|
Delete</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end chat user head -->
|
|
<div
|
|
class="chat-conversation p-3 p-lg-4"
|
|
id="chat-conversation"
|
|
data-simplebar
|
|
>
|
|
<div id="elmLoader">
|
|
<!-- <div class="spinner-border text-primary avatar-sm" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div> -->
|
|
</div>
|
|
<ul
|
|
class="list-unstyled chat-conversation-list"
|
|
id="users-conversation"
|
|
>
|
|
<li class="chat-list left" id="1">
|
|
<div class="conversation-list">
|
|
<div class="chat-avatar">
|
|
<img
|
|
src="assets/images/users/avatar-2.jpg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="user-chat-content">
|
|
<div class="ctext-wrap">
|
|
<div class="ctext-wrap-content" id="1">
|
|
<p class="mb-0 ctext-content">
|
|
Good morning 😊
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="dropdown align-self-start message-box-drop"
|
|
>
|
|
<a
|
|
class="dropdown-toggle"
|
|
href="#"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a
|
|
class="dropdown-item reply-message"
|
|
href="#"
|
|
><i
|
|
class="ri-reply-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Reply</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-share-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Forward</a
|
|
>
|
|
<a
|
|
class="dropdown-item copy-message"
|
|
href="#"
|
|
><i
|
|
class="ri-file-copy-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Copy</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-bookmark-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Bookmark</a
|
|
>
|
|
<a
|
|
class="dropdown-item delete-item"
|
|
href="#"
|
|
><i
|
|
class="ri-delete-bin-5-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Delete</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="conversation-name">
|
|
<span class="d-none name">Lisa Parker</span
|
|
><small class="text-muted time"
|
|
>09:07 am</small
|
|
>
|
|
<span
|
|
class="text-success check-message-icon"
|
|
><i class="bx bx-check-double"></i
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="chat-list right" id="2">
|
|
<div class="conversation-list">
|
|
<div class="user-chat-content">
|
|
<div class="ctext-wrap">
|
|
<div class="ctext-wrap-content" id="2">
|
|
<p class="mb-0 ctext-content">
|
|
Good morning, How are you? What about
|
|
our next meeting?
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="dropdown align-self-start message-box-drop"
|
|
>
|
|
<a
|
|
class="dropdown-toggle"
|
|
href="#"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a
|
|
class="dropdown-item reply-message"
|
|
href="#"
|
|
><i
|
|
class="ri-reply-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Reply</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-share-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Forward</a
|
|
>
|
|
<a
|
|
class="dropdown-item copy-message"
|
|
href="#"
|
|
><i
|
|
class="ri-file-copy-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Copy</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-bookmark-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Bookmark</a
|
|
>
|
|
<a
|
|
class="dropdown-item delete-item"
|
|
href="#"
|
|
><i
|
|
class="ri-delete-bin-5-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Delete</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="conversation-name">
|
|
<span class="d-none name">Frank Thomas</span
|
|
><small class="text-muted time"
|
|
>09:08 am</small
|
|
>
|
|
<span
|
|
class="text-success check-message-icon"
|
|
><i class="bx bx-check-double"></i
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="chat-list left" id="3">
|
|
<div class="conversation-list">
|
|
<div class="chat-avatar">
|
|
<img
|
|
src="assets/images/users/avatar-2.jpg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="user-chat-content">
|
|
<div class="ctext-wrap">
|
|
<div class="ctext-wrap-content" id="3">
|
|
<p class="mb-0 ctext-content">
|
|
Yeah everything is fine. Our next
|
|
meeting tomorrow at 10.00 AM
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="dropdown align-self-start message-box-drop"
|
|
>
|
|
<a
|
|
class="dropdown-toggle"
|
|
href="#"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a
|
|
class="dropdown-item reply-message"
|
|
href="#"
|
|
><i
|
|
class="ri-reply-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Reply</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-share-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Forward</a
|
|
>
|
|
<a
|
|
class="dropdown-item copy-message"
|
|
href="#"
|
|
><i
|
|
class="ri-file-copy-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Copy</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-bookmark-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Bookmark</a
|
|
>
|
|
<a
|
|
class="dropdown-item delete-item"
|
|
href="#"
|
|
><i
|
|
class="ri-delete-bin-5-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Delete</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ctext-wrap">
|
|
<div class="ctext-wrap-content" id="4">
|
|
<p class="mb-0 ctext-content">
|
|
Hey, I'm going to meet a friend of mine
|
|
at the department store. I have to buy
|
|
some presents for my parents 🎁.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="dropdown align-self-start message-box-drop"
|
|
>
|
|
<a
|
|
class="dropdown-toggle"
|
|
href="#"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a
|
|
class="dropdown-item reply-message"
|
|
href="#"
|
|
><i
|
|
class="ri-reply-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Reply</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-share-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Forward</a
|
|
>
|
|
<a
|
|
class="dropdown-item copy-message"
|
|
href="#"
|
|
><i
|
|
class="ri-file-copy-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Copy</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-bookmark-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Bookmark</a
|
|
>
|
|
<a
|
|
class="dropdown-item delete-item"
|
|
href="#"
|
|
><i
|
|
class="ri-delete-bin-5-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Delete</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="conversation-name">
|
|
<span class="d-none name">Lisa Parker</span
|
|
><small class="text-muted time"
|
|
>09:10 am</small
|
|
>
|
|
<span
|
|
class="text-success check-message-icon"
|
|
><i class="bx bx-check-double"></i
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="chat-list right" id="5">
|
|
<div class="conversation-list">
|
|
<div class="user-chat-content">
|
|
<div class="ctext-wrap">
|
|
<div class="ctext-wrap-content" id="5">
|
|
<p class="mb-0 ctext-content">
|
|
Wow that's great
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="dropdown align-self-start message-box-drop"
|
|
>
|
|
<a
|
|
class="dropdown-toggle"
|
|
href="#"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a
|
|
class="dropdown-item reply-message"
|
|
href="#"
|
|
><i
|
|
class="ri-reply-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Reply</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-share-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Forward</a
|
|
>
|
|
<a
|
|
class="dropdown-item copy-message"
|
|
href="#"
|
|
><i
|
|
class="ri-file-copy-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Copy</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-bookmark-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Bookmark</a
|
|
>
|
|
<a
|
|
class="dropdown-item delete-item"
|
|
href="#"
|
|
><i
|
|
class="ri-delete-bin-5-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Delete</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="conversation-name">
|
|
<span class="d-none name">Frank Thomas</span
|
|
><small class="text-muted time"
|
|
>09:30 am</small
|
|
>
|
|
<span
|
|
class="text-success check-message-icon"
|
|
><i class="bx bx-check-double"></i
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="chat-list left" id="6">
|
|
<div class="conversation-list">
|
|
<div class="chat-avatar">
|
|
<img
|
|
src="assets/images/users/avatar-2.jpg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="user-chat-content">
|
|
<div class="ctext-wrap">
|
|
<div class="message-img mb-0">
|
|
<div class="message-img-list">
|
|
<div>
|
|
<a
|
|
class="popup-img d-inline-block"
|
|
href="assets/images/small/img-1.jpg"
|
|
>
|
|
<img
|
|
src="assets/images/small/img-1.jpg"
|
|
alt=""
|
|
class="rounded border"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div class="message-img-link">
|
|
<ul class="list-inline mb-0">
|
|
<li
|
|
class="list-inline-item dropdown"
|
|
>
|
|
<a
|
|
class="dropdown-toggle"
|
|
href="#"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-fill"></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a
|
|
class="dropdown-item"
|
|
href="assets/images/small/img-1.jpg"
|
|
download=""
|
|
><i
|
|
class="ri-download-2-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Download</a
|
|
>
|
|
<a
|
|
class="dropdown-item"
|
|
href="#"
|
|
><i
|
|
class="ri-reply-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Reply</a
|
|
>
|
|
<a
|
|
class="dropdown-item"
|
|
href="#"
|
|
><i
|
|
class="ri-share-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Forward</a
|
|
>
|
|
<a
|
|
class="dropdown-item"
|
|
href="#"
|
|
><i
|
|
class="ri-bookmark-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Bookmark</a
|
|
>
|
|
<a
|
|
class="dropdown-item delete-image"
|
|
href="#"
|
|
><i
|
|
class="ri-delete-bin-5-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Delete</a
|
|
>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="message-img-list">
|
|
<div>
|
|
<a
|
|
class="popup-img d-inline-block"
|
|
href="assets/images/small/img-2.jpg"
|
|
>
|
|
<img
|
|
src="assets/images/small/img-2.jpg"
|
|
alt=""
|
|
class="rounded border"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div class="message-img-link">
|
|
<ul class="list-inline mb-0">
|
|
<li
|
|
class="list-inline-item dropdown"
|
|
>
|
|
<a
|
|
class="dropdown-toggle"
|
|
href="#"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-fill"></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a
|
|
class="dropdown-item"
|
|
href="assets/images/small/img-2.jpg"
|
|
download=""
|
|
><i
|
|
class="ri-download-2-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Download</a
|
|
>
|
|
<a
|
|
class="dropdown-item"
|
|
href="#"
|
|
><i
|
|
class="ri-reply-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Reply</a
|
|
>
|
|
<a
|
|
class="dropdown-item"
|
|
href="#"
|
|
><i
|
|
class="ri-share-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Forward</a
|
|
>
|
|
<a
|
|
class="dropdown-item"
|
|
href="#"
|
|
><i
|
|
class="ri-bookmark-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Bookmark</a
|
|
>
|
|
<a
|
|
class="dropdown-item delete-image"
|
|
href="#"
|
|
><i
|
|
class="ri-delete-bin-5-line me-2 text-muted align-bottom"
|
|
></i
|
|
>Delete</a
|
|
>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="conversation-name">
|
|
<span class="d-none name">Lisa Parker</span
|
|
><small class="text-muted time"
|
|
>10:15 am</small
|
|
>
|
|
<span
|
|
class="text-success check-message-icon"
|
|
><i class="bx bx-check-double"></i
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<!-- end chat-conversation-list -->
|
|
</div>
|
|
<div
|
|
class="alert alert-warning alert-dismissible copyclipboard-alert px-4 fade show"
|
|
id="copyClipBoard"
|
|
role="alert"
|
|
>
|
|
Message copied
|
|
</div>
|
|
</div>
|
|
|
|
<div class="position-relative" id="channel-chat">
|
|
<div class="p-3 user-chat-topbar">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm-4 col-8">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 d-block d-lg-none me-3"
|
|
>
|
|
<a
|
|
href="javascript: void(0);"
|
|
class="user-chat-remove fs-18 p-1"
|
|
><i
|
|
class="ri-arrow-left-s-line align-bottom"
|
|
></i
|
|
></a>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="flex-shrink-0 chat-user-img online user-own-img align-self-center me-3 ms-0"
|
|
>
|
|
<img
|
|
src="assets/images/users/avatar-2.jpg"
|
|
class="rounded-circle avatar-xs"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<h5 class="text-truncate mb-0 fs-16">
|
|
<a
|
|
class="text-reset username"
|
|
data-bs-toggle="offcanvas"
|
|
href="#userProfileCanvasExample"
|
|
aria-controls="userProfileCanvasExample"
|
|
>Lisa Parker</a
|
|
>
|
|
</h5>
|
|
<p
|
|
class="text-truncate text-muted fs-14 mb-0 userStatus"
|
|
>
|
|
<small>24 Members</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8 col-4">
|
|
<ul
|
|
class="list-inline user-chat-nav text-end mb-0"
|
|
>
|
|
<li class="list-inline-item m-0">
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-ghost-secondary btn-icon"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i
|
|
data-feather="search"
|
|
class="icon-sm"
|
|
></i>
|
|
</button>
|
|
<div
|
|
class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg"
|
|
>
|
|
<div class="p-2">
|
|
<div class="search-box">
|
|
<input
|
|
type="text"
|
|
class="form-control bg-light border-light"
|
|
placeholder="Search here..."
|
|
onkeyup="searchMessages()"
|
|
id="searchMessage"
|
|
/>
|
|
<i
|
|
class="ri-search-2-line search-icon"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li
|
|
class="list-inline-item d-none d-lg-inline-block m-0"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost-secondary btn-icon"
|
|
data-bs-toggle="offcanvas"
|
|
data-bs-target="#userProfileCanvasExample"
|
|
aria-controls="userProfileCanvasExample"
|
|
>
|
|
<i data-feather="info" class="icon-sm"></i>
|
|
</button>
|
|
</li>
|
|
|
|
<li class="list-inline-item m-0">
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-ghost-secondary btn-icon"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i
|
|
data-feather="more-vertical"
|
|
class="icon-sm"
|
|
></i>
|
|
</button>
|
|
<div
|
|
class="dropdown-menu dropdown-menu-end"
|
|
>
|
|
<a
|
|
class="dropdown-item d-block d-lg-none user-profile-show"
|
|
href="#"
|
|
><i
|
|
class="ri-user-2-fill align-bottom text-muted me-2"
|
|
></i>
|
|
View Profile</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-inbox-archive-line align-bottom text-muted me-2"
|
|
></i>
|
|
Archive</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-mic-off-line align-bottom text-muted me-2"
|
|
></i>
|
|
Muted</a
|
|
>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-delete-bin-5-line align-bottom text-muted me-2"
|
|
></i>
|
|
Delete</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end chat user head -->
|
|
<div
|
|
class="chat-conversation p-3 p-lg-4"
|
|
id="chat-conversation"
|
|
data-simplebar
|
|
>
|
|
<ul
|
|
class="list-unstyled chat-conversation-list"
|
|
id="channel-conversation"
|
|
></ul>
|
|
<!-- end chat-conversation-list -->
|
|
</div>
|
|
<div
|
|
class="alert alert-warning alert-dismissible copyclipboard-alert px-4 fade show"
|
|
id="copyClipBoardChannel"
|
|
role="alert"
|
|
>
|
|
Message copied
|
|
</div>
|
|
</div>
|
|
|
|
<!-- end chat-conversation -->
|
|
|
|
<div class="chat-input-section p-3 p-lg-4">
|
|
<form id="chatinput-form" enctype="multipart/form-data">
|
|
<div class="row g-0 align-items-center">
|
|
<div class="col-auto">
|
|
<div class="chat-input-links me-2">
|
|
<div class="links-list-item">
|
|
<button
|
|
type="button"
|
|
class="btn btn-link text-decoration-none emoji-btn"
|
|
id="emoji-btn"
|
|
>
|
|
<i class="bx bx-smile align-middle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="chat-input-feedback">
|
|
Please Enter a Message
|
|
</div>
|
|
<input
|
|
type="text"
|
|
class="form-control chat-input bg-light border-light"
|
|
id="chat-input"
|
|
placeholder="Type your message..."
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="chat-input-links ms-2">
|
|
<div class="links-list-item">
|
|
<button
|
|
type="submit"
|
|
class="btn btn-success chat-send waves-effect waves-light"
|
|
>
|
|
<i
|
|
class="ri-send-plane-2-fill align-bottom"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="replyCard">
|
|
<div class="card mb-0">
|
|
<div class="card-body py-3">
|
|
<div
|
|
class="replymessage-block mb-0 d-flex align-items-start"
|
|
>
|
|
<div class="flex-grow-1">
|
|
<h5 class="conversation-name"></h5>
|
|
<p class="mb-0"></p>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<button
|
|
type="button"
|
|
id="close_toggle"
|
|
class="btn btn-sm btn-link mt-n2 me-n3 fs-18"
|
|
>
|
|
<i class="bx bx-x align-middle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end chat-wrapper -->
|
|
</div>
|
|
<!-- container-fluid -->
|
|
</div>
|
|
<!-- End Page-content -->
|
|
|
|
<footer class="footer">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<script>
|
|
document.write(new Date().getFullYear());
|
|
</script>
|
|
© Velzon.
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="text-sm-end d-none d-sm-block">
|
|
Design & Develop by Themesbrand
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<!-- end main content-->
|
|
</div>
|
|
<!-- END layout-wrapper -->
|
|
|
|
<div
|
|
class="offcanvas offcanvas-end border-0"
|
|
tabindex="-1"
|
|
id="userProfileCanvasExample"
|
|
>
|
|
<!--end offcanvas-header-->
|
|
<div class="offcanvas-body profile-offcanvas p-0">
|
|
<div class="team-cover">
|
|
<img src="assets/images/small/img-9.jpg" alt="" class="img-fluid" />
|
|
</div>
|
|
<div class="p-1 pb-4 pt-0">
|
|
<div class="team-settings">
|
|
<div class="row g-0">
|
|
<div class="col">
|
|
<div class="btn nav-btn">
|
|
<button
|
|
type="button"
|
|
class="btn-close btn-close-white"
|
|
data-bs-dismiss="offcanvas"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="user-chat-nav d-flex">
|
|
<button
|
|
type="button"
|
|
class="btn nav-btn favourite-btn active"
|
|
>
|
|
<i class="ri-star-fill"></i>
|
|
</button>
|
|
|
|
<div class="dropdown">
|
|
<a
|
|
class="btn nav-btn"
|
|
href="javascript:void(0);"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0);"
|
|
><i
|
|
class="ri-inbox-archive-line align-bottom text-muted me-2"
|
|
></i
|
|
>Archive</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0);"
|
|
><i
|
|
class="ri-mic-off-line align-bottom text-muted me-2"
|
|
></i
|
|
>Muted</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0);"
|
|
><i
|
|
class="ri-delete-bin-5-line align-bottom text-muted me-2"
|
|
></i
|
|
>Delete</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
</div>
|
|
<div class="p-3 text-center">
|
|
<img
|
|
src="assets/images/users/avatar-2.jpg"
|
|
alt=""
|
|
class="avatar-lg img-thumbnail rounded-circle mx-auto profile-img"
|
|
/>
|
|
<div class="mt-3">
|
|
<h5 class="fs-16 mb-1">
|
|
<a href="javascript:void(0);" class="link-primary username"
|
|
>Lisa Parker</a
|
|
>
|
|
</h5>
|
|
<p class="text-muted">
|
|
<i
|
|
class="ri-checkbox-blank-circle-fill me-1 align-bottom text-success"
|
|
></i
|
|
>Online
|
|
</p>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2 justify-content-center">
|
|
<button
|
|
type="button"
|
|
class="btn avatar-xs p-0"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="top"
|
|
title="Message"
|
|
>
|
|
<span class="avatar-title rounded bg-light text-body">
|
|
<i class="ri-question-answer-line"></i>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn avatar-xs p-0"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="top"
|
|
title="Favourite"
|
|
>
|
|
<span class="avatar-title rounded bg-light text-body">
|
|
<i class="ri-star-line"></i>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn avatar-xs p-0"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="top"
|
|
title="Phone"
|
|
>
|
|
<span class="avatar-title rounded bg-light text-body">
|
|
<i class="ri-phone-line"></i>
|
|
</span>
|
|
</button>
|
|
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn avatar-xs p-0"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<span class="avatar-title bg-light text-body rounded">
|
|
<i class="ri-more-fill"></i>
|
|
</span>
|
|
</button>
|
|
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0);"
|
|
><i
|
|
class="ri-inbox-archive-line align-bottom text-muted me-2"
|
|
></i
|
|
>Archive</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0);"
|
|
><i class="ri-mic-off-line align-bottom text-muted me-2"></i
|
|
>Muted</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0);"
|
|
><i
|
|
class="ri-delete-bin-5-line align-bottom text-muted me-2"
|
|
></i
|
|
>Delete</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-top border-top-dashed p-3">
|
|
<h5 class="fs-15 mb-3">Personal Details</h5>
|
|
<div class="mb-3">
|
|
<p class="text-muted text-uppercase fw-medium fs-12 mb-1">Number</p>
|
|
<h6>+(256) 2451 8974</h6>
|
|
</div>
|
|
<div class="mb-3">
|
|
<p class="text-muted text-uppercase fw-medium fs-12 mb-1">Email</p>
|
|
<h6>lisaparker@gmail.com</h6>
|
|
</div>
|
|
<div>
|
|
<p class="text-muted text-uppercase fw-medium fs-12 mb-1">
|
|
Location
|
|
</p>
|
|
<h6 class="mb-0">California, USA</h6>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-top border-top-dashed p-3">
|
|
<h5 class="fs-15 mb-3">Attached Files</h5>
|
|
|
|
<div class="vstack gap-2">
|
|
<div class="border rounded border-dashed p-2">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="avatar-xs">
|
|
<div
|
|
class="avatar-title bg-light text-secondary rounded fs-20"
|
|
>
|
|
<i class="ri-folder-zip-line"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<h5 class="fs-13 mb-1">
|
|
<a href="#" class="text-body text-truncate d-block"
|
|
>App pages.zip</a
|
|
>
|
|
</h5>
|
|
<div class="text-muted">2.2MB</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">
|
|
<div class="d-flex gap-1">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon text-muted btn-sm fs-18 material-shadow-none"
|
|
>
|
|
<i class="ri-download-2-line"></i>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-icon text-muted btn-sm fs-18 dropdown material-shadow-none"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-fill"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-share-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Share</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-bookmark-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Bookmark</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-delete-bin-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Delete</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded border-dashed p-2">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="avatar-xs">
|
|
<div
|
|
class="avatar-title bg-light text-secondary rounded fs-20"
|
|
>
|
|
<i class="ri-file-ppt-2-line"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<h5 class="fs-13 mb-1">
|
|
<a href="#" class="text-body text-truncate d-block"
|
|
>Velzon admin.ppt</a
|
|
>
|
|
</h5>
|
|
<div class="text-muted">2.4MB</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">
|
|
<div class="d-flex gap-1">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon text-muted btn-sm fs-18 material-shadow-none"
|
|
>
|
|
<i class="ri-download-2-line"></i>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-icon text-muted btn-sm fs-18 dropdown material-shadow-none"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-fill"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-share-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Share</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-bookmark-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Bookmark</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-delete-bin-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Delete</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded border-dashed p-2">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="avatar-xs">
|
|
<div
|
|
class="avatar-title bg-light text-secondary rounded fs-20"
|
|
>
|
|
<i class="ri-folder-zip-line"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<h5 class="fs-13 mb-1">
|
|
<a href="#" class="text-body text-truncate d-block"
|
|
>Images.zip</a
|
|
>
|
|
</h5>
|
|
<div class="text-muted">1.2MB</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">
|
|
<div class="d-flex gap-1">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon text-muted btn-sm fs-18 material-shadow-none"
|
|
>
|
|
<i class="ri-download-2-line"></i>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-icon text-muted btn-sm fs-18 dropdown material-shadow-none"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-fill"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-share-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Share</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-bookmark-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Bookmark</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-delete-bin-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Delete</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded border-dashed p-2">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="avatar-xs">
|
|
<div
|
|
class="avatar-title bg-light text-secondary rounded fs-20"
|
|
>
|
|
<i class="ri-image-2-line"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<h5 class="fs-13 mb-1">
|
|
<a href="#" class="text-body text-truncate d-block"
|
|
>bg-pattern.png</a
|
|
>
|
|
</h5>
|
|
<div class="text-muted">1.1MB</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">
|
|
<div class="d-flex gap-1">
|
|
<button
|
|
type="button"
|
|
class="btn btn-icon text-muted btn-sm fs-18 material-shadow-none"
|
|
>
|
|
<i class="ri-download-2-line"></i>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-icon text-muted btn-sm fs-18 dropdown material-shadow-none"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ri-more-fill"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-share-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Share</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-bookmark-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Bookmark</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
><i
|
|
class="ri-delete-bin-line align-bottom me-2 text-muted"
|
|
></i>
|
|
Delete</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-2">
|
|
<button type="button" class="btn btn-danger">
|
|
Load more <i class="ri-arrow-right-fill align-bottom ms-1"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--end offcanvas-body-->
|
|
</div>
|
|
<!--end offcanvas-->
|
|
|
|
<!--start back-to-top-->
|
|
<button
|
|
onclick="topFunction()"
|
|
class="btn btn-danger btn-icon"
|
|
id="back-to-top"
|
|
>
|
|
<i class="ri-arrow-up-line"></i>
|
|
</button>
|
|
<!--end back-to-top-->
|
|
|
|
<!--preloader-->
|
|
<div id="preloader">
|
|
<div id="status">
|
|
<div class="spinner-border text-primary avatar-sm" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="customizer-setting d-none d-md-block">
|
|
<div
|
|
class="btn-info rounded-pill shadow-lg btn btn-icon btn-lg p-2"
|
|
data-bs-toggle="offcanvas"
|
|
data-bs-target="#theme-settings-offcanvas"
|
|
aria-controls="theme-settings-offcanvas"
|
|
>
|
|
<i class="mdi mdi-spin mdi-cog-outline fs-22"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theme Settings -->
|
|
<div
|
|
class="offcanvas offcanvas-end border-0"
|
|
tabindex="-1"
|
|
id="theme-settings-offcanvas"
|
|
>
|
|
<div
|
|
class="d-flex align-items-center bg-primary bg-gradient p-3 offcanvas-header"
|
|
>
|
|
<h5 class="m-0 me-2 text-white">Theme Customizer</h5>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-close btn-close-white ms-auto"
|
|
id="customizerclose-btn"
|
|
data-bs-dismiss="offcanvas"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="offcanvas-body p-0">
|
|
<div data-simplebar class="h-100">
|
|
<div class="p-4">
|
|
<h6 class="mb-0 fw-semibold text-uppercase">Layout</h6>
|
|
<p class="text-muted">Choose your layout</p>
|
|
|
|
<div class="row gy-3">
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-layout01"
|
|
name="data-layout"
|
|
type="radio"
|
|
value="vertical"
|
|
class="form-check-input"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="customizer-layout01"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Vertical</h5>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-layout02"
|
|
name="data-layout"
|
|
type="radio"
|
|
value="horizontal"
|
|
class="form-check-input"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="customizer-layout02"
|
|
>
|
|
<span class="d-flex h-100 flex-column gap-1">
|
|
<span
|
|
class="bg-light d-flex p-1 gap-1 align-items-center"
|
|
>
|
|
<span
|
|
class="d-block p-1 bg-primary-subtle rounded me-1"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 px-2 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Horizontal</h5>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-layout03"
|
|
name="data-layout"
|
|
type="radio"
|
|
value="twocolumn"
|
|
class="form-check-input"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="customizer-layout03"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span class="bg-light d-flex h-100 flex-column gap-1">
|
|
<span
|
|
class="d-block p-1 bg-primary-subtle mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Two Column</h5>
|
|
</div>
|
|
<!-- end col -->
|
|
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-layout04"
|
|
name="data-layout"
|
|
type="radio"
|
|
value="semibox"
|
|
class="form-check-input"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="customizer-layout04"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0 p-1">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column pt-1 pe-2">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Semi Box</h5>
|
|
</div>
|
|
<!-- end col -->
|
|
</div>
|
|
|
|
<div class="form-check form-switch form-switch-md mb-3 mt-4">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="sidebarUserProfile"
|
|
/>
|
|
<label class="form-check-label" for="sidebarUserProfile"
|
|
>Sidebar User Profile Avatar</label
|
|
>
|
|
</div>
|
|
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Theme</h6>
|
|
<p class="text-muted">Choose your suitable Theme.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme01"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="default"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme01">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo/default.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Default</h5>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme02"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="saas"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme02">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo//saas.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Sass</h5>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme03"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="corporate"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme03">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo//corporate.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Corporate</h5>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme04"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="galaxy"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme04">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo//galaxy.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Galaxy</h5>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme05"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="material"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme05">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo//material.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Material</h5>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme06"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="creative"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme06">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo/creative.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Creative</h5>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme07"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="minimal"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme07">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo/minimal.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Minimal</h5>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme08"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="modern"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme08">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo/modern.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Modern</h5>
|
|
</div>
|
|
<!-- end col -->
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme09"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="interactive"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme09">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo/interactive.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Interactive</h5>
|
|
</div>
|
|
<!-- end col -->
|
|
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme10"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="classic"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme10">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo/classic.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Classic</h5>
|
|
</div>
|
|
<!-- end col -->
|
|
|
|
<div class="col-6">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
id="customizer-theme11"
|
|
name="data-theme"
|
|
type="radio"
|
|
value="vintage"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label p-0" for="customizer-theme11">
|
|
<img
|
|
src="https://themesbrand.com/velzon/assets/images/demo/vintage.png"
|
|
alt=""
|
|
class="img-fluid"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center fw-medium mt-2">Vintage</h5>
|
|
</div>
|
|
<!-- end col -->
|
|
</div>
|
|
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Color Scheme</h6>
|
|
<p class="text-muted">Choose Light or Dark Scheme.</p>
|
|
|
|
<div class="colorscheme-cardradio">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-bs-theme"
|
|
id="layout-mode-light"
|
|
value="light"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="layout-mode-light"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Light</h5>
|
|
</div>
|
|
|
|
<div class="col-4">
|
|
<div class="form-check card-radio dark">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-bs-theme"
|
|
id="layout-mode-dark"
|
|
value="dark"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 bg-dark material-shadow"
|
|
for="layout-mode-dark"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-white bg-opacity-10 d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-white bg-opacity-10 rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span
|
|
class="bg-white bg-opacity-10 d-block p-1"
|
|
></span>
|
|
<span
|
|
class="bg-white bg-opacity-10 d-block p-1 mt-auto"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebar-visibility">
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">
|
|
Sidebar Visibility
|
|
</h6>
|
|
<p class="text-muted">Choose show or Hidden sidebar.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-visibility"
|
|
id="sidebar-visibility-show"
|
|
value="show"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="sidebar-visibility-show"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0 p-1">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column pt-1 pe-2">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Show</h5>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-visibility"
|
|
id="sidebar-visibility-hidden"
|
|
value="hidden"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 px-2 material-shadow"
|
|
for="sidebar-visibility-hidden"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column pt-1 px-2">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Hidden</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="layout-width">
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Layout Width</h6>
|
|
<p class="text-muted">Choose Fluid or Boxed layout.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-layout-width"
|
|
id="layout-width-fluid"
|
|
value="fluid"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="layout-width-fluid"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Fluid</h5>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-layout-width"
|
|
id="layout-width-boxed"
|
|
value="boxed"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 px-2 material-shadow"
|
|
for="layout-width-boxed"
|
|
>
|
|
<span class="d-flex gap-1 h-100 border-start border-end">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Boxed</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="layout-position">
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">
|
|
Layout Position
|
|
</h6>
|
|
<p class="text-muted">
|
|
Choose Fixed or Scrollable Layout Position.
|
|
</p>
|
|
|
|
<div class="btn-group radio" role="group">
|
|
<input
|
|
type="radio"
|
|
class="btn-check"
|
|
name="data-layout-position"
|
|
id="layout-position-fixed"
|
|
value="fixed"
|
|
/>
|
|
<label class="btn btn-light w-sm" for="layout-position-fixed"
|
|
>Fixed</label
|
|
>
|
|
|
|
<input
|
|
type="radio"
|
|
class="btn-check"
|
|
name="data-layout-position"
|
|
id="layout-position-scrollable"
|
|
value="scrollable"
|
|
/>
|
|
<label
|
|
class="btn btn-light w-sm ms-0"
|
|
for="layout-position-scrollable"
|
|
>Scrollable</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Topbar Color</h6>
|
|
<p class="text-muted">Choose Light or Dark Topbar Color.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-topbar"
|
|
id="topbar-color-light"
|
|
value="light"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="topbar-color-light"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Light</h5>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="form-check card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-topbar"
|
|
id="topbar-color-dark"
|
|
value="dark"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="topbar-color-dark"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-primary d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebar-size">
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Size</h6>
|
|
<p class="text-muted">Choose a size of Sidebar.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-size"
|
|
id="sidebar-size-default"
|
|
value="lg"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="sidebar-size-default"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Default</h5>
|
|
</div>
|
|
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-size"
|
|
id="sidebar-size-compact"
|
|
value="md"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="sidebar-size-compact"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Compact</h5>
|
|
</div>
|
|
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-size"
|
|
id="sidebar-size-small"
|
|
value="sm"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="sidebar-size-small"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span class="bg-light d-flex h-100 flex-column gap-1">
|
|
<span
|
|
class="d-block p-1 bg-primary-subtle mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Small (Icon View)</h5>
|
|
</div>
|
|
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-size"
|
|
id="sidebar-size-small-hover"
|
|
value="sm-hover"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="sidebar-size-small-hover"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span class="bg-light d-flex h-100 flex-column gap-1">
|
|
<span
|
|
class="d-block p-1 bg-primary-subtle mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Small Hover View</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebar-view">
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar View</h6>
|
|
<p class="text-muted">Choose Default or Detached Sidebar view.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-layout-style"
|
|
id="sidebar-view-default"
|
|
value="default"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="sidebar-view-default"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Default</h5>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-layout-style"
|
|
id="sidebar-view-detached"
|
|
value="detached"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="sidebar-view-detached"
|
|
>
|
|
<span class="d-flex h-100 flex-column">
|
|
<span
|
|
class="bg-light d-flex p-1 gap-1 align-items-center px-2"
|
|
>
|
|
<span
|
|
class="d-block p-1 bg-primary-subtle rounded me-1"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 pb-0 px-2 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
<span class="d-flex gap-1 h-100 p-1 px-2">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<span class="bg-light d-block p-1 mt-auto px-2"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Detached</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="sidebar-color">
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">
|
|
Sidebar Color
|
|
</h6>
|
|
<p class="text-muted">Choose a color of Sidebar.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div
|
|
class="form-check sidebar-setting card-radio"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseBgGradient.show"
|
|
>
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar"
|
|
id="sidebar-color-light"
|
|
value="light"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="sidebar-color-light"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-white border-end d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Light</h5>
|
|
</div>
|
|
<div class="col-4">
|
|
<div
|
|
class="form-check sidebar-setting card-radio"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseBgGradient.show"
|
|
>
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar"
|
|
id="sidebar-color-dark"
|
|
value="dark"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="sidebar-color-dark"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-primary d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-white bg-opacity-10 rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
|
</div>
|
|
<div class="col-4">
|
|
<button
|
|
class="btn btn-link avatar-md w-100 p-0 overflow-hidden border collapsed"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseBgGradient"
|
|
aria-expanded="false"
|
|
aria-controls="collapseBgGradient"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-vertical-gradient d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-white bg-opacity-10 rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<h5 class="fs-13 text-center mt-2">Gradient</h5>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="collapse" id="collapseBgGradient">
|
|
<div
|
|
class="d-flex gap-2 flex-wrap img-switch p-2 px-3 bg-light rounded"
|
|
>
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar"
|
|
id="sidebar-color-gradient"
|
|
value="gradient"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-xs rounded-circle"
|
|
for="sidebar-color-gradient"
|
|
>
|
|
<span
|
|
class="avatar-title rounded-circle bg-vertical-gradient"
|
|
></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar"
|
|
id="sidebar-color-gradient-2"
|
|
value="gradient-2"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-xs rounded-circle"
|
|
for="sidebar-color-gradient-2"
|
|
>
|
|
<span
|
|
class="avatar-title rounded-circle bg-vertical-gradient-2"
|
|
></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar"
|
|
id="sidebar-color-gradient-3"
|
|
value="gradient-3"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-xs rounded-circle"
|
|
for="sidebar-color-gradient-3"
|
|
>
|
|
<span
|
|
class="avatar-title rounded-circle bg-vertical-gradient-3"
|
|
></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar"
|
|
id="sidebar-color-gradient-4"
|
|
value="gradient-4"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-xs rounded-circle"
|
|
for="sidebar-color-gradient-4"
|
|
>
|
|
<span
|
|
class="avatar-title rounded-circle bg-vertical-gradient-4"
|
|
></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebar-img">
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">
|
|
Sidebar Images
|
|
</h6>
|
|
<p class="text-muted">Choose a image of Sidebar.</p>
|
|
|
|
<div class="d-flex gap-2 flex-wrap img-switch">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-image"
|
|
id="sidebarimg-none"
|
|
value="none"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-sm h-auto"
|
|
for="sidebarimg-none"
|
|
>
|
|
<span
|
|
class="avatar-md w-auto bg-light d-flex align-items-center justify-content-center"
|
|
>
|
|
<i class="ri-close-fill fs-20"></i>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-image"
|
|
id="sidebarimg-01"
|
|
value="img-1"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-sm h-auto"
|
|
for="sidebarimg-01"
|
|
>
|
|
<img
|
|
src="assets/images/sidebar/img-1.jpg"
|
|
alt=""
|
|
class="avatar-md w-auto object-fit-cover"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-image"
|
|
id="sidebarimg-02"
|
|
value="img-2"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-sm h-auto"
|
|
for="sidebarimg-02"
|
|
>
|
|
<img
|
|
src="assets/images/sidebar/img-2.jpg"
|
|
alt=""
|
|
class="avatar-md w-auto object-fit-cover"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-image"
|
|
id="sidebarimg-03"
|
|
value="img-3"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-sm h-auto"
|
|
for="sidebarimg-03"
|
|
>
|
|
<img
|
|
src="assets/images/sidebar/img-3.jpg"
|
|
alt=""
|
|
class="avatar-md w-auto object-fit-cover"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-sidebar-image"
|
|
id="sidebarimg-04"
|
|
value="img-4"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-sm h-auto"
|
|
for="sidebarimg-04"
|
|
>
|
|
<img
|
|
src="assets/images/sidebar/img-4.jpg"
|
|
alt=""
|
|
class="avatar-md w-auto object-fit-cover"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebar-color">
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">
|
|
Primary Color
|
|
</h6>
|
|
<p class="text-muted">Choose a color of Primary.</p>
|
|
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-theme-colors"
|
|
id="themeColor-01"
|
|
value="default"
|
|
/>
|
|
<label
|
|
class="form-check-label avatar-xs p-0"
|
|
for="themeColor-01"
|
|
></label>
|
|
</div>
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-theme-colors"
|
|
id="themeColor-02"
|
|
value="green"
|
|
/>
|
|
<label
|
|
class="form-check-label avatar-xs p-0"
|
|
for="themeColor-02"
|
|
></label>
|
|
</div>
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-theme-colors"
|
|
id="themeColor-03"
|
|
value="purple"
|
|
/>
|
|
<label
|
|
class="form-check-label avatar-xs p-0"
|
|
for="themeColor-03"
|
|
></label>
|
|
</div>
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-theme-colors"
|
|
id="themeColor-04"
|
|
value="blue"
|
|
/>
|
|
<label
|
|
class="form-check-label avatar-xs p-0"
|
|
for="themeColor-04"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="preloader-menu">
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Preloader</h6>
|
|
<p class="text-muted">Choose a preloader.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-preloader"
|
|
id="preloader-view-custom"
|
|
value="enable"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="preloader-view-custom"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<!-- <div id="preloader"> -->
|
|
<div
|
|
id="status"
|
|
class="d-flex align-items-center justify-content-center"
|
|
>
|
|
<div
|
|
class="spinner-border text-primary avatar-xxs m-auto"
|
|
role="status"
|
|
>
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Enable</h5>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-preloader"
|
|
id="preloader-view-none"
|
|
value="disable"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100 material-shadow"
|
|
for="preloader-view-none"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Disable</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end preloader-menu -->
|
|
|
|
<div id="body-img" style="display: none">
|
|
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">
|
|
Background Image
|
|
</h6>
|
|
<p class="text-muted">Choose a body background image.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-body-image"
|
|
id="body-img-none"
|
|
value="none"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100"
|
|
data-body-image="none"
|
|
for="body-img-none"
|
|
>
|
|
<span class="d-flex gap-1 h-100">
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="bg-light d-flex h-100 flex-column gap-1 p-1"
|
|
>
|
|
<span
|
|
class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
<span
|
|
class="d-block p-1 px-2 pb-0 bg-primary-subtle"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="flex-grow-1">
|
|
<span class="d-flex h-100 flex-column">
|
|
<span class="bg-light d-block p-1"></span>
|
|
<span class="bg-light d-block p-1 mt-auto"></span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">None</h5>
|
|
</div>
|
|
<!-- end col -->
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-body-image"
|
|
id="body-img-one"
|
|
value="img-1"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100"
|
|
data-body-image="img-1"
|
|
for="body-img-one"
|
|
>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">One</h5>
|
|
</div>
|
|
<!-- end col -->
|
|
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-body-image"
|
|
id="body-img-two"
|
|
value="img-2"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100"
|
|
data-body-image="img-2"
|
|
for="body-img-two"
|
|
>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Two</h5>
|
|
</div>
|
|
<!-- end col -->
|
|
|
|
<div class="col-4">
|
|
<div class="form-check sidebar-setting card-radio">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="data-body-image"
|
|
id="body-img-three"
|
|
value="img-3"
|
|
/>
|
|
<label
|
|
class="form-check-label p-0 avatar-md w-100"
|
|
data-body-image="img-3"
|
|
for="body-img-three"
|
|
>
|
|
</label>
|
|
</div>
|
|
<h5 class="fs-13 text-center mt-2">Three</h5>
|
|
</div>
|
|
<!-- end col -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="offcanvas-footer border-top p-3 text-center">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<button type="button" class="btn btn-light w-100" id="reset-layout">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
<div class="col-6">
|
|
<a
|
|
href="https://1.envato.market/velzon-admin"
|
|
target="_blank"
|
|
class="btn btn-primary w-100"
|
|
>Buy Now</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JAVASCRIPT -->
|
|
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/libs/simplebar/simplebar.min.js"></script>
|
|
<script src="assets/libs/node-waves/waves.min.js"></script>
|
|
<script src="assets/libs/feather-icons/feather.min.js"></script>
|
|
<script src="assets/js/pages/plugins/lord-icon-2.1.0.js"></script>
|
|
<script src="assets/js/plugins.js"></script>
|
|
|
|
<!-- glightbox js -->
|
|
<script src="assets/libs/glightbox/js/glightbox.min.js"></script>
|
|
|
|
<!-- fgEmojiPicker js -->
|
|
<script src="assets/libs/fg-emoji-picker/fgEmojiPicker.js"></script>
|
|
|
|
<!-- chat init js -->
|
|
<script src="assets/js/pages/chat.init.js"></script>
|
|
|
|
<!-- App js -->
|
|
<script src="assets/js/app.js"></script>
|
|
</body>
|
|
|
|
<!-- Mirrored from themesbrand.com/velzon/html/master/apps-chat.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 08 May 2025 07:13:43 GMT -->
|
|
</html>
|