Created
October 21, 2025 07:35
-
-
Save aaaskyyyy/ddae0dc9c10a56e7a4cf2e147c44322d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>Kaiadmin - Bootstrap 5 Admin Dashboard</title> | |
| <meta | |
| content="width=device-width, initial-scale=1.0, shrink-to-fit=no" | |
| name="viewport" | |
| /> | |
| <link | |
| rel="icon" | |
| href="assets/img/kaiadmin/favicon.ico" | |
| type="image/x-icon" | |
| /> | |
| <!-- Fonts and icons --> | |
| <script src="assets/js/plugin/webfont/webfont.min.js"></script> | |
| <script> | |
| WebFont.load({ | |
| google: { families: ["Public Sans:300,400,500,600,700"] }, | |
| custom: { | |
| families: [ | |
| "Font Awesome 5 Solid", | |
| "Font Awesome 5 Regular", | |
| "Font Awesome 5 Brands", | |
| "simple-line-icons", | |
| ], | |
| urls: ["assets/css/fonts.min.css"], | |
| }, | |
| active: function () { | |
| sessionStorage.fonts = true; | |
| }, | |
| }); | |
| </script> | |
| <!-- CSS Files --> | |
| <link rel="stylesheet" href="assets/css/bootstrap.min.css" /> | |
| <link rel="stylesheet" href="assets/css/plugins.min.css" /> | |
| <link rel="stylesheet" href="assets/css/kaiadmin.min.css" /> | |
| <!-- CSS Just for demo purpose, don't include it in your project --> | |
| <link rel="stylesheet" href="assets/css/demo.css" /> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <!-- Sidebar --> | |
| <div class="sidebar" data-background-color="dark"> | |
| <div class="sidebar-logo"> | |
| <!-- Logo Header --> | |
| <div class="logo-header" data-background-color="dark"> | |
| <a href="index.html" class="logo"> | |
| <img | |
| src="assets/img/kaiadmin/logo_light.svg" | |
| alt="navbar brand" | |
| class="navbar-brand" | |
| height="20" | |
| /> | |
| </a> | |
| <div class="nav-toggle"> | |
| <button class="btn btn-toggle toggle-sidebar"> | |
| <i class="gg-menu-right"></i> | |
| </button> | |
| <button class="btn btn-toggle sidenav-toggler"> | |
| <i class="gg-menu-left"></i> | |
| </button> | |
| </div> | |
| <button class="topbar-toggler more"> | |
| <i class="gg-more-vertical-alt"></i> | |
| </button> | |
| </div> | |
| <!-- End Logo Header --> | |
| </div> | |
| <div class="sidebar-wrapper scrollbar scrollbar-inner"> | |
| <div class="sidebar-content"> | |
| <ul class="nav nav-secondary"> | |
| <li class="nav-item active"> | |
| <a | |
| data-bs-toggle="collapse" | |
| href="#dashboard" | |
| class="collapsed" | |
| aria-expanded="false" | |
| > | |
| <i class="fas fa-home"></i> | |
| <p>Dashboard</p> | |
| <span class="caret"></span> | |
| </a> | |
| </li> | |
| <li class="nav-section"> | |
| <span class="sidebar-mini-icon"> | |
| <i class="fa fa-ellipsis-h"></i> | |
| </span> | |
| <h4 class="text-section">Pages</h4> | |
| </li> | |
| <li class="nav-item"> | |
| <a data-bs-toggle="collapse" href="#base"> | |
| <i class="fas fa-layer-group"></i> | |
| <p>Base</p> | |
| <span class="caret"></span> | |
| </a> | |
| <div class="collapse" id="base"> | |
| <ul class="nav nav-collapse"> | |
| <li> | |
| <a href="components/avatars.html"> | |
| <span class="sub-item">Avatars</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="components/buttons.html"> | |
| <span class="sub-item">Buttons</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="components/gridsystem.html"> | |
| <span class="sub-item">Grid System</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="components/panels.html"> | |
| <span class="sub-item">Panels</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="components/notifications.html"> | |
| <span class="sub-item">Notifications</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="components/sweetalert.html"> | |
| <span class="sub-item">Sweet Alert</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="components/font-awesome-icons.html"> | |
| <span class="sub-item">Font Awesome Icons</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="components/simple-line-icons.html"> | |
| <span class="sub-item">Simple Line Icons</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="components/typography.html"> | |
| <span class="sub-item">Typography</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarLayouts"> | |
| <i class="fas fa-th-list"></i> | |
| <p>Sidebar Layouts</p> | |
| <span class="caret"></span> | |
| </a> | |
| <div class="collapse" id="sidebarLayouts"> | |
| <ul class="nav nav-collapse"> | |
| <li> | |
| <a href="sidebar-style-2.html"> | |
| <span class="sub-item">Sidebar Style 2</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="icon-menu.html"> | |
| <span class="sub-item">Icon Menu</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="nav-item"> | |
| <a data-bs-toggle="collapse" href="#forms"> | |
| <i class="fas fa-pen-square"></i> | |
| <p>Forms</p> | |
| <span class="caret"></span> | |
| </a> | |
| <div class="collapse" id="forms"> | |
| <ul class="nav nav-collapse"> | |
| <li> | |
| <a href="forms/forms.html"> | |
| <span class="sub-item">Basic Form</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="nav-item"> | |
| <a data-bs-toggle="collapse" href="#tables"> | |
| <i class="fas fa-table"></i> | |
| <p>Tables</p> | |
| <span class="caret"></span> | |
| </a> | |
| <div class="collapse" id="tables"> | |
| <ul class="nav nav-collapse"> | |
| <li> | |
| <a href="tables/tables.html"> | |
| <span class="sub-item">Basic Table</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="tables/datatables.html"> | |
| <span class="sub-item">Datatables</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="nav-item"> | |
| <a data-bs-toggle="collapse" href="#maps"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <p>Maps</p> | |
| <span class="caret"></span> | |
| </a> | |
| <div class="collapse" id="maps"> | |
| <ul class="nav nav-collapse"> | |
| <li> | |
| <a href="maps/googlemaps.html"> | |
| <span class="sub-item">Google Maps</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="maps/jsvectormap.html"> | |
| <span class="sub-item">Jsvectormap</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="nav-item"> | |
| <a data-bs-toggle="collapse" href="#charts"> | |
| <i class="far fa-chart-bar"></i> | |
| <p>Charts</p> | |
| <span class="caret"></span> | |
| </a> | |
| <div class="collapse" id="charts"> | |
| <ul class="nav nav-collapse"> | |
| <li> | |
| <a href="charts/charts.html"> | |
| <span class="sub-item">Chart Js</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="charts/sparkline.html"> | |
| <span class="sub-item">Sparkline</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="widgets.html"> | |
| <i class="fas fa-desktop"></i> | |
| <p>Widgets</p> | |
| <span class="badge badge-success">4</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="../../documentation/index.html"> | |
| <i class="fas fa-file"></i> | |
| <p>Documentation</p> | |
| <span class="badge badge-secondary">1</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a data-bs-toggle="collapse" href="#submenu"> | |
| <i class="fas fa-bars"></i> | |
| <p>Menu Levels</p> | |
| <span class="caret"></span> | |
| </a> | |
| <div class="collapse" id="submenu"> | |
| <ul class="nav nav-collapse"> | |
| <li> | |
| <a data-bs-toggle="collapse" href="#subnav1"> | |
| <span class="sub-item">Level 1</span> | |
| <span class="caret"></span> | |
| </a> | |
| <div class="collapse" id="subnav1"> | |
| <ul class="nav nav-collapse subnav"> | |
| <li> | |
| <a href="#"> | |
| <span class="sub-item">Level 2</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <span class="sub-item">Level 2</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li> | |
| <a data-bs-toggle="collapse" href="#subnav2"> | |
| <span class="sub-item">Level 1</span> | |
| <span class="caret"></span> | |
| </a> | |
| <div class="collapse" id="subnav2"> | |
| <ul class="nav nav-collapse subnav"> | |
| <li> | |
| <a href="#"> | |
| <span class="sub-item">Level 2</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <span class="sub-item">Level 1</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End Sidebar --> | |
| <div class="main-panel"> | |
| <div class="main-header"> | |
| <div class="main-header-logo"> | |
| <!-- Logo Header --> | |
| <div class="logo-header" data-background-color="dark"> | |
| <a href="index.html" class="logo"> | |
| <img | |
| src="assets/img/kaiadmin/logo_light.svg" | |
| alt="navbar brand" | |
| class="navbar-brand" | |
| height="20" | |
| /> | |
| </a> | |
| <div class="nav-toggle"> | |
| <button class="btn btn-toggle toggle-sidebar"> | |
| <i class="gg-menu-right"></i> | |
| </button> | |
| <button class="btn btn-toggle sidenav-toggler"> | |
| <i class="gg-menu-left"></i> | |
| </button> | |
| </div> | |
| <button class="topbar-toggler more"> | |
| <i class="gg-more-vertical-alt"></i> | |
| </button> | |
| </div> | |
| <!-- End Logo Header --> | |
| </div> | |
| <!-- Navbar Header --> | |
| <nav | |
| class="navbar navbar-header navbar-header-transparent navbar-expand-lg border-bottom" | |
| > | |
| <div class="container-fluid"> | |
| <nav | |
| class="navbar navbar-header-left navbar-expand-lg navbar-form nav-search p-0 d-none d-lg-flex" | |
| > | |
| <div class="input-group"> | |
| <div class="input-group-prepend"> | |
| <button type="submit" class="btn btn-search pe-1"> | |
| <i class="fa fa-search search-icon"></i> | |
| </button> | |
| </div> | |
| <input | |
| type="text" | |
| placeholder="Search ..." | |
| class="form-control" | |
| /> | |
| </div> | |
| </nav> | |
| <ul class="navbar-nav topbar-nav ms-md-auto align-items-center"> | |
| <li | |
| class="nav-item topbar-icon dropdown hidden-caret d-flex d-lg-none" | |
| > | |
| <a | |
| class="nav-link dropdown-toggle" | |
| data-bs-toggle="dropdown" | |
| href="#" | |
| role="button" | |
| aria-expanded="false" | |
| aria-haspopup="true" | |
| > | |
| <i class="fa fa-search"></i> | |
| </a> | |
| <ul class="dropdown-menu dropdown-search animated fadeIn"> | |
| <form class="navbar-left navbar-form nav-search"> | |
| <div class="input-group"> | |
| <input | |
| type="text" | |
| placeholder="Search ..." | |
| class="form-control" | |
| /> | |
| </div> | |
| </form> | |
| </ul> | |
| </li> | |
| <li class="nav-item topbar-icon dropdown hidden-caret"> | |
| <a | |
| class="nav-link dropdown-toggle" | |
| href="#" | |
| id="messageDropdown" | |
| role="button" | |
| data-bs-toggle="dropdown" | |
| aria-haspopup="true" | |
| aria-expanded="false" | |
| > | |
| <i class="fa fa-envelope"></i> | |
| </a> | |
| <ul | |
| class="dropdown-menu messages-notif-box animated fadeIn" | |
| aria-labelledby="messageDropdown" | |
| > | |
| <li> | |
| <div | |
| class="dropdown-title d-flex justify-content-between align-items-center" | |
| > | |
| Messages | |
| <a href="#" class="small">Mark all as read</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="message-notif-scroll scrollbar-outer"> | |
| <div class="notif-center"> | |
| <a href="#"> | |
| <div class="notif-img"> | |
| <img | |
| src="assets/img/jm_denis.jpg" | |
| alt="Img Profile" | |
| /> | |
| </div> | |
| <div class="notif-content"> | |
| <span class="subject">Jimmy Denis</span> | |
| <span class="block"> How are you ? </span> | |
| <span class="time">5 minutes ago</span> | |
| </div> | |
| </a> | |
| <a href="#"> | |
| <div class="notif-img"> | |
| <img | |
| src="assets/img/chadengle.jpg" | |
| alt="Img Profile" | |
| /> | |
| </div> | |
| <div class="notif-content"> | |
| <span class="subject">Chad</span> | |
| <span class="block"> Ok, Thanks ! </span> | |
| <span class="time">12 minutes ago</span> | |
| </div> | |
| </a> | |
| <a href="#"> | |
| <div class="notif-img"> | |
| <img | |
| src="assets/img/mlane.jpg" | |
| alt="Img Profile" | |
| /> | |
| </div> | |
| <div class="notif-content"> | |
| <span class="subject">Jhon Doe</span> | |
| <span class="block"> | |
| Ready for the meeting today... | |
| </span> | |
| <span class="time">12 minutes ago</span> | |
| </div> | |
| </a> | |
| <a href="#"> | |
| <div class="notif-img"> | |
| <img | |
| src="assets/img/talha.jpg" | |
| alt="Img Profile" | |
| /> | |
| </div> | |
| <div class="notif-content"> | |
| <span class="subject">Talha</span> | |
| <span class="block"> Hi, Apa Kabar ? </span> | |
| <span class="time">17 minutes ago</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <a class="see-all" href="javascript:void(0);" | |
| >See all messages<i class="fa fa-angle-right"></i> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="nav-item topbar-icon dropdown hidden-caret"> | |
| <a | |
| class="nav-link dropdown-toggle" | |
| href="#" | |
| id="notifDropdown" | |
| role="button" | |
| data-bs-toggle="dropdown" | |
| aria-haspopup="true" | |
| aria-expanded="false" | |
| > | |
| <i class="fa fa-bell"></i> | |
| <span class="notification">4</span> | |
| </a> | |
| <ul | |
| class="dropdown-menu notif-box animated fadeIn" | |
| aria-labelledby="notifDropdown" | |
| > | |
| <li> | |
| <div class="dropdown-title"> | |
| You have 4 new notification | |
| </div> | |
| </li> | |
| <li> | |
| <div class="notif-scroll scrollbar-outer"> | |
| <div class="notif-center"> | |
| <a href="#"> | |
| <div class="notif-icon notif-primary"> | |
| <i class="fa fa-user-plus"></i> | |
| </div> | |
| <div class="notif-content"> | |
| <span class="block"> New user registered </span> | |
| <span class="time">5 minutes ago</span> | |
| </div> | |
| </a> | |
| <a href="#"> | |
| <div class="notif-icon notif-success"> | |
| <i class="fa fa-comment"></i> | |
| </div> | |
| <div class="notif-content"> | |
| <span class="block"> | |
| Rahmad commented on Admin | |
| </span> | |
| <span class="time">12 minutes ago</span> | |
| </div> | |
| </a> | |
| <a href="#"> | |
| <div class="notif-img"> | |
| <img | |
| src="assets/img/profile2.jpg" | |
| alt="Img Profile" | |
| /> | |
| </div> | |
| <div class="notif-content"> | |
| <span class="block"> | |
| Reza send messages to you | |
| </span> | |
| <span class="time">12 minutes ago</span> | |
| </div> | |
| </a> | |
| <a href="#"> | |
| <div class="notif-icon notif-danger"> | |
| <i class="fa fa-heart"></i> | |
| </div> | |
| <div class="notif-content"> | |
| <span class="block"> Farrah liked Admin </span> | |
| <span class="time">17 minutes ago</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <a class="see-all" href="javascript:void(0);" | |
| >See all notifications<i class="fa fa-angle-right"></i> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="nav-item topbar-icon dropdown hidden-caret"> | |
| <a | |
| class="nav-link" | |
| data-bs-toggle="dropdown" | |
| href="#" | |
| aria-expanded="false" | |
| > | |
| <i class="fas fa-layer-group"></i> | |
| </a> | |
| <div class="dropdown-menu quick-actions animated fadeIn"> | |
| <div class="quick-actions-header"> | |
| <span class="title mb-1">Quick Actions</span> | |
| <span class="subtitle op-7">Shortcuts</span> | |
| </div> | |
| <div class="quick-actions-scroll scrollbar-outer"> | |
| <div class="quick-actions-items"> | |
| <div class="row m-0"> | |
| <a class="col-6 col-md-4 p-0" href="#"> | |
| <div class="quick-actions-item"> | |
| <div class="avatar-item bg-danger rounded-circle"> | |
| <i class="far fa-calendar-alt"></i> | |
| </div> | |
| <span class="text">Calendar</span> | |
| </div> | |
| </a> | |
| <a class="col-6 col-md-4 p-0" href="#"> | |
| <div class="quick-actions-item"> | |
| <div | |
| class="avatar-item bg-warning rounded-circle" | |
| > | |
| <i class="fas fa-map"></i> | |
| </div> | |
| <span class="text">Maps</span> | |
| </div> | |
| </a> | |
| <a class="col-6 col-md-4 p-0" href="#"> | |
| <div class="quick-actions-item"> | |
| <div class="avatar-item bg-info rounded-circle"> | |
| <i class="fas fa-file-excel"></i> | |
| </div> | |
| <span class="text">Reports</span> | |
| </div> | |
| </a> | |
| <a class="col-6 col-md-4 p-0" href="#"> | |
| <div class="quick-actions-item"> | |
| <div | |
| class="avatar-item bg-success rounded-circle" | |
| > | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <span class="text">Emails</span> | |
| </div> | |
| </a> | |
| <a class="col-6 col-md-4 p-0" href="#"> | |
| <div class="quick-actions-item"> | |
| <div | |
| class="avatar-item bg-primary rounded-circle" | |
| > | |
| <i class="fas fa-file-invoice-dollar"></i> | |
| </div> | |
| <span class="text">Invoice</span> | |
| </div> | |
| </a> | |
| <a class="col-6 col-md-4 p-0" href="#"> | |
| <div class="quick-actions-item"> | |
| <div | |
| class="avatar-item bg-secondary rounded-circle" | |
| > | |
| <i class="fas fa-credit-card"></i> | |
| </div> | |
| <span class="text">Payments</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="nav-item topbar-user dropdown hidden-caret"> | |
| <a | |
| class="dropdown-toggle profile-pic" | |
| data-bs-toggle="dropdown" | |
| href="#" | |
| aria-expanded="false" | |
| > | |
| <div class="avatar-sm"> | |
| <img | |
| src="assets/img/profile.jpg" | |
| alt="..." | |
| class="avatar-img rounded-circle" | |
| /> | |
| </div> | |
| <span class="profile-username"> | |
| <span class="op-7">Hi,</span> | |
| <span class="fw-bold">Hizrian</span> | |
| </span> | |
| </a> | |
| <ul class="dropdown-menu dropdown-user animated fadeIn"> | |
| <div class="dropdown-user-scroll scrollbar-outer"> | |
| <li> | |
| <div class="user-box"> | |
| <div class="avatar-lg"> | |
| <img | |
| src="assets/img/profile.jpg" | |
| alt="image profile" | |
| class="avatar-img rounded" | |
| /> | |
| </div> | |
| <div class="u-text"> | |
| <h4>Hizrian</h4> | |
| <p class="text-muted">hello@example.com</p> | |
| <a | |
| href="profile.html" | |
| class="btn btn-xs btn-secondary btn-sm" | |
| >View Profile</a | |
| > | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item" href="#">My Profile</a> | |
| <a class="dropdown-item" href="#">My Balance</a> | |
| <a class="dropdown-item" href="#">Inbox</a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item" href="#">Account Setting</a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item" href="#">Logout</a> | |
| </li> | |
| </div> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- End Navbar --> | |
| </div> | |
| <div class="container"> | |
| <div class="page-inner"> | |
| <div | |
| class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4" | |
| > | |
| <div> | |
| <h3 class="fw-bold mb-3">Dashboard</h3> | |
| <h6 class="op-7 mb-2">Free Bootstrap 5 Admin Dashboard</h6> | |
| </div> | |
| <div class="ms-md-auto py-2 py-md-0"> | |
| <a href="#" class="btn btn-label-info btn-round me-2">Manage</a> | |
| <a href="#" class="btn btn-primary btn-round">Add Customer</a> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-6 col-md-3"> | |
| <div class="card card-stats card-round"> | |
| <div class="card-body"> | |
| <div class="row align-items-center"> | |
| <div class="col-icon"> | |
| <div | |
| class="icon-big text-center icon-primary bubble-shadow-small" | |
| > | |
| <i class="fas fa-users"></i> | |
| </div> | |
| </div> | |
| <div class="col col-stats ms-3 ms-sm-0"> | |
| <div class="numbers"> | |
| <p class="card-category">Visitors</p> | |
| <h4 class="card-title">1,294</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-6 col-md-3"> | |
| <div class="card card-stats card-round"> | |
| <div class="card-body"> | |
| <div class="row align-items-center"> | |
| <div class="col-icon"> | |
| <div | |
| class="icon-big text-center icon-info bubble-shadow-small" | |
| > | |
| <i class="fas fa-user-check"></i> | |
| </div> | |
| </div> | |
| <div class="col col-stats ms-3 ms-sm-0"> | |
| <div class="numbers"> | |
| <p class="card-category">Subscribers</p> | |
| <h4 class="card-title">1303</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-6 col-md-3"> | |
| <div class="card card-stats card-round"> | |
| <div class="card-body"> | |
| <div class="row align-items-center"> | |
| <div class="col-icon"> | |
| <div | |
| class="icon-big text-center icon-success bubble-shadow-small" | |
| > | |
| <i class="fas fa-luggage-cart"></i> | |
| </div> | |
| </div> | |
| <div class="col col-stats ms-3 ms-sm-0"> | |
| <div class="numbers"> | |
| <p class="card-category">Sales</p> | |
| <h4 class="card-title">$ 1,345</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-6 col-md-3"> | |
| <div class="card card-stats card-round"> | |
| <div class="card-body"> | |
| <div class="row align-items-center"> | |
| <div class="col-icon"> | |
| <div | |
| class="icon-big text-center icon-secondary bubble-shadow-small" | |
| > | |
| <i class="far fa-check-circle"></i> | |
| </div> | |
| </div> | |
| <div class="col col-stats ms-3 ms-sm-0"> | |
| <div class="numbers"> | |
| <p class="card-category">Order</p> | |
| <h4 class="card-title">576</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-8"> | |
| <div class="card card-round"> | |
| <div class="card-header"> | |
| <div class="card-head-row"> | |
| <div class="card-title">User Statistics</div> | |
| <div class="card-tools"> | |
| <a | |
| href="#" | |
| class="btn btn-label-success btn-round btn-sm me-2" | |
| > | |
| <span class="btn-label"> | |
| <i class="fa fa-pencil"></i> | |
| </span> | |
| Export | |
| </a> | |
| <a href="#" class="btn btn-label-info btn-round btn-sm"> | |
| <span class="btn-label"> | |
| <i class="fa fa-print"></i> | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <div class="chart-container" style="min-height: 375px"> | |
| <canvas id="statisticsChart"></canvas> | |
| </div> | |
| <div id="myChartLegend"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="card card-primary card-round"> | |
| <div class="card-header"> | |
| <div class="card-head-row"> | |
| <div class="card-title">Daily Sales</div> | |
| <div class="card-tools"> | |
| <div class="dropdown"> | |
| <button | |
| class="btn btn-sm btn-label-light dropdown-toggle" | |
| type="button" | |
| id="dropdownMenuButton" | |
| data-bs-toggle="dropdown" | |
| aria-haspopup="true" | |
| aria-expanded="false" | |
| > | |
| Export | |
| </button> | |
| <div | |
| class="dropdown-menu" | |
| aria-labelledby="dropdownMenuButton" | |
| > | |
| <a class="dropdown-item" href="#">Action</a> | |
| <a class="dropdown-item" href="#">Another action</a> | |
| <a class="dropdown-item" href="#" | |
| >Something else here</a | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-category">March 25 - April 02</div> | |
| </div> | |
| <div class="card-body pb-0"> | |
| <div class="mb-4 mt-2"> | |
| <h1>$4,578.58</h1> | |
| </div> | |
| <div class="pull-in"> | |
| <canvas id="dailySalesChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card card-round"> | |
| <div class="card-body pb-0"> | |
| <div class="h1 fw-bold float-end text-primary">+5%</div> | |
| <h2 class="mb-2">17</h2> | |
| <p class="text-muted">Users online</p> | |
| <div class="pull-in sparkline-fix"> | |
| <div id="lineChart"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="card card-round"> | |
| <div class="card-header"> | |
| <div class="card-head-row card-tools-still-right"> | |
| <h4 class="card-title">Users Geolocation</h4> | |
| <div class="card-tools"> | |
| <button | |
| class="btn btn-icon btn-link btn-primary btn-xs" | |
| > | |
| <span class="fa fa-angle-down"></span> | |
| </button> | |
| <button | |
| class="btn btn-icon btn-link btn-primary btn-xs btn-refresh-card" | |
| > | |
| <span class="fa fa-sync-alt"></span> | |
| </button> | |
| <button | |
| class="btn btn-icon btn-link btn-primary btn-xs" | |
| > | |
| <span class="fa fa-times"></span> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="card-category"> | |
| Map of the distribution of users around the world | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="table-responsive table-hover table-sales"> | |
| <table class="table"> | |
| <tbody> | |
| <tr> | |
| <td> | |
| <div class="flag"> | |
| <img | |
| src="assets/img/flags/id.png" | |
| alt="indonesia" | |
| /> | |
| </div> | |
| </td> | |
| <td>Indonesia</td> | |
| <td class="text-end">2.320</td> | |
| <td class="text-end">42.18%</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="flag"> | |
| <img | |
| src="assets/img/flags/us.png" | |
| alt="united states" | |
| /> | |
| </div> | |
| </td> | |
| <td>USA</td> | |
| <td class="text-end">240</td> | |
| <td class="text-end">4.36%</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="flag"> | |
| <img | |
| src="assets/img/flags/au.png" | |
| alt="australia" | |
| /> | |
| </div> | |
| </td> | |
| <td>Australia</td> | |
| <td class="text-end">119</td> | |
| <td class="text-end">2.16%</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="flag"> | |
| <img | |
| src="assets/img/flags/ru.png" | |
| alt="russia" | |
| /> | |
| </div> | |
| </td> | |
| <td>Russia</td> | |
| <td class="text-end">1.081</td> | |
| <td class="text-end">19.65%</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="flag"> | |
| <img | |
| src="assets/img/flags/cn.png" | |
| alt="china" | |
| /> | |
| </div> | |
| </td> | |
| <td>China</td> | |
| <td class="text-end">1.100</td> | |
| <td class="text-end">20%</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="flag"> | |
| <img | |
| src="assets/img/flags/br.png" | |
| alt="brazil" | |
| /> | |
| </div> | |
| </td> | |
| <td>Brasil</td> | |
| <td class="text-end">640</td> | |
| <td class="text-end">11.63%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="mapcontainer"> | |
| <div | |
| id="world-map" | |
| class="w-100" | |
| style="height: 300px" | |
| ></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="card card-round"> | |
| <div class="card-body"> | |
| <div class="card-head-row card-tools-still-right"> | |
| <div class="card-title">New Customers</div> | |
| <div class="card-tools"> | |
| <div class="dropdown"> | |
| <button | |
| class="btn btn-icon btn-clean me-0" | |
| type="button" | |
| id="dropdownMenuButton" | |
| data-bs-toggle="dropdown" | |
| aria-haspopup="true" | |
| aria-expanded="false" | |
| > | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| <div | |
| class="dropdown-menu" | |
| aria-labelledby="dropdownMenuButton" | |
| > | |
| <a class="dropdown-item" href="#">Action</a> | |
| <a class="dropdown-item" href="#">Another action</a> | |
| <a class="dropdown-item" href="#" | |
| >Something else here</a | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-list py-4"> | |
| <div class="item-list"> | |
| <div class="avatar"> | |
| <img | |
| src="assets/img/jm_denis.jpg" | |
| alt="..." | |
| class="avatar-img rounded-circle" | |
| /> | |
| </div> | |
| <div class="info-user ms-3"> | |
| <div class="username">Jimmy Denis</div> | |
| <div class="status">Graphic Designer</div> | |
| </div> | |
| <button class="btn btn-icon btn-link op-8 me-1"> | |
| <i class="far fa-envelope"></i> | |
| </button> | |
| <button class="btn btn-icon btn-link btn-danger op-8"> | |
| <i class="fas fa-ban"></i> | |
| </button> | |
| </div> | |
| <div class="item-list"> | |
| <div class="avatar"> | |
| <span | |
| class="avatar-title rounded-circle border border-white" | |
| >CF</span | |
| > | |
| </div> | |
| <div class="info-user ms-3"> | |
| <div class="username">Chandra Felix</div> | |
| <div class="status">Sales Promotion</div> | |
| </div> | |
| <button class="btn btn-icon btn-link op-8 me-1"> | |
| <i class="far fa-envelope"></i> | |
| </button> | |
| <button class="btn btn-icon btn-link btn-danger op-8"> | |
| <i class="fas fa-ban"></i> | |
| </button> | |
| </div> | |
| <div class="item-list"> | |
| <div class="avatar"> | |
| <img | |
| src="assets/img/talha.jpg" | |
| alt="..." | |
| class="avatar-img rounded-circle" | |
| /> | |
| </div> | |
| <div class="info-user ms-3"> | |
| <div class="username">Talha</div> | |
| <div class="status">Front End Designer</div> | |
| </div> | |
| <button class="btn btn-icon btn-link op-8 me-1"> | |
| <i class="far fa-envelope"></i> | |
| </button> | |
| <button class="btn btn-icon btn-link btn-danger op-8"> | |
| <i class="fas fa-ban"></i> | |
| </button> | |
| </div> | |
| <div class="item-list"> | |
| <div class="avatar"> | |
| <img | |
| src="assets/img/chadengle.jpg" | |
| alt="..." | |
| class="avatar-img rounded-circle" | |
| /> | |
| </div> | |
| <div class="info-user ms-3"> | |
| <div class="username">Chad</div> | |
| <div class="status">CEO Zeleaf</div> | |
| </div> | |
| <button class="btn btn-icon btn-link op-8 me-1"> | |
| <i class="far fa-envelope"></i> | |
| </button> | |
| <button class="btn btn-icon btn-link btn-danger op-8"> | |
| <i class="fas fa-ban"></i> | |
| </button> | |
| </div> | |
| <div class="item-list"> | |
| <div class="avatar"> | |
| <span | |
| class="avatar-title rounded-circle border border-white bg-primary" | |
| >H</span | |
| > | |
| </div> | |
| <div class="info-user ms-3"> | |
| <div class="username">Hizrian</div> | |
| <div class="status">Web Designer</div> | |
| </div> | |
| <button class="btn btn-icon btn-link op-8 me-1"> | |
| <i class="far fa-envelope"></i> | |
| </button> | |
| <button class="btn btn-icon btn-link btn-danger op-8"> | |
| <i class="fas fa-ban"></i> | |
| </button> | |
| </div> | |
| <div class="item-list"> | |
| <div class="avatar"> | |
| <span | |
| class="avatar-title rounded-circle border border-white bg-secondary" | |
| >F</span | |
| > | |
| </div> | |
| <div class="info-user ms-3"> | |
| <div class="username">Farrah</div> | |
| <div class="status">Marketing</div> | |
| </div> | |
| <button class="btn btn-icon btn-link op-8 me-1"> | |
| <i class="far fa-envelope"></i> | |
| </button> | |
| <button class="btn btn-icon btn-link btn-danger op-8"> | |
| <i class="fas fa-ban"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-8"> | |
| <div class="card card-round"> | |
| <div class="card-header"> | |
| <div class="card-head-row card-tools-still-right"> | |
| <div class="card-title">Transaction History</div> | |
| <div class="card-tools"> | |
| <div class="dropdown"> | |
| <button | |
| class="btn btn-icon btn-clean me-0" | |
| type="button" | |
| id="dropdownMenuButton" | |
| data-bs-toggle="dropdown" | |
| aria-haspopup="true" | |
| aria-expanded="false" | |
| > | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| <div | |
| class="dropdown-menu" | |
| aria-labelledby="dropdownMenuButton" | |
| > | |
| <a class="dropdown-item" href="#">Action</a> | |
| <a class="dropdown-item" href="#">Another action</a> | |
| <a class="dropdown-item" href="#" | |
| >Something else here</a | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-body p-0"> | |
| <div class="table-responsive"> | |
| <!-- Projects table --> | |
| <table class="table align-items-center mb-0"> | |
| <thead class="thead-light"> | |
| <tr> | |
| <th scope="col">Payment Number</th> | |
| <th scope="col" class="text-end">Date & Time</th> | |
| <th scope="col" class="text-end">Amount</th> | |
| <th scope="col" class="text-end">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <th scope="row"> | |
| <button | |
| class="btn btn-icon btn-round btn-success btn-sm me-2" | |
| > | |
| <i class="fa fa-check"></i> | |
| </button> | |
| Payment from #10231 | |
| </th> | |
| <td class="text-end">Mar 19, 2020, 2.45pm</td> | |
| <td class="text-end">$250.00</td> | |
| <td class="text-end"> | |
| <span class="badge badge-success">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <th scope="row"> | |
| <button | |
| class="btn btn-icon btn-round btn-success btn-sm me-2" | |
| > | |
| <i class="fa fa-check"></i> | |
| </button> | |
| Payment from #10231 | |
| </th> | |
| <td class="text-end">Mar 19, 2020, 2.45pm</td> | |
| <td class="text-end">$250.00</td> | |
| <td class="text-end"> | |
| <span class="badge badge-success">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <th scope="row"> | |
| <button | |
| class="btn btn-icon btn-round btn-success btn-sm me-2" | |
| > | |
| <i class="fa fa-check"></i> | |
| </button> | |
| Payment from #10231 | |
| </th> | |
| <td class="text-end">Mar 19, 2020, 2.45pm</td> | |
| <td class="text-end">$250.00</td> | |
| <td class="text-end"> | |
| <span class="badge badge-success">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <th scope="row"> | |
| <button | |
| class="btn btn-icon btn-round btn-success btn-sm me-2" | |
| > | |
| <i class="fa fa-check"></i> | |
| </button> | |
| Payment from #10231 | |
| </th> | |
| <td class="text-end">Mar 19, 2020, 2.45pm</td> | |
| <td class="text-end">$250.00</td> | |
| <td class="text-end"> | |
| <span class="badge badge-success">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <th scope="row"> | |
| <button | |
| class="btn btn-icon btn-round btn-success btn-sm me-2" | |
| > | |
| <i class="fa fa-check"></i> | |
| </button> | |
| Payment from #10231 | |
| </th> | |
| <td class="text-end">Mar 19, 2020, 2.45pm</td> | |
| <td class="text-end">$250.00</td> | |
| <td class="text-end"> | |
| <span class="badge badge-success">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <th scope="row"> | |
| <button | |
| class="btn btn-icon btn-round btn-success btn-sm me-2" | |
| > | |
| <i class="fa fa-check"></i> | |
| </button> | |
| Payment from #10231 | |
| </th> | |
| <td class="text-end">Mar 19, 2020, 2.45pm</td> | |
| <td class="text-end">$250.00</td> | |
| <td class="text-end"> | |
| <span class="badge badge-success">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <th scope="row"> | |
| <button | |
| class="btn btn-icon btn-round btn-success btn-sm me-2" | |
| > | |
| <i class="fa fa-check"></i> | |
| </button> | |
| Payment from #10231 | |
| </th> | |
| <td class="text-end">Mar 19, 2020, 2.45pm</td> | |
| <td class="text-end">$250.00</td> | |
| <td class="text-end"> | |
| <span class="badge badge-success">Completed</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="footer"> | |
| <div class="container-fluid d-flex justify-content-between"> | |
| <nav class="pull-left"> | |
| <ul class="nav"> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://www.themekita.com"> | |
| ThemeKita | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#"> Help </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#"> Licenses </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="copyright"> | |
| 2024, made with <i class="fa fa-heart heart text-danger"></i> by | |
| <a href="http://www.themekita.com">ThemeKita</a> | |
| </div> | |
| <div> | |
| Distributed by | |
| <a target="_blank" href="https://themewagon.com/">ThemeWagon</a>. | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Custom template | don't include it in your project! --> | |
| <div class="custom-template"> | |
| <div class="title">Settings</div> | |
| <div class="custom-content"> | |
| <div class="switcher"> | |
| <div class="switch-block"> | |
| <h4>Logo Header</h4> | |
| <div class="btnSwitch"> | |
| <button | |
| type="button" | |
| class="selected changeLogoHeaderColor" | |
| data-color="dark" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="blue" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="purple" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="light-blue" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="green" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="orange" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="red" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="white" | |
| ></button> | |
| <br /> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="dark2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="blue2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="purple2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="light-blue2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="green2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="orange2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeLogoHeaderColor" | |
| data-color="red2" | |
| ></button> | |
| </div> | |
| </div> | |
| <div class="switch-block"> | |
| <h4>Navbar Header</h4> | |
| <div class="btnSwitch"> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="dark" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="blue" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="purple" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="light-blue" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="green" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="orange" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="red" | |
| ></button> | |
| <button | |
| type="button" | |
| class="selected changeTopBarColor" | |
| data-color="white" | |
| ></button> | |
| <br /> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="dark2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="blue2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="purple2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="light-blue2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="green2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="orange2" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeTopBarColor" | |
| data-color="red2" | |
| ></button> | |
| </div> | |
| </div> | |
| <div class="switch-block"> | |
| <h4>Sidebar</h4> | |
| <div class="btnSwitch"> | |
| <button | |
| type="button" | |
| class="changeSideBarColor" | |
| data-color="white" | |
| ></button> | |
| <button | |
| type="button" | |
| class="selected changeSideBarColor" | |
| data-color="dark" | |
| ></button> | |
| <button | |
| type="button" | |
| class="changeSideBarColor" | |
| data-color="dark2" | |
| ></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="custom-toggle"> | |
| <i class="icon-settings"></i> | |
| </div> | |
| </div> | |
| <!-- End Custom template --> | |
| </div> | |
| <!-- Core JS Files --> | |
| <script src="assets/js/core/jquery-3.7.1.min.js"></script> | |
| <script src="assets/js/core/popper.min.js"></script> | |
| <script src="assets/js/core/bootstrap.min.js"></script> | |
| <!-- jQuery Scrollbar --> | |
| <script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script> | |
| <!-- Chart JS --> | |
| <script src="assets/js/plugin/chart.js/chart.min.js"></script> | |
| <!-- jQuery Sparkline --> | |
| <script src="assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script> | |
| <!-- Chart Circle --> | |
| <script src="assets/js/plugin/chart-circle/circles.min.js"></script> | |
| <!-- Datatables --> | |
| <script src="assets/js/plugin/datatables/datatables.min.js"></script> | |
| <!-- Bootstrap Notify --> | |
| <script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script> | |
| <!-- jQuery Vector Maps --> | |
| <script src="assets/js/plugin/jsvectormap/jsvectormap.min.js"></script> | |
| <script src="assets/js/plugin/jsvectormap/world.js"></script> | |
| <!-- Sweet Alert --> | |
| <script src="assets/js/plugin/sweetalert/sweetalert.min.js"></script> | |
| <!-- Kaiadmin JS --> | |
| <script src="assets/js/kaiadmin.min.js"></script> | |
| <!-- Kaiadmin DEMO methods, don't include it in your project! --> | |
| <script src="assets/js/setting-demo.js"></script> | |
| <script src="assets/js/demo.js"></script> | |
| <script> | |
| $("#lineChart").sparkline([102, 109, 120, 99, 110, 105, 115], { | |
| type: "line", | |
| height: "70", | |
| width: "100%", | |
| lineWidth: "2", | |
| lineColor: "#177dff", | |
| fillColor: "rgba(23, 125, 255, 0.14)", | |
| }); | |
| $("#lineChart2").sparkline([99, 125, 122, 105, 110, 124, 115], { | |
| type: "line", | |
| height: "70", | |
| width: "100%", | |
| lineWidth: "2", | |
| lineColor: "#f3545d", | |
| fillColor: "rgba(243, 84, 93, .14)", | |
| }); | |
| $("#lineChart3").sparkline([105, 103, 123, 100, 95, 105, 115], { | |
| type: "line", | |
| height: "70", | |
| width: "100%", | |
| lineWidth: "2", | |
| lineColor: "#ffa534", | |
| fillColor: "rgba(255, 165, 52, .14)", | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Author
<div class="sidebar-wrapper scrollbar scrollbar-inner">
<div class="sidebar-content">
<ul class="nav nav-secondary">
<li class="nav-item">
<a data-bs-toggle="collapse" href="#pagesMenu" aria-expanded="false">
<i class="fas fa-file-alt"></i>
<p>Pages</p>
<span class="caret"></span>
</a>
<div class="collapse" id="pagesMenu">
<ul class="nav nav-collapse">
<li>
<a href="dummy_tamu.html">
<span class="sub-item">Daftar Tamu</span>
</a>
</li>
<li>
<a href="dummy_pesan.html">
<span class="sub-item">Daftar Pesan</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a data-bs-toggle="collapse" href="#adminMenu" aria-expanded="false">
<i class="fas fa-user-cog"></i>
<p>Admin</p>
<span class="caret"></span>
</a>
<div class="collapse" id="adminMenu">
<ul class="nav nav-collapse">
<li>
<a href="dummy_admin.html">
<span class="sub-item">Admin</span>
</a>
</li>
<li>
<a href="dummy_uraian.html">
<span class="sub-item">Uraian</span>
</a>
</li>
<li>
<a href="dummy_tamu_admin.html">
<span class="sub-item">Tamu</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<div class="main-header">...</div>
<div class="container">
<div class="page-inner">
<div
class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4"
>
<div>
<h3 class="fw-bold mb-3">Dashboard</h3>
<h6 class="op-7 mb-2">Free Bootstrap 5 Admin Dashboard</h6>
</div>
<div class="ms-md-auto py-2 py-md-0">
<a href="#" class="btn btn-label-info btn-round me-2">Manage</a>
<a href="#" class="btn btn-primary btn-round">Add Customer</a>
</div>
</div>
Author
<nav
class="navbar navbar-header navbar-header-transparent navbar-expand-lg border-bottom"
>
<div class="container-fluid">
<nav
class="navbar navbar-header-left navbar-expand-lg navbar-form nav-search p-0 d-none d-lg-flex"
>
<div class="input-group">
<div class="input-group-prepend">
<button type="submit" class="btn btn-search pe-1">
<i class="fa fa-search search-icon"></i>
</button>
</div>
<input type="text" placeholder="Search ..." class="form-control" />
</div>
</nav>
<ul class="navbar-nav topbar-nav ms-md-auto align-items-center">
<!-- icons & profile (Hi, Hizrian) -->
<nav
class="navbar navbar-header navbar-header-transparent navbar-expand-lg border-bottom"
>
<div class="container-fluid">
<nav
class="navbar navbar-header-left navbar-expand-lg navbar-form nav-search p-0 d-none d-lg-flex"
>
<div class="input-group">
<div class="input-group-prepend">
<button type="submit" class="btn btn-search pe-1">
<i class="fa fa-search search-icon"></i>
</button>
</div>
<input type="text" placeholder="Search ..." class="form-control" />
</div>
</nav>
<ul class="navbar-nav topbar-nav ms-md-auto align-items-center">
<!-- icons & profile (Hi, Hizrian) -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hapus semua sidebar,dan tambahkan sidebar Pages dengan collapse item daftar tamu dan daftar pesan dan tambahkan juga sidebar Admin dengan collapse item admin,uraian,tamu ,lalu redirect ke dummy file