| Şuanki Dizin: /home/wwwdreamtechnolo/www/yashdeveloper.com/mis_software7_dts-unts/project/dashboard/ |
| Şuanki Dosya : /home/wwwdreamtechnolo/www/yashdeveloper.com/mis_software7_dts-unts/project/dashboard/index1.php |
<?php
/*ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);*/
require_once('lib/functions.php');
$db = new class_functions();
$flag = 0;
?>
<!doctype html>
<html lang="en" dir="ltr">
<head>
<?php
require_once('header-common.php');
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="">
<!-- loader Start -->
<div id="loading">
<div class="loader simple-loader">
<div class="loader-body"></div>
</div> </div>
<!-- loader END -->
<aside class="sidebar sidebar-default sidebar-white sidebar-base navs-rounded-all ">
<div class="sidebar-header d-flex align-items-center justify-content-start">
<a href="index.php" class="navbar-brand">
<img src="images/<?php echo $logo; ?>" class="software_logo" style="height:90px; width:220px;" />
</a>
<div class="sidebar-toggle" data-toggle="sidebar" data-active="true">
<i class="icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.25 12.2744L19.25 12.2744" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.2998 18.2988L4.2498 12.2748L10.2998 6.24976" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</i>
</div>
</div>
<?php
require_once('left-side.php');
?>
<div class="sidebar-footer"></div>
</aside>
<main class="main-content">
<?php
require_once('navbar.php');
?>
<div class="conatiner-fluid content-inner mt-n5 py-0">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="row row-cols-1">
<div class="overflow-hidden d-slider1 ">
<ul class="p-0 m-0 mb-2 swiper-wrapper list-inline">
<li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="700">
<a href="add-report.php">
<div class="card-body">
<div class="progress-widget">
<div id="circle-progress-01" class="text-center circle-progress-01 circle-progress circle-progress-primary" data-min-value="0" data-max-value="100" data-value="90" data-type="percent">
<svg class="card-slie-arrow icon-24" width="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z" />
</svg>
</div>
<div class="progress-detail">
<?php
$projects_count=$db->get_project_count_from_projects();
?>
<p class="mb-2" style="color:gray;">Total Projects</p>
<h4 class="counter"><?php echo $projects_count; ?></h4>
</div>
</div>
</div>
</a>
</li>
<li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="800">
<a href="booking-report.php">
<div class="card-body">
<div class="progress-widget">
<div id="circle-progress-02" class="text-center circle-progress-01 circle-progress circle-progress-info" data-min-value="0" data-max-value="100" data-value="80" data-type="percent">
<svg class="card-slie-arrow icon-24" width="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,6.41L17.59,5L7,15.59V9H5V19H15V17H8.41L19,6.41Z" />
</svg>
</div>
<div class="progress-detail">
<?php
$booking_count=$db->get_booking_count_from_bookings();
?>
<p class="mb-2" style="color:gray;">Total Booking</p>
<h4 class="counter"><?php echo $booking_count; ?></h4>
</div>
</div>
</a>
</div>
</li>
<li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="900">
<div class="card-body">
<div class="progress-widget">
<div id="circle-progress-03" class="text-center circle-progress-01 circle-progress circle-progress-primary" data-min-value="0" data-max-value="100" data-value="70" data-type="percent">
<svg class="card-slie-arrow icon-24" width="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,6.41L17.59,5L7,15.59V9H5V19H15V17H8.41L19,6.41Z" />
</svg>
</div>
<div class="progress-detail">
<p class="mb-2">Total Enquiry</p>
<h4 class="counter">$375K</h4>
</div>
</div>
</div>
</li>
<li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1000">
<div class="card-body">
<div class="progress-widget">
<div id="circle-progress-04" class="text-center circle-progress-01 circle-progress circle-progress-info" data-min-value="0" data-max-value="100" data-value="60" data-type="percent">
<svg class="card-slie-arrow icon-24" width="24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z" />
</svg>
</div>
<div class="progress-detail">
<p class="mb-2">Revenue</p>
<h4 class="counter">$742K</h4>
</div>
</div>
</div>
</li>
<li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1100">
<div class="card-body">
<div class="progress-widget">
<div id="circle-progress-05" class="text-center circle-progress-01 circle-progress circle-progress-primary" data-min-value="0" data-max-value="100" data-value="50" data-type="percent">
<svg class="card-slie-arrow icon-24" width="24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z" />
</svg>
</div>
<div class="progress-detail">
<p class="mb-2">Net Income</p>
<h4 class="counter">$150K</h4>
</div>
</div>
</div>
</li>
<li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1200">
<div class="card-body">
<div class="progress-widget">
<div id="circle-progress-06" class="text-center circle-progress-01 circle-progress circle-progress-info" data-min-value="0" data-max-value="100" data-value="40" data-type="percent">
<svg class="card-slie-arrow icon-24" width="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,6.41L17.59,5L7,15.59V9H5V19H15V17H8.41L19,6.41Z" />
</svg>
</div>
<div class="progress-detail">
<p class="mb-2">Today</p>
<h4 class="counter">$4600</h4>
</div>
</div>
</div>
</li>
<li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1300">
<div class="card-body">
<div class="progress-widget">
<div id="circle-progress-07" class="text-center circle-progress-01 circle-progress circle-progress-primary" data-min-value="0" data-max-value="100" data-value="30" data-type="percent">
<svg class="card-slie-arrow icon-24 " width="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,6.41L17.59,5L7,15.59V9H5V19H15V17H8.41L19,6.41Z" />
</svg>
</div>
<div class="progress-detail">
<p class="mb-2">Members</p>
<h4 class="counter">11.2M</h4>
</div>
</div>
</div>
</li>
</ul>
<div class="swiper-button swiper-button-next"></div>
<div class="swiper-button swiper-button-prev"></div>
</div>
</div>
</div>
</div>
<div class="row row-cols-1">
<div class="overflow-hidden d-slider1 " data-aos="fade-up" data-aos-delay="900" style="margin: -20px;">
<style>
.btni {
background-color: white !important;
border: none;
color: black;
padding: 12px 10px;
margin: 10px;
font-size: 14px;
cursor: pointer;
width: 200px;
font-weight: 900 !important;
/* box-shadow: 2px 2px 4px #3a57e8; */
border-radius: 20px;
}
.btn:hover {
background-color: RoyalBlue;
}
.fa-user{
color: #3a57e8;
}
.fa-plus-circle{
color: #22B14C;
}
.fa-ticket-alt{
color: #22B14C;
}
.fa-file-alt{
color: #A349A4;
}
.fa-inr{
color: #FF7F27;
}
.fa-list{
color: #7D3C4A;
}
.fa-users{
color: #474B78;
}
.fa-plus{
color: #2DA2BF;
}
.fa-book-medical{
color: #880015;
}
</style>
<br>
<?php
if(isset($_SESSION['current_login_agent']))
{
?>
<a href="available-project.php" class="btni"><i class="fas fa-file-alt"></i> Project Report</a>
<a href="add-enquiry.php" class="btni"><i class="fas fa-users"></i> Add Enquiry</a>
<a href="enquiry-report.php" class="btni"><i class="fas fa-file-alt"></i> Enquiry Report</a>
<?php
}
else if(isset($_SESSION['current_login_supervisor']))
{
?>
<li class="nav-item">
<a class="nav-link" href="items-master.php">
<i class="fas fa-file-alt"></i>
<i class="sidenav-mini-icon"> H </i>
<span class="item-name">Items Master</span>
</a>
</li>
<?php
}
else
{
?>
<button class="btni"><i class="fas fa-user"></i> Add Agent</button>
<!-- // <button class="btni"><i class="fas fa-plus-circle"></i> Agent Report</button> */ -->
<button class="btni"><i class="fas fa-file-alt"></i> Agent Report</button>
<button class="btni"><i class="fas fa-ticket-alt"></i> Add Voucher</button>
<button class="btni"><i class="fas fa-file-alt"></i> Voucher Report</button>
<button class="btni"><i class="fas fa-plus-circle"></i> Add Project</button> <br>
<button class="btni"><i class="fas fa-file-alt"></i> Project Report</button>
<button class="btni"><i class="fas fa-book-medical"></i> Booking</button>
<button class="btni"><i class="fas fa-file-alt"></i> Booking Report</button>
<button class="btni"><i class="fas fa-inr"></i> Payment</button>
<button class="btni"><i class="fas fa-file-alt"></i> Payment Report</button><br>
<button class="btni"><i class="fas fa-plus"></i> Payment Schedule</button>
<button class="btni"><i class="fas fa-file-alt"></i> Payment Schedule Report</button>
<button class="btni"><i class="fas fa-list"></i> Expenses Categry</button>
<button class="btni"><i class="fas fa-tasks"></i> Expenses</button>
<button class="btni"><i class="fas fa-users"></i> Add Vendor</button> <br>
<button class="btni"><i class="fas fa-file-alt"></i> Vendor Report</button>
<?php
}
?>
<br>
<br>
<br>
</div>
</div>
<!-- </div>
</div> -->
<div class="col-md-12 col-lg-8">
<div class="row">
<div class="col-md-12">
<div class="card" data-aos="fade-up" data-aos-delay="800">
<div class="flex-wrap card-header d-flex justify-content-between align-items-center">
<div class="header-title">
<h4 class="card-title">$855.8K</h4>
<p class="mb-0">Gross Sales</p>
</div>
<div class="d-flex align-items-center align-self-center">
<div class="d-flex align-items-center text-primary">
<svg class="icon-12" xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0 0 24 24" fill="currentColor">
<g>
<circle cx="12" cy="12" r="8" fill="currentColor"></circle>
</g>
</svg>
<div class="ms-2">
<span class="text-gray">Sales</span>
</div>
</div>
<div class="d-flex align-items-center ms-3 text-info">
<svg class="icon-12" xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0 0 24 24" fill="currentColor">
<g>
<circle cx="12" cy="12" r="8" fill="currentColor"></circle>
</g>
</svg>
<div class="ms-2">
<span class="text-gray">Cost</span>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="text-gray dropdown-toggle" id="dropdownMenuButton22" data-bs-toggle="dropdown" aria-expanded="false">
This Week
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton22">
<li><a class="dropdown-item" href="#">This Week</a></li>
<li><a class="dropdown-item" href="#">This Month</a></li>
<li><a class="dropdown-item" href="#">This Year</a></li>
</ul>
</div>
</div>
<div class="card-body">
<div id="d-main" class="d-main"></div>
</div>
</div>
</div>
<div class="col-md-12 col-xl-6">
<div class="card" data-aos="fade-up" data-aos-delay="900">
<div class="flex-wrap card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Earnings</h4>
</div>
<div class="dropdown">
<a href="#" class="text-gray dropdown-toggle" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
This Week
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">This Week</a></li>
<li><a class="dropdown-item" href="#">This Month</a></li>
<li><a class="dropdown-item" href="#">This Year</a></li>
</ul>
</div>
</div>
<div class="card-body">
<div class="flex-wrap d-flex align-items-center justify-content-between">
<div id="myChart" class="col-md-8 col-lg-8 myChart"></div>
<div class="d-grid gap col-md-4 col-lg-4">
<div class="d-flex align-items-start">
<svg class="mt-2 icon-14" xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 24 24" fill="#3a57e8">
<g>
<circle cx="12" cy="12" r="8" fill="#3a57e8"></circle>
</g>
</svg>
<div class="ms-3">
<span class="text-gray">Fashion</span>
<h6>251K</h6>
</div>
</div>
<div class="d-flex align-items-start">
<svg class="mt-2 icon-14" xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 24 24" fill="#4bc7d2">
<g>
<circle cx="12" cy="12" r="8" fill="#4bc7d2"></circle>
</g>
</svg>
<div class="ms-3">
<span class="text-gray">Accessories</span>
<h6>176K</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xl-6">
<div class="card" data-aos="fade-up" data-aos-delay="1000">
<div class="flex-wrap card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Conversions</h4>
</div>
<div class="dropdown">
<a href="#" class="text-gray dropdown-toggle" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
This Week
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton3">
<li><a class="dropdown-item" href="#">This Week</a></li>
<li><a class="dropdown-item" href="#">This Month</a></li>
<li><a class="dropdown-item" href="#">This Year</a></li>
</ul>
</div>
</div>
<div class="card-body">
<div id="d-activity" class="d-activity"></div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12">
<div class="overflow-hidden card" data-aos="fade-up" data-aos-delay="600">
<div class="flex-wrap card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="mb-2 card-title">Enterprise Clients</h4>
<p class="mb-0">
<svg class ="me-2 text-primary icon-24" width="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
</svg>
15 new acquired this month
</p>
</div>
</div>
<div class="p-0 card-body">
<div class="mt-4 table-responsive">
<table id="basic-table" class="table mb-0 table-striped" role="grid">
<thead>
<tr>
<th>COMPANIES</th>
<th>CONTACTS</th>
<th>ORDER</th>
<th>COMPLETION</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<img class="rounded bg-soft-primary img-fluid avatar-40 me-3" src="../assets/images/shapes/01.png" alt="profile">
<h6>Addidis Sportwear</h6>
</div>
</td>
<td>
<div class="iq-media-group iq-media-group-1">
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">SP</div>
</a>
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">PP</div>
</a>
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">MM</div>
</a>
</div>
</td>
<td>$14,000</td>
<td>
<div class="mb-2 d-flex align-items-center">
<h6>60%</h6>
</div>
<div class="shadow-none progress bg-soft-primary w-100" style="height: 4px">
<div class="progress-bar bg-primary" data-toggle="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img class="rounded bg-soft-primary img-fluid avatar-40 me-3" src="../assets/images/shapes/05.png" alt="profile">
<h6>Netflixer Platforms</h6>
</div>
</td>
<td>
<div class="iq-media-group iq-media-group-1">
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">SP</div>
</a>
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">PP</div>
</a>
</div>
</td>
<td>$30,000</td>
<td>
<div class="mb-2 d-flex align-items-center">
<h6>25%</h6>
</div>
<div class="shadow-none progress bg-soft-primary w-100" style="height: 4px">
<div class="progress-bar bg-primary" data-toggle="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img class="rounded bg-soft-primary img-fluid avatar-40 me-3" src="../assets/images/shapes/02.png" alt="profile">
<h6>Shopifi Stores</h6>
</div>
</td>
<td>
<div class="iq-media-group iq-media-group-1">
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">PP</div>
</a>
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">TP</div>
</a>
</div>
</td>
<td>$8,500</td>
<td>
<div class="mb-2 d-flex align-items-center">
<h6>100%</h6>
</div>
<div class="shadow-none progress bg-soft-success w-100" style="height: 4px">
<div class="progress-bar bg-success" data-toggle="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img class="rounded bg-soft-primary img-fluid avatar-40 me-3" src="../assets/images/shapes/03.png" alt="profile">
<h6>Bootstrap Technologies</h6>
</div>
</td>
<td>
<div class="iq-media-group iq-media-group-1">
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">SP</div>
</a>
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">PP</div>
</a>
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">MM</div>
</a>
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">TP</div>
</a>
</div>
</td>
<td>$20,500</td>
<td>
<div class="mb-2 d-flex align-items-center">
<h6>100%</h6>
</div>
<div class="shadow-none progress bg-soft-success w-100" style="height: 4px">
<div class="progress-bar bg-success" data-toggle="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img class="rounded bg-soft-primary img-fluid avatar-40 me-3" src="../assets/images/shapes/04.png" alt="profile">
<h6>Community First</h6>
</div>
</td>
<td>
<div class="iq-media-group iq-media-group-1">
<a href="#" class="iq-media-1">
<div class="icon iq-icon-box-3 rounded-pill">MM</div>
</a>
</div>
</td>
<td>$9,800</td>
<td>
<div class="mb-2 d-flex align-items-center">
<h6>75%</h6>
</div>
<div class="shadow-none progress bg-soft-primary w-100" style="height: 4px">
<div class="progress-bar bg-primary" data-toggle="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="card credit-card-widget" data-aos="fade-up" data-aos-delay="900">
<div class="pb-4 border-0 card-header">
<div class="p-4 border border-white rounded primary-gradient-card">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="font-weight-bold">VISA </h5>
<P class="mb-0">PREMIUM ACCOUNT</P>
</div>
<div class="master-card-content">
<svg class="master-card-1 icon-60" width="60" viewBox="0 0 24 24">
<path fill="#ffffff" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
<svg class="master-card-2 icon-60" width="60" viewBox="0 0 24 24">
<path fill="#ffffff" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
</div>
</div>
<div class="my-4">
<div class="card-number">
<span class="fs-5 me-2">5789</span>
<span class="fs-5 me-2">**</span>
<span class="fs-5 me-2">**</span>
<span class="fs-5">2847</span>
</div>
</div>
<div class="mb-2 d-flex align-items-center justify-content-between">
<p class="mb-0">Card holder</p>
<p class="mb-0">Expire Date</p>
</div>
<div class="d-flex align-items-center justify-content-between">
<h6>Mike Smith</h6>
<h6 class="ms-5">06/11</h6>
</div>
</div>
</div>
<div class="card-body">
<div class="flex-wrap mb-4 d-flex align-itmes-center justify-content-between">
<div class="d-flex align-itmes-center me-0 me-md-4">
<div>
<div class="p-3 mb-2 rounded bg-soft-primary">
<svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9303 7C16.9621 6.92913 16.977 6.85189 16.9739 6.77432H17C16.8882 4.10591 14.6849 2 12.0049 2C9.325 2 7.12172 4.10591 7.00989 6.77432C6.9967 6.84898 6.9967 6.92535 7.00989 7H6.93171C5.65022 7 4.28034 7.84597 3.88264 10.1201L3.1049 16.3147C2.46858 20.8629 4.81062 22 7.86853 22H16.1585C19.2075 22 21.4789 20.3535 20.9133 16.3147L20.1444 10.1201C19.676 7.90964 18.3503 7 17.0865 7H16.9303ZM15.4932 7C15.4654 6.92794 15.4506 6.85153 15.4497 6.77432C15.4497 4.85682 13.8899 3.30238 11.9657 3.30238C10.0416 3.30238 8.48184 4.85682 8.48184 6.77432C8.49502 6.84898 8.49502 6.92535 8.48184 7H15.4932ZM9.097 12.1486C8.60889 12.1486 8.21321 11.7413 8.21321 11.2389C8.21321 10.7366 8.60889 10.3293 9.097 10.3293C9.5851 10.3293 9.98079 10.7366 9.98079 11.2389C9.98079 11.7413 9.5851 12.1486 9.097 12.1486ZM14.002 11.2389C14.002 11.7413 14.3977 12.1486 14.8858 12.1486C15.3739 12.1486 15.7696 11.7413 15.7696 11.2389C15.7696 10.7366 15.3739 10.3293 14.8858 10.3293C14.3977 10.3293 14.002 10.7366 14.002 11.2389Z" fill="currentColor"></path>
</svg>
</div>
</div>
<div class="ms-3">
<h5>1153</h5>
<small class="mb-0">Products</small>
</div>
</div>
<div class="d-flex align-itmes-center">
<div>
<div class="p-3 mb-2 rounded bg-soft-info">
<svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1213 11.2331H16.8891C17.3088 11.2331 17.6386 10.8861 17.6386 10.4677C17.6386 10.0391 17.3088 9.70236 16.8891 9.70236H14.1213C13.7016 9.70236 13.3719 10.0391 13.3719 10.4677C13.3719 10.8861 13.7016 11.2331 14.1213 11.2331ZM20.1766 5.92749C20.7861 5.92749 21.1858 6.1418 21.5855 6.61123C21.9852 7.08067 22.0551 7.7542 21.9652 8.36549L21.0159 15.06C20.8361 16.3469 19.7569 17.2949 18.4879 17.2949H7.58639C6.25742 17.2949 5.15828 16.255 5.04837 14.908L4.12908 3.7834L2.62026 3.51807C2.22057 3.44664 1.94079 3.04864 2.01073 2.64043C2.08068 2.22305 2.47038 1.94649 2.88006 2.00874L5.2632 2.3751C5.60293 2.43735 5.85274 2.72207 5.88272 3.06905L6.07257 5.35499C6.10254 5.68257 6.36234 5.92749 6.68209 5.92749H20.1766ZM7.42631 18.9079C6.58697 18.9079 5.9075 19.6018 5.9075 20.459C5.9075 21.3061 6.58697 22 7.42631 22C8.25567 22 8.93514 21.3061 8.93514 20.459C8.93514 19.6018 8.25567 18.9079 7.42631 18.9079ZM18.6676 18.9079C17.8282 18.9079 17.1487 19.6018 17.1487 20.459C17.1487 21.3061 17.8282 22 18.6676 22C19.4969 22 20.1764 21.3061 20.1764 20.459C20.1764 19.6018 19.4969 18.9079 18.6676 18.9079Z" fill="currentColor"></path>
</svg>
</div>
</div>
<div class="ms-3">
<h5>81K</h5>
<small class="mb-0">Order Served</small>
</div>
</div>
</div>
<div class="mb-4">
<div class="flex-wrap d-flex justify-content-between">
<h2 class="mb-2">$405,012,300</h2>
<div>
<span class="badge bg-success rounded-pill">YoY 24%</span>
</div>
</div>
<p class="text-info">Life time sales</p>
</div>
<div class="grid-cols-2 d-grid gap-card">
<button class="p-2 btn btn-primary text-uppercase">SUMMARY</button>
<button class="p-2 btn btn-info text-uppercase">ANALYTICS</button>
</div>
</div>
</div>
<div class="card" data-aos="fade-up" data-aos-delay="500">
<div class="text-center card-body d-flex justify-content-around">
<div>
<h2 class="mb-2">750<small>K</small></h2>
<p class="mb-0 text-gray">Website Visitors</p>
</div>
<hr class="hr-vertial">
<div>
<h2 class="mb-2">7,500</h2>
<p class="mb-0 text-gray">New Customers</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12">
<div class="card" data-aos="fade-up" data-aos-delay="600">
<div class="flex-wrap card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="mb-2 card-title">Activity overview</h4>
<p class="mb-0">
<svg class ="me-2 icon-24" width="24" height="24" viewBox="0 0 24 24">
<path fill="#17904b" d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z" />
</svg>
16% this month
</p>
</div>
</div>
<div class="card-body">
<div class="mb-2 d-flex profile-media align-items-top">
<div class="mt-1 profile-dots-pills border-primary"></div>
<div class="ms-4">
<h6 class="mb-1 ">$2400, Purchase</h6>
<span class="mb-0">11 JUL 8:10 PM</span>
</div>
</div>
<div class="mb-2 d-flex profile-media align-items-top">
<div class="mt-1 profile-dots-pills border-primary"></div>
<div class="ms-4">
<h6 class="mb-1 ">New order #8744152</h6>
<span class="mb-0">11 JUL 11 PM</span>
</div>
</div>
<div class="mb-2 d-flex profile-media align-items-top">
<div class="mt-1 profile-dots-pills border-primary"></div>
<div class="ms-4">
<h6 class="mb-1 ">Affiliate Payout</h6>
<span class="mb-0">11 JUL 7:64 PM</span>
</div>
</div>
<div class="mb-2 d-flex profile-media align-items-top">
<div class="mt-1 profile-dots-pills border-primary"></div>
<div class="ms-4">
<h6 class="mb-1 ">New user added</h6>
<span class="mb-0">11 JUL 1:21 AM</span>
</div>
</div>
<div class="mb-1 d-flex profile-media align-items-top">
<div class="mt-1 profile-dots-pills border-primary"></div>
<div class="ms-4">
<h6 class="mb-1 ">Product added</h6>
<span class="mb-0">11 JUL 4:50 AM</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-download">
<a class="btn btn-success px-3 py-2" href="https://iqonic.design/product/admin-templates/hope-ui-admin-free-open-source-bootstrap-admin-template/" target="_blank" >
<svg class="icon-24" width="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M17.554 7.29614C20.005 7.29614 22 9.35594 22 11.8876V16.9199C22 19.4453 20.01 21.5 17.564 21.5L6.448 21.5C3.996 21.5 2 19.4412 2 16.9096V11.8773C2 9.35181 3.991 7.29614 6.438 7.29614H7.378L17.554 7.29614Z" fill="currentColor"></path>
<path d="M12.5464 16.0374L15.4554 13.0695C15.7554 12.7627 15.7554 12.2691 15.4534 11.9634C15.1514 11.6587 14.6644 11.6597 14.3644 11.9654L12.7714 13.5905L12.7714 3.2821C12.7714 2.85042 12.4264 2.5 12.0004 2.5C11.5754 2.5 11.2314 2.85042 11.2314 3.2821L11.2314 13.5905L9.63742 11.9654C9.33742 11.6597 8.85043 11.6587 8.54843 11.9634C8.39743 12.1168 8.32142 12.3168 8.32142 12.518C8.32142 12.717 8.39743 12.9171 8.54643 13.0695L11.4554 16.0374C11.6004 16.1847 11.7964 16.268 12.0004 16.268C12.2054 16.268 12.4014 16.1847 12.5464 16.0374Z" fill="currentColor"></path>
</svg>
</a>
</div>
<!-- Footer Section Start -->
<footer class="footer">
<div class="footer-body">
<ul class="left-panel list-inline mb-0 p-0">
<li class="list-inline-item"><a href="../dashboard/extra/privacy-policy.html">Privacy Policy</a></li>
<li class="list-inline-item"><a href="../dashboard/extra/terms-of-service.html">Terms of Use</a></li>
</ul>
<div class="right-panel">
©<script>document.write(new Date().getFullYear())</script> Hope UI, Made with
<span class="">
<svg class="icon-15" width="15" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.85 2.50065C16.481 2.50065 17.111 2.58965 17.71 2.79065C21.401 3.99065 22.731 8.04065 21.62 11.5806C20.99 13.3896 19.96 15.0406 18.611 16.3896C16.68 18.2596 14.561 19.9196 12.28 21.3496L12.03 21.5006L11.77 21.3396C9.48102 19.9196 7.35002 18.2596 5.40102 16.3796C4.06102 15.0306 3.03002 13.3896 2.39002 11.5806C1.26002 8.04065 2.59002 3.99065 6.32102 2.76965C6.61102 2.66965 6.91002 2.59965 7.21002 2.56065H7.33002C7.61102 2.51965 7.89002 2.50065 8.17002 2.50065H8.28002C8.91002 2.51965 9.52002 2.62965 10.111 2.83065H10.17C10.21 2.84965 10.24 2.87065 10.26 2.88965C10.481 2.96065 10.69 3.04065 10.89 3.15065L11.27 3.32065C11.3618 3.36962 11.4649 3.44445 11.554 3.50912C11.6104 3.55009 11.6612 3.58699 11.7 3.61065C11.7163 3.62028 11.7329 3.62996 11.7496 3.63972C11.8354 3.68977 11.9247 3.74191 12 3.79965C13.111 2.95065 14.46 2.49065 15.85 2.50065ZM18.51 9.70065C18.92 9.68965 19.27 9.36065 19.3 8.93965V8.82065C19.33 7.41965 18.481 6.15065 17.19 5.66065C16.78 5.51965 16.33 5.74065 16.18 6.16065C16.04 6.58065 16.26 7.04065 16.68 7.18965C17.321 7.42965 17.75 8.06065 17.75 8.75965V8.79065C17.731 9.01965 17.8 9.24065 17.94 9.41065C18.08 9.58065 18.29 9.67965 18.51 9.70065Z" fill="currentColor"></path>
</svg>
</span> by <a href="https://iqonic.design/">IQONIC Design</a>.
</div>
</div>
</footer>
<!-- Footer Section End --> </main>
<a class="btn btn-fixed-end btn-warning btn-icon btn-setting" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<svg width="24" viewBox="0 0 24 24" class="animated-rotate icon-24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8064 7.62361L20.184 6.54352C19.6574 5.6296 18.4905 5.31432 17.5753 5.83872V5.83872C17.1397 6.09534 16.6198 6.16815 16.1305 6.04109C15.6411 5.91402 15.2224 5.59752 14.9666 5.16137C14.8021 4.88415 14.7137 4.56839 14.7103 4.24604V4.24604C14.7251 3.72922 14.5302 3.2284 14.1698 2.85767C13.8094 2.48694 13.3143 2.27786 12.7973 2.27808H11.5433C11.0367 2.27807 10.5511 2.47991 10.1938 2.83895C9.83644 3.19798 9.63693 3.68459 9.63937 4.19112V4.19112C9.62435 5.23693 8.77224 6.07681 7.72632 6.0767C7.40397 6.07336 7.08821 5.98494 6.81099 5.82041V5.82041C5.89582 5.29601 4.72887 5.61129 4.20229 6.52522L3.5341 7.62361C3.00817 8.53639 3.31916 9.70261 4.22975 10.2323V10.2323C4.82166 10.574 5.18629 11.2056 5.18629 11.8891C5.18629 12.5725 4.82166 13.2041 4.22975 13.5458V13.5458C3.32031 14.0719 3.00898 15.2353 3.5341 16.1454V16.1454L4.16568 17.2346C4.4124 17.6798 4.82636 18.0083 5.31595 18.1474C5.80554 18.2866 6.3304 18.2249 6.77438 17.976V17.976C7.21084 17.7213 7.73094 17.6516 8.2191 17.7822C8.70725 17.9128 9.12299 18.233 9.37392 18.6717C9.53845 18.9489 9.62686 19.2646 9.63021 19.587V19.587C9.63021 20.6435 10.4867 21.5 11.5433 21.5H12.7973C13.8502 21.5001 14.7053 20.6491 14.7103 19.5962V19.5962C14.7079 19.088 14.9086 18.6 15.2679 18.2407C15.6272 17.8814 16.1152 17.6807 16.6233 17.6831C16.9449 17.6917 17.2594 17.7798 17.5387 17.9394V17.9394C18.4515 18.4653 19.6177 18.1544 20.1474 17.2438V17.2438L20.8064 16.1454C21.0615 15.7075 21.1315 15.186 21.001 14.6964C20.8704 14.2067 20.55 13.7894 20.1108 13.5367V13.5367C19.6715 13.284 19.3511 12.8666 19.2206 12.3769C19.09 11.8873 19.16 11.3658 19.4151 10.928C19.581 10.6383 19.8211 10.3982 20.1108 10.2323V10.2323C21.0159 9.70289 21.3262 8.54349 20.8064 7.63277V7.63277V7.62361Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="12.1747" cy="11.8891" r="2.63616" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></circle>
</svg>
</a>
<!-- Wrapper End-->
<!-- offcanvas start -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" data-bs-scroll="true" data-bs-backdrop="true" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<div class="d-flex align-items-center">
<h3 class="offcanvas-title me-3" id="offcanvasExampleLabel">Settings</h3>
</div>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body data-scrollbar">
<div class="row">
<div class="col-lg-12">
<h5 class="mb-3">Scheme</h5>
<div class="d-grid gap-3 grid-cols-3 mb-4">
<div class="btn btn-border" data-setting="color-mode" data-name="color" data-value="auto">
<svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M7,2V13H10V22L17,10H13L17,2H7Z" />
</svg>
<span class="ms-2 "> Auto </span>
</div>
<div class="btn btn-border" data-setting="color-mode" data-name="color" data-value="dark">
<svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M9,2C7.95,2 6.95,2.16 6,2.46C10.06,3.73 13,7.5 13,12C13,16.5 10.06,20.27 6,21.54C6.95,21.84 7.95,22 9,22A10,10 0 0,0 19,12A10,10 0 0,0 9,2Z" />
</svg>
<span class="ms-2 "> Dark </span>
</div>
<div class="btn btn-border active" data-setting="color-mode" data-name="color" data-value="light">
<svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z" />
</svg>
<span class="ms-2 "> Light</span>
</div>
</div>
<hr class="hr-horizontal">
<div class="d-flex align-items-center justify-content-between">
<h5 class="mt-4 mb-3">Color Customizer</h5>
<button class="btn btn-transparent p-0 border-0" data-value="theme-color-default" data-info="#079aa2" data-setting="color-mode1" data-name="color" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Default">
<svg class="icon-18" width="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.4799 12.2424C21.7557 12.2326 21.9886 12.4482 21.9852 12.7241C21.9595 14.8075 21.2975 16.8392 20.0799 18.5506C18.7652 20.3986 16.8748 21.7718 14.6964 22.4612C12.518 23.1505 10.1711 23.1183 8.01299 22.3694C5.85488 21.6205 4.00382 20.196 2.74167 18.3126C1.47952 16.4293 0.875433 14.1905 1.02139 11.937C1.16734 9.68346 2.05534 7.53876 3.55018 5.82945C5.04501 4.12014 7.06478 2.93987 9.30193 2.46835C11.5391 1.99683 13.8711 2.2599 15.9428 3.2175L16.7558 1.91838C16.9822 1.55679 17.5282 1.62643 17.6565 2.03324L18.8635 5.85986C18.945 6.11851 18.8055 6.39505 18.549 6.48314L14.6564 7.82007C14.2314 7.96603 13.8445 7.52091 14.0483 7.12042L14.6828 5.87345C13.1977 5.18699 11.526 4.9984 9.92231 5.33642C8.31859 5.67443 6.8707 6.52052 5.79911 7.74586C4.72753 8.97119 4.09095 10.5086 3.98633 12.1241C3.8817 13.7395 4.31474 15.3445 5.21953 16.6945C6.12431 18.0446 7.45126 19.0658 8.99832 19.6027C10.5454 20.1395 12.2278 20.1626 13.7894 19.6684C15.351 19.1743 16.7062 18.1899 17.6486 16.8652C18.4937 15.6773 18.9654 14.2742 19.0113 12.8307C19.0201 12.5545 19.2341 12.3223 19.5103 12.3125L21.4799 12.2424Z" fill="#31BAF1"/>
<path d="M20.0941 18.5594C21.3117 16.848 21.9736 14.8163 21.9993 12.7329C22.0027 12.4569 21.7699 12.2413 21.4941 12.2512L19.5244 12.3213C19.2482 12.3311 19.0342 12.5633 19.0254 12.8395C18.9796 14.283 18.5078 15.6861 17.6628 16.8739C16.7203 18.1986 15.3651 19.183 13.8035 19.6772C12.2419 20.1714 10.5595 20.1483 9.01246 19.6114C7.4654 19.0746 6.13845 18.0534 5.23367 16.7033C4.66562 15.8557 4.28352 14.9076 4.10367 13.9196C4.00935 18.0934 6.49194 21.37 10.008 22.6416C10.697 22.8908 11.4336 22.9852 12.1652 22.9465C13.075 22.8983 13.8508 22.742 14.7105 22.4699C16.8889 21.7805 18.7794 20.4073 20.0941 18.5594Z" fill="#0169CA"/>
</svg>
</button>
</div>
<div class="grid-cols-5 mb-4 d-grid gap-x-2">
<div class="btn btn-border bg-transparent" data-value="theme-color-blue" data-info="#573BFF" data-setting="color-mode1" data-name="color" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Theme-1">
<svg class="customizer-btn icon-32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" > <circle cx="12" cy="12" r="10" fill="#00C3F9" /> <path d="M2,12 a1,1 1 1,0 20,0" fill="#573BFF" /></svg>
</div>
<div class="btn btn-border bg-transparent" data-value="theme-color-gray" data-info="#FD8D00" data-setting="color-mode1" data-name="color" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Theme-2">
<svg class="customizer-btn icon-32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" > <circle cx="12" cy="12" r="10" fill="#91969E" /> <path d="M2,12 a1,1 1 1,0 20,0" fill="#FD8D00" /></svg>
</div>
<div class="btn btn-border bg-transparent" data-value="theme-color-red" data-info="#366AF0" data-setting="color-mode1" data-name="color" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Theme-3">
<svg class="customizer-btn icon-32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" > <circle cx="12" cy="12" r="10" fill="#DB5363" /> <path d="M2,12 a1,1 1 1,0 20,0" fill="#366AF0" /></svg>
</div>
<div class="btn btn-border bg-transparent" data-value="theme-color-yellow" data-info="#6410F1" data-setting="color-mode1" data-name="color" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Theme-4">
<svg class="customizer-btn icon-32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" > <circle cx="12" cy="12" r="10" fill="#EA6A12" /> <path d="M2,12 a1,1 1 1,0 20,0" fill="#6410F1" /></svg>
</div>
<div class="btn btn-border bg-transparent" data-value="theme-color-pink" data-info="#25C799" data-setting="color-mode1" data-name="color" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Theme-5">
<svg class="customizer-btn icon-32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" > <circle cx="12" cy="12" r="10" fill="#E586B3" /> <path d="M2,12 a1,1 1 1,0 20,0" fill="#25C799" /></svg>
</div>
</div>
<hr class="hr-horizontal">
<h5 class="mb-3 mt-4">Scheme Direction</h5>
<div class="d-grid gap-3 grid-cols-2 mb-4">
<div class="text-center">
<img src="../assets/images/settings/dark/01.png" alt="ltr" class="mode dark-img img-fluid btn-border p-0 flex-column active mb-2" data-setting="dir-mode" data-name="dir" data-value="ltr">
<img src="../assets/images/settings/light/01.png" alt="ltr" class="mode light-img img-fluid btn-border p-0 flex-column active mb-2" data-setting="dir-mode" data-name="dir" data-value="ltr">
<span class=" mt-2"> LTR </span>
</div>
<div class="text-center">
<img src="../assets/images/settings/dark/02.png" alt="" class="mode dark-img img-fluid btn-border p-0 flex-column mb-2" data-setting="dir-mode" data-name="dir" data-value="rtl">
<img src="../assets/images/settings/light/02.png" alt="" class="mode light-img img-fluid btn-border p-0 flex-column mb-2" data-setting="dir-mode" data-name="dir" data-value="rtl">
<span class="mt-2 "> RTL </span>
</div>
</div>
<hr class="hr-horizontal">
<h5 class="mt-4 mb-3">Sidebar Color</h5>
<div class="d-grid gap-3 grid-cols-2 mb-4">
<div class="btn btn-border d-block" data-setting="sidebar" data-name="sidebar-color" data-value="sidebar-white">
<span class=""> Default </span>
</div>
<div class="btn btn-border d-block" data-setting="sidebar" data-name="sidebar-color" data-value="sidebar-dark">
<span class=""> Dark </span>
</div>
<div class="btn btn-border d-block" data-setting="sidebar" data-name="sidebar-color" data-value="sidebar-color">
<span class=""> Color </span>
</div>
<div class="btn btn-border d-block" data-setting="sidebar" data-name="sidebar-color" data-value="sidebar-transparent">
<span class=""> Transparent </span>
</div>
</div>
<hr class="hr-horizontal">
<h5 class="mt-4 mb-3">Sidebar Types</h5>
<div class="d-grid gap-3 grid-cols-3 mb-4">
<div class="text-center">
<img src="../assets/images/settings/dark/03.png" alt="mini" class="mode dark-img img-fluid btn-border p-0 flex-column mb-2" data-setting="sidebar" data-name="sidebar-type" data-value="sidebar-mini">
<img src="../assets/images/settings/light/03.png" alt="mini" class="mode light-img img-fluid btn-border p-0 flex-column mb-2" data-setting="sidebar" data-name="sidebar-type" data-value="sidebar-mini">
<span class="mt-2">Mini</span>
</div>
<div class="text-center">
<img src="../assets/images/settings/dark/04.png" alt="hover" class="mode dark-img img-fluid btn-border p-0 flex-column mb-2" data-setting="sidebar" data-name="sidebar-type" data-value="sidebar-hover" data-extra-value="sidebar-mini">
<img src="../assets/images/settings/light/04.png" alt="hover" class="mode light-img img-fluid btn-border p-0 flex-column mb-2" data-setting="sidebar" data-name="sidebar-type" data-value="sidebar-hover" data-extra-value="sidebar-mini">
<span class="mt-2">Hover</span>
</div>
<div class="text-center">
<img src="../assets/images/settings/dark/05.png" alt="boxed" class="mode dark-img img-fluid btn-border p-0 flex-column mb-2" data-setting="sidebar" data-name="sidebar-type" data-value="sidebar-boxed">
<img src="../assets/images/settings/light/05.png" alt="boxed" class="mode light-img img-fluid btn-border p-0 flex-column mb-2" data-setting="sidebar" data-name="sidebar-type" data-value="sidebar-boxed">
<span class="mt-2">Boxed</span>
</div>
</div>
<hr class="hr-horizontal">
<h5 class="mt-4 mb-3">Sidebar Active Style</h5>
<div class="d-grid gap-3 grid-cols-2 mb-4">
<div class="text-center">
<img src="../assets/images/settings/dark/06.png" alt="rounded-one-side" class="mode dark-img img-fluid btn-border p-0 flex-column mb-2" data-setting="sidebar" data-name="sidebar-item" data-value="navs-rounded">
<img src="../assets/images/settings/light/06.png" alt="rounded-one-side" class="mode light-img img-fluid btn-border p-0 flex-column mb-2" data-setting="sidebar" data-name="sidebar-item" data-value="navs-rounded">
<span class="mt-2">Rounded One Side</span>
</div>
<div class="text-center">
<img src="../assets/images/settings/dark/07.png" alt="rounded-all" class="mode dark-img img-fluid btn-border p-0 flex-column active mb-2" data-setting="sidebar" data-name="sidebar-item" data-value="navs-rounded-all">
<img src="../assets/images/settings/light/07.png" alt="rounded-all" class="mode light-img img-fluid btn-border p-0 flex-column active mb-2" data-setting="sidebar" data-name="sidebar-item" data-value="navs-rounded-all">
<span class="mt-2">Rounded All</span>
</div>
<div class="text-center">
<img src="../assets/images/settings/dark/08.png" alt="pill-one-side" class="mode dark-img img-fluid btn-border p-0 flex-column mb-2" data-setting="sidebar" data-name="sidebar-item" data-value="navs-pill">
<img src="../assets/images/settings/light/09.png" alt="pill-one-side" class="mode light-img img-fluid btn-border p-0 flex-column mb-2" data-setting="sidebar" data-name="sidebar-item" data-value="navs-pill">
<span class="mt-2">Pill One Side</span>
</div>
<div class="text-center">
<img src="../assets/images/settings/dark/09.png" alt="pill-all" class="mode dark-img img-fluid btn-border p-0 flex-column" data-setting="sidebar" data-name="sidebar-item" data-value="navs-pill-all">
<img src="../assets/images/settings/light/08.png" alt="pill-all" class="mode light-img img-fluid btn-border p-0 flex-column" data-setting="sidebar" data-name="sidebar-item" data-value="navs-pill-all">
<span class="mt-2">Pill All</span>
</div>
</div>
<hr class="hr-horizontal">
<h5 class="mt-4 mb-3">Navbar Style</h5>
<div class="d-grid gap-3 grid-cols-2 ">
<div class=" text-center">
<img src="../assets/images/settings/dark/11.png" alt="image" class="mode dark-img img-fluid btn-border p-0 flex-column mb-2" data-setting="navbar" data-target=".iq-navbar" data-name="navbar-type" data-value="nav-glass">
<img src="../assets/images/settings/light/10.png" alt="image" class="mode light-img img-fluid btn-border p-0 flex-column mb-2" data-setting="navbar" data-target=".iq-navbar" data-name="navbar-type" data-value="nav-glass">
<span class="mt-2">Glass</span>
</div>
<div class="text-center">
<img src="../assets/images/settings/dark/10.png" alt="color" class="mode dark-img img-fluid btn-border p-0 flex-column mb-2" data-setting="navbar" data-target=".iq-navbar-header" data-name="navbar-type" data-value="navs-bg-color">
<img src="../assets/images/settings/light/11.png" alt="color" class="mode light-img img-fluid btn-border p-0 flex-column mb-2" data-setting="navbar" data-target=".iq-navbar-header" data-name="navbar-type" data-value="navs-bg-color">
<span class="mt-2">Color</span>
</div>
<div class=" text-center">
<img src="../assets/images/settings/dark/12.png" alt="sticky" class="mode dark-img img-fluid btn-border p-0 flex-column mb-2" data-setting="navbar" data-target=".iq-navbar" data-name="navbar-type" data-value="navs-sticky">
<img src="../assets/images/settings/light/12.png" alt="sticky" class="mode light-img img-fluid btn-border p-0 flex-column mb-2" data-setting="navbar" data-target=".iq-navbar" data-name="navbar-type" data-value="navs-sticky">
<span class="mt-2">Sticky</span>
</div>
<div class="text-center">
<img src="../assets/images/settings/dark/13.png" alt="transparent" class="mode dark-img img-fluid btn-border p-0 flex-column mb-2" data-setting="navbar" data-target=".iq-navbar" data-name="navbar-type" data-value="navs-transparent">
<img src="../assets/images/settings/light/13.png" alt="transparent" class="mode light-img img-fluid btn-border p-0 flex-column mb-2" data-setting="navbar" data-target=".iq-navbar" data-name="navbar-type" data-value="navs-transparent">
<span class="mt-2">Transparent</span>
</div>
<div class="btn btn-border active col-span-full mt-4 d-block" data-setting="navbar" data-name="navbar-default" data-value="default">
<span class=""> Default Navbar</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Library Bundle Script -->
<script src="../assets/js/core/libs.min.js"></script>
<!-- External Library Bundle Script -->
<script src="../assets/js/core/external.min.js"></script>
<!-- Widgetchart Script -->
<script src="../assets/js/charts/widgetcharts.js"></script>
<!-- mapchart Script -->
<script src="../assets/js/charts/vectore-chart.js"></script>
<script src="../assets/js/charts/dashboard.js" ></script>
<!-- fslightbox Script -->
<script src="../assets/js/plugins/fslightbox.js"></script>
<!-- Settings Script -->
<script src="../assets/js/plugins/setting.js"></script>
<!-- Slider-tab Script -->
<script src="../assets/js/plugins/slider-tabs.js"></script>
<!-- Form Wizard Script -->
<script src="../assets/js/plugins/form-wizard.js"></script>
<!-- AOS Animation Plugin-->
<script src="../assets/vendor/aos/dist/aos.js"></script>
<!-- App Script -->
<script src="../assets/js/hope-ui.js" defer></script>
<style>
.sidebar.sidebar-default .nav-link:not(.static-item).active , .sidebar.sidebar-default .nav-link:not(.static-item).active, .sidebar.sidebar-default .nav-link:not(.static-item)[aria-expanded=true]
{
background-color:#FE6600 !important;
}
</style>
</body>
</html>
Linux 65-254-81-4.cprapid.com 5.14.0-284.11.1.el9_2.x86_64 #1 SMP PREEMPT_DYNAMIC Tue May 9 05:49:00 EDT 2023 x86_64
Apache
65.254.81.4