E31211730_Maulanaibnufauzi
/
MIF_E31211730
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MIF_E31211730/public/admin/docs/documentation.html

2516 lines
136 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Skydash Admin Dashboard</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../template/vendors/ti-icons/css/themify-icons.css">
<link rel="stylesheet" href="../template/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- plugin css for this page -->
<link rel="stylesheet" href="../template/vendors/codemirror/codemirror.css">
<link rel="stylesheet" href="../template/vendors/codemirror/ambiance.css">
<link rel="stylesheet" href="../template/vendors/pwstabs/jquery.pwstabs.min.css">
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="../template/css/vertical-layout-light/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="../template/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper full-page-wrapper">
<div class="main-panel w-100 documentation">
<div class="content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-12 doc-header">
<a class="btn btn-success btn-sm" href="../template/index.html"><i class="mdi mdi-home mr-2"></i>Back to home</a>
<h3 class="text-primary mt-4">Documentation</h3>
</div>
</div>
<div class="row doc-content">
<div class="col-12 col-md-3 grid-margin doc-table-contents">
<div class="card">
<div class="card-body">
<h3 class="mb-4">Table of contents</h3>
<ul class="list-arrow">
<li>
<a href="#doc-intro">Introduction</a>
</li>
<li>
<a href="#doc-started">Getting started</a>
</li>
<li>
<a href="#doc-structure">Basic structure</a>
</li>
<li>
<a href="#doc-components">Components</a>
<ul class="list-arrow">
<li>
<a href="#doc-basic-ui">Basic UI Elements</a>
</li>
<li>
<a href="#doc-tables">Tables</a>
</li>
<li>
<a href="#doc-charts">Charts</a>
</li>
<li>
<a href="#doc-forms">Forms</a>
</li>
<li>
<a href="#doc-icons">Icons</a>
</li>
</ul>
</li>
<li>
<a href="#doc-credits">Credits</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-9 offset-md-3 grid-margin">
<div class="col-12 grid-margin" id="doc-intro">
<div class="card">
<div class="card-body">
<h3 class="mb-4">Introduction</h3>
<p>Skydash Admin is a responsive HTML template that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their
website and read through the documentation. All of Bootstrap components have been modified to fit the style of Skydash Admin and provide a consistent look throughout the template.</p>
<p>Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can
be really helpful when you need to create something on the fly.</p>
<p class="d-inline"><strong>Note</strong>: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme please use Envato support form on our profile or email us at <a class="d-inline text-info" href="mailto:support@bootstrapdash.com">support@bootstrapdash.com</a></p>
</div>
</div>
</div>
<div class="col-12 grid-margin" id="doc-started">
<div class="card">
<div class="card-body">
<h3 class="mb-4">Getting started</h3>
<p>You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.</p>
<p>Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations:</p>
<textarea class="shell-mode">
Skydash/
├── template/
├── css/
├── fonts/
├── images/
├── js/
├── demo/
├── demo variation folder (for eg, vertical-default)
├── pages/
├── partials/
├── index.html
├── scss/
├── vendors/
├── gulpfile.js
├── index.html
├── package.json
├── docs/
├── documentation.html
├── documentation.js
├── CHANGELOG.md</textarea>
<p class="mt-1">Note: The root folder denoted further in this documentation refers to the 'template' folder inside the downloaded folder</p>
<div class="alert alert-success mt-4 d-flex align-items-center" role="alert">
<i class="ti-info-alt"></i>
<p>We have bundled up the vendor files needed for demo purpose into a folder 'vendors', you may not need all those vendors in your application. If you want to make any change in the vendor package files, you need to change the src path for related tasks in the file gulpfile.js and run the task <code>bundleVendors</code> to rebuild the vendor files.</p>
</div>
<hr class="mt-5">
<h4 class="mt-4">Installation</h4>
<p class="mb-0">
You need to install package files/Dependencies for this project if you want to customize it. To do this, you must have <span class="font-weight-bold">node and npm</span> installed in your computer.
</p>
<p class="mb-0">Installation guide of the node can be found <a href="https://nodejs.org/en/">here</a>. As npm comes bundled with a node, a separate installation of npm is not needed.</p>
<p>
If you have installed them, just go to the root folder and run the following command in your command prompt or terminal (for the mac users).
</p>
<textarea class="shell-mode">
npm install</textarea>
<p class="mt-4">
This will install the dev dependencies in the local <span class="font-weight-bold">node_modules</span> folder in your root directory.
</p>
<p class="mt-2">
Then you will need to install <span class="font-weight-bold">Gulp</span>. We use the Gulp task manager for the development processes. Gulp will watch for changes to the SCSS files and automatically compile the files to CSS.
</p>
<p>Getting started with Gulp is pretty simple. The <a href="https://gulpjs.com/" target="_blank">Gulp</a> site is a great place to get information on installing Gulp if you need more information. You need to first install Gulp-cli in your machine using the below command.</p>
<textarea class="shell-mode">
npm install -g gulp-cli</textarea>
<p class="mt-4">This installs Gulp-cli globally to your machine. The other thing that Gulp requires, which, is really what does all the work, is the gulpfile.js. In this file, you set up all of your tasks that you will run.</p>
<p>Don't worry. We have this file already created for you!</p>
<p>To run this project in development mode enter the following command below. This will start the file watch by gulp and whenever a file is modified, the SCSS files will be compiled to create the CSS file.</p>
<textarea class="shell-mode">
gulp serve</textarea>
<div class="alert alert-warning mt-4" role="alert">
<i class="ti-info-alt-outline"></i>It is important to run <code>gulp serve</code> command from the directory where the gulpfile.js is located.
</div>
</div>
</div>
</div>
<div class="col-12 grid-margin" id="doc-structure">
<div class="card">
<div class="card-body">
<h3>Basic structure</h3>
<p class="mb-5">
The below snippet shows the basic HTML structure of Skydash Admin.
Please note that all the stylesheets and script files in the below snippet should be included to render Skydash Admin styles.
</p>
<div class="demo-tabs">
<div data-pws-tab="vertical light" data-pws-tab-name="Vertical light">
<p class="mb-5">This section contains code of default vertical layout. For other layouts in vertical mode like boxed, icon-menu etc., you can follow the snippet same as below, but you have to just add the appropriate optional class to the body. More details of the classes are given in <a href="#doc-options">Options</a> section</p>
<textarea class="multiple-codes mt-5">
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Skydash Admin</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../vendors/ti-icons/css/themify-icons.css">
<link rel="stylesheet" href="../../vendors/feather/feather.css">
<link rel="stylesheet" href="../../vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<link rel="stylesheet" href="../../vendors/datatables.net-bs4/dataTables.bootstrap4.css">
<link rel="stylesheet" href="../../vendors/ti-icons/css/themify-icons.css">
<link rel="stylesheet" type="text/css" href="../../js/select.dataTables.min.css">
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="../../css/vertical-layout-light/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="../../images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:partials/_navbar.html -->
<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
<div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
<a class="navbar-brand brand-logo mr-5" href="index.html"><img src="../../images/logo.svg" class="mr-2" alt="logo"/></a>
<a class="navbar-brand brand-logo-mini" href="index.html"><img src="../../images/logo-mini.svg" alt="logo"/></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="icon-menu"></span>
</button>
<ul class="navbar-nav mr-lg-2">
<li class="nav-item nav-search d-none d-lg-block">
<div class="input-group">
<div class="input-group-prepend hover-cursor" id="navbar-search-icon">
<span class="input-group-text" id="search">
<i class="icon-search"></i>
</span>
</div>
<input type="text" class="form-control" id="navbar-search-input" placeholder="Search now" aria-label="search" aria-describedby="search">
</div>
</li>
</ul>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
<i class="icon-bell mx-0"></i>
<span class="count"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
<p class="mb-0 font-weight-normal float-left dropdown-header">Notifications</p>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-success">
<i class="ti-info-alt mx-0"></i>
</div>
</div>
<div class="preview-item-content">
<h6 class="preview-subject font-weight-normal">Application Error</h6>
<p class="font-weight-light small-text mb-0 text-muted">
Just now
</p>
</div>
</a>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="ti-settings mx-0"></i>
</div>
</div>
<div class="preview-item-content">
<h6 class="preview-subject font-weight-normal">Settings</h6>
<p class="font-weight-light small-text mb-0 text-muted">
Private message
</p>
</div>
</a>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-info">
<i class="ti-user mx-0"></i>
</div>
</div>
<div class="preview-item-content">
<h6 class="preview-subject font-weight-normal">New user registration</h6>
<p class="font-weight-light small-text mb-0 text-muted">
2 days ago
</p>
</div>
</a>
</div>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
<img src="../../images/faces/face28.jpg" alt="profile"/>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
<a class="dropdown-item">
<i class="ti-settings text-primary"></i>
Settings
</a>
<a class="dropdown-item">
<i class="ti-power-off text-primary"></i>
Logout
</a>
</div>
</li>
<li class="nav-item nav-settings d-none d-lg-flex">
<a class="nav-link" href="#">
<i class="icon-ellipsis"></i>
</a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="icon-menu"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:partials/_settings-panel.html -->
<div class="theme-setting-wrapper">
<div id="settings-trigger"><i class="ti-settings"></i></div>
<div id="theme-settings" class="settings-panel">
<i class="settings-close ti-close"></i>
<p class="settings-heading">SIDEBAR SKINS</p>
<div class="sidebar-bg-options selected" id="sidebar-light-theme"><div class="img-ss rounded-circle bg-light border mr-3"></div>Light</div>
<div class="sidebar-bg-options" id="sidebar-dark-theme"><div class="img-ss rounded-circle bg-dark border mr-3"></div>Dark</div>
<p class="settings-heading mt-2">HEADER SKINS</p>
<div class="color-tiles mx-0 px-4">
<div class="tiles success"></div>
<div class="tiles warning"></div>
<div class="tiles danger"></div>
<div class="tiles info"></div>
<div class="tiles dark"></div>
<div class="tiles default"></div>
</div>
</div>
</div>
<div id="right-sidebar" class="settings-panel">
<i class="settings-close ti-close"></i>
<ul class="nav nav-tabs border-top" id="setting-panel" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="todo-tab" data-toggle="tab" href="#todo-section" role="tab" aria-controls="todo-section" aria-expanded="true">TO DO LIST</a>
</li>
<li class="nav-item">
<a class="nav-link" id="chats-tab" data-toggle="tab" href="#chats-section" role="tab" aria-controls="chats-section">CHATS</a>
</li>
</ul>
<div class="tab-content" id="setting-content">
<div class="tab-pane fade show active scroll-wrapper" id="todo-section" role="tabpanel" aria-labelledby="todo-section">
<div class="add-items d-flex px-3 mb-0">
<form class="form w-100">
<div class="form-group d-flex">
<input type="text" class="form-control todo-list-input" placeholder="Add To-do">
<button type="submit" class="add btn btn-primary todo-list-add-btn" id="add-task">Add</button>
</div>
</form>
</div>
<div class="list-wrapper px-3">
<ul class="d-flex flex-column-reverse todo-list">
<li>
<div class="form-check">
<label class="form-check-label">
<input class="checkbox" type="checkbox">
Team review meeting at 3.00 PM
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li>
<div class="form-check">
<label class="form-check-label">
<input class="checkbox" type="checkbox">
Prepare for presentation
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li>
<div class="form-check">
<label class="form-check-label">
<input class="checkbox" type="checkbox">
Resolve all the low priority tickets due today
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li class="completed">
<div class="form-check">
<label class="form-check-label">
<input class="checkbox" type="checkbox" checked>
Schedule meeting for next week
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li class="completed">
<div class="form-check">
<label class="form-check-label">
<input class="checkbox" type="checkbox" checked>
Project review
</label>
</div>
<i class="remove ti-close"></i>
</li>
</ul>
</div>
<h4 class="px-3 text-muted mt-5 font-weight-light mb-0">Events</h4>
<div class="events pt-4 px-3">
<div class="wrapper d-flex mb-2">
<i class="ti-control-record text-primary mr-2"></i>
<span>Feb 11 2018</span>
</div>
<p class="mb-0 font-weight-thin text-gray">Creating component page build a js</p>
<p class="text-gray mb-0">The total number of sessions</p>
</div>
<div class="events pt-4 px-3">
<div class="wrapper d-flex mb-2">
<i class="ti-control-record text-primary mr-2"></i>
<span>Feb 7 2018</span>
</div>
<p class="mb-0 font-weight-thin text-gray">Meeting with Alisa</p>
<p class="text-gray mb-0 ">Call Sarah Graves</p>
</div>
</div>
<!-- To do section tab ends -->
<div class="tab-pane fade" id="chats-section" role="tabpanel" aria-labelledby="chats-section">
<div class="d-flex align-items-center justify-content-between border-bottom">
<p class="settings-heading border-top-0 mb-3 pl-3 pt-0 border-bottom-0 pb-0">Friends</p>
<small class="settings-heading border-top-0 mb-3 pt-0 border-bottom-0 pb-0 pr-3 font-weight-normal">See All</small>
</div>
<ul class="chat-list">
<li class="list active">
<div class="profile"><img src="../../images/faces/face1.jpg" alt="image"><span class="online"></span></div>
<div class="info">
<p>Thomas Douglas</p>
<p>Available</p>
</div>
<small class="text-muted my-auto">19 min</small>
</li>
<li class="list">
<div class="profile"><img src="../../images/faces/face2.jpg" alt="image"><span class="offline"></span></div>
<div class="info">
<div class="wrapper d-flex">
<p>Catherine</p>
</div>
<p>Away</p>
</div>
<div class="badge badge-success badge-pill my-auto mx-2">4</div>
<small class="text-muted my-auto">23 min</small>
</li>
<li class="list">
<div class="profile"><img src="../../images/faces/face3.jpg" alt="image"><span class="online"></span></div>
<div class="info">
<p>Daniel Russell</p>
<p>Available</p>
</div>
<small class="text-muted my-auto">14 min</small>
</li>
<li class="list">
<div class="profile"><img src="../../images/faces/face4.jpg" alt="image"><span class="offline"></span></div>
<div class="info">
<p>James Richardson</p>
<p>Away</p>
</div>
<small class="text-muted my-auto">2 min</small>
</li>
<li class="list">
<div class="profile"><img src="../../images/faces/face5.jpg" alt="image"><span class="online"></span></div>
<div class="info">
<p>Madeline Kennedy</p>
<p>Available</p>
</div>
<small class="text-muted my-auto">5 min</small>
</li>
<li class="list">
<div class="profile"><img src="../../images/faces/face6.jpg" alt="image"><span class="online"></span></div>
<div class="info">
<p>Sarah Graves</p>
<p>Available</p>
</div>
<small class="text-muted my-auto">47 min</small>
</li>
</ul>
</div>
<!-- chat tab ends -->
</div>
</div>
<!-- partial -->
<!-- partial:partials/_sidebar.html -->
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">
<i class="icon-grid menu-icon"></i>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/widgets/widgets.html">
<i class="icon-cog menu-icon"></i>
<span class="menu-title">Widgets</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">UI Elements</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/accordions.html">Accordions</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/buttons.html">Buttons</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/badges.html">Badges</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/breadcrumbs.html">Breadcrumbs</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/dropdowns.html">Dropdowns</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/modals.html">Modals</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/progress.html">Progress bar</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/pagination.html">Pagination</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/tabs.html">Tabs</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/typography.html">Typography</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/tooltips.html">Tooltips</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-advanced" aria-expanded="false" aria-controls="ui-advanced">
<i class="icon-image menu-icon"></i>
<span class="menu-title">Advanced UI</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-advanced">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/dragula.html">Dragula</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/clipboard.html">Clipboard</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/context-menu.html">Context menu</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/slider.html">Sliders</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/carousel.html">Carousel</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/colcade.html">Colcade</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/loaders.html">Loaders</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#form-elements" aria-expanded="false" aria-controls="form-elements">
<i class="icon-columns menu-icon"></i>
<span class="menu-title">Form elements</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="form-elements">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="pages/forms/basic_elements.html">Basic Elements</a></li>
<li class="nav-item"><a class="nav-link" href="pages/forms/advanced_elements.html">Advanced Elements</a></li>
<li class="nav-item"><a class="nav-link" href="pages/forms/validation.html">Validation</a></li>
<li class="nav-item"><a class="nav-link" href="pages/forms/wizard.html">Wizard</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#editors" aria-expanded="false" aria-controls="editors">
<i class="icon-loader menu-icon"></i>
<span class="menu-title">Editors</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="editors">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="pages/forms/text_editor.html">Text editors</a></li>
<li class="nav-item"><a class="nav-link" href="pages/forms/code_editor.html">Code editors</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#charts" aria-expanded="false" aria-controls="charts">
<i class="icon-bar-graph menu-icon"></i>
<span class="menu-title">Charts</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="charts">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/charts/chartjs.html">ChartJs</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/morris.html">Morris</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/flot-chart.html">Flot</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/google-charts.html">Google charts</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/sparkline.html">Sparkline js</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/c3.html">C3 charts</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/chartist.html">Chartists</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/justGage.html">JustGage</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#tables" aria-expanded="false" aria-controls="tables">
<i class="icon-grid-2 menu-icon"></i>
<span class="menu-title">Tables</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="tables">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/tables/basic-table.html">Basic table</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/tables/data-table.html">Data table</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/tables/js-grid.html">Js-grid</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/tables/sortable-table.html">Sortable table</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/ui-features/popups.html">
<i class="icon-open menu-icon"></i>
<span class="menu-title">Popups</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/ui-features/notifications.html">
<i class="icon-esc menu-icon"></i>
<span class="menu-title">Notifications</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#icons" aria-expanded="false" aria-controls="icons">
<i class="icon-contract menu-icon"></i>
<span class="menu-title">Icons</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="icons">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/icons/flag-icons.html">Flag icons</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/icons/mdi.html">Mdi icons</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/icons/font-awesome.html">Font Awesome</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/icons/simple-line-icon.html">Simple line icons</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/icons/themify.html">Themify icons</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#maps" aria-expanded="false" aria-controls="maps">
<i class="icon-map menu-icon"></i>
<span class="menu-title">Maps</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="maps">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/maps/mapael.html">Mapael</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/maps/vector-map.html">Vector Map</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/maps/google-maps.html">Google Map</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<i class="icon-head menu-icon"></i>
<span class="menu-title">User Pages</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="auth">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/login.html"> Login </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/login-2.html"> Login 2 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/register.html"> Register </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/register-2.html"> Register 2 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/lock-screen.html"> Lockscreen </a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#error" aria-expanded="false" aria-controls="error">
<i class="icon-ban menu-icon"></i>
<span class="menu-title">Error pages</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="error">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/error-404.html"> 404 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/error-500.html"> 500 </a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#general-pages" aria-expanded="false" aria-controls="general-pages">
<i class="icon-book menu-icon"></i>
<span class="menu-title">General Pages</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="general-pages">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/blank-page.html"> Blank Page </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/profile.html"> Profile </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/faq.html"> FAQ </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/faq-2.html"> FAQ 2 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/news-grid.html"> News grid </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/timeline.html"> Timeline </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/search-results.html"> Search Results </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/portfolio.html"> Portfolio </a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#e-commerce" aria-expanded="false" aria-controls="e-commerce">
<i class="icon-tag menu-icon"></i>
<span class="menu-title">E-commerce</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="e-commerce">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/invoice.html"> Invoice </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/pricing-table.html"> Pricing Table </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/orders.html"> Orders </a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/apps/email.html">
<i class="icon-mail menu-icon"></i>
<span class="menu-title">E-mail</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/apps/calendar.html">
<i class="icon-watch menu-icon"></i>
<span class="menu-title">Calendar</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/apps/todo.html">
<i class="icon-align-right menu-icon"></i>
<span class="menu-title">Todo List</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/apps/gallery.html">
<i class="icon-image menu-icon"></i>
<span class="menu-title">Gallery</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/documentation/documentation.html">
<i class="icon-paper menu-icon"></i>
<span class="menu-title">Documentation</span>
</a>
</li>
</ul>
</nav>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-md-12 grid-margin">
<div class="row">
<div class="col-12 col-xl-8 mb-4 mb-xl-0">
<h3 class="font-weight-bold">Welcome Aamir</h3>
<h6 class="font-weight-normal mb-0">All systems are running smoothly! You have <span class="text-primary">3 unread alerts!</span></h6>
</div>
<div class="col-12 col-xl-4">
<div class="justify-content-end d-flex">
<div class="dropdown flex-md-grow-1 flex-xl-grow-0">
<button class="btn btn-sm btn-light bg-white dropdown-toggle" type="button" id="dropdownMenuDate2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="mdi mdi-calendar"></i> Today (10 Jan 2021)
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuDate2">
<a class="dropdown-item" href="#">January - March</a>
<a class="dropdown-item" href="#">March - June</a>
<a class="dropdown-item" href="#">June - August</a>
<a class="dropdown-item" href="#">August - November</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card tale-bg">
<div class="card-people mt-auto">
<img src="../../images/dashboard/people.svg" alt="people">
<div class="weather-info">
<div class="d-flex">
<div>
<h2 class="mb-0 font-weight-normal"><i class="icon-sun mr-2"></i>31<sup>C</sup></h2>
</div>
<div class="ml-2">
<h4 class="location font-weight-normal">Bangalore</h4>
<h6 class="font-weight-normal">India</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin transparent">
<div class="row">
<div class="col-md-6 mb-4 stretch-card transparent">
<div class="card card-tale">
<div class="card-body">
<p class="mb-4">Today’s Bookings</p>
<p class="fs-30 mb-2">4006</p>
<p>10.00% (30 days)</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 stretch-card transparent">
<div class="card card-dark-blue">
<div class="card-body">
<p class="mb-4">Total Bookings</p>
<p class="fs-30 mb-2">61344</p>
<p>22.00% (30 days)</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 mb-lg-0 stretch-card transparent">
<div class="card card-light-blue">
<div class="card-body">
<p class="mb-4">Number of Meetings</p>
<p class="fs-30 mb-2">34040</p>
<p>2.00% (30 days)</p>
</div>
</div>
</div>
<div class="col-md-6 stretch-card transparent">
<div class="card card-light-danger">
<div class="card-body">
<p class="mb-4">Number of Clients</p>
<p class="fs-30 mb-2">47033</p>
<p>0.22% (30 days)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<p class="card-title">Order Details</p>
<p class="font-weight-500">The total number of sessions within the date range. It is the period time a user is actively engaged with your website, page or app, etc</p>
<div class="d-flex flex-wrap mb-5">
<div class="mr-5 mt-3">
<p class="text-muted">Order value</p>
<h3 class="text-primary fs-30 font-weight-medium">12.3k</h3>
</div>
<div class="mr-5 mt-3">
<p class="text-muted">Orders</p>
<h3 class="text-primary fs-30 font-weight-medium">14k</h3>
</div>
<div class="mr-5 mt-3">
<p class="text-muted">Users</p>
<h3 class="text-primary fs-30 font-weight-medium">71.56%</h3>
</div>
<div class="mt-3">
<p class="text-muted">Downloads</p>
<h3 class="text-primary fs-30 font-weight-medium">34040</h3>
</div>
</div>
<canvas id="order-chart"></canvas>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between">
<p class="card-title">Sales Report</p>
<a href="#" class="text-info">View all</a>
</div>
<p class="font-weight-500">The total number of sessions within the date range. It is the period time a user is actively engaged with your website, page or app, etc</p>
<div id="sales-legend" class="chartjs-legend mt-4 mb-2"></div>
<canvas id="sales-chart"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card position-relative">
<div class="card-body">
<div id="detailedReports" class="carousel slide detailed-report-carousel position-static pt-2" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-12 col-xl-3 d-flex flex-column justify-content-start">
<div class="ml-xl-4 mt-3">
<p class="card-title">Detailed Reports</p>
<h1 class="text-primary">$34040</h1>
<h3 class="font-weight-500 mb-xl-4 text-primary">North America</h3>
<p class="mb-2 mb-xl-0">The total number of sessions within the date range. It is the period time a user is actively engaged with your website, page or app, etc</p>
</div>
</div>
<div class="col-md-12 col-xl-9">
<div class="row">
<div class="col-md-6 border-right">
<div class="table-responsive mb-3 mb-md-0 mt-3">
<table class="table table-borderless report-table">
<tr>
<td class="text-muted">Illinois</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-primary" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">713</h5></td>
</tr>
<tr>
<td class="text-muted">Washington</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">583</h5></td>
</tr>
<tr>
<td class="text-muted">Mississippi</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">924</h5></td>
</tr>
<tr>
<td class="text-muted">California</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">664</h5></td>
</tr>
<tr>
<td class="text-muted">Maryland</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-primary" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">560</h5></td>
</tr>
<tr>
<td class="text-muted">Alaska</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">793</h5></td>
</tr>
</table>
</div>
</div>
<div class="col-md-6 mt-3">
<canvas id="north-america-chart"></canvas>
<div id="north-america-legend"></div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-12 col-xl-3 d-flex flex-column justify-content-start">
<div class="ml-xl-4 mt-3">
<p class="card-title">Detailed Reports</p>
<h1 class="text-primary">$34040</h1>
<h3 class="font-weight-500 mb-xl-4 text-primary">North America</h3>
<p class="mb-2 mb-xl-0">The total number of sessions within the date range. It is the period time a user is actively engaged with your website, page or app, etc</p>
</div>
</div>
<div class="col-md-12 col-xl-9">
<div class="row">
<div class="col-md-6 border-right">
<div class="table-responsive mb-3 mb-md-0 mt-3">
<table class="table table-borderless report-table">
<tr>
<td class="text-muted">Illinois</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-primary" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">713</h5></td>
</tr>
<tr>
<td class="text-muted">Washington</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">583</h5></td>
</tr>
<tr>
<td class="text-muted">Mississippi</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">924</h5></td>
</tr>
<tr>
<td class="text-muted">California</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">664</h5></td>
</tr>
<tr>
<td class="text-muted">Maryland</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-primary" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">560</h5></td>
</tr>
<tr>
<td class="text-muted">Alaska</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><h5 class="font-weight-bold mb-0">793</h5></td>
</tr>
</table>
</div>
</div>
<div class="col-md-6 mt-3">
<canvas id="south-america-chart"></canvas>
<div id="south-america-legend"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#detailedReports" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#detailedReports" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<p class="card-title mb-0">Top Products</p>
<div class="table-responsive">
<table class="table table-striped table-borderless">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Search Engine Marketing</td>
<td class="font-weight-bold">$362</td>
<td>21 Sep 2018</td>
<td class="font-weight-medium"><div class="badge badge-success">Completed</div></td>
</tr>
<tr>
<td>Search Engine Optimization</td>
<td class="font-weight-bold">$116</td>
<td>13 Jun 2018</td>
<td class="font-weight-medium"><div class="badge badge-success">Completed</div></td>
</tr>
<tr>
<td>Display Advertising</td>
<td class="font-weight-bold">$551</td>
<td>28 Sep 2018</td>
<td class="font-weight-medium"><div class="badge badge-warning">Pending</div></td>
</tr>
<tr>
<td>Pay Per Click Advertising</td>
<td class="font-weight-bold">$523</td>
<td>30 Jun 2018</td>
<td class="font-weight-medium"><div class="badge badge-warning">Pending</div></td>
</tr>
<tr>
<td>E-Mail Marketing</td>
<td class="font-weight-bold">$781</td>
<td>01 Nov 2018</td>
<td class="font-weight-medium"><div class="badge badge-danger">Cancelled</div></td>
</tr>
<tr>
<td>Referral Marketing</td>
<td class="font-weight-bold">$283</td>
<td>20 Mar 2018</td>
<td class="font-weight-medium"><div class="badge badge-warning">Pending</div></td>
</tr>
<tr>
<td>Social media marketing</td>
<td class="font-weight-bold">$897</td>
<td>26 Oct 2018</td>
<td class="font-weight-medium"><div class="badge badge-success">Completed</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-5 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">To Do Lists</h4>
<div class="list-wrapper pt-2">
<ul class="d-flex flex-column-reverse todo-list todo-list-custom">
<li>
<div class="form-check form-check-flat">
<label class="form-check-label">
<input class="checkbox" type="checkbox">
Meeting with Urban Team
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li class="completed">
<div class="form-check form-check-flat">
<label class="form-check-label">
<input class="checkbox" type="checkbox" checked>
Duplicate a project for new customer
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li>
<div class="form-check form-check-flat">
<label class="form-check-label">
<input class="checkbox" type="checkbox">
Project meeting with CEO
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li class="completed">
<div class="form-check form-check-flat">
<label class="form-check-label">
<input class="checkbox" type="checkbox" checked>
Follow up of team zilla
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li>
<div class="form-check form-check-flat">
<label class="form-check-label">
<input class="checkbox" type="checkbox">
Level up for Antony
</label>
</div>
<i class="remove ti-close"></i>
</li>
</ul>
</div>
<div class="add-items d-flex mb-0 mt-2">
<input type="text" class="form-control todo-list-input" placeholder="Add new task">
<button class="add btn btn-icon text-primary todo-list-add-btn bg-transparent"><i class="icon-circle-plus"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 stretch-card grid-margin">
<div class="card">
<div class="card-body">
<p class="card-title mb-0">Projects</p>
<div class="table-responsive">
<table class="table table-borderless">
<thead>
<tr>
<th class="pl-0 pb-2 border-bottom">Places</th>
<th class="border-bottom pb-2">Orders</th>
<th class="border-bottom pb-2">Users</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pl-0">Kentucky</td>
<td><p class="mb-0"><span class="font-weight-bold mr-2">65</span>(2.15%)</p></td>
<td class="text-muted">65</td>
</tr>
<tr>
<td class="pl-0">Ohio</td>
<td><p class="mb-0"><span class="font-weight-bold mr-2">54</span>(3.25%)</p></td>
<td class="text-muted">51</td>
</tr>
<tr>
<td class="pl-0">Nevada</td>
<td><p class="mb-0"><span class="font-weight-bold mr-2">22</span>(2.22%)</p></td>
<td class="text-muted">32</td>
</tr>
<tr>
<td class="pl-0">North Carolina</td>
<td><p class="mb-0"><span class="font-weight-bold mr-2">46</span>(3.27%)</p></td>
<td class="text-muted">15</td>
</tr>
<tr>
<td class="pl-0">Montana</td>
<td><p class="mb-0"><span class="font-weight-bold mr-2">17</span>(1.25%)</p></td>
<td class="text-muted">25</td>
</tr>
<tr>
<td class="pl-0">Nevada</td>
<td><p class="mb-0"><span class="font-weight-bold mr-2">52</span>(3.11%)</p></td>
<td class="text-muted">71</td>
</tr>
<tr>
<td class="pl-0 pb-0">Louisiana</td>
<td class="pb-0"><p class="mb-0"><span class="font-weight-bold mr-2">25</span>(1.32%)</p></td>
<td class="pb-0">14</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4 stretch-card grid-margin">
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<p class="card-title">Charts</p>
<div class="charts-data">
<div class="mt-3">
<p class="mb-0">Data 1</p>
<div class="d-flex justify-content-between align-items-center">
<div class="progress progress-md flex-grow-1 mr-4">
<div class="progress-bar bg-inf0" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">5k</p>
</div>
</div>
<div class="mt-3">
<p class="mb-0">Data 2</p>
<div class="d-flex justify-content-between align-items-center">
<div class="progress progress-md flex-grow-1 mr-4">
<div class="progress-bar bg-info" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">1k</p>
</div>
</div>
<div class="mt-3">
<p class="mb-0">Data 3</p>
<div class="d-flex justify-content-between align-items-center">
<div class="progress progress-md flex-grow-1 mr-4">
<div class="progress-bar bg-info" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">992</p>
</div>
</div>
<div class="mt-3">
<p class="mb-0">Data 4</p>
<div class="d-flex justify-content-between align-items-center">
<div class="progress progress-md flex-grow-1 mr-4">
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">687</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 stretch-card grid-margin grid-margin-md-0">
<div class="card data-icon-card-primary">
<div class="card-body">
<p class="card-title text-white">Number of Meetings</p>
<div class="row">
<div class="col-8 text-white">
<h3>34040</h3>
<p class="text-white font-weight-500 mb-0">The total number of sessions within the date range.It is calculated as the sum . </p>
</div>
<div class="col-4 background-icon">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 stretch-card grid-margin">
<div class="card">
<div class="card-body">
<p class="card-title">Notifications</p>
<ul class="icon-data-list">
<li>
<div class="d-flex">
<img src="../../images/faces/face1.jpg" alt="user">
<div>
<p class="text-info mb-1">Isabella Becker</p>
<p class="mb-0">Sales dashboard have been created</p>
<small>9:30 am</small>
</div>
</div>
</li>
<li>
<div class="d-flex">
<img src="../../images/faces/face2.jpg" alt="user">
<div>
<p class="text-info mb-1">Adam Warren</p>
<p class="mb-0">You have done a great job #TW111</p>
<small>10:30 am</small>
</div>
</div>
</li>
<li>
<div class="d-flex">
<img src="../../images/faces/face3.jpg" alt="user">
<div>
<p class="text-info mb-1">Leonard Thornton</p>
<p class="mb-0">Sales dashboard have been created</p>
<small>11:30 am</small>
</div>
</div>
</li>
<li>
<div class="d-flex">
<img src="../../images/faces/face4.jpg" alt="user">
<div>
<p class="text-info mb-1">George Morrison</p>
<p class="mb-0">Sales dashboard have been created</p>
<small>8:50 am</small>
</div>
</div>
</li>
<li>
<div class="d-flex">
<img src="../../images/faces/face5.jpg" alt="user">
<div>
<p class="text-info mb-1">Ryan Cortez</p>
<p class="mb-0">Herbs are fun and easy to grow.</p>
<small>9:00 am</small>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<p class="card-title">Advanced Table</p>
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table id="example" class="display expandable-table" style="width:100%">
<thead>
<tr>
<th>Quote#</th>
<th>Product</th>
<th>Business type</th>
<th>Policy holder</th>
<th>Premium</th>
<th>Status</th>
<th>Updated at</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:partials/_footer.html -->
<footer class="footer">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2021 <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrapdash</a>. All rights reserved.</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i class="ti-heart text-danger ml-1"></i></span>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="../../vendors/chart.js/Chart.min.js"></script>
<script src="../../vendors/datatables.net/jquery.dataTables.js"></script>
<script src="../../vendors/datatables.net-bs4/dataTables.bootstrap4.js"></script>
<script src="../../js/dataTables.select.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../js/off-canvas.js"></script>
<script src="../../js/hoverable-collapse.js"></script>
<script src="../../js/template.js"></script>
<script src="../../js/settings.js"></script>
<script src="../../js/todolist.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="../../js/dashboard.js"></script>
<script src="../../js/Chart.roundedBarCharts.js"></script>
<!-- End custom js for this page-->
</body>
</html>
</textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 grid-margin" id="doc-components">
<div class="card">
<div class="card-body">
<!-- New Docs Starts Here -->
<h3 class="my-4">Components</h3>
<hr class="hr" id="doc-basic-ui">
<h4 class="my-4">Basic UI Elements</h4>
<div class="demo-tabs">
<!-- Tabs Starts -->
<div data-pws-tab="Button" data-pws-tab-name="Button">
<h5 class="mb-2 mt-4">Button with the single color</h5>
<div class="fluid-container py-4">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<textarea class="multiple-codes">
<div class="row">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
</textarea>
<h5 class="mb-2 mt-4">Outlined</h5>
<div class="fluid-container py-4">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
</div>
<textarea class="multiple-codes">
<div class="row">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
</div>
</textarea>
<h5 class="mb-2 mt-4">Sizes</h5>
<div class="fluid-container py-4">
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
</div>
<textarea class="multiple-codes">
<div class="row">
<button type="button" class="btn btn-primary btn-lg">Small</button>
<button type="button" class="btn btn-secondary">Medium</button>
<button type="button" class="btn btn-success btn-sm">Large</button>
</div>
</textarea>
</div>
<!-- Tabs Ends -->
<!-- Tabs Starts -->
<div data-pws-tab="Dropdown" data-pws-tab-name="Dropdown">
<h5 class="mb-2 mt-4">Bootstrap Dropdown</h5>
<div class="fluid-container py-4">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<textarea class="multiple-codes">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</textarea>
<h5 class="mb-2 mt-4">Dropdown Outlined</h5>
<div class="fluid-container py-4">
<div class="btn-group">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<textarea class="multiple-codes">
<div class="btn-group">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</textarea>
</div>
<!-- Tabs Ends -->
</div>
<!-- demo-tabs container ends -->
<!-- New Docs Ends Here -->
<!-- New Docs Starts Here -->
<!-- New Docs Ends Here -->
<!-- New Docs Starts Here -->
<hr class="hr" id="doc-advanced-ui">
<h4 class="my-4">Advanced UI Elements</h4>
<div class="demo-tabs">
<!-- Tabs Starts -->
<div data-pws-tab="Clipboard" data-pws-tab-name="Clipboard">
<p>
<a href="https://clipboardjs.com/">Clipboard</a>, a modern approach to copy text to the clipboard.
</p>
<h4 class="mt-5 mb-4">Usage</h4>
<p>
Add the following script files in &lt;body&gt;.
</p>
<textarea class="multiple-codes">
<script src="path-to/node_modules/clipboard/dist/clipboard.min.js"></script>
</textarea>
<p>
To create a clipboard, add the following code:
</p>
<textarea class="multiple-codes">
<textarea id="clipboardExample2" class="form-control">Hello&lt;/textarea&gt;
<button type="button" class="btn btn-primary btn-clipboard" data-clipboard-action="copy" data-clipboard-target="#clipboardExample2">Copy</button>
<button type="button" class="btn btn-danger btn-clipboard" data-clipboard-action="cut" data-clipboard-target="#clipboardExample2">Cut</button>
<script>
var clipboard = new Clipboard('.btn-clipboard');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</textarea>
</div>
<!-- Tabs Ends -->
<!-- Tabs Starts -->
<div data-pws-tab="TodoList" data-pws-tab-name="Todo List">
<p>
<a href="http://www.jqueryscript.net/demo/Minimal-To-do-List-Task-Manager-App-Using-jQuery-Local-Storage/">Todolist</a> is a minimal jQuery plugin to create checklist.
</p>
<h4 class="mt-5 mb-4">Usage</h4>
<p>
Add the following script files in &lt;body&gt;.
</p>
<textarea class="multiple-codes">
<script src="path-to/js/todolist.js"></script>
</textarea>
<p>
To create a filterable list, add the following code:
</p>
<textarea class="multiple-codes">
<div class="add-items d-flex">
<input type="text" class="form-control todo-list-input" placeholder="What do you need to do today?">
<button class="add btn btn-primary font-weight-bold todo-list-add-btn" id="add-task">Add</button>
</div>
<div class="list-wrapper">
<ul class="d-flex flex-column-reverse todo-list">
<li>
<div class="form-check">
<label class="form-check-label">
<input class="checkbox" type="checkbox">
Meeting with Alisa
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>
</textarea>
</div>
<!-- Tabs Ends -->
<!-- Tabs Starts -->
<div data-pws-tab="Dragula" data-pws-tab-name="Dragula">
<p>
<a href="https://bevacqua.github.io/dragula/">Dragula</a> ,Drag and drop so simple it hurts.
</p>
<h4 class="mt-5 mb-4">Usage</h4>
<p>
To use Dragula in your application, include the following files in &lt;head&gt;.
</p>
<textarea class="multiple-codes">
<link rel="stylesheet" href="path-to/node_modules/dragula/dist/dragula.min.css" />
</textarea>
<p>
Add the following script files in &lt;body&gt;.
</p>
<textarea class="multiple-codes">
<script src="path-to/node_modules/dragula/dist/dragula.min.js"></script>
</textarea>
<p>
To create a drag n drop list, add the following code:
</p>
<textarea class="multiple-codes">
<div id="dragula-event-left" class="h-100">
<div>
Drag me!
</div>
</div>
<div id="dragula-event-right" class="h-100">
<div>
Drag me!
</div>
</div>
<script>
(function($) {
dragula([document.getElementById("dragula-left"), document.getElementById("dragula-right")]);
dragula([document.getElementById("dragula-event-left"), document.getElementById("dragula-event-right")])
.on('drop', function(el) {
el.className += ' bg-danger';
})
})(jQuery);
</script>
</textarea>
</div>
<!-- Tabs Ends -->
<!-- Tabs Starts -->
<div data-pws-tab="context-menu" data-pws-tab-name="ContextMenu">
<p>
The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. <a target="_blank" href="https://swisnl.github.io/jQuery-contextMenu/">Click Here</a> to see the official documentation.
</p>
</div>
<!-- Tabs Ends -->
<!-- Ui-slider Starts -->
<div data-pws-tab="UISlider" data-pws-tab-name="UI Slider">
<p>
<a href="https://refreshless.com/nouislider/">noUiSlider</a> is a range slider without bloat.
</p>
<h4 class="mt-5 mb-4">Usage</h4>
<p>
To use NoUISlider in your application, include the following files in &lt;head&gt;.
</p>
<textarea class="multiple-codes">
<link rel="stylesheet" href="path-to/node_modules/nouislider/distribute/nouislider.min.css" /></textarea>
<p>
Add the following script files in &lt;body&gt;.
</p>
<textarea class="multiple-codes">
<script src="path-to/node_modules/nouislider/distribute/nouislider.min.js"></script></textarea>
<p>
To create a slider, add the following code:
</p>
<textarea class="multiple-codes">
<div id="ui-slider" class="slider"></div>
<script>
var startSlider = document.getElementById('ui-slider');
noUiSlider.create(startSlider, {
start: [20, 80],
range: {
'min': [0],
'max': [100]
}
});
</script></textarea>
</div>
<!-- Ui slider Ends -->
<!-- Tabs Starts -->
<div data-pws-tab="Range-slider" data-pws-tab-name="Range Slider">
<p>
Easy, flexible and responsive range slider with skin support. <a target="_blank" href="http://ionden.com/a/plugins/ion.rangeSlider/en.html">Click Here</a> to see the official documentation.
</p>
</div>
<!-- Tabs Ends -->
<!-- Tabs Starts -->
<div data-pws-tab="Colgade" data-pws-tab-name="Colcade Grid">
<p>
<a href="https://github.com/desandro/colcade">Colcade</a> is a simple lightweight masonry layout.
</p>
<h4 class="mt-5 mb-4">Usage</h4>
<p>
Add the following script files in &lt;body&gt;.
</p>
<textarea class="multiple-codes">
<script src="path-to/node_modules/colcade/colcade.js"></script>
</textarea>
<p>
To create a responsive, add the following code:
</p>
<textarea class="multiple-codes">
<div class="grid">
<div class="grid-col grid-col--1"></div>
<div class="grid-col grid-col--2"></div>
<div class="grid-col grid-col--3"></div>
<div class="grid-col grid-col--4"></div>
<div class="grid-item grid-item--b"></div>
<div class="grid-item grid-item--a"></div>
<div class="grid-item grid-item--c"></div>
<div class="grid-item grid-item--a"></div>
<div class="grid-item grid-item--a"></div>
<div class="grid-item grid-item--b"></div>
<div class="grid-item grid-item--c"></div>
<div class="grid-item grid-item--c"></div>
</div>
<script>
var colcade = new Colcade('.grid', {
columns: '.grid-col',
items: '.grid-item'
});
</script>
</textarea>
</div>
<!-- Tabs Ends -->
</div>
<!-- demo-tabs container ends -->
<!-- New Docs Starts Here -->
<hr class="hr" id="doc-media">
<h4 class="my-4">Media</h4>
<div class="demo-tabs">
<!-- Tabs Starts -->
<div data-pws-tab="LightBox" data-pws-tab-name="Lightbox">
<p>
<a href="http://sachinchoolur.github.io/lightGallery/">Light Gallery</a> is a customizable, modular, responsive, Lightbox gallery plugin for jQuery.
</p>
<h4 class="mt-5 mb-4">Usage</h4>
<p>
To use LightGallery in your application, include the following files in &lt;head&gt;.
</p>
<textarea class="multiple-codes">
<link rel="stylesheet" href="path-to/node_modules/lightgallery/dist/css/lightgallery.min.css">
</textarea>
<p>
Add the following script files in &lt;body&gt;.
</p>
<textarea class="multiple-codes">
<script src="path-to/node_modules/lightgallery/dist/js/lightgallery-all.min.js"></script>
</textarea>
<p>
To create Lightbox Gallery, add the following code:
</p>
<textarea class="multiple-codes">
<div id="gallery" class="row lightGallery">
<a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="http://via.placeholder.com/690x580">
<img src="http://via.placeholder.com/280x280" />
</a>
<a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="http://via.placeholder.com/690x580">
<img src="http://via.placeholder.com/280x280" />
</a>
<a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="http://via.placeholder.com/690x580">
<img src="http://via.placeholder.com/280x280" />
</a>
<a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="http://via.placeholder.com/690x580">
<img src="http://via.placeholder.com/280x280" />
</a>
<a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="http://via.placeholder.com/690x580">
<img src="http://via.placeholder.com/280x280" />
</a>
</div>
<script>
$("#lightgallery").lightGallery();
</script>
</textarea>
</div>
<!-- Tabs Ends -->
<!-- Tabs Starts -->
<div data-pws-tab="owl-carousel" data-pws-tab-name="Owl Carousel">
<p>
<a href="https://owlcarousel2.github.io/OwlCarousel2/">Owl Carousel</a> is a touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
</p>
<h4 class="mt-5 mb-4">Usage</h4>
<p>
To use Owl Carousel in your application, include the following files in &lt;head&gt;.
</p>
<textarea class="multiple-codes">
<link rel="stylesheet" href="path-to/node_modules/owl-carousel-2/assets/owl.carousel.min.css" />
</textarea>
<p>
Add the following script files in &lt;body&gt;.
</p>
<textarea class="multiple-codes">
<script src="path-to/node_modules/owl-carousel-2/owl.carousel.min.js"></script>
</textarea>
<p>
To create a carousel, add the following code:
</p>
<textarea class="multiple-codes">
<div class="owl-carousel owl-theme nonloop">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script>
$('.owl-carousel').owlCarousel();
</script></textarea>
</div>
<!-- Tabs Ends -->
</div>
<!-- demo-tabs container ends -->
<!--Tables starts-->
<hr class="hr" id="doc-tables">
<h4 class="my-4">Tables</h4>
<div class="demo-tabs">
<!-- Basic table starts -->
<div data-pws-tab="basic-table" data-pws-tab-name="Basic table">
<p>
To create a basic Twitter Bootstrap table, add the following code.
</p>
<textarea class="multiple-codes">
<table class="table">
<thead>
<tr class="">
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</textarea>
</div>
<!-- Basic table Ends -->
</div>
<!--Tables ends-->
<!-- New Docs Starts Here -->
<!-- New Docs Ends Here -->
<hr class="hr" id="doc-charts">
<h4 class="my-4">Charts</h4>
<div class="demo-tabs">
<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Chart.js">
<p>
<a href="http://www.chartjs.org/">Chart.js</a> is a simple yet flexible JavaScript charting for designers & developers.
</p>
<h4 class="mt-5 mb-4">Usage</h4>
<p>
To use Chart.js in your application, include the following files in &lt;head&gt;.
</p>
<textarea class="multiple-codes">
<link rel="stylesheet" href="path-to/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css" /></textarea>
<p>
and the following script files in &lt;body&gt;.
</p>
<textarea class="multiple-codes">
<script src="path-to/node_modules/chart.js/dist/Chart.min.js"></script></textarea>
<p>
To create a simple chart, add the following code:
</p>
<textarea class="multiple-codes">
<canvas id="lineChart" height="250"></canvas>
<script>
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
legend: {
display: false
},
elements: {
point: {
radius: 0
}
}
};
if($("#lineChart").length) {
var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
var lineChart = new Chart(lineChartCanvas, {
type: 'line',
data: data,
options: options
});
}
</script></textarea>
</div>
</div>
<!--Forms starts-->
<hr class="hr" id="doc-forms">
<h4 class="my-4">Forms</h4>
<div class="demo-tabs">
<!-- Basic elements Starts -->
<div data-pws-tab="basic-elements" data-pws-tab-name="Basic elements">
<p>
The basic form elements can be added to your application as below:
</p>
<textarea class="multiple-codes">
<form class="forms-sample">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control p-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted text-success"><span class="fa fa-info mt-1"></span>&nbsp; We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control p-input" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control p-input" id="exampleTextarea" rows="3">&lt;/textarea&gt;
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
<small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</div>
<fieldset class="form-group">
<legend class="mb-4 mt-5">Radio buttons</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</fieldset>
<div class="form-check col-12">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form></textarea>
</div>
<!-- Basic elements Ends -->
</div>
<!--Forms ends-->
<!--Icons starts-->
<hr class="hr" id="doc-icons">
<h4 class="my-4">Icons</h4>
<div class="demo-tabs">
<!-- MDI icon Starts -->
<div data-pws-tab="mdi-icon" data-pws-tab-name="Material Icons">
<p>
<a href="https://materialdesignicons.com/">Material Design Icons</a> growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.
</p>
<h4 class="mt-5 mb-4">Usage</h4>
<p>
To use Material Design Icons in your application, include the following files in &lt;head&gt;.
</p>
<textarea class="multiple-codes">
<link rel="stylesheet" href="path-to/node_modules/mdi/css/materialdesignicons.min.css"/></textarea>
<p>
To generate an icon, add the following code:
</p>
<textarea class="multiple-codes">
<i class="ti-bell"></i>
</textarea>
</div>
<!-- MDI icon Ends -->
</div>
<!--icons ends-->
</div> <!-- Card Block Ends Here -->
</div>
</div>
<div class="col-12 grid-margin doc-credits" id="doc-credits">
<div class="card">
<div class="card-body">
<h3 class="my-4">Credits</h3>
<p>We have used the following plugins in Skydash admin</p>
<div class="row">
<div class="col-12 col-md-6">
<ul class="list-ticked">
<li>
Ace editor <a href="https://ace.c9.io/" target="_blank">https://ace.c9.io/</a>
</li>
<li>
Bootstrap <a href="https://getbootstrap.com/" target="_blank">https://getbootstrap.com/</a>
</li>
<li>
Bootstrap Datepicker <a href="https://gitter.im/uxsolutions/bootstrap-datepicker" target="_blank">https://gitter.im/uxsolutions/bootstrap-datepicker</a>
</li>
<li>
Bootstrap Maxlength <a href="http://mimo84.github.com/bootstrap-maxlength" target="_blank">http://mimo84.github.com/bootstrap-maxlength</a>
</li>
<li>
C3 <a href="https://travis-ci.org/c3js/c3" target="_blank">https://travis-ci.org/c3js/c3</a>
</li>
<li>
Chart.js <a href="https://www.chartjs.org/" target="_blank">https://www.chartjs.org/</a>
</li>
<li>
Chartist <a href="https://gionkunz.github.io/chartist-js/" target="_blank">https://gionkunz.github.io/chartist-js/</a>
</li>
<li>
Clipboard <a href="https://clipboardjs.com" target="_blank">https://clipboardjs.com</a>
</li>
<li>
Codemirror <a href="https://codemirror.net/" target="_blank">https://codemirror.net/</a>
</li>
<li>
Colcade <a href="https://github.com/desandro/colcade" target="_blank">https://github.com/desandro/colcade/</a>
</li>
<li>
D3 <a href="https://d3js.org" target="_blank">https://d3js.org</a>
</li>
<li>
Datatables.net <a href="https://datatables.net/" target="_blank">https://datatables.net/</a>
</li>
<li>
Dragula <a href="https://bevacqua.github.io/dragula/" target="_blank">https://bevacqua.github.io/dragula/</a>
</li>
<li>
Dropify <a href="http://jeremyfagis.github.io/dropify/" target="_blank">http://jeremyfagis.github.io/dropify/</a>
</li>
<li>
Dropzone <a href="http://www.dropzonejs.com/" target="_blank">http://www.dropzonejs.com/</a>
</li>
<li>
Flag icons <a href="http://lipis.github.io/flag-icon-css/" target="_blank">http://lipis.github.io/flag-icon-css/</a>
</li>
<li>
Flot <a href="https://www.flotcharts.org/" target="_blank">https://www.flotcharts.org/</a>
</li>
<li>
Font awesome <a href="https://fontawesome.com/" target="_blank">https://fontawesome.com/</a>
</li>
<li>
Full calendar <a href="https://fullcalendar.io/" target="_blank">https://fullcalendar.io/</a>
</li>
<li>
Gulp <a href="https://gulpjs.com/" target="_blank">https://gulpjs.com/</a>
</li>
<li>
Icheck <a href="http://icheck.fronteed.com/" target="_blank">http://icheck.fronteed.com/</a>
</li>
<li>
Inputmask <a href="http://robinherbots.github.io/Inputmask/" target="_blank">http://robinherbots.github.io/Inputmask/</a>
</li>
<li>
Ion range slider <a href="http://ionden.com/a/plugins/ion.rangeSlider/en.html" target="_blank">http://ionden.com/a/plugins/ion.rangeSlider/en.html</a>
</li>
<li>
JQuery <a href="https://jquery.com/" target="_blank">https://jquery.com/</a>
</li>
<li>
JQuery asColorPicker <a href="https://github.com/thecreation/jquery-asColorPicker" target="_blank">https://github.com/thecreation/jquery-asColorPicker</a>
</li>
<li>
JQuery bar rating <a href="http://antenna.io/demo/jquery-bar-rating/examples/" target="_blank">http://antenna.io/demo/jquery-bar-rating/examples/</a>
</li>
<li>
JQuery context menu <a href="http://swisnl.github.io/jQuery-contextMenu/" target="_blank">http://swisnl.github.io/jQuery-contextMenu/</a>
</li>
<li>
JQuery file upload <a href="http://hayageek.com/docs/jquery-upload-file.php" target="_blank">http://hayageek.com/docs/jquery-upload-file.php</a>
</li>
<li>
JQuery Mapael <a href="https://github.com/neveldo/mapael-maps" target="_blank">https://github.com/neveldo/mapael-maps</a>
</li>
<li>
JQuery sparklin <a href="http://omnipotent.net/jquery.sparkline/" target="_blank">http://omnipotent.net/jquery.sparkline/</a>
</li>
<li>
JQuery-steps <a href="http://www.jquery-steps.com/" target="_blank">http://www.jquery-steps.com/</a>
</li>
<li>
JQuery Tags Input <a href="http://xoxco.com/projects/code/tagsinput/" target="_blank">http://xoxco.com/projects/code/tagsinput/</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="list-ticked">
<li>
JQuery Toast <a href="https://kamranahmed.info/toast" target="_blank">https://kamranahmed.info/toast</a>
</li>
<li>
JQuery Validation <a href="https://jqueryvalidation.org/" target="_blank">https://jqueryvalidation.org/</a>
</li>
<li>
JQuery Avgrund <a href="https://github.com/voronianski/jquery.avgrund.js" target="_blank">https://github.com/voronianski/jquery.avgrund.js</a>
</li>
<li>
JQuery Repeater <a href="http://briandetering.net/repeater" target="_blank">http://briandetering.net/repeater</a>
</li>
<li>
JSgrid <a href="http://js-grid.com/" target="_blank">http://js-grid.com/</a>
</li>
<li>
JSgrid <a href="http://js-grid.com/" target="_blank">http://js-grid.com/</a>
</li>
<li>
Justgage <a href="http://justgage.com/" target="_blank">http://justgage.com/</a>
</li>
<li>
JVector Map <a href="http://jvectormap.com/" target="_blank">http://jvectormap.com/</a>
</li>
<li>
Light gallery <a href="http://sachinchoolur.github.io/lightGallery/" target="_blank">http://sachinchoolur.github.io/lightGallery/</a>
</li>
<li>
Material Design Icons <a href="https://materialdesignicons.com/" target="_blank">https://materialdesignicons.com/</a>
</li>
<li>
Moment.js <a href="https://momentjs.com/" target="_blank">https://momentjs.com/</a>
</li>
<li>
Morris.js <a href="https://momentjs.com/" target="_blank">https://momentjs.com/</a>
</li>
<li>
NoUISlider <a href="https://refreshless.com/nouislider/" target="_blank">https://refreshless.com/nouislider/</a>
</li>
<li>
Owl carousel <a href="https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html" target="_blank">https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html</a>
</li>
<li>
Perfect scrollbar <a href="http://utatti.github.io/perfect-scrollbar/" target="_blank">http://utatti.github.io/perfect-scrollbar/</a>
</li>
<li>
Popper.js <a href="https://popper.js.org/" target="_blank">https://popper.js.org/</a>
</li>
<li>
Progressbar.js <a href="https://progressbarjs.readthedocs.io/en/latest/" target="_blank">https://progressbarjs.readthedocs.io</a>
</li>
<li>
PWS Tabs <a href="https://alexchizhov.com/pwstabs/" target="_blank">https://alexchizhov.com/pwstabs/</a>
</li>
<li>
Quill Editor <a href="https://quilljs.com/" target="_blank">https://quilljs.com/</a>
</li>
<li>
Rapheal <a href="http://dmitrybaranovskiy.github.io/raphael/" target="_blank">http://dmitrybaranovskiy.github.io/raphael/</a>
</li>
<li>
Select 2 <a href="https://select2.org/" target="_blank">https://select2.org/</a>
</li>
<li>
Simple line icons <a href="http://simplelineicons.com/" target="_blank">http://simplelineicons.com/</a>
</li>
<li>
SimpleMDE <a href="https://simplemde.com/" target="_blank">https://simplemde.com/</a>
</li>
<li>
Summernote <a href="https://summernote.org/" target="_blank">https://summernote.org/</a>
</li>
<li>
Sweetalert <a href="http://sweetalert.js.org" target="_blank">http://sweetalert.js.org</a>
</li>
<li>
Tempusdominus-bootstrap-4 <a href="https://tempusdominus.github.io/bootstrap-4/" target="_blank">https://tempusdominus.github.io/bootstrap-4/</a>
</li>
<li>
Themify icons <a href="https://themify.me/themify-icons" target="_blank">https://themify.me/themify-icons</a>
</li>
<li>
TinyMCE <a href="https://www.tiny.cloud/" target="_blank">https://www.tiny.cloud/</a>
</li>
<li>
TWBS pagination <a href="https://esimakin.github.io/twbs-pagination/" target="_blank">https://esimakin.github.io/twbs-pagination/</a>
</li>
<li>
Typeahead <a href="https://twitter.github.io/typeahead.js/" target="_blank">https://twitter.github.io/typeahead.js/</a>
</li>
<li>
Xeditable <a href="https://vitalets.github.io/x-editable/" target="_blank">https://vitalets.github.io/x-editable/</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="w-100 clearfix">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © 2018 <a href="http://www.bootstrapdash.com/" target="_blank">Bootstrapdash</a>. All rights reserved.</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i class="ti-heart text-danger ml-1"></i></span>
</div>
</footer>
</div>
</div>
</div>
<!-- plugins:js -->
<script src="../template/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<script src="../template/vendors/codemirror/codemirror.js"></script>
<script src="../template/vendors/codemirror/javascript.js"></script>
<script src="../template/vendors/codemirror/shell.js"></script>
<script src="../template/vendors/pwstabs/jquery.pwstabs.min.js"></script>
<!-- End Plugin js for this page-->
<!-- inject:js -->
<script src="../template/js/template.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="../template/js/codeEditor.js"></script>
<script src="../template/js/tabs.js"></script>
<script src="../template/js/tooltips.js"></script>
<script src="documentation.js"></script>
<!-- End custom js for this page-->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink