Black Friday! Up to 90% OFF
<div class="row removable"> <div class="col-12 col-lg-6 drop-zone"> <div class="card flex-fill w-100 draggable"> <div class="card-header"> <h5 class="card-title">Line Chart</h5> <h6 class="card-subtitle text-muted">A line chart is a way of plotting data points on a line.</h6> </div> <div class="card-body"> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chartjs-line" style="display: block; height: 300px; width: 428px;" width="856" height="600" class="chart-line-double chartjs-render-monitor"></canvas> </div> </div> </div> </div> <div class="col-12 col-lg-6 drop-zone"> <div class="card draggable"> <div class="card-header"> <h5 class="card-title">Bar Chart</h5> <h6 class="card-subtitle text-muted">A bar chart provides a way of showing data values represented as vertical bars.</h6> </div> <div class="card-body"> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chartjs-bar" width="856" height="600" style="display: block; height: 300px; width: 428px;" class="chart-bar chartjs-render-monitor"></canvas> </div> </div> </div> </div> </div><script>var chartsLineDouble = document.querySelectorAll(".chart-line-double"); chartsLineDouble.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "line", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Sales ($)", fill: true, backgroundColor: "transparent", borderColor: window.theme.primary, data: [2115, 1562, 1584, 1892, 1487, 2223, 2966, 2448, 2905, 3838, 2917, 3327] }, { label: "Orders", fill: true, backgroundColor: "transparent", borderColor: "#adb5bd", borderDash: [4, 4], data: [958, 724, 629, 883, 915, 1214, 1476, 1212, 1554, 2128, 1466, 1827] }] }, options: { maintainAspectRatio: false, legend: { display: false }, tooltips: { intersect: false }, hover: { intersect: true }, plugins: { filler: { propagate: false } }, scales: { xAxes: [{ reverse: true, gridLines: { color: "rgba(0,0,0,0.05)" } }], yAxes: [{ ticks: { stepSize: 500 }, display: true, borderDash: [5, 5], gridLines: { color: "rgba(0,0,0,0)", fontColor: "#fff" } }] } } }); chart.setAttribute("data-chart-initialized", "true"); } }); var chartsBar = document.querySelectorAll(".chart-bar"); chartsBar.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "bar", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Last year", backgroundColor: window.theme.primary, borderColor: window.theme.primary, hoverBackgroundColor: window.theme.primary, hoverBorderColor: window.theme.primary, data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79], barPercentage: .75, categoryPercentage: .5 }, { label: "This year", backgroundColor: "#dee2e6", borderColor: "#dee2e6", hoverBackgroundColor: "#dee2e6", hoverBorderColor: "#dee2e6", data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68], barPercentage: .75, categoryPercentage: .5 }] }, options: { maintainAspectRatio: false, legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false }, stacked: false, ticks: { stepSize: 20 } }], xAxes: [{ stacked: false, gridLines: { color: "transparent" } }] } } }); chart.setAttribute("data-chart-initialized", "true"); } });</script>
<div class="row removable"> <div class="col-12 col-lg-6 drop-zone"> <div class="card flex-fill w-100 draggable"> <div class="card-header"> <h5 class="card-title">Line Chart</h5> <h6 class="card-subtitle text-muted">A line chart is a way of plotting data points on a line.</h6> </div> <div class="card-body"> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chartjs-line" style="display: block; height: 300px; width: 428px;" width="856" height="600" class="chart-line-double chartjs-render-monitor"></canvas> </div> </div> </div> </div> <div class="col-12 col-lg-6 drop-zone"> <div class="card draggable"> <div class="card-header"> <h5 class="card-title">Bar Chart</h5> <h6 class="card-subtitle text-muted">A bar chart provides a way of showing data values represented as vertical bars.</h6> </div> <div class="card-body"> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chartjs-bar" width="856" height="600" style="display: block; height: 300px; width: 428px;" class="chart-bar chartjs-render-monitor"></canvas> </div> </div> </div> </div> </div>
var chartsLineDouble = document.querySelectorAll(".chart-line-double"); chartsLineDouble.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "line", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Sales ($)", fill: true, backgroundColor: "transparent", borderColor: window.theme.primary, data: [2115, 1562, 1584, 1892, 1487, 2223, 2966, 2448, 2905, 3838, 2917, 3327] }, { label: "Orders", fill: true, backgroundColor: "transparent", borderColor: "#adb5bd", borderDash: [4, 4], data: [958, 724, 629, 883, 915, 1214, 1476, 1212, 1554, 2128, 1466, 1827] }] }, options: { maintainAspectRatio: false, legend: { display: false }, tooltips: { intersect: false }, hover: { intersect: true }, plugins: { filler: { propagate: false } }, scales: { xAxes: [{ reverse: true, gridLines: { color: "rgba(0,0,0,0.05)" } }], yAxes: [{ ticks: { stepSize: 500 }, display: true, borderDash: [5, 5], gridLines: { color: "rgba(0,0,0,0)", fontColor: "#fff" } }] } } }); chart.setAttribute("data-chart-initialized", "true"); } }); var chartsBar = document.querySelectorAll(".chart-bar"); chartsBar.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "bar", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Last year", backgroundColor: window.theme.primary, borderColor: window.theme.primary, hoverBackgroundColor: window.theme.primary, hoverBorderColor: window.theme.primary, data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79], barPercentage: .75, categoryPercentage: .5 }, { label: "This year", backgroundColor: "#dee2e6", borderColor: "#dee2e6", hoverBackgroundColor: "#dee2e6", hoverBorderColor: "#dee2e6", data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68], barPercentage: .75, categoryPercentage: .5 }] }, options: { maintainAspectRatio: false, legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false }, stacked: false, ticks: { stepSize: 20 } }], xAxes: [{ stacked: false, gridLines: { color: "transparent" } }] } } }); chart.setAttribute("data-chart-initialized", "true"); } });
<div class="card draggable mb-3"> <div class="card-header"> <h5 class="card-title mb-0">Profile Details</h5> </div> <div class="card-body text-center"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128" height="128"> <h5 class="card-title mb-0">Christina Mason</h5> <div class="text-muted mb-2">Lead Developer</div> <div> <a class="btn btn-primary btn-sm" href="#">Follow</a> <a class="btn btn-primary btn-sm" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> Message </a> </div> </div> <hr class="my-0"> <div class="card-body"> <h5 class="h6 card-title">Skills</h5> <a href="#" class="badge bg-primary me-1 my-1">HTML</a> <a href="#" class="badge bg-primary me-1 my-1">JavaScript</a> <a href="#" class="badge bg-primary me-1 my-1">Sass</a> <a href="#" class="badge bg-primary me-1 my-1">Angular</a> <a href="#" class="badge bg-primary me-1 my-1">Vue</a> <a href="#" class="badge bg-primary me-1 my-1">React</a> <a href="#" class="badge bg-primary me-1 my-1">Redux</a> <a href="#" class="badge bg-primary me-1 my-1">UI</a> <a href="#" class="badge bg-primary me-1 my-1">UX</a> </div> <hr class="my-0"> <div class="card-body"> <h5 class="h6 card-title">About</h5> <ul class="list-unstyled mb-0"> <li class="mb-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home feather-sm me-1"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> Lives in <a href="#">San Francisco, SA</a> </li> <li class="mb-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase feather-sm me-1"> <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect> <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path> </svg> Works at <a href="#">GitHub</a> </li> <li class="mb-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin feather-sm me-1"> <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path> <circle cx="12" cy="10" r="3"></circle> </svg> From <a href="#">Boston</a> </li> </ul> </div> </div>
<div class="card table-responsive draggable"> <div class="card-header border-bottom-0"> <h5>Table Excel</h5> </div> <table class="table" data-integration="excel"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div>
<div class="sidebar-content js-simplebar" data-simplebar="init"> <div class="simplebar-wrapper" style="margin: 0px;"> <div class="simplebar-height-auto-observer-wrapper"> <div class="simplebar-height-auto-observer"></div> </div> <div class="simplebar-mask"> <div class="simplebar-offset" style="right: 0px; bottom: 0px;"> <div class="simplebar-content-wrapper" style="height: 100%; overflow: hidden;"> <div class="simplebar-content" style="padding: 0px;"> <a class="sidebar-brand" href="javascript:;"> <span class="align-middle">AdminKit</span> </a> <ul class="sidebar-nav"> <li class="sidebar-header"> Pages </li> <li class="sidebar-item active"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sliders align-middle"> <line x1="4" y1="21" x2="4" y2="14"></line> <line x1="4" y1="10" x2="4" y2="3"></line> <line x1="12" y1="21" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12" y2="3"></line> <line x1="20" y1="21" x2="20" y2="16"></line> <line x1="20" y1="12" x2="20" y2="3"></line> <line x1="1" y1="14" x2="7" y2="14"></line> <line x1="9" y1="8" x2="15" y2="8"></line> <line x1="17" y1="16" x2="23" y2="16"></line> </svg> <span class="align-middle">Dashboard</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user align-middle"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> <span class="align-middle">Profile</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-in align-middle"> <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path> <polyline points="10 17 15 12 10 7"></polyline> <line x1="15" y1="12" x2="3" y2="12"></line> </svg> <span class="align-middle">Sign In</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus align-middle"> <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="8.5" cy="7" r="4"></circle> <line x1="20" y1="8" x2="20" y2="14"></line> <line x1="23" y1="11" x2="17" y2="11"></line> </svg> <span class="align-middle">Sign Up</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book align-middle"> <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path> <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path> </svg> <span class="align-middle">Blank</span> </a> </li> </ul> </div> </div> </div> </div> <div class="simplebar-placeholder" style="width: auto; height: 872px;"></div> </div> <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;"> <div class="simplebar-scrollbar" style="width: 0px; display: none;"></div> </div> <div class="simplebar-track simplebar-vertical" style="visibility: hidden;"> <div class="simplebar-scrollbar" style="height: 0px; transform: translate3d(0px, 0px, 0px); display: none;"></div> </div> </div>
<a class="sidebar-toggle js-sidebar-toggle"> <i class="hamburger align-self-center"></i> </a> <form class="d-none d-sm-inline-block"> <div class="input-group input-group-navbar"> <input type="text" class="form-control" placeholder="Search…" aria-label="Search"> <button class="btn" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search align-middle"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </button> </div> </form> <ul class="navbar-nav d-none d-lg-block"> <li class="nav-item px-2 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Mega Menu </a> <div class="dropdown-menu dropdown-menu-start dropdown-mega" aria-labelledby="servicesDropdown"> <div class="d-md-flex align-items-start justify-content-start"> <div class="dropdown-mega-list"> <div class="dropdown-header">UI Elements</div> <a class="dropdown-item" href="#">Alerts</a> <a class="dropdown-item" href="#">Buttons</a> <a class="dropdown-item" href="#">Cards</a> <a class="dropdown-item" href="#">Carousel</a> <a class="dropdown-item" href="#">General</a> <a class="dropdown-item" href="#">Grid</a> <a class="dropdown-item" href="#">Modals</a> <a class="dropdown-item" href="#">Tabs</a> <a class="dropdown-item" href="#">Typography</a> </div> <div class="dropdown-mega-list"> <div class="dropdown-header">Forms</div> <a class="dropdown-item" href="#">Layouts</a> <a class="dropdown-item" href="#">Basic Inputs</a> <a class="dropdown-item" href="#">Input Groups</a> <a class="dropdown-item" href="#">Advanced Inputs</a> <a class="dropdown-item" href="#">Editors</a> <a class="dropdown-item" href="#">Validation</a> <a class="dropdown-item" href="#">Wizard</a> </div> <div class="dropdown-mega-list"> <div class="dropdown-header">Tables</div> <a class="dropdown-item" href="#">Basic Tables</a> <a class="dropdown-item" href="#">Responsive Table</a> <a class="dropdown-item" href="#">Table with Buttons</a> <a class="dropdown-item" href="#">Column Search</a> <a class="dropdown-item" href="#">Muulti Selection</a> <a class="dropdown-item" href="#">Ajax Sourced Data</a> </div> </div> </div> </li> </ul> <div class="navbar-collapse collapse"> <ul class="navbar-nav navbar-align"> <li class="nav-item dropdown"> <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-bs-toggle="dropdown"> <div class="position-relative"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell align-middle"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> <span class="indicator">4</span> </div> </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="alertsDropdown"> <div class="dropdown-menu-header"> 4 New Notifications </div> <div class="list-group"> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle text-danger"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> </div> <div class="col-10"> <div class="text-dark">Update completed</div> <div class="text-muted small mt-1">Restart server 12 to complete the update.</div> <div class="text-muted small mt-1">30m ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell text-warning"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> </div> <div class="col-10"> <div class="text-dark">Lorem ipsum</div> <div class="text-muted small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div> <div class="text-muted small mt-1">2h ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home text-primary"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> </div> <div class="col-10"> <div class="text-dark">Login from 192.186.1.8</div> <div class="text-muted small mt-1">5h ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus text-success"> <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="8.5" cy="7" r="4"></circle> <line x1="20" y1="8" x2="20" y2="14"></line> <line x1="23" y1="11" x2="17" y2="11"></line> </svg> </div> <div class="col-10"> <div class="text-dark">New connection</div> <div class="text-muted small mt-1">Christina accepted your request.</div> <div class="text-muted small mt-1">14h ago</div> </div> </div> </a> </div> <div class="dropdown-menu-footer"> <a href="#" class="text-muted">Show all notifications</a> </div> </div> </li> <li class="nav-item dropdown"> <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-bs-toggle="dropdown"> <div class="position-relative"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square align-middle"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> </div> </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="messagesDropdown"> <div class="dropdown-menu-header"> <div class="position-relative"> 4 New Messages </div> </div> <div class="list-group"> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Vanessa Tucker"> </div> <div class="col-10 ps-2"> <div class="text-dark">Vanessa Tucker</div> <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div> <div class="text-muted small mt-1">15m ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="William Harris"> </div> <div class="col-10 ps-2"> <div class="text-dark">William Harris</div> <div class="text-muted small mt-1">Curabitur ligula sapien euismod vitae.</div> <div class="text-muted small mt-1">2h ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Christina Mason"> </div> <div class="col-10 ps-2"> <div class="text-dark">Christina Mason</div> <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.</div> <div class="text-muted small mt-1">4h ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Sharon Lessman"> </div> <div class="col-10 ps-2"> <div class="text-dark">Sharon Lessman</div> <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.</div> <div class="text-muted small mt-1">5h ago</div> </div> </div> </a> </div> <div class="dropdown-menu-footer"> <a href="#" class="text-muted">Show all messages</a> </div> </div> </li> <li class="nav-item"> <a class="nav-icon js-fullscreen d-none d-lg-block" href="#"> <div class="position-relative"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize align-middle"> <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path> </svg> </div> </a> </li> <li class="nav-item dropdown"> <a class="nav-icon pe-md-0 dropdown-toggle" href="#" data-bs-toggle="dropdown"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" class="avatar img-fluid rounded" alt="Charles Hall"> </a> <div class="dropdown-menu dropdown-menu-end"> <a class="dropdown-item" href="pages-profile.html"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user align-middle me-1"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> Profile </a> <a class="dropdown-item" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart align-middle me-1"> <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path> <path d="M22 12A10 10 0 0 0 12 2v10z"></path> </svg> Analytics </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="pages-settings.html"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings align-middle me-1"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> Settings & Privacy </a> <a class="dropdown-item" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle align-middle me-1"> <circle cx="12" cy="12" r="10"></circle> <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path> <line x1="12" y1="17" x2="12.01" y2="17"></line> </svg> Help Center </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Log out</a> </div> </li> </ul> </div>
<a class="sidebar-toggle js-sidebar-toggle"> <i class="hamburger align-self-center"></i> </a> <div class="navbar-collapse collapse"> <ul class="navbar-nav navbar-align"> <li class="nav-item dropdown"> <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-bs-toggle="dropdown"> <div class="position-relative"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell align-middle"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> <span class="indicator">4</span> </div> </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="alertsDropdown"> <div class="dropdown-menu-header"> 4 New Notifications </div> <div class="list-group"> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle text-danger"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> </div> <div class="col-10"> <div class="text-dark">Update completed</div> <div class="text-muted small mt-1">Restart server 12 to complete the update.</div> <div class="text-muted small mt-1">30m ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell text-warning"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> </div> <div class="col-10"> <div class="text-dark">Lorem ipsum</div> <div class="text-muted small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div> <div class="text-muted small mt-1">2h ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home text-primary"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> </div> <div class="col-10"> <div class="text-dark">Login from 192.186.1.8</div> <div class="text-muted small mt-1">5h ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus text-success"> <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="8.5" cy="7" r="4"></circle> <line x1="20" y1="8" x2="20" y2="14"></line> <line x1="23" y1="11" x2="17" y2="11"></line> </svg> </div> <div class="col-10"> <div class="text-dark">New connection</div> <div class="text-muted small mt-1">Christina accepted your request.</div> <div class="text-muted small mt-1">14h ago</div> </div> </div> </a> </div> <div class="dropdown-menu-footer"> <a href="#" class="text-muted">Show all notifications</a> </div> </div> </li> <li class="nav-item dropdown"> <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-bs-toggle="dropdown"> <div class="position-relative"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square align-middle"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> </div> </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="messagesDropdown"> <div class="dropdown-menu-header"> <div class="position-relative"> 4 New Messages </div> </div> <div class="list-group"> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Vanessa Tucker"> </div> <div class="col-10 ps-2"> <div class="text-dark">Vanessa Tucker</div> <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div> <div class="text-muted small mt-1">15m ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="William Harris"> </div> <div class="col-10 ps-2"> <div class="text-dark">William Harris</div> <div class="text-muted small mt-1">Curabitur ligula sapien euismod vitae.</div> <div class="text-muted small mt-1">2h ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Christina Mason"> </div> <div class="col-10 ps-2"> <div class="text-dark">Christina Mason</div> <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.</div> <div class="text-muted small mt-1">4h ago</div> </div> </div> </a> <a href="#" class="list-group-item"> <div class="row g-0 align-items-center"> <div class="col-2"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Sharon Lessman"> </div> <div class="col-10 ps-2"> <div class="text-dark">Sharon Lessman</div> <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.</div> <div class="text-muted small mt-1">5h ago</div> </div> </div> </a> </div> <div class="dropdown-menu-footer"> <a href="#" class="text-muted">Show all messages</a> </div> </div> </li> <li class="nav-item dropdown"> <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-bs-toggle="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings align-middle"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> </a> <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" class="avatar img-fluid rounded me-1" alt="Charles Hall"> <span class="text-dark">Charles Hall</span> </a> <div class="dropdown-menu dropdown-menu-end"> <a class="dropdown-item" href="pages-profile.html"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user align-middle me-1"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> Profile </a> <a class="dropdown-item" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart align-middle me-1"> <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path> <path d="M22 12A10 10 0 0 0 12 2v10z"></path> </svg> Analytics </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="pages-settings.html"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings align-middle me-1"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> Settings & Privacy </a> <a class="dropdown-item" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle align-middle me-1"> <circle cx="12" cy="12" r="10"></circle> <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path> <line x1="12" y1="17" x2="12.01" y2="17"></line> </svg> Help Center </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Log out</a> </div> </li> </ul> </div>
<div class="sidebar-content js-simplebar" data-simplebar="init"> <div class="simplebar-wrapper" style="margin: 0px;"> <div class="simplebar-height-auto-observer-wrapper"> <div class="simplebar-height-auto-observer"></div> </div> <div class="simplebar-mask"> <div class="simplebar-offset" style="right: 0px; bottom: 0px;"> <div class="simplebar-content-wrapper" style="height: 100%; overflow: hidden scroll;"> <div class="simplebar-content" style="padding: 0px;"> <a class="sidebar-brand" href="javascript:;"> <span class="align-middle">AdminKit</span> </a> <ul class="sidebar-nav"> <li class="sidebar-header"> Pages </li> <li class="sidebar-item active"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sliders align-middle"> <line x1="4" y1="21" x2="4" y2="14"></line> <line x1="4" y1="10" x2="4" y2="3"></line> <line x1="12" y1="21" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12" y2="3"></line> <line x1="20" y1="21" x2="20" y2="16"></line> <line x1="20" y1="12" x2="20" y2="3"></line> <line x1="1" y1="14" x2="7" y2="14"></line> <line x1="9" y1="8" x2="15" y2="8"></line> <line x1="17" y1="16" x2="23" y2="16"></line> </svg> <span class="align-middle">Dashboard</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user align-middle"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> <span class="align-middle">Profile</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-in align-middle"> <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path> <polyline points="10 17 15 12 10 7"></polyline> <line x1="15" y1="12" x2="3" y2="12"></line> </svg> <span class="align-middle">Sign In</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus align-middle"> <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="8.5" cy="7" r="4"></circle> <line x1="20" y1="8" x2="20" y2="14"></line> <line x1="23" y1="11" x2="17" y2="11"></line> </svg> <span class="align-middle">Sign Up</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book align-middle"> <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path> <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path> </svg> <span class="align-middle">Blank</span> </a> </li> <li class="sidebar-header"> Tools & Components </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square align-middle"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> </svg> <span class="align-middle">Buttons</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square align-middle"> <polyline points="9 11 12 14 22 4"></polyline> <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path> </svg> <span class="align-middle">Forms</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid align-middle"> <rect x="3" y="3" width="7" height="7"></rect> <rect x="14" y="3" width="7" height="7"></rect> <rect x="14" y="14" width="7" height="7"></rect> <rect x="3" y="14" width="7" height="7"></rect> </svg> <span class="align-middle">Cards</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left align-middle"> <line x1="17" y1="10" x2="3" y2="10"></line> <line x1="21" y1="6" x2="3" y2="6"></line> <line x1="21" y1="14" x2="3" y2="14"></line> <line x1="17" y1="18" x2="3" y2="18"></line> </svg> <span class="align-middle">Typography</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee align-middle"> <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path> <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path> <line x1="6" y1="1" x2="6" y2="4"></line> <line x1="10" y1="1" x2="10" y2="4"></line> <line x1="14" y1="1" x2="14" y2="4"></line> </svg> <span class="align-middle">Icons</span> </a> </li> <li class="sidebar-header"> Plugins & Addons </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2 align-middle"> <line x1="18" y1="20" x2="18" y2="10"></line> <line x1="12" y1="20" x2="12" y2="4"></line> <line x1="6" y1="20" x2="6" y2="14"></line> </svg> <span class="align-middle">Charts</span> </a> </li> <li class="sidebar-item"> <a class="sidebar-link" href="javascript:;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map align-middle"> <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon> <line x1="8" y1="2" x2="8" y2="18"></line> <line x1="16" y1="6" x2="16" y2="22"></line> </svg> <span class="align-middle">Maps</span> </a> </li> </ul> <div class="sidebar-cta"> <div class="sidebar-cta-content"> <strong class="d-inline-block mb-2">AdminKit </strong> <div class="mb-3 text-sm"> Are you looking for a beautiful Dashboard? Check out our premium version. </div> <div class="d-grid"> <a href="javascript:;" class="btn btn-primary">AdminKit</a> </div> </div> </div> </div> </div> </div> </div> <div class="simplebar-placeholder" style="width: auto; height: 957px;"></div> </div> <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;"> <div class="simplebar-scrollbar" style="width: 0px; display: none;"></div> </div> <div class="simplebar-track simplebar-vertical" style="visibility: visible;"> <div class="simplebar-scrollbar" style="height: 794px; transform: translate3d(0px, 0px, 0px); display: block;"></div> </div> </div>
<div class="row removable"> <div class="col-sm-3 drop-zone"> <div class="card draggable"> <div class="card-body"> <div class="row"> <div class="col mt-0"> <h5 class="card-title">Sales</h5> </div> <div class="col-auto"> <div class="stat text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck align-middle"> <rect x="1" y="3" width="15" height="13"></rect> <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon> <circle cx="5.5" cy="18.5" r="2.5"></circle> <circle cx="18.5" cy="18.5" r="2.5"></circle> </svg> </div> </div> </div> <h1 class="mt-1 mb-3">2.382</h1> <div class="mb-0"> <span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span> <span class="text-muted">Since last week</span> </div> </div> </div> </div> <div class="col-sm-3 drop-zone"> <div class="card draggable"> <div class="card-body"> <div class="row"> <div class="col mt-0"> <h5 class="card-title">Visitors</h5> </div> <div class="col-auto"> <div class="stat text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users align-middle"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> </div> </div> </div> <h1 class="mt-1 mb-3">14.212</h1> <div class="mb-0"> <span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> 5.25% </span> <span class="text-muted">Since last week</span> </div> </div> </div> </div> <div class="col-sm-3 drop-zone"> <div class="card draggable"> <div class="card-body"> <div class="row"> <div class="col mt-0"> <h5 class="card-title">Earnings</h5> </div> <div class="col-auto"> <div class="stat text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign align-middle"> <line x1="12" y1="1" x2="12" y2="23"></line> <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path> </svg> </div> </div> </div> <h1 class="mt-1 mb-3">$21.300</h1> <div class="mb-0"> <span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> 6.65% </span> <span class="text-muted">Since last week</span> </div> </div> </div> </div> <div class="col-sm-3 drop-zone"> <div class="card draggable"> <div class="card-body"> <div class="row"> <div class="col mt-0"> <h5 class="card-title">Orders</h5> </div> <div class="col-auto"> <div class="stat text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart align-middle"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> </div> </div> </div> <h1 class="mt-1 mb-3">64</h1> <div class="mb-0"> <span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -2.25% </span> <span class="text-muted">Since last week</span> </div> </div> </div> </div> </div>
<div class="row removable"> <div class="col-sm-3 drop-zone"> <div class="card bg-dark text-white draggable"> <div class="card-body"> <div class="row"> <div class="col mt-0"> <h5 class="card-title text-white opacity-9">Sales</h5> </div> <div class="col-auto"> <div class="stat text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck align-middle"> <rect x="1" y="3" width="15" height="13"></rect> <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon> <circle cx="5.5" cy="18.5" r="2.5"></circle> <circle cx="18.5" cy="18.5" r="2.5"></circle> </svg> </div> </div> </div> <h1 class="mt-1 mb-3 text-white">2.382</h1> <div class="mb-0"> <span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span> <span class="text-white opacity-8">Since last week</span> </div> </div> </div> </div> <div class="col-sm-3 drop-zone"> <div class="card bg-dark text-white draggable"> <div class="card-body"> <div class="row"> <div class="col mt-0"> <h5 class="card-title text-white opacity-9">Visitors</h5> </div> <div class="col-auto"> <div class="stat text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users align-middle"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> </div> </div> </div> <h1 class="mt-1 mb-3 text-white">14.212</h1> <div class="mb-0"> <span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> 5.25% </span> <span class="text-white opacity-8">Since last week</span> </div> </div> </div> </div> <div class="col-sm-3 drop-zone"> <div class="card bg-dark text-white draggable"> <div class="card-body"> <div class="row"> <div class="col mt-0"> <h5 class="card-title text-white opacity-9">Earnings</h5> </div> <div class="col-auto"> <div class="stat text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign align-middle"> <line x1="12" y1="1" x2="12" y2="23"></line> <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path> </svg> </div> </div> </div> <h1 class="mt-1 mb-3 text-white">$21.300</h1> <div class="mb-0"> <span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> 6.65% </span> <span class="text-white opacity-8">Since last week</span> </div> </div> </div> </div> <div class="col-sm-3 drop-zone"> <div class="card bg-dark text-white draggable"> <div class="card-body"> <div class="row"> <div class="col mt-0"> <h5 class="card-title text-white opacity-9">Orders</h5> </div> <div class="col-auto"> <div class="stat text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart align-middle"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> </div> </div> </div> <h1 class="mt-1 mb-3 text-white">64</h1> <div class="mb-0"> <span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -2.25% </span> <span class="text-white opacity-8">Since last week</span> </div> </div> </div> </div> </div>
<div class="card flex-fill w-100 draggable"> <div class="card-header"> <h5 class="card-title mb-0">Recent Movement</h5> </div> <div class="card-body py-3"> <div class="chart chart-sm"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div> <canvas id="chartjs-dashboard-line" style="display: block; height: 252px; width: 428px;" width="856" height="504" class="chart-line chartjs-render-monitor"></canvas> </div> </div> </div><script>var chartsLine = document.querySelectorAll(".chart-line"); chartsLine.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { var ctx = chart.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 0, 225); gradient.addColorStop(0, "rgba(215, 227, 244, 1)"); gradient.addColorStop(1, "rgba(215, 227, 244, 0)"); // Line chart new Chart(ctx, { type: "line", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Sales ($)", fill: true, backgroundColor: gradient, borderColor: window.theme.primary, data: [ 2115, 1562, 1584, 1892, 1587, 1923, 2566, 2448, 2805, 3438, 2917, 3327 ] }] }, options: { maintainAspectRatio: false, legend: { display: false }, tooltips: { intersect: false }, hover: { intersect: true }, plugins: { filler: { propagate: false } }, scales: { xAxes: [{ reverse: true, gridLines: { color: "rgba(0,0,0,0.0)" } }], yAxes: [{ ticks: { stepSize: 1000 }, display: true, borderDash: [3, 3], gridLines: { color: "rgba(0,0,0,0.0)" } }] } } }); chart.setAttribute("data-chart-initialized", "true"); } });</script>
<div class="card flex-fill w-100 draggable"> <div class="card-header"> <h5 class="card-title mb-0">Recent Movement</h5> </div> <div class="card-body py-3"> <div class="chart chart-sm"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div> <canvas id="chartjs-dashboard-line" style="display: block; height: 252px; width: 428px;" width="856" height="504" class="chart-line chartjs-render-monitor"></canvas> </div> </div> </div>
var chartsLine = document.querySelectorAll(".chart-line"); chartsLine.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { var ctx = chart.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 0, 225); gradient.addColorStop(0, "rgba(215, 227, 244, 1)"); gradient.addColorStop(1, "rgba(215, 227, 244, 0)"); // Line chart new Chart(ctx, { type: "line", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Sales ($)", fill: true, backgroundColor: gradient, borderColor: window.theme.primary, data: [ 2115, 1562, 1584, 1892, 1587, 1923, 2566, 2448, 2805, 3438, 2917, 3327 ] }] }, options: { maintainAspectRatio: false, legend: { display: false }, tooltips: { intersect: false }, hover: { intersect: true }, plugins: { filler: { propagate: false } }, scales: { xAxes: [{ reverse: true, gridLines: { color: "rgba(0,0,0,0.0)" } }], yAxes: [{ ticks: { stepSize: 1000 }, display: true, borderDash: [3, 3], gridLines: { color: "rgba(0,0,0,0.0)" } }] } } }); chart.setAttribute("data-chart-initialized", "true"); } });