5141 lines
373 KiB
HTML
5141 lines
373 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/widgets.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 08 May 2025 07:17:39 GMT -->
|
||
<head>
|
||
|
||
<meta charset="utf-8" />
|
||
<title>Widgets | 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">
|
||
|
||
<!-- plugin css -->
|
||
<link href="assets/libs/jsvectormap/jsvectormap.min.css" rel="stylesheet" type="text/css" />
|
||
|
||
<link href="assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" />
|
||
|
||
<!-- 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">
|
||
|
||
<!-- start page title -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
|
||
<h4 class="mb-sm-0">Widgets</h4>
|
||
|
||
<div class="page-title-right">
|
||
<ol class="breadcrumb m-0">
|
||
<li class="breadcrumb-item"><a href="javascript: void(0);">Velzon</a></li>
|
||
<li class="breadcrumb-item active">Widgets</li>
|
||
</ol>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end page title -->
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h5 class="text-decoration-underline mb-3 pb-1">Tile Boxs</h5>
|
||
</div>
|
||
</div>
|
||
<!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xl-3 col-md-6">
|
||
<!-- card -->
|
||
<div class="card card-animate">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-grow-1">
|
||
<p class="text-uppercase fw-medium text-muted mb-0">Total Earnings</p>
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<h5 class="text-success fs-14 mb-0">
|
||
<i class="ri-arrow-right-up-line fs-13 align-middle"></i> +16.24 %
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-end justify-content-between mt-4">
|
||
<div>
|
||
<h4 class="fs-22 fw-semibold ff-secondary mb-4">$<span class="counter-value" data-target="559.25">0</span>k</h4>
|
||
<a href="#" class="text-decoration-underline">View net earnings</a>
|
||
</div>
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-success-subtle rounded fs-3 material-shadow">
|
||
<i class="bx bx-dollar-circle text-success"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div><!-- end col -->
|
||
|
||
<div class="col-xl-3 col-md-6">
|
||
<!-- card -->
|
||
<div class="card card-animate bg-info">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-grow-1">
|
||
<p class="text-uppercase fw-medium text-white-50 mb-0">Orders</p>
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<h5 class="text-warning fs-14 mb-0">
|
||
<i class="ri-arrow-right-down-line fs-13 align-middle"></i> -3.57 %
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-end justify-content-between mt-4">
|
||
<div>
|
||
<h4 class="fs-22 fw-semibold ff-secondary mb-4 text-white"><span class="counter-value" data-target="36894">0</span></h4>
|
||
<a href="#" class="text-decoration-underline text-white-50">View all orders</a>
|
||
</div>
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-white bg-opacity-25 rounded fs-3 material-shadow">
|
||
<i class="bx bx-shopping-bag text-white"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div><!-- end col -->
|
||
|
||
<div class="col-xl-3 col-md-6">
|
||
<!-- card -->
|
||
<div class="card card-animate">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-grow-1">
|
||
<p class="text-uppercase fw-medium text-muted mb-0">Customers</p>
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<h5 class="text-success fs-14 mb-0">
|
||
<i class="ri-arrow-right-up-line fs-13 align-middle"></i> +29.08 %
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-end justify-content-between mt-4">
|
||
<div>
|
||
<h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="183.35">0</span>M</h4>
|
||
<a href="#" class="text-decoration-underline">See details</a>
|
||
</div>
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-warning-subtle rounded fs-3 material-shadow">
|
||
<i class="bx bx-user-circle text-warning"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div><!-- end col -->
|
||
|
||
<div class="col-xl-3 col-md-6">
|
||
<!-- card -->
|
||
<div class="card card-animate">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-grow-1">
|
||
<p class="text-uppercase fw-medium text-muted mb-0">My Balance</p>
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<h5 class="text-muted fs-14 mb-0">
|
||
+0.00 %
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-end justify-content-between mt-4">
|
||
<div>
|
||
<h4 class="fs-22 fw-semibold ff-secondary mb-4">$<span class="counter-value" data-target="165.89">0</span>k</h4>
|
||
<a href="#" class="text-decoration-underline">Withdraw money</a>
|
||
</div>
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-primary-subtle rounded fs-3 material-shadow">
|
||
<i class="bx bx-wallet text-primary"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div><!-- end col -->
|
||
</div> <!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xl-12">
|
||
<div class="card crm-widget">
|
||
<div class="card-body p-0">
|
||
<div class="row row-cols-md-3 row-cols-1">
|
||
<div class="col col-lg border-end">
|
||
<div class="py-4 px-3">
|
||
<h5 class="text-muted text-uppercase fs-13">Campaign Sent <i class="ri-arrow-up-circle-line text-success fs-18 float-end align-middle"></i>
|
||
</h5>
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<i class="ri-space-ship-line display-6 text-muted"></i>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h2 class="mb-0"><span class="counter-value" data-target="197">0</span></h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
<div class="col col-lg border-end">
|
||
<div class="mt-3 mt-md-0 py-4 px-3">
|
||
<h5 class="text-muted text-uppercase fs-13">Annual Profit <i class="ri-arrow-up-circle-line text-success fs-18 float-end align-middle"></i></h5>
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<i class="ri-exchange-dollar-line display-6 text-muted"></i>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h2 class="mb-0">$<span class="counter-value" data-target="489.4">0</span>k</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
<div class="col col-lg border-end">
|
||
<div class="mt-3 mt-md-0 py-4 px-3">
|
||
<h5 class="text-muted text-uppercase fs-13">
|
||
Lead Coversation <i class="ri-arrow-down-circle-line text-danger fs-18 float-end align-middle"></i>
|
||
</h5>
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<i class="ri-pulse-line display-6 text-muted"></i>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h2 class="mb-0"><span class="counter-value" data-target="32.89">0</span>%</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
<div class="col col-lg border-end">
|
||
<div class="mt-3 mt-lg-0 py-4 px-3">
|
||
<h5 class="text-muted text-uppercase fs-13">
|
||
Daily Average Income <i class="ri-arrow-up-circle-line text-success fs-18 float-end align-middle"></i>
|
||
</h5>
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<i class="ri-trophy-line display-6 text-muted"></i>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h2 class="mb-0">$<span class="counter-value" data-target="1596.5">0</span></h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
<div class="col col-lg">
|
||
<div class="mt-3 mt-lg-0 py-4 px-3">
|
||
<h5 class="text-muted text-uppercase fs-13">
|
||
Annual Deals <i class="ri-arrow-down-circle-line text-danger fs-18 float-end align-middle"></i>
|
||
</h5>
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<i class="ri-service-line display-6 text-muted"></i>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h2 class="mb-0"><span class="counter-value" data-target="2659">0</span></h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div><!-- end row -->
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div><!-- end col -->
|
||
</div><!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-animate">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between">
|
||
<div>
|
||
<p class="fw-medium text-muted mb-0">Users</p>
|
||
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="28.05">0</span>k</h2>
|
||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"><i class="ri-arrow-up-line align-middle"></i> 16.24 % </span> vs. previous month</p>
|
||
</div>
|
||
<div>
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-info-subtle rounded-circle fs-2">
|
||
<i data-feather="users" class="text-info material-shadow"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div> <!-- end card-->
|
||
</div> <!-- end col-->
|
||
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-animate">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between">
|
||
<div>
|
||
<p class="fw-medium text-muted mb-0">Sessions</p>
|
||
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="97.66">0</span>k</h2>
|
||
<p class="mb-0 text-muted"><span class="badge bg-light text-danger mb-0"><i class="ri-arrow-down-line align-middle"></i> 3.96 % </span> vs. previous month</p>
|
||
</div>
|
||
<div>
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-info-subtle rounded-circle fs-2 material-shadow">
|
||
<i data-feather="activity" class="text-info"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div> <!-- end card-->
|
||
</div> <!-- end col-->
|
||
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-animate bg-primary">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between">
|
||
<div>
|
||
<p class="fw-medium text-white-50 mb-0">Avg. Visit Duration</p>
|
||
<h2 class="mt-4 ff-secondary fw-semibold text-white"><span class="counter-value" data-target="3">0</span>m <span class="counter-value" data-target="40">0</span>sec</h2>
|
||
<p class="mb-0 text-white-50"><span class="badge bg-white bg-opacity-25 text-white mb-0"><i class="ri-arrow-down-line align-middle"></i> 0.24 % </span> vs. previous month</p>
|
||
</div>
|
||
<div>
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-white bg-opacity-25 rounded-circle fs-2 material-shadow">
|
||
<i data-feather="clock" class="text-white"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div> <!-- end card-->
|
||
</div> <!-- end col-->
|
||
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-animate">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between">
|
||
<div>
|
||
<p class="fw-medium text-muted mb-0">Bounce Rate</p>
|
||
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="33.48">0</span>%</h2>
|
||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"><i class="ri-arrow-up-line align-middle"></i> 7.05 % </span> vs. previous month</p>
|
||
</div>
|
||
<div>
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-info-subtle rounded-circle fs-2 material-shadow">
|
||
<i data-feather="external-link" class="text-info"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div> <!-- end card-->
|
||
</div> <!-- end col-->
|
||
</div> <!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card bg-success card-height-100">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-white bg-opacity-25 text-white rounded-2 fs-2 material-shadow">
|
||
<i class="bx bx-shopping-bag"></i>
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<p class="text-uppercase fw-medium text-white-50 mb-3">Total Sales</p>
|
||
<h4 class="fs-4 mb-3 text-white"><span class="counter-value" data-target="2045">0</span></h4>
|
||
<p class="text-white-50 mb-0">From 1930 last year</p>
|
||
</div>
|
||
<div class="flex-shrink-0 align-self-center">
|
||
<span class="badge bg-white bg-opacity-25 text-white fs-12"><i class="ri-arrow-up-s-line fs-13 align-middle me-1"></i>6.11 %<span></span></span>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div>
|
||
</div> <!-- end col-->
|
||
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-warning-subtle text-warning rounded-2 fs-2 material-shadow">
|
||
<i class="bx bxs-user-account"></i>
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<p class="text-uppercase fw-medium text-muted mb-3">Number of Users</p>
|
||
<h4 class="fs-4 mb-3"><span class="counter-value" data-target="7522">0</span></h4>
|
||
<p class="text-muted mb-0">From 9530 last year</p>
|
||
</div>
|
||
<div class="flex-shrink-0 align-self-center">
|
||
<span class="badge bg-danger-subtle text-danger fs-12"><i class="ri-arrow-down-s-line fs-13 align-middle me-1"></i>10.35 %</span>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div>
|
||
</div> <!-- end col-->
|
||
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-danger-subtle text-danger rounded-2 fs-2 material-shadow">
|
||
<i class="bx bxs-badge-dollar"></i>
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<p class="text-uppercase fw-medium text-muted mb-3">Total Revenue</p>
|
||
<h4 class="fs-4 mb-3">$<span class="counter-value" data-target="2845.05">0</span></h4>
|
||
<p class="text-muted mb-0">From $1,750.04 last year</p>
|
||
</div>
|
||
<div class="flex-shrink-0 align-self-center">
|
||
<span class="badge bg-success-subtle text-success fs-12"><i class="ri-arrow-up-s-line fs-13 align-middle me-1"></i>22.96 %<span></span></span>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div>
|
||
</div> <!-- end col-->
|
||
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="avatar-sm flex-shrink-0">
|
||
<span class="avatar-title bg-info-subtle text-info rounded-2 fs-2 material-shadow">
|
||
<i class="bx bx-store-alt"></i>
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<p class="text-uppercase fw-medium text-muted mb-3">Number of Stores</p>
|
||
<h4 class="fs-4 mb-3"><span class="counter-value" data-target="405">0</span>k</h4>
|
||
<p class="text-muted mb-0">From 308 last year</p>
|
||
</div>
|
||
<div class="flex-shrink-0 align-self-center">
|
||
<span class="badge bg-success-subtle text-success fs-12"><i class="ri-arrow-up-s-line fs-13 align-middle me-1"></i>16.31 %</span>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div>
|
||
</div> <!-- end col-->
|
||
</div> <!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-body">
|
||
<div class="dropdown float-end">
|
||
<a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="text-muted fs-18"><i class="mdi mdi-dots-vertical"></i></span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-end">
|
||
<a class="dropdown-item" href="#!">Favorite</a>
|
||
<a class="dropdown-item" href="#!">Apply Now</a>
|
||
</div>
|
||
</div>
|
||
<div class="mb-4 pb-2">
|
||
<img src="assets/images/companies/img-3.png" alt="" class="avatar-sm">
|
||
</div>
|
||
<a href="#!">
|
||
<h6 class="fs-15 fw-semibold">Marketing Director <span class="text-muted fs-13">(2-4 Yrs Exp.)</span></h6>
|
||
</a>
|
||
<p class="text-muted mb-0"><i class="ri-building-line align-bottom"></i> Themesbrand <span class="ms-2"><i class="ri-map-pin-2-line align-bottom"></i> California</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-body">
|
||
<div class="dropdown float-end">
|
||
<a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="text-muted fs-18"><i class="mdi mdi-dots-vertical"></i></span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-end">
|
||
<a class="dropdown-item" href="#!">Favorite</a>
|
||
<a class="dropdown-item" href="#!">Apply Now</a>
|
||
</div>
|
||
</div>
|
||
<div class="mb-4 pb-2">
|
||
<img src="assets/images/companies/img-4.png" alt="" class="avatar-sm">
|
||
</div>
|
||
<a href="#!">
|
||
<h6 class="fs-15 fw-semibold">Sr. Web Designer <span class="text-muted fs-13">(2+ Yrs Exp.)</span></h6>
|
||
</a>
|
||
<p class="text-muted mb-0"><i class="ri-building-line align-bottom"></i> Themesbrand <span class="ms-2"><i class="ri-map-pin-2-line align-bottom"></i> California</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-height-100 bg-primary-subtle shadow-none bg-opacity-10">
|
||
<div class="card-body">
|
||
<div class="dropdown float-end">
|
||
<a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="text-muted fs-18"><i class="mdi mdi-dots-vertical"></i></span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-end">
|
||
<a class="dropdown-item" href="#!">Favorite</a>
|
||
<a class="dropdown-item" href="#!">Apply Now</a>
|
||
</div>
|
||
</div>
|
||
<div class="mb-4 pb-2">
|
||
<img src="assets/images/companies/img-6.png" alt="" class="avatar-sm">
|
||
</div>
|
||
<a href="#!">
|
||
<h6 class="fs-15 fw-semibold">Sr. Web Designer <span class="text-muted fs-13">(2+ Yrs Exp.)</span></h6>
|
||
</a>
|
||
<p class="text-muted mb-0"><i class="ri-building-line align-bottom"></i> Themesbrand <span class="ms-2"><i class="ri-map-pin-2-line align-bottom"></i> California</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-height-100 bg-info-subtle shadow-none bg-opacity-10">
|
||
<div class="card-body">
|
||
<div class="dropdown float-end">
|
||
<a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="text-muted fs-18"><i class="mdi mdi-dots-vertical"></i></span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-end">
|
||
<a class="dropdown-item" href="#!">Favorite</a>
|
||
<a class="dropdown-item" href="#!">Apply Now</a>
|
||
</div>
|
||
</div>
|
||
<div class="mb-4 pb-2">
|
||
<img src="assets/images/companies/img-8.png" alt="" class="avatar-sm">
|
||
</div>
|
||
<a href="#!">
|
||
<h6 class="fs-15 fw-semibold">Sr. Web Designer <span class="text-muted fs-13">(2+ Yrs Exp.)</span></h6>
|
||
</a>
|
||
<p class="text-muted mb-0"><i class="ri-building-line align-bottom"></i> Themesbrand <span class="ms-2"><i class="ri-map-pin-2-line align-bottom"></i> California</span></p>
|
||
</div>
|
||
</div>
|
||
</div> <!-- end col-->
|
||
</div> <!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h5 class="text-decoration-underline mb-3 mt-2 pb-3">Other Widgets</h5>
|
||
</div>
|
||
</div>
|
||
<!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xl-4">
|
||
<div class="card">
|
||
<div class="card-body p-0">
|
||
<div class="alert alert-warning border-0 rounded-top rounded-0 m-0 d-flex align-items-center" role="alert">
|
||
<i data-feather="alert-triangle" class="text-warning me-2 icon-sm"></i>
|
||
<div class="flex-grow-1 text-truncate">
|
||
Your free trial expired in <b>17</b> days.
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<a href="pages-pricing.html" class="text-reset text-decoration-underline"><b>Upgrade</b></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row align-items-end">
|
||
<div class="col-sm-8">
|
||
<div class="p-3">
|
||
<p class="fs-16 lh-base">Upgrade your plan from a <span class="fw-semibold">Free trial</span>, to ‘Premium Plan’ <i class="mdi mdi-arrow-right"></i></p>
|
||
<div class="mt-3">
|
||
<a href="pages-pricing.html" class="btn btn-success">Upgrade Account!</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="px-3">
|
||
<img src="assets/images/user-illustarator-2.png" class="img-fluid" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- end card-body-->
|
||
</div>
|
||
</div> <!-- end col-->
|
||
<div class="col-xl-4">
|
||
<div class="card bg-primary">
|
||
<div class="card-body p-0">
|
||
<div class="alert alert-danger rounded-top alert-solid alert-label-icon border-0 rounded-0 m-0 d-flex align-items-center" role="alert">
|
||
<i class="ri-error-warning-line label-icon"></i>
|
||
<div class="flex-grow-1 text-truncate">
|
||
Your free trial expired in <b>17</b> days.
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<a href="pages-pricing.html" class="text-reset text-decoration-underline"><b>Upgrade</b></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row align-items-end">
|
||
<div class="col-sm-8">
|
||
<div class="p-3">
|
||
<p class="fs-16 lh-base text-white">Upgrade your plan from a <span class="fw-semibold">Free trial</span>, to ‘Premium Plan’ <i class="mdi mdi-arrow-right"></i></p>
|
||
<div class="mt-3">
|
||
<a href="pages-pricing.html" class="btn btn-info">Upgrade Account!</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="px-3">
|
||
<img src="assets/images/user-illustarator-1.png" class="img-fluid" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- end card-body-->
|
||
</div>
|
||
</div> <!-- end col-->
|
||
<div class="col-xl-4">
|
||
<div class="card">
|
||
<div class="card-body p-0">
|
||
<div class="alert alert-warning border-0 rounded-top rounded-0 m-0 d-flex align-items-center" role="alert">
|
||
<div class="flex-grow-1 text-truncate">
|
||
We will choose a gift for you in <b>5</b> days.
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<a href="pages-pricing.html" class="text-reset text-decoration-underline"><b>Get Free Gift</b></a>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex p-3">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar-md me-3">
|
||
<span class="avatar-title bg-danger-subtle rounded-circle fs-1">
|
||
<i class="ri-gift-2-line text-danger"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p class="fs-16 lh-base">Personalized <span class="fw-semibold">Gift Boxes</span>, with attitude, Let's collect your Xmas box <i class="mdi mdi-arrow-right"></i></p>
|
||
<div class="mt-3">
|
||
<a href="pages-pricing.html" class="btn btn-secondary">Get a Free Gift</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- end card-body-->
|
||
</div>
|
||
</div> <!-- end col-->
|
||
</div> <!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-4">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h5 class="fs-15 fw-semibold">Brand Logo Design - MD</h5>
|
||
<p class="text-muted">Graphics Work</p>
|
||
<div class="d-flex flex-wrap justify-content-evenly">
|
||
<p class="text-muted mb-0">
|
||
<i class="mdi mdi-numeric-1-circle text-success fs-18 align-middle me-2"></i>Completed
|
||
</p>
|
||
<p class="text-muted mb-0">
|
||
<i class="mdi mdi-numeric-3-circle text-info fs-18 align-middle me-2"></i>In Progress
|
||
</p>
|
||
<p class="text-muted mb-0"><i class="mdi mdi-numeric-2-circle text-primary fs-18 align-middle me-2"></i>To Do</p>
|
||
</div>
|
||
</div>
|
||
<div class="progress animated-progress rounded-bottom rounded-0" style="height: 6px;">
|
||
<div class="progress-bar bg-success rounded-0" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||
<div class="progress-bar bg-info rounded-0" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||
<div class="progress-bar rounded-0" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
<div class="col-lg-4">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h5 class="fs-15 fw-semibold">Redesign - Landing Page</h5>
|
||
<p class="text-muted">UI/UX Design</p>
|
||
<div class="d-flex flex-wrap justify-content-evenly">
|
||
<p class="text-muted mb-0">
|
||
<i class="mdi mdi-numeric-3-circle text-success fs-18 align-middle me-2"></i>Completed
|
||
</p>
|
||
<p class="text-muted mb-0"><i class="mdi mdi-numeric-0-circle text-info fs-18 align-middle me-2"></i>In Progress</p>
|
||
<p class="text-muted mb-0"><i class="mdi mdi-numeric-8-circle text-primary fs-18 align-middle me-2"></i>To Do</p>
|
||
</div>
|
||
</div>
|
||
<div class="progress animated-progress rounded-bottom rounded-0" style="height: 6px;">
|
||
<div class="progress-bar bg-success rounded-0" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||
<div class="progress-bar bg-info rounded-0" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||
<div class="progress-bar rounded-0" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
<div class="col-lg-4">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h5 class="fs-15 fw-semibold">Ecommerce App for Web</h5>
|
||
<p class="text-muted">CRM Project</p>
|
||
<div class="d-flex flex-wrap justify-content-evenly">
|
||
<p class="text-muted mb-0">
|
||
<i class="mdi mdi-numeric-10-circle text-success fs-18 align-middle me-2"></i>Completed
|
||
</p>
|
||
<p class="text-muted mb-0"><i class="mdi mdi-numeric-3-circle text-info fs-18 align-middle me-2"></i>In Progress</p>
|
||
<p class="text-muted mb-0"><i class="mdi mdi-numeric-2-circle text-primary fs-18 align-middle me-2"></i>To Do</p>
|
||
</div>
|
||
</div>
|
||
<div class="progress animated-progress rounded-bottom rounded-0" style="height: 6px;">
|
||
<div class="progress-bar bg-success rounded-0" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
||
<div class="progress-bar bg-info rounded-0" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||
<div class="progress-bar rounded-0" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div> <!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xxl-5">
|
||
<div class="card card-height-100">
|
||
<div class="card-header align-items-center d-flex">
|
||
<h4 class="card-title mb-0 flex-grow-1">Upcoming Activities</h4>
|
||
<div class="flex-shrink-0">
|
||
<div class="dropdown card-header-dropdown">
|
||
<a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="text-muted fs-18"><i class="mdi mdi-dots-vertical"></i></span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-end">
|
||
<a class="dropdown-item" href="#">Edit</a>
|
||
<a class="dropdown-item" href="#">Remove</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card header -->
|
||
<div class="card-body pt-0">
|
||
<ul class="list-group list-group-flush border-dashed">
|
||
<li class="list-group-item ps-0">
|
||
<div class="row align-items-center g-3">
|
||
<div class="col-auto">
|
||
<div class="avatar-sm p-1 py-2 h-auto bg-light rounded-3 material-shadow">
|
||
<div class="text-center">
|
||
<h5 class="mb-0">25</h5>
|
||
<div class="text-muted">Tue</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<h5 class="text-muted mt-0 mb-1 fs-13">12:00am - 03:30pm</h5>
|
||
<a href="#" class="text-reset fs-14 mb-0">Meeting for campaign with sales team</a>
|
||
</div>
|
||
<div class="col-sm-auto">
|
||
<div class="avatar-group">
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Stine Nielsen">
|
||
<img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Jansh Brown">
|
||
<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Dan Gibson">
|
||
<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);">
|
||
<div class="avatar-xxs">
|
||
<span class="avatar-title rounded-circle bg-info text-white">
|
||
5
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
</li><!-- end -->
|
||
<li class="list-group-item ps-0">
|
||
<div class="row align-items-center g-3">
|
||
<div class="col-auto">
|
||
<div class="avatar-sm p-1 py-2 h-auto bg-light rounded-3 material-shadow">
|
||
<div class="text-center">
|
||
<h5 class="mb-0">20</h5>
|
||
<div class="text-muted">Wed</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<h5 class="text-muted mt-0 mb-1 fs-13">02:00pm - 03:45pm</h5>
|
||
<a href="#" class="text-reset fs-14 mb-0">Adding a new event with attachments</a>
|
||
</div>
|
||
<div class="col-sm-auto">
|
||
<div class="avatar-group">
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Frida Bang">
|
||
<img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Malou Silva">
|
||
<img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Simon Schmidt">
|
||
<img src="assets/images/users/avatar-6.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tosh Jessen">
|
||
<img src="assets/images/users/avatar-7.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);">
|
||
<div class="avatar-xxs">
|
||
<span class="avatar-title rounded-circle bg-success text-white">
|
||
3
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
</li><!-- end -->
|
||
<li class="list-group-item ps-0">
|
||
<div class="row align-items-center g-3">
|
||
<div class="col-auto">
|
||
<div class="avatar-sm p-1 py-2 h-auto bg-light rounded-3 material-shadow">
|
||
<div class="text-center">
|
||
<h5 class="mb-0">17</h5>
|
||
<div class="text-muted">Wed</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<h5 class="text-muted mt-0 mb-1 fs-13">04:30pm - 07:15pm</h5>
|
||
<a href="#" class="text-reset fs-14 mb-0">Create new project Bundling Product</a>
|
||
</div>
|
||
<div class="col-sm-auto">
|
||
<div class="avatar-group">
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Nina Schmidt">
|
||
<img src="assets/images/users/avatar-8.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Stine Nielsen">
|
||
<img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Jansh Brown">
|
||
<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);">
|
||
<div class="avatar-xxs">
|
||
<span class="avatar-title rounded-circle bg-primary text-white">
|
||
4
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
</li><!-- end -->
|
||
<li class="list-group-item ps-0">
|
||
<div class="row align-items-center g-3">
|
||
<div class="col-auto">
|
||
<div class="avatar-sm p-1 py-2 h-auto bg-light rounded-3 material-shadow">
|
||
<div class="text-center">
|
||
<h5 class="mb-0">12</h5>
|
||
<div class="text-muted">Tue</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<h5 class="text-muted mt-0 mb-1 fs-13">10:30am - 01:15pm</h5>
|
||
<a href="#" class="text-reset fs-14 mb-0">Weekly closed sales won checking with sales team</a>
|
||
</div>
|
||
<div class="col-sm-auto">
|
||
<div class="avatar-group">
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Stine Nielsen">
|
||
<img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Jansh Brown">
|
||
<img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Dan Gibson">
|
||
<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs">
|
||
</a>
|
||
</div>
|
||
<div class="avatar-group-item material-shadow">
|
||
<a href="javascript: void(0);">
|
||
<div class="avatar-xxs">
|
||
<span class="avatar-title rounded-circle bg-warning text-white">
|
||
9
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
</li><!-- end -->
|
||
</ul><!-- end -->
|
||
<div class="align-items-center mt-2 row text-center text-sm-start">
|
||
<div class="col-sm">
|
||
<div class="text-muted">Showing<span class="fw-semibold">4</span> of <span class="fw-semibold">125</span> Results</div>
|
||
</div>
|
||
<div class="col-sm-auto">
|
||
<ul class="pagination pagination-separated pagination-sm justify-content-center justify-content-sm-start mb-0">
|
||
<li class="page-item disabled">
|
||
<a href="#" class="page-link">←</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="#" class="page-link">1</a>
|
||
</li>
|
||
<li class="page-item active">
|
||
<a href="#" class="page-link">2</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="#" class="page-link">3</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="#" class="page-link">→</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div> <!-- end col-->
|
||
<div class="col-xxl-7">
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-header align-items-center d-flex">
|
||
<h4 class="card-title mb-0 flex-grow-1">My Tasks</h4>
|
||
<div class="flex-shrink-0">
|
||
<div class="dropdown card-header-dropdown">
|
||
<a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="text-muted"><i class="ri-settings-4-line align-middle me-1 fs-15"></i>Settings</span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-end">
|
||
<a class="dropdown-item" href="#">Edit</a>
|
||
<a class="dropdown-item" href="#">Remove</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card header -->
|
||
|
||
<div class="card-body p-0">
|
||
|
||
<div class="align-items-center p-3 justify-content-between d-flex">
|
||
<div class="flex-shrink-0">
|
||
<div class="text-muted"><span class="fw-semibold">4</span> of <span class="fw-semibold">10</span> remaining</div>
|
||
</div>
|
||
<button type="button" class="btn btn-sm btn-success"><i class="ri-add-line align-middle me-1"></i> Add Task</button>
|
||
</div><!-- end card header -->
|
||
|
||
<div data-simplebar style="max-height: 257px;">
|
||
<ul class="list-group list-group-flush border-dashed px-3">
|
||
<li class="list-group-item ps-0">
|
||
<div class="d-flex align-items-start">
|
||
<div class="form-check ps-0 flex-sharink-0">
|
||
<input type="checkbox" class="form-check-input ms-0" id="task_one">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<label class="form-check-label mb-0 ps-2" for="task_one">Review and make sure nothing slips through cracks</label>
|
||
</div>
|
||
<div class="flex-shrink-0 ms-2">
|
||
<p class="text-muted fs-12 mb-0">15 Sep, 2021</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ps-0">
|
||
<div class="d-flex align-items-start">
|
||
<div class="form-check ps-0 flex-sharink-0">
|
||
<input type="checkbox" class="form-check-input ms-0" id="task_two">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<label class="form-check-label mb-0 ps-2" for="task_two">Send meeting invites for sales upcampaign</label>
|
||
</div>
|
||
<div class="flex-shrink-0 ms-2">
|
||
<p class="text-muted fs-12 mb-0">20 Sep, 2021</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ps-0">
|
||
<div class="d-flex align-items-start">
|
||
<div class="form-check flex-sharink-0 ps-0">
|
||
<input type="checkbox" class="form-check-input ms-0" id="task_three">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<label class="form-check-label mb-0 ps-2" for="task_three">Weekly closed sales won checking with sales team</label>
|
||
</div>
|
||
<div class="flex-shrink-0 ms-2">
|
||
<p class="text-muted fs-12 mb-0">24 Sep, 2021</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ps-0">
|
||
<div class="d-flex align-items-start">
|
||
<div class="form-check ps-0 flex-sharink-0">
|
||
<input type="checkbox" class="form-check-input ms-0" id="task_four">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<label class="form-check-label mb-0 ps-2" for="task_four">Add notes that can be viewed from the individual view</label>
|
||
</div>
|
||
<div class="flex-shrink-0 ms-2">
|
||
<p class="text-muted fs-12 mb-0">27 Sep, 2021</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ps-0">
|
||
<div class="d-flex align-items-start">
|
||
<div class="form-check ps-0 flex-sharink-0">
|
||
<input type="checkbox" class="form-check-input ms-0" id="task_five">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<label class="form-check-label mb-0 ps-2" for="task_five">Move stuff to another page</label>
|
||
</div>
|
||
<div class="flex-shrink-0 ms-2">
|
||
<p class="text-muted fs-12 mb-0">27 Sep, 2021</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ps-0">
|
||
<div class="d-flex align-items-start">
|
||
<div class="form-check ps-0 flex-sharink-0">
|
||
<input type="checkbox" class="form-check-input ms-0" id="task_six">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<label class="form-check-label mb-0 ps-2" for="task_six">Styling wireframe design and documentation for velzon admin</label>
|
||
</div>
|
||
<div class="flex-shrink-0 ms-2">
|
||
<p class="text-muted fs-12 mb-0">27 Sep, 2021</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul><!-- end ul -->
|
||
</div>
|
||
<div class="p-3">
|
||
<a href="javascript:void(0);" class="text-muted text-decoration-underline">Show more...</a>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div><!-- end col -->
|
||
<div class="col-xl-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-header border-bottom-dashed align-items-center d-flex">
|
||
<h4 class="card-title mb-0 flex-grow-1">Recent Activity</h4>
|
||
<div class="flex-shrink-0">
|
||
<button type="button" class="btn btn-soft-primary btn-sm">
|
||
View All Activity
|
||
</button>
|
||
</div>
|
||
</div><!-- end cardheader -->
|
||
<div class="card-body p-0">
|
||
<div data-simplebar style="max-height: 364px;" class="p-3">
|
||
<div class="acitivity-timeline acitivity-main">
|
||
<div class="acitivity-item d-flex">
|
||
<div class="flex-shrink-0 avatar-xs acitivity-avatar">
|
||
<div class="avatar-title bg-success-subtle text-success rounded-circle material-shadow">
|
||
<i class="ri-shopping-cart-2-line"></i>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Purchase by James Price</h6>
|
||
<p class="text-muted mb-1">Product noise evolve smartwatch</p>
|
||
<small class="mb-0 text-muted">02:14 PM Today</small>
|
||
</div>
|
||
</div>
|
||
<div class="acitivity-item py-3 d-flex">
|
||
<div class="flex-shrink-0 avatar-xs acitivity-avatar">
|
||
<div class="avatar-title bg-primary-subtle text-primary rounded-circle material-shadow">
|
||
<i class="ri-stack-fill"></i>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Added new <span class="fw-semibold">style collection</span></h6>
|
||
<p class="text-muted mb-1">By Nesta Technologies</p>
|
||
<div class="d-inline-flex gap-2 border border-dashed p-2 mb-2 w-75">
|
||
<a href="apps-ecommerce-product-details.html" class="bg-light rounded p-1">
|
||
<img src="assets/images/products/img-8.png" alt="" class="img-fluid d-block" />
|
||
</a>
|
||
<a href="apps-ecommerce-product-details.html" class="bg-light rounded p-1">
|
||
<img src="assets/images/products/img-2.png" alt="" class="img-fluid d-block" />
|
||
</a>
|
||
<a href="apps-ecommerce-product-details.html" class="bg-light rounded p-1">
|
||
<img src="assets/images/products/img-10.png" alt="" class="img-fluid d-block" />
|
||
</a>
|
||
</div>
|
||
<p class="mb-0 text-muted"><small>9:47 PM Yesterday</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="acitivity-item py-3 d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img src="assets/images/users/avatar-2.jpg" alt="" class="avatar-xs rounded-circle acitivity-avatar material-shadow">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Natasha Carey have liked the products</h6>
|
||
<p class="text-muted mb-1">Allow users to like products in your WooCommerce store.</p>
|
||
<small class="mb-0 text-muted">25 Dec, 2021</small>
|
||
</div>
|
||
</div>
|
||
<div class="acitivity-item py-3 d-flex">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar-xs acitivity-avatar">
|
||
<div class="avatar-title rounded-circle bg-secondary material-shadow">
|
||
<i class="mdi mdi-sale fs-14"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Today offers by <a href="apps-ecommerce-seller-details.html" class="link-secondary">Digitech Galaxy</a></h6>
|
||
<p class="text-muted mb-2">Offer is valid on orders of Rs.500 Or above for selected products only.</p>
|
||
<small class="mb-0 text-muted">12 Dec, 2021</small>
|
||
</div>
|
||
</div>
|
||
<div class="acitivity-item py-3 d-flex">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar-xs acitivity-avatar">
|
||
<div class="avatar-title rounded-circle bg-danger-subtle text-danger material-shadow">
|
||
<i class="ri-bookmark-fill"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Favoried Product</h6>
|
||
<p class="text-muted mb-2">Esther James have favorited product.</p>
|
||
<small class="mb-0 text-muted">25 Nov, 2021</small>
|
||
</div>
|
||
</div>
|
||
<div class="acitivity-item py-3 d-flex">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar-xs acitivity-avatar">
|
||
<div class="avatar-title rounded-circle bg-secondary material-shadow">
|
||
<i class="mdi mdi-sale fs-14"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Flash sale starting <span class="text-primary">Tomorrow.</span></h6>
|
||
<p class="text-muted mb-0">Flash sale by <a href="javascript:void(0);" class="link-secondary fw-medium">Zoetic Fashion</a></p>
|
||
<small class="mb-0 text-muted">22 Oct, 2021</small>
|
||
</div>
|
||
</div>
|
||
<div class="acitivity-item py-3 d-flex">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar-xs acitivity-avatar">
|
||
<div class="avatar-title rounded-circle bg-info-subtle text-info material-shadow">
|
||
<i class="ri-line-chart-line"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Monthly sales report</h6>
|
||
<p class="text-muted mb-2"><span class="text-danger">
|
||
2 days left</span> notification to submit the monthly sales report. <a href="javascript:void(0);" class="link-warning text-decoration-underline">Reports Builder</a>
|
||
</p>
|
||
<small class="mb-0 text-muted">15 Oct</small>
|
||
</div>
|
||
</div>
|
||
<div class="acitivity-item d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-xs rounded-circle acitivity-avatar material-shadow" />
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Frank Hook Commented</h6>
|
||
<p class="text-muted mb-2 fst-italic">" A product that has reviews is more likable to be sold than a product. "</p>
|
||
<small class="mb-0 text-muted">26 Aug, 2021</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div><!-- end col -->
|
||
</div> <!-- end row-->
|
||
</div> <!-- end col-xl-7-->
|
||
</div>
|
||
<!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xl-4 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="d-flex">
|
||
<div class="flex-grow-1 p-3">
|
||
<h5 class="mb-3">Application</h5>
|
||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"> <i class="ri-arrow-up-line align-middle"></i> 16.24 % </span> vs. previous month</p>
|
||
</div>
|
||
<div>
|
||
<div class="apex-charts" data-colors='["--vz-success" , "--vz-transparent"]' dir="ltr" id="results_sparkline_charts"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="d-flex">
|
||
<div class="flex-grow-1 p-3">
|
||
<h5 class="mb-3">Interviewed</h5>
|
||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"> <i class="ri-arrow-up-line align-middle"></i> 34.24 % </span> vs. previous month</p>
|
||
</div>
|
||
<div>
|
||
<div class="apex-charts" data-colors='["--vz-danger" , "--vz-transparent"]' dir="ltr" id="results_sparkline_charts2"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="d-flex">
|
||
<div class="flex-grow-1 p-3">
|
||
<h5 class="mb-3">Hired</h5>
|
||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"> <i class="ri-arrow-up-line align-middle"></i> 6.67 % </span> vs. previous month</p>
|
||
</div>
|
||
<div>
|
||
<div class="apex-charts" data-colors='["--vz-success" , "--vz-transparent"]' dir="ltr" id="results_sparkline_charts3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h5 class="text-decoration-underline mb-3 mt-2 pb-3">Chart & Map Widgets</h5>
|
||
</div>
|
||
</div>
|
||
<!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xxl-4 col-xl-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-header align-items-center d-flex">
|
||
<h4 class="card-title mb-0 flex-grow-1">Live Users By Country</h4>
|
||
<div class="flex-shrink-0">
|
||
<button type="button" class="btn btn-soft-primary btn-sm material-shadow">
|
||
Export Report
|
||
</button>
|
||
</div>
|
||
</div><!-- end card header -->
|
||
|
||
<!-- card body -->
|
||
<div class="card-body">
|
||
|
||
<div id="users-by-country" data-colors='["--vz-light"]' style="height: 252px"></div>
|
||
|
||
<div class="table-responsive table-card mt-3">
|
||
<table class="table table-borderless table-sm table-centered align-middle table-nowrap mb-1">
|
||
<thead class="text-muted border-dashed border border-start-0 border-end-0 bg-light-subtle">
|
||
<tr>
|
||
<th>Duration (Secs)</th>
|
||
<th style="width: 30%;">Sessions</th>
|
||
<th style="width: 30%;">Views</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="border-0">
|
||
<tr>
|
||
<td>0-30</td>
|
||
<td>2,250</td>
|
||
<td>4,250</td>
|
||
</tr>
|
||
<tr>
|
||
<td>31-60</td>
|
||
<td>1,501</td>
|
||
<td>2,050</td>
|
||
</tr>
|
||
<tr>
|
||
<td>61-120</td>
|
||
<td>750</td>
|
||
<td>1,600</td>
|
||
</tr>
|
||
<tr>
|
||
<td>121-240</td>
|
||
<td>540</td>
|
||
<td>1,040</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div><!-- end col -->
|
||
|
||
<div class="col-xxl-4 col-xl-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-header align-items-center d-flex">
|
||
<h4 class="card-title mb-0 flex-grow-1">Sessions by Countries</h4>
|
||
<div>
|
||
<button type="button" class="btn btn-soft-secondary btn-sm material-shadow-none">
|
||
ALL
|
||
</button>
|
||
<button type="button" class="btn btn-soft-primary btn-sm material-shadow-none">
|
||
1M
|
||
</button>
|
||
<button type="button" class="btn btn-soft-secondary btn-sm material-shadow-none">
|
||
6M
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div>
|
||
<div id="countries_charts" data-colors='["--vz-info", "--vz-info", "--vz-info", "--vz-info", "--vz-danger", "--vz-info", "--vz-info", "--vz-info", "--vz-info", "--vz-info"]' class="apex-charts" dir="ltr"></div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div> <!-- end col-->
|
||
|
||
<div class="col-xxl-4">
|
||
<div class="card card-height-100">
|
||
<div class="card-header border-0 align-items-center d-flex">
|
||
<h4 class="card-title mb-0 flex-grow-1">Audiences Metrics</h4>
|
||
<div>
|
||
<button type="button" class="btn btn-soft-secondary btn-sm material-shadow-none">
|
||
ALL
|
||
</button>
|
||
<button type="button" class="btn btn-soft-secondary btn-sm material-shadow-none">
|
||
1M
|
||
</button>
|
||
<button type="button" class="btn btn-soft-secondary btn-sm material-shadow-none">
|
||
6M
|
||
</button>
|
||
<button type="button" class="btn btn-soft-primary btn-sm material-shadow-none">
|
||
1Y
|
||
</button>
|
||
</div>
|
||
</div><!-- end card header -->
|
||
<div class="card-header p-0">
|
||
<div class="alert alert-warning alert-solid alert-label-icon border-0 rounded-0 m-0 d-flex align-items-center" role="alert">
|
||
<i class="ri-error-warning-line label-icon"></i>
|
||
<div class="flex-grow-1 text-truncate">
|
||
Your free trial expired in <b>17</b> days.
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<a href="pages-pricing.html" class="text-reset text-decoration-underline"><b>Upgrade</b></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-header p-0 border-0 bg-light-subtle">
|
||
<div class="row g-0 text-center">
|
||
<div class="col-6 col-sm-4">
|
||
<div class="p-3 border border-dashed border-start-0">
|
||
<h5 class="mb-1"><span class="counter-value" data-target="854">0</span>
|
||
<span class="text-success ms-1 fs-12">49%<i class="ri-arrow-right-up-line ms-1 align-middle"></i></span>
|
||
</h5>
|
||
<p class="text-muted mb-0">Avg. Session</p>
|
||
</div>
|
||
</div>
|
||
<!--end col-->
|
||
<div class="col-6 col-sm-4">
|
||
<div class="p-3 border border-dashed border-start-0">
|
||
<h5 class="mb-1"><span class="counter-value" data-target="1278">0</span>
|
||
<span class="text-success ms-1 fs-12">60%<i class="ri-arrow-right-up-line ms-1 align-middle"></i></span>
|
||
</h5>
|
||
<p class="text-muted mb-0">Conversion Rate</p>
|
||
</div>
|
||
</div>
|
||
<!--end col-->
|
||
<div class="col-6 col-sm-4">
|
||
<div class="p-3 border border-dashed border-start-0 border-end-0">
|
||
<h5 class="mb-1"><span class="counter-value" data-target="3">0</span>m
|
||
<span class="counter-value" data-target="40">0</span>sec
|
||
</h5>
|
||
<p class="text-muted mb-0">Avg. Ses. Duration</p>
|
||
</div>
|
||
</div>
|
||
<!--end col-->
|
||
</div>
|
||
</div><!-- end card header -->
|
||
|
||
<div class="card-body p-0 pb-2">
|
||
<div>
|
||
<div id="audiences_metrics_charts" data-colors='["--vz-success", "--vz-light"]' class="apex-charts" dir="ltr"></div>
|
||
</div>
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div><!-- end col -->
|
||
|
||
</div> <!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xxl-4 col-xl-6">
|
||
<!-- card -->
|
||
<div class="card card-height-100">
|
||
<div class="card-header align-items-center d-flex">
|
||
<h4 class="card-title mb-0 flex-grow-1">Sales by Locations</h4>
|
||
<div class="flex-shrink-0">
|
||
<button type="button" class="btn btn-soft-primary btn-sm material-shadow-none">
|
||
Export Report
|
||
</button>
|
||
</div>
|
||
</div><!-- end card header -->
|
||
|
||
<!-- card body -->
|
||
<div class="card-body">
|
||
|
||
<div id="sales-by-locations" data-colors='["--vz-light"]' style="height: 269px">
|
||
</div>
|
||
|
||
<div class="px-2 py-2 mt-1">
|
||
<p class="mb-1">New Maxico <span class="float-end">75%</span></p>
|
||
<div class="progress mt-2" style="height: 6px;">
|
||
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="75"></div>
|
||
</div>
|
||
|
||
<p class="mt-3 mb-1">California <span class="float-end">47%</span></p>
|
||
<div class="progress mt-2" style="height: 6px;">
|
||
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="47"></div>
|
||
</div>
|
||
|
||
<p class="mt-3 mb-1">Texas <span class="float-end">82%</span></p>
|
||
<div class="progress mt-2" style="height: 6px;">
|
||
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="82"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end card body -->
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
<!-- end col -->
|
||
|
||
<div class="col-xxl-4 col-xl-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-header border-bottom-dashed align-items-center d-flex">
|
||
<h4 class="card-title mb-0 flex-grow-1">My Portfolio</h4>
|
||
<div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-soft-primary btn-sm" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="text-uppercase">Btc<i class="mdi mdi-chevron-down align-middle ms-1"></i></span>
|
||
</button>
|
||
<div class="dropdown-menu dropdown-menu-end">
|
||
<a class="dropdown-item" href="#">BTC</a>
|
||
<a class="dropdown-item" href="#">USD</a>
|
||
<a class="dropdown-item" href="#">Euro</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end cardheader -->
|
||
<div class="card-body">
|
||
<div id="portfolio_donut_charts" data-colors='["--vz-primary", "--vz-info", "--vz-warning", "--vz-success"]' class="apex-charts" dir="ltr"></div>
|
||
|
||
<ul class="list-group list-group-flush border-dashed mb-0">
|
||
<li class="list-group-item px-0">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 avatar-xs">
|
||
<span class="avatar-title bg-light p-1 rounded-circle material-shadow">
|
||
<img src="assets/images/svg/crypto-icons/btc.svg" class="img-fluid" alt="">
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-2">
|
||
<h6 class="mb-1">Bitcoin</h6>
|
||
<p class="fs-12 mb-0 text-muted">
|
||
<i class="mdi mdi-circle fs-10 align-middle text-primary me-1"></i>BTC
|
||
</p>
|
||
</div>
|
||
<div class="flex-shrink-0 text-end">
|
||
<h6 class="mb-1">BTC 0.00584875</h6>
|
||
<p class="text-success fs-12 mb-0">$19,405.12</p>
|
||
</div>
|
||
</div>
|
||
</li><!-- end -->
|
||
<li class="list-group-item px-0">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 avatar-xs">
|
||
<span class="avatar-title bg-light p-1 rounded-circle material-shadow">
|
||
<img src="assets/images/svg/crypto-icons/eth.svg" class="img-fluid" alt="">
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-2">
|
||
<h6 class="mb-1">Ethereum</h6>
|
||
<p class="fs-12 mb-0 text-muted">
|
||
<i class="mdi mdi-circle fs-10 align-middle text-info me-1"></i>ETH
|
||
</p>
|
||
</div>
|
||
<div class="flex-shrink-0 text-end">
|
||
<h6 class="mb-1">ETH 2.25842108</h6>
|
||
<p class="text-danger fs-12 mb-0">$40552.18</p>
|
||
</div>
|
||
</div>
|
||
</li><!-- end -->
|
||
<li class="list-group-item px-0">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 avatar-xs">
|
||
<span class="avatar-title bg-light p-1 rounded-circle material-shadow">
|
||
<img src="assets/images/svg/crypto-icons/ltc.svg" class="img-fluid" alt="">
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-2">
|
||
<h6 class="mb-1">Litecoin</h6>
|
||
<p class="fs-12 mb-0 text-muted">
|
||
<i class="mdi mdi-circle fs-10 align-middle text-warning me-1"></i>LTC
|
||
</p>
|
||
</div>
|
||
<div class="flex-shrink-0 text-end">
|
||
<h6 class="mb-1">LTC 10.58963217</h6>
|
||
<p class="text-success fs-12 mb-0">$15824.58</p>
|
||
</div>
|
||
</div>
|
||
</li><!-- end -->
|
||
<li class="list-group-item px-0 pb-0">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0 avatar-xs">
|
||
<span class="avatar-title bg-light p-1 rounded-circle material-shadow">
|
||
<img src="assets/images/svg/crypto-icons/dash.svg" class="img-fluid" alt="">
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-2">
|
||
<h6 class="mb-1">Dash</h6>
|
||
<p class="fs-12 mb-0 text-muted">
|
||
<i class="mdi mdi-circle fs-10 align-middle text-success me-1"></i>DASH
|
||
</p>
|
||
</div>
|
||
<div class="flex-shrink-0 text-end">
|
||
<h6 class="mb-1">DASH 204.28565885</h6>
|
||
<p class="text-success fs-12 mb-0">$30635.84</p>
|
||
</div>
|
||
</div>
|
||
</li><!-- end -->
|
||
</ul><!-- end -->
|
||
</div><!-- end card body -->
|
||
</div><!-- end card -->
|
||
</div><!-- end col -->
|
||
|
||
<div class="col-xxl-4">
|
||
<div class="card card-height-100">
|
||
<div class="card-header align-items-center d-flex">
|
||
<h4 class="card-title mb-0 flex-grow-1">Top Referrals Pages</h4>
|
||
<div class="flex-shrink-0">
|
||
<button type="button" class="btn btn-soft-primary btn-sm">
|
||
Export Report
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
|
||
<div id="color_heatmap" data-colors='["--vz-success", "--vz-info", "--vz-primary", "--vz-warning", "--vz-secondary"]' class="apex-charts mt-n3" dir="ltr"></div>
|
||
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-grow-1">
|
||
<p class="text-truncate text-muted fs-14 mb-0">
|
||
<i class="mdi mdi-circle align-middle text-primary me-2"></i>www.google.com
|
||
</p>
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<p class="mb-0">24.58%</p>
|
||
</div>
|
||
</div><!-- end -->
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-grow-1">
|
||
<p class="text-truncate text-muted fs-14 mb-0">
|
||
<i class="mdi mdi-circle align-middle text-warning me-2"></i>www.medium.com
|
||
</p>
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<p class="mb-0">12.22%</p>
|
||
</div>
|
||
</div><!-- end -->
|
||
<div class="d-flex">
|
||
<div class="flex-grow-1">
|
||
<p class="text-truncate text-muted fs-14 mb-0">
|
||
<i class="mdi mdi-circle align-middle text-secondary me-2"></i>Other
|
||
</p>
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<p class="mb-0">17.58%</p>
|
||
</div>
|
||
</div><!-- end -->
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-grow-1">
|
||
<p class="text-truncate text-muted fs-14 mb-0">
|
||
<i class="mdi mdi-circle align-middle text-info me-2"></i>www.youtube.com
|
||
</p>
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<p class="mb-0">17.51%</p>
|
||
</div>
|
||
</div><!-- end -->
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-grow-1">
|
||
<p class="text-truncate text-muted fs-14 mb-0">
|
||
<i class="mdi mdi-circle align-middle text-success me-2"></i>www.meta.com
|
||
</p>
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<p class="mb-0">23.05%</p>
|
||
</div>
|
||
</div><!-- end -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-2 text-center">
|
||
<a href="javascript:void(0);" class="text-muted text-decoration-underline">Show All</a>
|
||
</div>
|
||
|
||
</div><!-- end card body -->
|
||
</div>
|
||
</div>
|
||
<!--end col-->
|
||
|
||
</div>
|
||
<!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h5 class="text-decoration-underline mb-3 mt-2 pb-3">Ecommerce Widgets</h5>
|
||
</div>
|
||
</div>
|
||
<!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-header align-items-center d-flex">
|
||
<h4 class="card-title mb-0 flex-grow-1">Hot Products</h4>
|
||
<div class="flex-shrink-0">
|
||
<a class="text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
View All
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- Swiper -->
|
||
<div class="swiper mySwiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide" style="max-width: 200px;">
|
||
<div>
|
||
<div class="bg-info-subtle rounded">
|
||
<img src="assets/images/products/img-3.png" alt="" style="max-height: 210px;max-width: auto;" />
|
||
</div>
|
||
<div class="pt-3">
|
||
<h5 class="text-secondary">$99.94</h5>
|
||
<a href="#!">
|
||
<h6 class="fs-15 lh-base text-truncate mb-0">350 ml Glass Grocery Container</h6>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide" style="max-width: 200px;">
|
||
<div>
|
||
<div class="bg-success-subtle rounded">
|
||
<img src="assets/images/products/img-4.png" alt="" style="max-height: 210px;max-width: auto;" />
|
||
</div>
|
||
<div class="pt-3">
|
||
<h5 class="text-secondary">$99.94</h5>
|
||
<a href="#!">
|
||
<h6 class="fs-15 lh-base text-truncate mb-0">Fabric Dual Tone Living Room Chair</h6>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide" style="max-width: 200px;">
|
||
<div>
|
||
<div class="bg-warning-subtle rounded">
|
||
<img src="assets/images/products/img-5.png" alt="" style="max-height: 210px;max-width: auto;" />
|
||
</div>
|
||
<div class="pt-3">
|
||
<h5 class="text-secondary">$99.94</h5>
|
||
<a href="#!">
|
||
<h6 class="fs-15 lh-base text-truncate mb-0">Crux Motorsports Helmet</h6>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide" style="max-width: 200px;">
|
||
<div>
|
||
<div class="bg-secondary-subtle rounded">
|
||
<img src="assets/images/products/img-6.png" alt="" style="max-height: 210px;max-width: auto;" />
|
||
</div>
|
||
<div class="pt-3">
|
||
<h5 class="text-secondary">$99.94</h5>
|
||
<a href="#!">
|
||
<h6 class="fs-15 lh-base text-truncate mb-0">Half Sleeve T-Shirts (Blue)</h6>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="swiper-pagination"></div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<div class="avatar-sm me-3 flex-shrink-0">
|
||
<div class="avatar-title bg-info-subtle rounded">
|
||
<img src="assets/images/products/img-6.png" alt="" class="avatar-xs">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<p class="text-muted mb-2">Adidas</p>
|
||
<h5 class="fs-15 mb-0">Half Sleeve T-Shirts (Blue)</h5>
|
||
</div>
|
||
</div>
|
||
<p class="text-muted pb-1">If you couldn't relate to the information in the previous point, you might be looking for the singlet T-shirt, which is also known as the half T-shirt.</p>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-xl-6">
|
||
<h6 class="fs-14 mb-2">Sizes</h6>
|
||
<ul class="clothes-size list-unstyled hstack gap-2 mb-0">
|
||
<li>
|
||
<input type="radio" name="sizes" id="color-1" disabled />
|
||
<label class="avatar-xs btn btn-soft-primary p-0 d-flex align-items-center justify-content-center rounded-circle" for="color-1">S</label>
|
||
</li>
|
||
<li>
|
||
<input type="radio" name="sizes" id="color-2" />
|
||
<label class="avatar-xs btn btn-soft-primary p-0 d-flex align-items-center justify-content-center rounded-circle" for="color-2">M</label>
|
||
</li>
|
||
<li>
|
||
<input type="radio" name="sizes" id="color-3" />
|
||
<label class="avatar-xs btn btn-soft-primary p-0 d-flex align-items-center justify-content-center rounded-circle" for="color-3">L</label>
|
||
</li>
|
||
<li>
|
||
<input type="radio" name="sizes" id="color-4" />
|
||
<label class="avatar-xs btn btn-soft-primary p-0 d-flex align-items-center justify-content-center rounded-circle" for="color-4">XL</label>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- end col -->
|
||
|
||
<div class="col-xl-6">
|
||
<div>
|
||
<h6 class="fs-14 mb-2">Colors</h6>
|
||
<div class="d-flex flex-wrap gap-2 select-color">
|
||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Out of Stock">
|
||
<button type="button" class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border material-shadow-none rounded-circle fs-22 text-primary" disabled>
|
||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||
</button>
|
||
</div>
|
||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="03 Items Available">
|
||
<button type="button" class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border material-shadow-none rounded-circle fs-22 text-secondary">
|
||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||
</button>
|
||
</div>
|
||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="03 Items Available">
|
||
<button type="button" class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border material-shadow-none rounded-circle fs-22 text-success">
|
||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||
</button>
|
||
</div>
|
||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="02 Items Available">
|
||
<button type="button" class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border material-shadow-none rounded-circle fs-22 text-info">
|
||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="d-flex mb-4 align-items-center">
|
||
<div class="flex-grow-1">
|
||
<h5 class="text-primary fs-18 mb-0"><span>$22.45</span> <small class="text-decoration-line-through text-muted fs-13">$37.45</small></h5>
|
||
</div>
|
||
|
||
<div class="input-step flex-shrink-0">
|
||
<button type="button" class="minus">–</button>
|
||
<input type="number" class="product-quantity" value="2" min="0" max="100" readonly>
|
||
<button type="button" class="plus">+</button>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#!" class="btn btn-soft-danger d-block">Add to Cart</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body position-relative">
|
||
<h5 class="mb-3">Select Bank</h5>
|
||
<div class="vstack gap-2">
|
||
<div class="form-check card-radio">
|
||
<input id="listGroupRadioGrid1" name="listGroupRadioGrid" type="radio" class="form-check-input">
|
||
<label class="form-check-label" for="listGroupRadioGrid1">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar-xs">
|
||
<div class="avatar-title bg-success-subtle text-success fs-18 rounded">
|
||
<i class="ri-visa-fill"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Visa Card</h6>
|
||
<b class="pay-amount">$8,500</b>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div class="form-check card-radio">
|
||
<input id="listGroupRadioGrid2" name="listGroupRadioGrid" type="radio" class="form-check-input">
|
||
<label class="form-check-label" for="listGroupRadioGrid2">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar-xs">
|
||
<div class="avatar-title bg-info-subtle text-info fs-18 rounded">
|
||
<i class="ri-bank-card-2-line"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Credit Card</h6>
|
||
<b class="pay-amount">$8,326</b>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div class="form-check card-radio">
|
||
<input id="listGroupRadioGrid3" name="listGroupRadioGrid" type="radio" class="form-check-input">
|
||
<label class="form-check-label" for="listGroupRadioGrid3">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar-xs">
|
||
<div class="avatar-title bg-danger-subtle text-danger fs-18 rounded">
|
||
<i class="ri-mastercard-line"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h6 class="mb-1">Mastercard Card</h6>
|
||
<b class="pay-amount">$8,400</b>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" class="btn btn-success w-100 mt-3" id="confirm-btn">Confirm</button>
|
||
|
||
<div id="notification-warn" class="position-absolute top-0 start-0 end-0 d-none">
|
||
<div class="alert alert-warning" role="alert">
|
||
Select at list one item
|
||
</div>
|
||
</div>
|
||
<!-- notification-warning -->
|
||
|
||
<div class="notification-elem" id="notification-overlay">
|
||
<div class="text-center">
|
||
<lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon>
|
||
<div class="mt-4 pt-2">
|
||
<h5 class="mb-1 success-pay">$6,201 Payment Successfully</h5>
|
||
<p class="text-muted mx-4">Aww yeah, you successfully read this important message.</p>
|
||
|
||
<div>
|
||
<button type="button" class="btn btn-success btn-sm w-sm" id="back-btn">Back to Home</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- notification-overlay -->
|
||
</div>
|
||
<!-- end card body -->
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
<!-- end col -->
|
||
<div class="col-xl-3 col-md-6">
|
||
<div class="card card-height-100">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<div class="avatar-sm me-3 flex-shrink-0">
|
||
<div class="avatar-title bg-danger-subtle rounded">
|
||
<img src="assets/images/products/img-8.png" alt="" class="avatar-xs">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<p class="text-muted mb-2">Adidas</p>
|
||
<h5 class="fs-15 mb-0">Half Sleeve T-Shirts (Pink)</h5>
|
||
</div>
|
||
</div>
|
||
<p class="text-muted pb-1">If you couldn't relate to the information in the previous point, you might be looking for the singlet T-shirt, which is also known as the half T-shirt.</p>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-xl-6">
|
||
<h6 class="fs-14 mb-2">Sizes</h6>
|
||
<ul class="clothes-size list-unstyled hstack gap-2 mb-0">
|
||
<li>
|
||
<input type="radio" name="sizes" id="color-1" disabled />
|
||
<label class="avatar-xs btn btn-soft-primary p-0 d-flex align-items-center justify-content-center material-shadow-none rounded-circle" for="color-1">S</label>
|
||
</li>
|
||
<li>
|
||
<input type="radio" name="sizes" id="color-2" />
|
||
<label class="avatar-xs btn btn-soft-primary p-0 d-flex align-items-center justify-content-center material-shadow-none rounded-circle" for="color-2">M</label>
|
||
</li>
|
||
<li>
|
||
<input type="radio" name="sizes" id="color-3" />
|
||
<label class="avatar-xs btn btn-soft-primary p-0 d-flex align-items-center justify-content-center material-shadow-none rounded-circle" for="color-3">L</label>
|
||
</li>
|
||
<li>
|
||
<input type="radio" name="sizes" id="color-4" />
|
||
<label class="avatar-xs btn btn-soft-primary p-0 d-flex align-items-center justify-content-center material-shadow-none rounded-circle" for="color-4">XL</label>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- end col -->
|
||
|
||
<div class="col-xl-6">
|
||
<div>
|
||
<h6 class="fs-14 mb-2">Colors</h6>
|
||
<div class="d-flex flex-wrap gap-2 select-color">
|
||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Out of Stock">
|
||
<button type="button" class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-22 text-primary" disabled>
|
||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||
</button>
|
||
</div>
|
||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="03 Items Available">
|
||
<button type="button" class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-22 text-secondary">
|
||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||
</button>
|
||
</div>
|
||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="03 Items Available">
|
||
<button type="button" class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-22 text-success">
|
||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||
</button>
|
||
</div>
|
||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="02 Items Available">
|
||
<button type="button" class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-22 text-info">
|
||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="d-flex mb-4 align-items-center">
|
||
<div class="flex-grow-1">
|
||
<h5 class="text-primary fs-18 mb-0"><span>$48.20</span> <small class="text-decoration-line-through text-muted fs-13">$124.10</small></h5>
|
||
</div>
|
||
|
||
<div class="input-step flex-shrink-0">
|
||
<button type="button" class="minus">–</button>
|
||
<input type="number" class="product-quantity" value="2" min="0" max="100" readonly>
|
||
<button type="button" class="plus">+</button>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#!" class="btn btn-soft-danger d-block">Add to Cart</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-xxl-5">
|
||
<div class="card">
|
||
<div class="row g-0">
|
||
<div class="col-lg-6">
|
||
<div class="card-body border-end">
|
||
<div class="search-box">
|
||
<input type="text" class="form-control bg-light border-light" autocomplete="off" id="searchList" placeholder="Search candidate...">
|
||
<i class="ri-search-line search-icon"></i>
|
||
</div>
|
||
<div data-simplebar style="max-height: 190px" class="px-3 mx-n3">
|
||
<ul class="list-unstyled mb-0 pt-2" id="candidate-list">
|
||
<li>
|
||
<a href="javascript:void(0);" class="d-flex align-items-center py-2">
|
||
<div class="flex-shrink-0 me-2">
|
||
<div class="avatar-xs">
|
||
<img src="assets/images/users/avatar-1.jpg" alt="" class="img-fluid rounded-circle candidate-img">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Anna Adame</span> <span class="text-muted fw-normal">@Anna</span></h5>
|
||
<div class="d-none candidate-position">Web Developer</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript:void(0);" class="d-flex align-items-center py-2">
|
||
<div class="flex-shrink-0 me-2">
|
||
<div class="avatar-xs">
|
||
<img src="assets/images/users/avatar-2.jpg" alt="" class="img-fluid rounded-circle candidate-img">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Patricia Cavin</span> <span class="text-muted fw-normal">@Patricia</span></h5>
|
||
<div class="d-none candidate-position">Web Developer</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:void(0);" class="d-flex align-items-center py-2">
|
||
<div class="flex-shrink-0 me-2">
|
||
<div class="avatar-xs">
|
||
<img src="assets/images/users/avatar-3.jpg" alt="" class="img-fluid rounded-circle candidate-img">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Jason Tran</span> <span class="text-muted fw-normal">@Jason</span></h5>
|
||
<div class="d-none candidate-position">Magento Developer</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:void(0);" class="d-flex align-items-center py-2">
|
||
<div class="flex-shrink-0 me-2">
|
||
<div class="avatar-xs">
|
||
<img src="assets/images/users/avatar-4.jpg" alt="" class="img-fluid rounded-circle candidate-img">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Cheryl Moore</span> <span class="text-muted fw-normal">@Cheryl</span></h5>
|
||
<div class="d-none candidate-position">Product Designer</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:void(0);" class="d-flex align-items-center py-2">
|
||
<div class="flex-shrink-0 me-2">
|
||
<div class="avatar-xs">
|
||
<img src="assets/images/users/avatar-5.jpg" alt="" class="img-fluid rounded-circle candidate-img">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Jennifer Bailey</span> <span class="text-muted fw-normal">@Jennifer</span></h5>
|
||
<div class="d-none candidate-position">Marketing Director</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="card-body text-center">
|
||
<div class="avatar-md mb-3 mx-auto">
|
||
<img src="assets/images/users/avatar-1.jpg" alt="" id="candidate-img" class="img-thumbnail rounded-circle shadow-none">
|
||
</div>
|
||
|
||
<h5 id="candidate-name" class="mb-0">Anna Adame</h5>
|
||
<p id="candidate-position" class="text-muted">Web Developer</p>
|
||
|
||
<div class="d-flex gap-2 justify-content-center mb-3">
|
||
<button type="button" class="btn avatar-xs p-0 material-shadow-none" data-bs-toggle="tooltip" data-bs-placement="top" title="Google">
|
||
<span class="avatar-title rounded-circle bg-light text-body">
|
||
<i class="ri-google-line"></i>
|
||
</span>
|
||
</button>
|
||
|
||
<button type="button" class="btn avatar-xs p-0 material-shadow-none" data-bs-toggle="tooltip" data-bs-placement="top" title="Linkedin">
|
||
<span class="avatar-title rounded-circle bg-light text-body">
|
||
<i class="ri-linkedin-line"></i>
|
||
</span>
|
||
</button>
|
||
<button type="button" class="btn avatar-xs p-0 material-shadow-none" data-bs-toggle="tooltip" data-bs-placement="top" title="Dribbble">
|
||
<span class="avatar-title rounded-circle bg-light text-body">
|
||
<i class="ri-dribbble-fill"></i>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div>
|
||
<button type="button" class="btn btn-success rounded-pill w-sm"><i class="ri-add-fill me-1 align-bottom"></i> Follow</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
<!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h5 class="text-decoration-underline mb-3 mt-2 pb-3">Credit Card</h5>
|
||
</div>
|
||
</div>
|
||
<!-- end row-->
|
||
|
||
<div class="row">
|
||
<div class="col-xxl-4">
|
||
<div class="card card-height-100 ">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">Credit Card - Custom</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="mx-auto" style="max-width: 350px">
|
||
<div class="text-bg-info bg-gradient p-4 rounded-3 mb-3">
|
||
<div class="d-flex">
|
||
<div class="flex-grow-1">
|
||
<i class="bx bx-chip h1 text-warning"></i>
|
||
</div>
|
||
<div class="flex-shrink-0">
|
||
<i class="bx bxl-visa display-2 mt-n3"></i>
|
||
</div>
|
||
</div>
|
||
<div class="card-number fs-20" id="card-num-elem">
|
||
XXXX XXXX XXXX XXXX
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-4">
|
||
<div>
|
||
<div class="text-white-50">Card Holder</div>
|
||
<div id="card-holder-elem" class="fw-medium fs-14">Full Name</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="expiry">
|
||
<div class="text-white-50">Expires</div>
|
||
<div class="fw-medium fs-14">
|
||
<span id="expiry-month-elem">00</span>
|
||
/
|
||
<span id="expiry-year-elem">0000</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div>
|
||
<div class="text-white-50">CVC</div>
|
||
<div id="cvc-elem" class="fw-medium fs-14">---</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end card div elem -->
|
||
</div>
|
||
|
||
|
||
<form id="custom-card-form" autocomplete="off">
|
||
<div class="mb-3">
|
||
<label for="card-num-input" class="form-label">Card Number</label>
|
||
<input id="card-num-input" class="form-control" maxlength="19" placeholder="0000 0000 0000 0000" />
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="card-holder-input" class="form-label">Card Holder</label>
|
||
<input type="text" class="form-control" id="card-holder-input" placeholder="Enter holder name" />
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-4">
|
||
<div>
|
||
<label for="expiry-month-input" class="form-label">Expiry Month</label>
|
||
<select class="form-select" id="expiry-month-input">
|
||
<option></option>
|
||
<option value="01">01</option>
|
||
<option value="02">02</option>
|
||
<option value="03">03</option>
|
||
<option value="04">04</option>
|
||
<option value="05">05</option>
|
||
<option value="06">06</option>
|
||
<option value="07">07</option>
|
||
<option value="08">08</option>
|
||
<option value="09">09</option>
|
||
<option value="10">10</option>
|
||
<option value="11">11</option>
|
||
<option value="12">12</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<!-- end col -->
|
||
|
||
<div class="col-lg-4">
|
||
<div>
|
||
<label for="expiry-year-input" class="form-label">Expiry Year</label>
|
||
<select class="form-select" id="expiry-year-input">
|
||
<option></option>
|
||
<option value="2020">2020</option>
|
||
<option value="2021">2021</option>
|
||
<option value="2022">2022</option>
|
||
<option value="2023">2023</option>
|
||
<option value="2024">2024</option>
|
||
<option value="2025">2025</option>
|
||
<option value="2026">2026</option>
|
||
<option value="2027">2027</option>
|
||
<option value="2028">2028</option>
|
||
<option value="2029">2029</option>
|
||
<option value="2030">2030</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<!-- end col -->
|
||
|
||
<div class="col-lg-4">
|
||
<div class="cvc">
|
||
<label for="cvc-input" class="form-label">CVC</label>
|
||
<input type="text" id="cvc-input" class="form-control" maxlength="3" />
|
||
</div>
|
||
</div>
|
||
<!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<button class="btn btn-danger w-100 mt-3" type="submit">Pay Now</button>
|
||
</form>
|
||
<!-- end card form elem -->
|
||
</div>
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
<!-- end col -->
|
||
|
||
<div class="col-xl-4">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">Credit Card - card js plugin</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-wrapper mb-3"></div>
|
||
|
||
<div class="form-container active">
|
||
<form action="#" id="card-form-elem" autocomplete="off">
|
||
<div class="mb-3">
|
||
<label for="card-number-input" class="form-label">Card Number</label>
|
||
<input class="form-control" placeholder="Card number" type="tel" id="card-number-input">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="card-name-input" class="form-label">Card Holder</label>
|
||
<input class="form-control" placeholder="Full name" type="text" id="card-name-input">
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<div class="mb-3">
|
||
<label for="card-expiry-input" class="form-label">Expiry</label>
|
||
<input class="form-control" placeholder="MM/YY" type="tel" id="card-expiry-input">
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="mb-3">
|
||
<label for="card-cvc-input" class="form-label">CVC</label>
|
||
<input class="form-control" placeholder="CVC" type="number" id="card-cvc-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-danger w-100" type="submit">Pay Now</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- end card-body -->
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
<!-- end col -->
|
||
</div>
|
||
<!-- end row-->
|
||
</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 -->
|
||
|
||
<!--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>
|
||
|
||
<!-- apexcharts -->
|
||
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
|
||
|
||
<!-- Vector map-->
|
||
<script src="assets/libs/jsvectormap/jsvectormap.min.js"></script>
|
||
<script src="assets/libs/jsvectormap/maps/world-merc.js"></script>
|
||
<script src="assets/js/maps/us-merc-en.js"></script>
|
||
|
||
<!-- Swiper Js -->
|
||
<script src="assets/libs/swiper/swiper-bundle.min.js"></script>
|
||
|
||
<script src="assets/js/pages/form-input-spin.init.js"></script>
|
||
|
||
<script src="assets/libs/card/card.js"></script>
|
||
|
||
<!-- Widget init -->
|
||
<script src="assets/js/pages/widgets.init.js"></script>
|
||
|
||
<!-- App js -->
|
||
<script src="assets/js/app.js"></script>
|
||
</body>
|
||
|
||
|
||
<!-- Mirrored from themesbrand.com/velzon/html/master/widgets.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 08 May 2025 07:17:44 GMT -->
|
||
</html> |