This commit is contained in:
Aritra Banik 2024-03-10 13:42:52 +05:30
parent a4b093f351
commit efb92d259e
892 changed files with 100137 additions and 0 deletions

View File

@ -0,0 +1,4 @@
# CHANGELOG
## V 1.0.0
- Initial release

70
src/a3a/admin/README.md Normal file
View File

@ -0,0 +1,70 @@
<a href="http://www.bootstrapdash.com/demo/connect-plus-free/jquery/template/index.html" target="_blank"><img src="screenshot.jpg"></a>
<h1>Connect Plus Free Admin Template</h1>
Connect Plus Admin is a free responsive admin template built with Bootstrap 4. The template has colorful, attractive yet simple and elegant design. The template is well crafted, with all the components neatly and carefully designed and arranged within the template.
Connect Plus Admin is packed with all the features that fit your needs but not cramped with components you would not even use. It is an excellent fit to build admin panels, e-commerce systems, project management systems, CMS or CRM.
Although the template has a design like none other, it is easily customizable to suit your requirements. Connect Plus Admin comes with a clean and well-commented code that makes it easy to work with the template. Thus making it an ideal pick for jump starting your project.
<h1>Credits:</h1>
- Bootstrap 4
- Material Design Icons
- jQuery
- Gulp
- Chart.js
- jquery-circle-progress
<h1>Browser Support:</h1>
Connect Plus Admin is designed to work flawlessly with all the latest and modern web browsers.
- Chrome (latest)
- FireFox (latest)
- Safari (latest)
- Opera (latest)
- IE10+
<h1>License Information:</h1>
Connect Plus Admin is released under MIT license. Connect Plus Admin is a free Bootstrap 4 admin template developed by BootstrapDash. Feel free to download it, use it, share it, get creative with it.
<h1>How to use Connect Plus Admin?</h1>
1 - Click the Clone or Download button in GitHub and download as a ZIP file or you can enter the command git clone https://github.com/BootstrapDash/ConnectPlusAdmin-Free-Bootstrap-Admin-Template in you terminal to get a copy of this template.
2 - After the files have been downloaded you will get a folder with all the required files
3 - You can install all the dependencies in the template by running the command npm install. Once you run this command, all required files are in the node modules.
4 - Find the file named index.html, check what all components you need. Open the file in a text editor and you can start editing.
5 - Now that your project has kick-started, all you need to do is to code, code, and code to your heart's content.
<h1>How to Contribute?:</h1>
We love your contributions and we welcome them wholeheartedly. We believe the more the merrier.
To contribute make sure you have a Node.js and npm installed. Now run the command gulp --version. If the command returns with the Gulp version number, it means you have Gulp installed. If not you need to run the command npm install --global gulp-cli to install Gulp.
<h2>Next</h2>
After Gulp has been installed, follow the steps below to contribute.
<br>
1 - Fork and clone the repo of Connect Plus Admin.
<br>
2 - Run the command npm install to install all the dependencies.
<br>
3 - Enter the command gulp serve. This will open Connect Plus Admin in your default browser.
<br>
4 - Make your valuable contribution
<br>
5 - Submit a pull request.
<hr>
Do you need a template with more features and functionalities? Get more with our collection of the premium template with more plugins, eye catching animations, UI components, and sample pages all fitting together with a high-quality design.
Visit <a href="https://www.bootstrapdash.com" target="_blank">https://www.bootstrapdash.com</a> for more admin templates.

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,62 @@
(function($) {
'use strict';
if ($('.multiple-codes').length) {
var code_type = '';
var editorTextarea = $('.multiple-codes');
for (var i = 0; i < editorTextarea.length; i++) {
$(editorTextarea[i]).attr('id', 'code-' + i);
CodeMirror.fromTextArea(document.getElementById('code-' + i), {
mode: "javascript",
theme: "dracula",
lineNumbers: true,
readOnly: true,
maxHighlightLength: 0,
workDelay: 0
});
}
}
if ($('.shell-mode').length) {
var code_type = '';
var shellEditor = $('.shell-mode');
for (var i = 0; i < shellEditor.length; i++) {
$(shellEditor[i]).attr('id', 'code-' + i);
CodeMirror.fromTextArea(document.getElementById('code-' + i), {
mode: "shell",
theme: "dracula",
readOnly: true,
maxHighlightLength: 0,
workDelay: 0
});
}
}
if ($('.demo-tabs').length) {
$('.demo-tabs').pwstabs({
effect: 'none'
});
}
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
// window.scrollTo(window.scrollX, window.scrollY - 140);
$("html").animate({ scrollTop: $(location.hash).offset().top - 15 }, 300);
}
}
// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function() {
offsetAnchor();
}, 0);
});
// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);
})(jQuery);

View File

@ -0,0 +1,330 @@
body {
padding: 0;
margin: 0;
overflow-x: hidden;
font-size: .875rem;
font-family: 'Roboto', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
line-height: 1;
}
p {
font-size: .875rem;
margin-bottom: .5rem;
line-height: 1.3rem;
}
h1 {
font-size: 3.125rem;
}
h2 {
font-size: 2.5rem;
}
@media(max-width: 767px) {
h2 {
font-size: 1.9rem;
}
}
h3 {
font-size: 1.875rem;
}
h4 {
font-size: 1.45rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: .9375rem;
}
.card-body {
padding: 2rem;
}
@media (max-width: 991px) {
.card-body {
padding: 1.875rem 1.25rem;
}
}
.grid-margin {
margin-bottom: 20px;
}
.CodeMirror {
font-size: .875rem;
height: auto;
text-align: left;
min-height: auto;
font-family: 'Roboto', sans-serif;
line-height: 1.40em;
padding: 10px;
font-weight: 100;
letter-spacing: .9px;
margin-top: 1rem;
margin-bottom: 1rem;
}
.CodeMirror-scroll {
min-height: auto;
}
.documentation .left-sidebar {
width: 260px;
padding: 20px 30px;
background-color: #f7f7f7;
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
}
@media (max-width: 991px) {
.documentation .left-sidebar {
padding: 16px;
}
}
@media (min-width: 1200px) {
.documentation .left-sidebar {
width: 16.66666667%;
}
}
@media (min-width: 768px) {
.documentation .left-sidebar {
width: 25%;
}
}
.documentation .left-sidebar .logo-wrapper {
margin-top: 1rem;
margin-bottom: 1.6rem;
}
.documentation .left-sidebar .logo-wrapper img {
height: 24px;
}
.documentation .left-sidebar .left-menu-title {
margin-top: 1rem;
}
.documentation .left-sidebar .left-menu {
list-style-type: none;
padding-left: 0;
}
.documentation .left-sidebar .left-menu li {
line-height: 2.2;
position: relative;
}
.documentation .left-sidebar .left-menu li a {
text-decoration: none;
color: #454545;
cursor: pointer;
padding-left: 18px;
}
.documentation .left-sidebar .left-menu li a::before {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
border: 1.5px solid #d384f9;
position: absolute;
left: 0;
top: 11px;
}
.documentation .main-panel {
padding: 40px 50px;
margin-left: 0;
}
@media (max-width: 991px) {
.documentation .main-panel {
padding: 40px 20px;
}
}
@media (min-width: 1200px) {
.documentation .main-panel {
margin-left: 16.66666667%;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.documentation .main-panel {
margin-left: 25%;
}
}
.credits .credit-list {
list-style-type: none;
padding-left: 20px;
margin-bottom: 0;
}
.credits .credit-list li {
display: flex;
position: relative;
flex-wrap: wrap;
}
.credits .credit-list li a {
overflow: hidden;
text-overflow: ellipsis;
}
.credits .credit-list li p {
margin-right: 8px;
}
.credits .credit-list li p::before {
content: '';
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
border: 1.5px solid #d384f9;
position: absolute;
left: -17px;
top: 6px;
}
/* Pws-tabs */
.pws_tabs_container ul.pws_tabs_controll {
border-bottom: 1px solid #b66dff;
}
.pws_tabs_container ul.pws_tabs_controll li:first-child a {
border-radius: 5px 0px 0px 0px;
}
.pws_tabs_container ul.pws_tabs_controll li:last-child a {
border-right: 1px solid #b66dff;
border-radius: 0px 5px 0px 0px;
}
.pws_tabs_container ul.pws_tabs_controll li a {
border: 1px solid #b66dff;
border-bottom: none;
border-right: none;
background: #fff;
color: #b66dff;
padding: 0.6em 1.3em;
margin-right: 0;
}
.pws_tabs_container ul.pws_tabs_controll li a:hover {
background: #fff;
color: #b66dff;
}
.pws_tabs_container ul.pws_tabs_controll li a.pws_tab_active {
background: #a461d8;
color: #fff;
}
.pws_tabs_container .demo-tabs {
border: 1px solid #b66dff;
border-radius: 0px 5px 5px 5px;
overflow: hidden;
margin-bottom: 45px;
padding-top: 2rem;
}
.pws_tabs_container .demo-tabs .CodeMirror {
margin-bottom: 20px;
}
.pws_tabs_container.pws_tabs_vertical .pws_tabs_controll {
border-right: none;
border-bottom: none;
}
.pws_tabs_container.pws_tabs_vertical .pws_tabs_controll li:first-child a {
border-radius: 5px 0px 0px 0px;
}
.pws_tabs_container.pws_tabs_vertical .pws_tabs_controll li:last-child a {
border-bottom: 1px solid #b66dff;
border-radius: 0px 0px 0px 5px;
border-right: 0px;
}
.pws_tabs_container.pws_tabs_vertical .pws_tabs_controll li a {
border-radius: 0px;
border: 1px solid #b66dff;
border-right: none;
border-bottom: none;
margin-bottom: 0;
}
.pws_tabs_container.pws_tabs_horizontal_bottom .pws_tabs_list {
margin-bottom: 0;
}
.pws_tabs_container.pws_tabs_horizontal_bottom .pws_tabs_controll {
border-top: 1px solid #b66dff;
border-right: none;
border-bottom: none;
}
.pws_tabs_container.pws_tabs_horizontal_bottom .pws_tabs_controll li:first-child a {
border-radius: 0px 0px 0px 5px;
}
.pws_tabs_container.pws_tabs_horizontal_bottom .pws_tabs_controll li:last-child a {
border-radius: 0px 0px 5px 0px;
border-right: 1px solid #b66dff;
}
.pws_tabs_container.pws_tabs_horizontal_bottom .pws_tabs_controll li a {
border-radius: 0px;
border: 1px solid #b66dff;
border-top: none;
border-right: none;
margin-right: 0;
margin-bottom: 0;
}
.pws_tabs_container.pws_tabs_rtl .pws_tabs_controll li:first-child a {
border-radius: 0px 5px 0px 0px;
border-right: 1px solid #b66dff;
}
.pws_tabs_container.pws_tabs_rtl .pws_tabs_controll li:last-child a {
border-right: none;
border-radius: 5px 0px 0px 0px;
}
.pws_tabs_container.pws_tabs_rtl .pws_tabs_controll li a {
border: 1px solid #b66dff;
border-bottom: none;
border-right: none;
margin-right: 0;
margin-left: 0;
}
/* Pws-tabs end */

View File

@ -0,0 +1,84 @@
'use strict'
var gulp = require('gulp');
var injectPartials = require('gulp-inject-partials');
var inject = require('gulp-inject');
var rename = require('gulp-rename');
var prettify = require('gulp-prettify');
var replace = require('gulp-replace');
var merge = require('merge-stream');
/* inject partials like sidebar and navbar */
gulp.task('injectPartial', function () {
var injPartial1 = gulp.src("./pages/**/*.html", { base: "./" })
.pipe(injectPartials())
.pipe(gulp.dest("."));
var injPartial2 = gulp.src("./*.html", { base: "./" })
.pipe(injectPartials())
.pipe(gulp.dest("."));
return merge(injPartial1, injPartial2);
});
/* inject Js and CCS assets into HTML */
gulp.task('injectAssets', function () {
return gulp.src(["./**/*.html"])
.pipe(inject(gulp.src([
'./assets/vendors/mdi/css/materialdesignicons.min.css',
'./assets/vendors/flag-icon-css/css/flag-icon.min.css',
'./assets/vendors/css/vendor.bundle.base.css',
'./assets/vendors/js/vendor.bundle.base.js',
], {
read: false
}), {
name: 'plugins',
relative: true
}))
.pipe(inject(gulp.src([
// './assets/css/shared/style.css',
'./assets/js/off-canvas.js',
'./assets/js/hoverable-collapse.js',
'./assets/js/misc.js',
], {
read: false
}), {
relative: true
}))
.pipe(gulp.dest('.'));
});
/*replace image path and linking after injection*/
gulp.task('replacePath', function () {
var replacePath1 = gulp.src('pages/**/*.html', {
base: "./"
})
.pipe(replace('src="assets/images/', 'src="../../assets/images/'))
.pipe(replace('href="pages/', 'href="../../pages/'))
.pipe(replace('href="index.html"', 'href="../../index.html"'))
.pipe(gulp.dest('.'));
var replacePath2 = gulp.src('./**/index.html', {
base: "./"
})
.pipe(replace('src="assets/images/', 'src="assets/images/'))
.pipe(gulp.dest('.'));
return merge(replacePath1, replacePath2);
});
gulp.task('html-beautify', function () {
return gulp.src(['./**/*.html', '!node_modules/**/*.html'])
.pipe(prettify({
unformatted: ['pre', 'code', 'textarea']
}))
.pipe(gulp.dest(function (file) {
return file.base;
}));
});
/*sequence for injecting partials and replacing paths*/
gulp.task('inject', gulp.series('injectPartial', 'injectAssets', 'html-beautify', 'replacePath'));

View File

@ -0,0 +1,71 @@
'use strict'
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var gutil = require('gulp-util');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
// const del = require('del');
gulp.task('sass', function () {
return gulp.src('./assets/scss/*.scss')
.pipe(sourcemaps.init())
.pipe(plumber({
errorHandler: function (err) {
notify.onError({
title: "Gulp error in " + err.plugin,
message: err.toString()
})(err);
gutil.beep();
}
}))
.pipe(sass())
.pipe(autoprefixer({
overrideBrowserslist: ['last 2 versions'],
cascade: false
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./assets/css'))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function () {
browserSync.init({
port: 3000,
server: "./",
ghostMode: false,
notify: false
});
gulp.watch('./assets/scss/*.scss', gulp.series('sass'));
gulp.watch(['./assets/js/**/*.js', './**/*.html', './assets/css/*.css']).on('change', browserSync.reload);
}));
gulp.task('sass:watch', function () {
gulp.watch('./assets/scss/*.scss');
});
// Static Server without watching scss files
gulp.task('serve:lite', function () {
browserSync.init({
server: "./",
ghostMode: false,
notify: false
});
gulp.watch('*.css').on('change', browserSync.reload);
gulp.watch('**/*.html').on('change', browserSync.reload);
gulp.watch('**/*.js').on('change', browserSync.reload);
});

View File

@ -0,0 +1,95 @@
'use strict'
var gulp = require('gulp');
var concat = require('gulp-concat');
var merge = require('merge-stream');
const del = require('del');
gulp.task('clean:vendors', function () {
return del([
'./assets/vendors/**/*'
]);
});
/*Building vendor scripts needed for basic template rendering*/
gulp.task('buildBaseVendorScripts', function() {
return gulp.src([
'./node_modules/jquery/dist/jquery.min.js',
'./node_modules/popper.js/dist/umd/popper.min.js',
'./node_modules/bootstrap/dist/js/bootstrap.min.js',
'./node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js'
])
.pipe(concat('vendor.bundle.base.js'))
.pipe(gulp.dest('./assets/vendors/js'));
});
/*Building vendor styles needed for basic template rendering*/
gulp.task('buildBaseVendorStyles', function() {
return gulp.src(['./node_modules/perfect-scrollbar/css/perfect-scrollbar.css'])
.pipe(concat('vendor.bundle.base.css'))
.pipe(gulp.dest('./assets/vendors/css'));
});
/*Scripts for addons*/
gulp.task('buildOptionalVendorScripts', function() {
var aScript1 = gulp.src(['node_modules/chart.js/dist/Chart.min.js'])
.pipe(gulp.dest('./assets/vendors/chart.js'));
var aScript2 = gulp.src(['node_modules/progressbar.js/dist/progressbar.min.js'])
.pipe(gulp.dest('./assets/vendors/progressbar.js'));
var aScript3 = gulp.src(['node_modules/moment/moment.js'])
.pipe(gulp.dest('./assets/vendors/moment'));
var aScript4 = gulp.src(['node_modules/moment/min/moment.min.js'])
.pipe(gulp.dest('./assets/vendors/moment'));
var aScript7 = gulp.src(['node_modules/jquery-circle-progress/dist/circle-progress.min.js'])
.pipe(gulp.dest('./assets/vendors/jquery-circle-progress/js'));
var aScript8 = gulp.src(['node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js'])
.pipe(gulp.dest('./assets/vendors/bootstrap-datepicker'));
var aScript9 = gulp.src(['node_modules/pwstabs/assets/jquery.pwstabs.min.js'])
.pipe(gulp.dest('./assets/vendors/pwstabs'));
var aScript10 = gulp.src(['node_modules/codemirror/lib/codemirror.js'])
.pipe(gulp.dest('./assets/vendors/codemirror'));
var aScript11 = gulp.src(['node_modules/codemirror/mode/javascript/javascript.js'])
.pipe(gulp.dest('./assets/vendors/codemirror'));
var aScript12 = gulp.src(['node_modules/codemirror/mode/shell/shell.js'])
.pipe(gulp.dest('./assets/vendors/codemirror'));
return merge(aScript1, aScript2, aScript3, aScript4, aScript7, aScript9, aScript10, aScript11, aScript12);
});
/*Styles for addons*/
gulp.task('buildOptionalVendorStyles', function() {
var aStyle1 = gulp.src(['./node_modules/@mdi/font/css/materialdesignicons.min.css'])
.pipe(gulp.dest('./assets/vendors/mdi/css'));
var aStyle2 = gulp.src(['./node_modules/@mdi/font/fonts/*'])
.pipe(gulp.dest('./assets/vendors/mdi/fonts'));
var aStyle3 = gulp.src(['./node_modules/font-awesome/css/font-awesome.min.css'])
.pipe(gulp.dest('./assets/vendors/font-awesome/css'));
var aStyle4 = gulp.src(['./node_modules/font-awesome/fonts/*'])
.pipe(gulp.dest('./assets/vendors/font-awesome/fonts'));
var aStyle5 = gulp.src(['./node_modules/flag-icon-css/css/flag-icon.min.css'])
.pipe(gulp.dest('./assets/vendors/flag-icon-css/css'));
var aStyle6 = gulp.src(['./node_modules/flag-icon-css/flags/**/*'])
.pipe(gulp.dest('./assets/vendors/flag-icon-css/flags'));
var aStyle7 = gulp.src(['node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'])
.pipe(gulp.dest('./assets/vendors/bootstrap-datepicker'));
var aStyle8 = gulp.src(['node_modules/pwstabs/assets/jquery.pwstabs.min.css'])
.pipe(gulp.dest('./assets/vendors/pwstabs'));
var aStyle9 = gulp.src(['node_modules/codemirror/lib/codemirror.css'])
.pipe(gulp.dest('./assets/vendors/codemirror'));
var aStyle10 = gulp.src(['node_modules/codemirror/theme/ambiance.css'])
.pipe(gulp.dest('./assets/vendors/codemirror'));
return merge(aStyle1, aStyle2, aStyle3, aStyle4, aStyle5, aStyle6, aStyle7, aStyle8, aStyle9, aStyle10);
});
//Copy essential map files
gulp.task('copyMapFiles', function() {
var map1 = gulp.src('node_modules/bootstrap/dist/js/bootstrap.min.js.map')
.pipe(gulp.dest('./assets/vendors/js'));
var map2 = gulp.src('node_modules/@mdi/font/css/materialdesignicons.min.css.map')
.pipe(gulp.dest('./assets/vendors/mdi/css'));
return merge(map1, map2);
});
/*sequence for building vendor scripts and styles*/
gulp.task('bundleVendors', gulp.series('clean:vendors', 'buildBaseVendorStyles','buildBaseVendorScripts', 'buildOptionalVendorStyles', 'buildOptionalVendorScripts', 'copyMapFiles'));

13
src/a3a/admin/gulpfile.js Normal file
View File

@ -0,0 +1,13 @@
'use strict'
var gulp = require('gulp');
var requireDir = require('require-dir');
requireDir('gulp-tasks');
gulp.paths = {
dist: 'dist',
};
var paths = gulp.paths;
gulp.task('default', gulp.series('serve'));

592
src/a3a/admin/index.html Normal file
View File

@ -0,0 +1,592 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
<!-- End plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:partials/_navbar.html -->
<nav class="navbar default-layout-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" href="index.html"><img src="assets/images/logo.svg" alt="logo" /></a>
<a class="navbar-brand brand-logo-mini" href="index.html"><img src="assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-stretch">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
<div class="search-field d-none d-xl-block">
<form class="d-flex align-items-center h-100" action="#">
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<i class="input-group-text border-0 mdi mdi-magnify"></i>
</div>
<input type="text" class="form-control bg-transparent border-0" placeholder="Search products">
</div>
</form>
</div>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="reportDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Reports </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="reportDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-pdf mr-2"></i>PDF </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-excel mr-2"></i>Excel </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-word mr-2"></i>doc </a>
</div>
</li>
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="projectDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Projects </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="projectDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-eye-outline mr-2"></i>View Project </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-pencil-outline mr-2"></i>Edit Project </a>
</div>
</li>
<li class="nav-item nav-language dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="languageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-language-icon">
<i class="flag-icon flag-icon-us" title="us" id="us"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="languageDropdown">
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-ae" title="ae" id="ae"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">Arabic</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-gb" title="GB" id="gb"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
</div>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-profile-img">
<img src="assets/images/faces/face28.png" alt="image">
</div>
<div class="nav-profile-text">
<p class="mb-1 text-black">Henry Klein</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown dropdown-menu-right p-0 border-0 font-size-sm" aria-labelledby="profileDropdown" data-x-placement="bottom-end">
<div class="p-3 text-center bg-primary">
<img class="img-avatar img-avatar48 img-avatar-thumb" src="assets/images/faces/face28.png" alt="">
</div>
<div class="p-2">
<h5 class="dropdown-header text-uppercase pl-2 text-dark">User Options</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Inbox</span>
<span class="p-0">
<span class="badge badge-primary">3</span>
<i class="mdi mdi-email-open-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Profile</span>
<span class="p-0">
<span class="badge badge-success">1</span>
<i class="mdi mdi-account-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="javascript:void(0)">
<span>Settings</span>
<i class="mdi mdi-settings"></i>
</a>
<div role="separator" class="dropdown-divider"></div>
<h5 class="dropdown-header text-uppercase pl-2 text-dark mt-2">Actions</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Lock Account</span>
<i class="mdi mdi-lock ml-1"></i>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Log Out</span>
<i class="mdi mdi-logout ml-1"></i>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-email-outline"></i>
<span class="count-symbol bg-success"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="messageDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Messages</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="assets/images/faces/face4.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Mark send you a message</h6>
<p class="text-gray mb-0"> 1 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="assets/images/faces/face2.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Cregh send you a message</h6>
<p class="text-gray mb-0"> 15 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="assets/images/faces/face3.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Profile picture updated</h6>
<p class="text-gray mb-0"> 18 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">4 new messages</h6>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
<i class="mdi mdi-bell-outline"></i>
<span class="count-symbol bg-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Notifications</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-success">
<i class="mdi mdi-calendar"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Event today</h6>
<p class="text-gray ellipsis mb-0"> Just a reminder that you have an event today </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="mdi mdi-settings"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Settings</h6>
<p class="text-gray ellipsis mb-0"> Update dashboard </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-info">
<i class="mdi mdi-link-variant"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Launch Admin</h6>
<p class="text-gray ellipsis mb-0"> New admin wow! </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">See all notifications</h6>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="mdi mdi-menu"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:partials/_sidebar.html -->
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item nav-category">Main</li>
<li class="nav-item">
<a class="nav-link" href="index.html">
<span class="icon-bg"><i class="mdi mdi-cube menu-icon"></i></span>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<span class="icon-bg"><i class="mdi mdi-crosshairs-gps menu-icon"></i></span>
<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/buttons.html">Buttons</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/typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/icons/mdi.html">
<span class="icon-bg"><i class="mdi mdi-contacts menu-icon"></i></span>
<span class="menu-title">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/forms/basic_elements.html">
<span class="icon-bg"><i class="mdi mdi-format-list-bulleted menu-icon"></i></span>
<span class="menu-title">Forms</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/charts/chartjs.html">
<span class="icon-bg"><i class="mdi mdi-chart-bar menu-icon"></i></span>
<span class="menu-title">Charts</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/tables/basic-table.html">
<span class="icon-bg"><i class="mdi mdi-table-large menu-icon"></i></span>
<span class="menu-title">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<span class="icon-bg"><i class="mdi mdi-lock menu-icon"></i></span>
<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/blank-page.html"> Blank Page </a></li>
<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/register.html"> Register </a></li>
<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 documentation-link">
<a class="nav-link" href="http://www.bootstrapdash.com/demo/connect-plus-free/jquery/documentation/documentation.html" target="_blank">
<span class="icon-bg">
<i class="mdi mdi-file-document-box menu-icon"></i>
</span>
<span class="menu-title">Documentation</span>
</a>
</li>
<li class="nav-item sidebar-user-actions">
<div class="user-details">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="d-flex align-items-center">
<div class="sidebar-profile-img">
<img src="assets/images/faces/face28.png" alt="image">
</div>
<div class="sidebar-profile-text">
<p class="mb-1">Henry Klein</p>
</div>
</div>
</div>
<div class="badge badge-danger">3</div>
</div>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-settings menu-icon"></i>
<span class="menu-title">Settings</span>
</a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-speedometer menu-icon"></i>
<span class="menu-title">Take Tour</span></a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-logout menu-icon"></i>
<span class="menu-title">Log Out</span></a>
</div>
</li>
</ul>
</nav>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row" id="proBanner">
<div class="col-12">
<span class="d-flex align-items-center purchase-popup">
<p>Like what you see? Check out our premium version for more.</p>
<a href="https://github.com/BootstrapDash/ConnectPlusAdmin-Free-Bootstrap-Admin-Template" target="_blank" class="btn ml-auto download-button">Download Free Version</a>
<a href="http://www.bootstrapdash.com/demo/connect-plus/jquery/template/" target="_blank" class="btn purchase-button">Upgrade To Pro</a>
<i class="mdi mdi-close" id="bannerClose"></i>
</span>
</div>
</div>
<div class="d-xl-flex justify-content-between align-items-start">
<h2 class="text-dark font-weight-bold mb-2"> Overview dashboard </h2>
<div class="d-sm-flex justify-content-xl-between align-items-center mb-2">
<div class="btn-group bg-white p-3" role="group" aria-label="Basic example">
<button type="button" class="btn btn-link text-light py-0 border-right">7 Days</button>
<button type="button" class="btn btn-link text-dark py-0 border-right">1 Month</button>
<button type="button" class="btn btn-link text-light py-0">3 Month</button>
</div>
<div class="dropdown ml-0 ml-md-4 mt-2 mt-lg-0">
<button class="btn bg-white dropdown-toggle p-3 d-flex align-items-center" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-calendar mr-1"></i>24 Mar 2019 - 24 Mar 2019 </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton1">
<h6 class="dropdown-header">Settings</h6>
<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>
</div>
<div class="row">
<div class="col-md-12">
<div class="d-sm-flex justify-content-between align-items-center transaparent-tab-border {">
<ul class="nav nav-tabs tab-transparent" role="tablist">
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#" role="tab" aria-selected="true">Users</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="business-tab" data-toggle="tab" href="#business-1" role="tab" aria-selected="false">Business</a>
</li>
<li class="nav-item">
<a class="nav-link" id="performance-tab" data-toggle="tab" href="#" role="tab" aria-selected="false">Performance</a>
</li>
<li class="nav-item">
<a class="nav-link" id="conversion-tab" data-toggle="tab" href="#" role="tab" aria-selected="false">Conversion</a>
</li>
</ul>
<div class="d-md-block d-none">
<a href="#" class="text-light p-1"><i class="mdi mdi-view-dashboard"></i></a>
<a href="#" class="text-light p-1"><i class="mdi mdi-dots-vertical"></i></a>
</div>
</div>
<div class="tab-content tab-transparent-content">
<div class="tab-pane fade show active" id="business-1" role="tabpanel" aria-labelledby="business-tab">
<div class="row">
<div class="col-xl-3 col-lg-6 col-sm-6 grid-margin stretch-card">
<div class="card">
<div class="card-body text-center">
<h5 class="mb-2 text-dark font-weight-normal">Orders</h5>
<h2 class="mb-4 text-dark font-weight-bold">932.00</h2>
<div class="dashboard-progress dashboard-progress-1 d-flex align-items-center justify-content-center item-parent"><i class="mdi mdi-lightbulb icon-md absolute-center text-dark"></i></div>
<p class="mt-4 mb-0">Completed</p>
<h3 class="mb-0 font-weight-bold mt-2 text-dark">5443</h3>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-sm-6 grid-margin stretch-card">
<div class="card">
<div class="card-body text-center">
<h5 class="mb-2 text-dark font-weight-normal">Unique Visitors</h5>
<h2 class="mb-4 text-dark font-weight-bold">756,00</h2>
<div class="dashboard-progress dashboard-progress-2 d-flex align-items-center justify-content-center item-parent"><i class="mdi mdi-account-circle icon-md absolute-center text-dark"></i></div>
<p class="mt-4 mb-0">Increased since yesterday</p>
<h3 class="mb-0 font-weight-bold mt-2 text-dark">50%</h3>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-sm-6 grid-margin stretch-card">
<div class="card">
<div class="card-body text-center">
<h5 class="mb-2 text-dark font-weight-normal">Impressions</h5>
<h2 class="mb-4 text-dark font-weight-bold">100,38</h2>
<div class="dashboard-progress dashboard-progress-3 d-flex align-items-center justify-content-center item-parent"><i class="mdi mdi-eye icon-md absolute-center text-dark"></i></div>
<p class="mt-4 mb-0">Increased since yesterday</p>
<h3 class="mb-0 font-weight-bold mt-2 text-dark">35%</h3>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-sm-6 grid-margin stretch-card">
<div class="card">
<div class="card-body text-center">
<h5 class="mb-2 text-dark font-weight-normal">Followers</h5>
<h2 class="mb-4 text-dark font-weight-bold">4250k</h2>
<div class="dashboard-progress dashboard-progress-4 d-flex align-items-center justify-content-center item-parent"><i class="mdi mdi-cube icon-md absolute-center text-dark"></i></div>
<p class="mt-4 mb-0">Decreased since yesterday</p>
<h3 class="mb-0 font-weight-bold mt-2 text-dark">25%</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 grid-margin">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h4 class="card-title mb-0">Recent Activity</h4>
<div class="dropdown dropdown-arrow-none">
<button class="btn p-0 text-dark dropdown-toggle" type="button" id="dropdownMenuIconButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuIconButton1">
<h6 class="dropdown-header">Settings</h6>
<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>
</div>
<div class="col-lg-3 col-sm-4 grid-margin grid-margin-lg-0">
<div class="wrapper pb-5 border-bottom">
<div class="text-wrapper d-flex align-items-center justify-content-between mb-2">
<p class="mb-0 text-dark">Total Profit</p>
<span class="text-success"><i class="mdi mdi-arrow-up"></i>2.95%</span>
</div>
<h3 class="mb-0 text-dark font-weight-bold">$ 92556</h3>
<canvas id="total-profit"></canvas>
</div>
<div class="wrapper pt-5">
<div class="text-wrapper d-flex align-items-center justify-content-between mb-2">
<p class="mb-0 text-dark">Expenses</p>
<span class="text-success"><i class="mdi mdi-arrow-up"></i>52.95%</span>
</div>
<h3 class="mb-4 text-dark font-weight-bold">$ 59565</h3>
<canvas id="total-expences"></canvas>
</div>
</div>
<div class="col-lg-9 col-sm-8 grid-margin grid-margin-lg-0">
<div class="pl-0 pl-lg-4 ">
<div class="d-xl-flex justify-content-between align-items-center mb-2">
<div class="d-lg-flex align-items-center mb-lg-2 mb-xl-0">
<h3 class="text-dark font-weight-bold mr-2 mb-0">Devices sales</h3>
<h5 class="mb-0">( growth 62% )</h5>
</div>
<div class="d-lg-flex">
<p class="mr-2 mb-0">Timezone:</p>
<p class="text-dark font-weight-bold mb-0">GMT-0400 Eastern Delight Time</p>
</div>
</div>
<div class="graph-custom-legend clearfix" id="device-sales-legend"></div>
<canvas id="device-sales"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 grid-margin stretch-card">
<div class="card card-danger-gradient">
<div class="card-body mb-4">
<h4 class="card-title text-white">Account Retention</h4>
<canvas id="account-retension"></canvas>
</div>
<div class="card-body bg-white pt-4">
<div class="row pt-4">
<div class="col-sm-6">
<div class="text-center border-right border-md-0">
<h4>Conversion</h4>
<h1 class="text-dark font-weight-bold mb-md-3">$306</h1>
</div>
</div>
<div class="col-sm-6">
<div class="text-center">
<h4>Cancellation</h4>
<h1 class="text-dark font-weight-bold">$1,520</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="d-xl-flex justify-content-between mb-2">
<h4 class="card-title">Page views analytics</h4>
<div class="graph-custom-legend primary-dot" id="pageViewAnalyticLengend"></div>
</div>
<canvas id="page-view-analytic"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:partials/_footer.html -->
<footer class="footer">
<div class="footer-inner-wraper">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard templates</a> from Bootstrapdash.com</span>
</div>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="assets/vendors/chart.js/Chart.min.js"></script>
<script src="assets/vendors/jquery-circle-progress/js/circle-progress.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="assets/js/off-canvas.js"></script>
<script src="assets/js/hoverable-collapse.js"></script>
<script src="assets/js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="assets/js/dashboard.js"></script>
<!-- End custom js for this page -->
</body>
</html>

10953
src/a3a/admin/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,58 @@
{
"name": "Connect-plus-admin-free",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
"@mdi/font": "3.7.95",
"bootstrap": "^4.3.1",
"bootstrap-datepicker": "^1.9.0",
"chart.js": "^2.8.0",
"codemirror": "^5.48.0",
"flag-icon-css": "^3.3.0",
"font-awesome": "^4.7.0",
"i": "^0.3.6",
"jquery": "^3.4.1",
"jquery-circle-progress": "^1.2.2",
"moment": "^2.24.0",
"morris.js": "^0.5.0",
"nouislider": "^14.0.2",
"npm": "^6.10.2",
"owl-carousel-2": "0.0.3",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.15.0",
"progressbar.js": "^1.0.1",
"pwstabs": "^1.4.0"
},
"devDependencies": {
"browser-sync": "^2.26.7",
"compass-mixins": "^0.12.10",
"del": "^5.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1",
"gulp-htmlmin": "^5.0.1",
"gulp-inject": "5.0.2",
"gulp-inject-partials": "^1.0.5",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.1",
"gulp-prettify": "^0.5.0",
"gulp-rename": "^1.4.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-util": "^3.0.8",
"merge-stream": "^2.0.0",
"minimatch": "^3.0.4",
"require-dir": "^1.2.0",
"run-sequence": "^2.2.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "bootstrapdash",
"url": "http://www.bootstrapdash.com/",
"copyright": "",
"license": ""
}

View File

@ -0,0 +1,448 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End Plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar default-layout-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" href="../../index.html"><img src="../../assets/images/logo.svg" alt="logo" /></a>
<a class="navbar-brand brand-logo-mini" href="../../index.html"><img src="../../assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-stretch">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
<div class="search-field d-none d-xl-block">
<form class="d-flex align-items-center h-100" action="#">
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<i class="input-group-text border-0 mdi mdi-magnify"></i>
</div>
<input type="text" class="form-control bg-transparent border-0" placeholder="Search products">
</div>
</form>
</div>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="reportDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Reports </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="reportDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-pdf mr-2"></i>PDF </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-excel mr-2"></i>Excel </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-word mr-2"></i>doc </a>
</div>
</li>
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="projectDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Projects </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="projectDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-eye-outline mr-2"></i>View Project </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-pencil-outline mr-2"></i>Edit Project </a>
</div>
</li>
<li class="nav-item nav-language dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="languageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-language-icon">
<i class="flag-icon flag-icon-us" title="us" id="us"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="languageDropdown">
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-ae" title="ae" id="ae"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">Arabic</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-gb" title="GB" id="gb"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
</div>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="nav-profile-text">
<p class="mb-1 text-black">Henry Klein</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown dropdown-menu-right p-0 border-0 font-size-sm" aria-labelledby="profileDropdown" data-x-placement="bottom-end">
<div class="p-3 text-center bg-primary">
<img class="img-avatar img-avatar48 img-avatar-thumb" src="../../assets/images/faces/face28.png" alt="">
</div>
<div class="p-2">
<h5 class="dropdown-header text-uppercase pl-2 text-dark">User Options</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Inbox</span>
<span class="p-0">
<span class="badge badge-primary">3</span>
<i class="mdi mdi-email-open-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Profile</span>
<span class="p-0">
<span class="badge badge-success">1</span>
<i class="mdi mdi-account-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="javascript:void(0)">
<span>Settings</span>
<i class="mdi mdi-settings"></i>
</a>
<div role="separator" class="dropdown-divider"></div>
<h5 class="dropdown-header text-uppercase pl-2 text-dark mt-2">Actions</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Lock Account</span>
<i class="mdi mdi-lock ml-1"></i>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Log Out</span>
<i class="mdi mdi-logout ml-1"></i>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-email-outline"></i>
<span class="count-symbol bg-success"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="messageDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Messages</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face4.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Mark send you a message</h6>
<p class="text-gray mb-0"> 1 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face2.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Cregh send you a message</h6>
<p class="text-gray mb-0"> 15 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face3.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Profile picture updated</h6>
<p class="text-gray mb-0"> 18 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">4 new messages</h6>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
<i class="mdi mdi-bell-outline"></i>
<span class="count-symbol bg-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Notifications</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-success">
<i class="mdi mdi-calendar"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Event today</h6>
<p class="text-gray ellipsis mb-0"> Just a reminder that you have an event today </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="mdi mdi-settings"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Settings</h6>
<p class="text-gray ellipsis mb-0"> Update dashboard </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-info">
<i class="mdi mdi-link-variant"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Launch Admin</h6>
<p class="text-gray ellipsis mb-0"> New admin wow! </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">See all notifications</h6>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="mdi mdi-menu"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../../partials/_sidebar.html -->
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item nav-category">Main</li>
<li class="nav-item">
<a class="nav-link" href="../../index.html">
<span class="icon-bg"><i class="mdi mdi-cube menu-icon"></i></span>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<span class="icon-bg"><i class="mdi mdi-crosshairs-gps menu-icon"></i></span>
<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/buttons.html">Buttons</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/typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/icons/mdi.html">
<span class="icon-bg"><i class="mdi mdi-contacts menu-icon"></i></span>
<span class="menu-title">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/forms/basic_elements.html">
<span class="icon-bg"><i class="mdi mdi-format-list-bulleted menu-icon"></i></span>
<span class="menu-title">Forms</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/charts/chartjs.html">
<span class="icon-bg"><i class="mdi mdi-chart-bar menu-icon"></i></span>
<span class="menu-title">Charts</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/tables/basic-table.html">
<span class="icon-bg"><i class="mdi mdi-table-large menu-icon"></i></span>
<span class="menu-title">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<span class="icon-bg"><i class="mdi mdi-lock menu-icon"></i></span>
<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/blank-page.html"> Blank Page </a></li>
<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/register.html"> Register </a></li>
<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 documentation-link">
<a class="nav-link" href="http://www.bootstrapdash.com/demo/connect-plus-free/jquery/documentation/documentation.html" target="_blank">
<span class="icon-bg">
<i class="mdi mdi-file-document-box menu-icon"></i>
</span>
<span class="menu-title">Documentation</span>
</a>
</li>
<li class="nav-item sidebar-user-actions">
<div class="user-details">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="d-flex align-items-center">
<div class="sidebar-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="sidebar-profile-text">
<p class="mb-1">Henry Klein</p>
</div>
</div>
</div>
<div class="badge badge-danger">3</div>
</div>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-settings menu-icon"></i>
<span class="menu-title">Settings</span>
</a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-speedometer menu-icon"></i>
<span class="menu-title">Take Tour</span></a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-logout menu-icon"></i>
<span class="menu-title">Log Out</span></a>
</div>
</li>
</ul>
</nav>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="page-header">
<h3 class="page-title"> Chart-js </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Charts</a></li>
<li class="breadcrumb-item active" aria-current="page">Chart-js</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Line chart</h4>
<canvas id="lineChart" style="height:250px"></canvas>
</div>
</div>
</div>
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Bar chart</h4>
<canvas id="barChart" style="height:230px"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Area chart</h4>
<canvas id="areaChart" style="height:250px"></canvas>
</div>
</div>
</div>
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Doughnut chart</h4>
<canvas id="doughnutChart" style="height:250px"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Pie chart</h4>
<canvas id="pieChart" style="height:250px"></canvas>
</div>
</div>
</div>
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Scatter chart</h4>
<canvas id="scatterChart" style="height:250px"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:../../partials/_footer.html -->
<footer class="footer">
<div class="footer-inner-wraper">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard templates</a> from Bootstrapdash.com</span>
</div>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="../../assets/vendors/chart.js/Chart.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/hoverable-collapse.js"></script>
<script src="../../assets/js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="../../assets/js/chart.js"></script>
<!-- End custom js for this page -->
</body>
</html>

View File

@ -0,0 +1,528 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<link rel="stylesheet" href="../../assets/vendors/select2/select2.min.css">
<link rel="stylesheet" href="../../assets/vendors/select2-bootstrap-theme/select2-bootstrap.min.css">
<!-- End plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar default-layout-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" href="../../index.html"><img src="../../assets/images/logo.svg" alt="logo" /></a>
<a class="navbar-brand brand-logo-mini" href="../../index.html"><img src="../../assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-stretch">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
<div class="search-field d-none d-xl-block">
<form class="d-flex align-items-center h-100" action="#">
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<i class="input-group-text border-0 mdi mdi-magnify"></i>
</div>
<input type="text" class="form-control bg-transparent border-0" placeholder="Search products">
</div>
</form>
</div>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="reportDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Reports </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="reportDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-pdf mr-2"></i>PDF </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-excel mr-2"></i>Excel </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-word mr-2"></i>doc </a>
</div>
</li>
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="projectDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Projects </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="projectDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-eye-outline mr-2"></i>View Project </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-pencil-outline mr-2"></i>Edit Project </a>
</div>
</li>
<li class="nav-item nav-language dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="languageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-language-icon">
<i class="flag-icon flag-icon-us" title="us" id="us"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="languageDropdown">
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-ae" title="ae" id="ae"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">Arabic</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-gb" title="GB" id="gb"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
</div>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="nav-profile-text">
<p class="mb-1 text-black">Henry Klein</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown dropdown-menu-right p-0 border-0 font-size-sm" aria-labelledby="profileDropdown" data-x-placement="bottom-end">
<div class="p-3 text-center bg-primary">
<img class="img-avatar img-avatar48 img-avatar-thumb" src="../../assets/images/faces/face28.png" alt="">
</div>
<div class="p-2">
<h5 class="dropdown-header text-uppercase pl-2 text-dark">User Options</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Inbox</span>
<span class="p-0">
<span class="badge badge-primary">3</span>
<i class="mdi mdi-email-open-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Profile</span>
<span class="p-0">
<span class="badge badge-success">1</span>
<i class="mdi mdi-account-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="javascript:void(0)">
<span>Settings</span>
<i class="mdi mdi-settings"></i>
</a>
<div role="separator" class="dropdown-divider"></div>
<h5 class="dropdown-header text-uppercase pl-2 text-dark mt-2">Actions</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Lock Account</span>
<i class="mdi mdi-lock ml-1"></i>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Log Out</span>
<i class="mdi mdi-logout ml-1"></i>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-email-outline"></i>
<span class="count-symbol bg-success"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="messageDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Messages</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face4.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Mark send you a message</h6>
<p class="text-gray mb-0"> 1 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face2.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Cregh send you a message</h6>
<p class="text-gray mb-0"> 15 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face3.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Profile picture updated</h6>
<p class="text-gray mb-0"> 18 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">4 new messages</h6>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
<i class="mdi mdi-bell-outline"></i>
<span class="count-symbol bg-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Notifications</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-success">
<i class="mdi mdi-calendar"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Event today</h6>
<p class="text-gray ellipsis mb-0"> Just a reminder that you have an event today </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="mdi mdi-settings"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Settings</h6>
<p class="text-gray ellipsis mb-0"> Update dashboard </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-info">
<i class="mdi mdi-link-variant"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Launch Admin</h6>
<p class="text-gray ellipsis mb-0"> New admin wow! </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">See all notifications</h6>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="mdi mdi-menu"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../../partials/_sidebar.html -->
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item nav-category">Main</li>
<li class="nav-item">
<a class="nav-link" href="../../index.html">
<span class="icon-bg"><i class="mdi mdi-cube menu-icon"></i></span>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<span class="icon-bg"><i class="mdi mdi-crosshairs-gps menu-icon"></i></span>
<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/buttons.html">Buttons</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/typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/icons/mdi.html">
<span class="icon-bg"><i class="mdi mdi-contacts menu-icon"></i></span>
<span class="menu-title">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/forms/basic_elements.html">
<span class="icon-bg"><i class="mdi mdi-format-list-bulleted menu-icon"></i></span>
<span class="menu-title">Forms</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/charts/chartjs.html">
<span class="icon-bg"><i class="mdi mdi-chart-bar menu-icon"></i></span>
<span class="menu-title">Charts</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/tables/basic-table.html">
<span class="icon-bg"><i class="mdi mdi-table-large menu-icon"></i></span>
<span class="menu-title">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<span class="icon-bg"><i class="mdi mdi-lock menu-icon"></i></span>
<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/blank-page.html"> Blank Page </a></li>
<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/register.html"> Register </a></li>
<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 documentation-link">
<a class="nav-link" href="http://www.bootstrapdash.com/demo/connect-plus-free/jquery/documentation/documentation.html" target="_blank">
<span class="icon-bg">
<i class="mdi mdi-file-document-box menu-icon"></i>
</span>
<span class="menu-title">Documentation</span>
</a>
</li>
<li class="nav-item sidebar-user-actions">
<div class="user-details">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="d-flex align-items-center">
<div class="sidebar-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="sidebar-profile-text">
<p class="mb-1">Henry Klein</p>
</div>
</div>
</div>
<div class="badge badge-danger">3</div>
</div>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-settings menu-icon"></i>
<span class="menu-title">Settings</span>
</a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-speedometer menu-icon"></i>
<span class="menu-title">Take Tour</span></a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-logout menu-icon"></i>
<span class="menu-title">Log Out</span></a>
</div>
</li>
</ul>
</nav>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="page-header">
<h3 class="page-title"> Form elements </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Forms</a></li>
<li class="breadcrumb-item active" aria-current="page">Form elements</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Default form</h4>
<p class="card-description"> Basic form layout </p>
<form class="forms-sample">
<div class="form-group">
<label for="exampleInputUsername1">Username</label>
<input type="text" class="form-control" id="exampleInputUsername1" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputConfirmPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputConfirmPassword1" placeholder="Password">
</div>
<div class="form-check form-check-flat form-check-primary">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"> Remember me </label>
</div>
<button type="submit" class="btn btn-primary mr-2">Submit</button>
<button class="btn btn-light">Cancel</button>
</form>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Horizontal Form</h4>
<p class="card-description"> Horizontal form layout </p>
<form class="forms-sample">
<div class="form-group row">
<label for="exampleInputUsername2" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="exampleInputUsername2" placeholder="Username">
</div>
</div>
<div class="form-group row">
<label for="exampleInputEmail2" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="exampleInputMobile" class="col-sm-3 col-form-label">Mobile</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="exampleInputMobile" placeholder="Mobile number">
</div>
</div>
<div class="form-group row">
<label for="exampleInputPassword2" class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
</div>
<div class="form-group row">
<label for="exampleInputConfirmPassword2" class="col-sm-3 col-form-label">Re Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="exampleInputConfirmPassword2" placeholder="Password">
</div>
</div>
<div class="form-check form-check-flat form-check-primary">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"> Remember me </label>
</div>
<button type="submit" class="btn btn-primary mr-2">Submit</button>
<button class="btn btn-light">Cancel</button>
</form>
</div>
</div>
</div>
<div class="col-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Basic form elements</h4>
<p class="card-description"> Basic form elements </p>
<form class="forms-sample">
<div class="form-group">
<label for="exampleInputName1">Name</label>
<input type="text" class="form-control" id="exampleInputName1" placeholder="Name">
</div>
<div class="form-group">
<label for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword4">Password</label>
<input type="password" class="form-control" id="exampleInputPassword4" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleSelectGender">Gender</label>
<select class="form-control" id="exampleSelectGender">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="form-group">
<label>File upload</label>
<input type="file" name="img[]" class="file-upload-default">
<div class="input-group col-xs-12">
<input type="text" class="form-control file-upload-info" disabled placeholder="Upload Image">
<span class="input-group-append">
<button class="file-upload-browse btn btn-primary" type="button">Upload</button>
</span>
</div>
</div>
<div class="form-group">
<label for="exampleInputCity1">City</label>
<input type="text" class="form-control" id="exampleInputCity1" placeholder="Location">
</div>
<div class="form-group">
<label for="exampleTextarea1">Textarea</label>
<textarea class="form-control" id="exampleTextarea1" rows="4"></textarea>
</div>
<button type="submit" class="btn btn-primary mr-2">Submit</button>
<button class="btn btn-light">Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:../../partials/_footer.html -->
<footer class="footer">
<div class="footer-inner-wraper">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard templates</a> from Bootstrapdash.com</span>
</div>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="../../assets/vendors/select2/select2.min.js"></script>
<script src="../../assets/vendors/typeahead.js/typeahead.bundle.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/hoverable-collapse.js"></script>
<script src="../../assets/js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="../../assets/js/file-upload.js"></script>
<script src="../../assets/js/typeahead.js"></script>
<script src="../../assets/js/select2.js"></script>
<!-- End custom js for this page -->
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,383 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar default-layout-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" href="../../index.html"><img src="../../assets/images/logo.svg" alt="logo" /></a>
<a class="navbar-brand brand-logo-mini" href="../../index.html"><img src="../../assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-stretch">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
<div class="search-field d-none d-xl-block">
<form class="d-flex align-items-center h-100" action="#">
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<i class="input-group-text border-0 mdi mdi-magnify"></i>
</div>
<input type="text" class="form-control bg-transparent border-0" placeholder="Search products">
</div>
</form>
</div>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="reportDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Reports </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="reportDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-pdf mr-2"></i>PDF </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-excel mr-2"></i>Excel </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-word mr-2"></i>doc </a>
</div>
</li>
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="projectDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Projects </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="projectDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-eye-outline mr-2"></i>View Project </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-pencil-outline mr-2"></i>Edit Project </a>
</div>
</li>
<li class="nav-item nav-language dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="languageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-language-icon">
<i class="flag-icon flag-icon-us" title="us" id="us"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="languageDropdown">
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-ae" title="ae" id="ae"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">Arabic</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-gb" title="GB" id="gb"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
</div>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="nav-profile-text">
<p class="mb-1 text-black">Henry Klein</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown dropdown-menu-right p-0 border-0 font-size-sm" aria-labelledby="profileDropdown" data-x-placement="bottom-end">
<div class="p-3 text-center bg-primary">
<img class="img-avatar img-avatar48 img-avatar-thumb" src="../../assets/images/faces/face28.png" alt="">
</div>
<div class="p-2">
<h5 class="dropdown-header text-uppercase pl-2 text-dark">User Options</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Inbox</span>
<span class="p-0">
<span class="badge badge-primary">3</span>
<i class="mdi mdi-email-open-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Profile</span>
<span class="p-0">
<span class="badge badge-success">1</span>
<i class="mdi mdi-account-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="javascript:void(0)">
<span>Settings</span>
<i class="mdi mdi-settings"></i>
</a>
<div role="separator" class="dropdown-divider"></div>
<h5 class="dropdown-header text-uppercase pl-2 text-dark mt-2">Actions</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Lock Account</span>
<i class="mdi mdi-lock ml-1"></i>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Log Out</span>
<i class="mdi mdi-logout ml-1"></i>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-email-outline"></i>
<span class="count-symbol bg-success"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="messageDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Messages</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face4.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Mark send you a message</h6>
<p class="text-gray mb-0"> 1 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face2.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Cregh send you a message</h6>
<p class="text-gray mb-0"> 15 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face3.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Profile picture updated</h6>
<p class="text-gray mb-0"> 18 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">4 new messages</h6>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
<i class="mdi mdi-bell-outline"></i>
<span class="count-symbol bg-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Notifications</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-success">
<i class="mdi mdi-calendar"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Event today</h6>
<p class="text-gray ellipsis mb-0"> Just a reminder that you have an event today </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="mdi mdi-settings"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Settings</h6>
<p class="text-gray ellipsis mb-0"> Update dashboard </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-info">
<i class="mdi mdi-link-variant"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Launch Admin</h6>
<p class="text-gray ellipsis mb-0"> New admin wow! </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">See all notifications</h6>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="mdi mdi-menu"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../../partials/_sidebar.html -->
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item nav-category">Main</li>
<li class="nav-item">
<a class="nav-link" href="../../index.html">
<span class="icon-bg"><i class="mdi mdi-cube menu-icon"></i></span>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<span class="icon-bg"><i class="mdi mdi-crosshairs-gps menu-icon"></i></span>
<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/buttons.html">Buttons</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/typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/icons/mdi.html">
<span class="icon-bg"><i class="mdi mdi-contacts menu-icon"></i></span>
<span class="menu-title">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/forms/basic_elements.html">
<span class="icon-bg"><i class="mdi mdi-format-list-bulleted menu-icon"></i></span>
<span class="menu-title">Forms</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/charts/chartjs.html">
<span class="icon-bg"><i class="mdi mdi-chart-bar menu-icon"></i></span>
<span class="menu-title">Charts</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/tables/basic-table.html">
<span class="icon-bg"><i class="mdi mdi-table-large menu-icon"></i></span>
<span class="menu-title">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<span class="icon-bg"><i class="mdi mdi-lock menu-icon"></i></span>
<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/blank-page.html"> Blank Page </a></li>
<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/register.html"> Register </a></li>
<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 documentation-link">
<a class="nav-link" href="http://www.bootstrapdash.com/demo/connect-plus-free/jquery/documentation/documentation.html" target="_blank">
<span class="icon-bg">
<i class="mdi mdi-file-document-box menu-icon"></i>
</span>
<span class="menu-title">Documentation</span>
</a>
</li>
<li class="nav-item sidebar-user-actions">
<div class="user-details">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="d-flex align-items-center">
<div class="sidebar-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="sidebar-profile-text">
<p class="mb-1">Henry Klein</p>
</div>
</div>
</div>
<div class="badge badge-danger">3</div>
</div>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-settings menu-icon"></i>
<span class="menu-title">Settings</span>
</a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-speedometer menu-icon"></i>
<span class="menu-title">Take Tour</span></a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-logout menu-icon"></i>
<span class="menu-title">Log Out</span></a>
</div>
</li>
</ul>
</nav>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
</div>
<!-- content-wrapper ends -->
<!-- partial:../../partials/_footer.html -->
<footer class="footer">
<div class="footer-inner-wraper">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard templates</a> from Bootstrapdash.com</span>
</div>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/hoverable-collapse.js"></script>
<script src="../../assets/js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<!-- End custom js for this page -->
</body>
</html>

View File

@ -0,0 +1,66 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End Plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper full-page-wrapper">
<div class="content-wrapper d-flex align-items-center text-center error-page bg-primary">
<div class="row flex-grow">
<div class="col-lg-7 mx-auto text-white">
<div class="row align-items-center d-flex flex-row">
<div class="col-lg-6 text-lg-right pr-lg-4">
<h1 class="display-1 mb-0">404</h1>
</div>
<div class="col-lg-6 error-page-divider text-lg-left pl-lg-4">
<h2>SORRY!</h2>
<h3 class="font-weight-light">The page youre looking for was not found.</h3>
</div>
</div>
<div class="row mt-5">
<div class="col-12 text-center mt-xl-2">
<a class="text-white font-weight-medium" href="../../index.html">Back to home</a>
</div>
</div>
<div class="row mt-5">
<div class="col-12 mt-xl-2">
<p class="text-white font-weight-medium text-center">Copyright &copy; 2020 All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/hoverable-collapse.js"></script>
<script src="../../assets/js/misc.js"></script>
<!-- endinject -->
</body>
</html>

View File

@ -0,0 +1,66 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End Plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper full-page-wrapper">
<div class="content-wrapper d-flex align-items-center text-center error-page bg-info">
<div class="row flex-grow">
<div class="col-lg-7 mx-auto text-white">
<div class="row align-items-center d-flex flex-row">
<div class="col-lg-6 text-lg-right pr-lg-4">
<h1 class="display-1 mb-0">500</h1>
</div>
<div class="col-lg-6 error-page-divider text-lg-left pl-lg-4">
<h2>SORRY!</h2>
<h3 class="font-weight-light">Internal server error!</h3>
</div>
</div>
<div class="row mt-5">
<div class="col-12 text-center mt-xl-2">
<a class="text-white font-weight-medium" href="../../index.html">Back to home</a>
</div>
</div>
<div class="row mt-5">
<div class="col-12 mt-xl-2">
<p class="text-white font-weight-medium text-center">Copyright &copy; 2020 All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/hoverable-collapse.js"></script>
<script src="../../assets/js/misc.js"></script>
<!-- endinject -->
</body>
</html>

View File

@ -0,0 +1,78 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper full-page-wrapper">
<div class="content-wrapper d-flex align-items-center auth">
<div class="row flex-grow">
<div class="col-lg-4 mx-auto">
<div class="auth-form-light text-left p-5">
<div class="brand-logo">
<img src="../../assets/images/logo-dark.svg">
</div>
<h4>Hello! let's get started</h4>
<h6 class="font-weight-light">Sign in to continue.</h6>
<form class="pt-3">
<div class="form-group">
<input type="email" class="form-control form-control-lg" id="exampleInputEmail1" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-lg" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="mt-3">
<a class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" href="../../index.html">SIGN IN</a>
</div>
<div class="my-2 d-flex justify-content-between align-items-center">
<div class="form-check">
<label class="form-check-label text-muted">
<input type="checkbox" class="form-check-input"> Keep me signed in </label>
</div>
<a href="#" class="auth-link text-black">Forgot password?</a>
</div>
<div class="mb-2">
<button type="button" class="btn btn-block btn-facebook auth-form-btn">
<i class="mdi mdi-facebook mr-2"></i>Connect using facebook </button>
</div>
<div class="text-center mt-4 font-weight-light"> Don't have an account? <a href="register.html" class="text-primary">Create</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/hoverable-collapse.js"></script>
<script src="../../assets/js/misc.js"></script>
<!-- endinject -->
</body>
</html>

View File

@ -0,0 +1,86 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper full-page-wrapper">
<div class="content-wrapper d-flex align-items-center auth">
<div class="row flex-grow">
<div class="col-lg-4 mx-auto">
<div class="auth-form-light text-left p-5">
<div class="brand-logo">
<img src="../../assets/images/logo-dark.svg">
</div>
<h4>New here?</h4>
<h6 class="font-weight-light">Signing up is easy. It only takes a few steps</h6>
<form class="pt-3">
<div class="form-group">
<input type="text" class="form-control form-control-lg" id="exampleInputUsername1" placeholder="Username">
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<select class="form-control form-control-lg" id="exampleFormControlSelect2">
<option>Country</option>
<option>United States of America</option>
<option>United Kingdom</option>
<option>India</option>
<option>Germany</option>
<option>Argentina</option>
</select>
</div>
<div class="form-group">
<input type="password" class="form-control form-control-lg" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="mb-4">
<div class="form-check">
<label class="form-check-label text-muted">
<input type="checkbox" class="form-check-input"> I agree to all Terms & Conditions </label>
</div>
</div>
<div class="mt-3">
<a class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" href="../../index.html">SIGN UP</a>
</div>
<div class="text-center mt-4 font-weight-light"> Already have an account? <a href="login.html" class="text-primary">Login</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/hoverable-collapse.js"></script>
<script src="../../assets/js/misc.js"></script>
<!-- endinject -->
</body>
</html>

View File

@ -0,0 +1,828 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar default-layout-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" href="../../index.html"><img src="../../assets/images/logo.svg" alt="logo" /></a>
<a class="navbar-brand brand-logo-mini" href="../../index.html"><img src="../../assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-stretch">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
<div class="search-field d-none d-xl-block">
<form class="d-flex align-items-center h-100" action="#">
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<i class="input-group-text border-0 mdi mdi-magnify"></i>
</div>
<input type="text" class="form-control bg-transparent border-0" placeholder="Search products">
</div>
</form>
</div>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="reportDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Reports </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="reportDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-pdf mr-2"></i>PDF </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-excel mr-2"></i>Excel </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-word mr-2"></i>doc </a>
</div>
</li>
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="projectDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Projects </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="projectDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-eye-outline mr-2"></i>View Project </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-pencil-outline mr-2"></i>Edit Project </a>
</div>
</li>
<li class="nav-item nav-language dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="languageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-language-icon">
<i class="flag-icon flag-icon-us" title="us" id="us"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="languageDropdown">
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-ae" title="ae" id="ae"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">Arabic</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-gb" title="GB" id="gb"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
</div>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="nav-profile-text">
<p class="mb-1 text-black">Henry Klein</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown dropdown-menu-right p-0 border-0 font-size-sm" aria-labelledby="profileDropdown" data-x-placement="bottom-end">
<div class="p-3 text-center bg-primary">
<img class="img-avatar img-avatar48 img-avatar-thumb" src="../../assets/images/faces/face28.png" alt="">
</div>
<div class="p-2">
<h5 class="dropdown-header text-uppercase pl-2 text-dark">User Options</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Inbox</span>
<span class="p-0">
<span class="badge badge-primary">3</span>
<i class="mdi mdi-email-open-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Profile</span>
<span class="p-0">
<span class="badge badge-success">1</span>
<i class="mdi mdi-account-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="javascript:void(0)">
<span>Settings</span>
<i class="mdi mdi-settings"></i>
</a>
<div role="separator" class="dropdown-divider"></div>
<h5 class="dropdown-header text-uppercase pl-2 text-dark mt-2">Actions</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Lock Account</span>
<i class="mdi mdi-lock ml-1"></i>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Log Out</span>
<i class="mdi mdi-logout ml-1"></i>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-email-outline"></i>
<span class="count-symbol bg-success"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="messageDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Messages</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face4.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Mark send you a message</h6>
<p class="text-gray mb-0"> 1 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face2.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Cregh send you a message</h6>
<p class="text-gray mb-0"> 15 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face3.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Profile picture updated</h6>
<p class="text-gray mb-0"> 18 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">4 new messages</h6>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
<i class="mdi mdi-bell-outline"></i>
<span class="count-symbol bg-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Notifications</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-success">
<i class="mdi mdi-calendar"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Event today</h6>
<p class="text-gray ellipsis mb-0"> Just a reminder that you have an event today </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="mdi mdi-settings"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Settings</h6>
<p class="text-gray ellipsis mb-0"> Update dashboard </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-info">
<i class="mdi mdi-link-variant"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Launch Admin</h6>
<p class="text-gray ellipsis mb-0"> New admin wow! </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">See all notifications</h6>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="mdi mdi-menu"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../../partials/_sidebar.html -->
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item nav-category">Main</li>
<li class="nav-item">
<a class="nav-link" href="../../index.html">
<span class="icon-bg"><i class="mdi mdi-cube menu-icon"></i></span>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<span class="icon-bg"><i class="mdi mdi-crosshairs-gps menu-icon"></i></span>
<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/buttons.html">Buttons</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/typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/icons/mdi.html">
<span class="icon-bg"><i class="mdi mdi-contacts menu-icon"></i></span>
<span class="menu-title">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/forms/basic_elements.html">
<span class="icon-bg"><i class="mdi mdi-format-list-bulleted menu-icon"></i></span>
<span class="menu-title">Forms</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/charts/chartjs.html">
<span class="icon-bg"><i class="mdi mdi-chart-bar menu-icon"></i></span>
<span class="menu-title">Charts</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/tables/basic-table.html">
<span class="icon-bg"><i class="mdi mdi-table-large menu-icon"></i></span>
<span class="menu-title">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<span class="icon-bg"><i class="mdi mdi-lock menu-icon"></i></span>
<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/blank-page.html"> Blank Page </a></li>
<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/register.html"> Register </a></li>
<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 documentation-link">
<a class="nav-link" href="http://www.bootstrapdash.com/demo/connect-plus-free/jquery/documentation/documentation.html" target="_blank">
<span class="icon-bg">
<i class="mdi mdi-file-document-box menu-icon"></i>
</span>
<span class="menu-title">Documentation</span>
</a>
</li>
<li class="nav-item sidebar-user-actions">
<div class="user-details">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="d-flex align-items-center">
<div class="sidebar-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="sidebar-profile-text">
<p class="mb-1">Henry Klein</p>
</div>
</div>
</div>
<div class="badge badge-danger">3</div>
</div>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-settings menu-icon"></i>
<span class="menu-title">Settings</span>
</a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-speedometer menu-icon"></i>
<span class="menu-title">Take Tour</span></a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-logout menu-icon"></i>
<span class="menu-title">Log Out</span></a>
</div>
</li>
</ul>
</nav>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="page-header">
<h3 class="page-title"> Basic Tables </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Tables</a></li>
<li class="breadcrumb-item active" aria-current="page">Basic tables</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Basic Table</h4>
<p class="card-description"> Add class <code>.table</code>
</p>
<table class="table">
<thead>
<tr>
<th>Profile</th>
<th>VatNo.</th>
<th>Created</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jacob</td>
<td>53275531</td>
<td>12 May 2017</td>
<td><label class="badge badge-danger">Pending</label></td>
</tr>
<tr>
<td>Messsy</td>
<td>53275532</td>
<td>15 May 2017</td>
<td><label class="badge badge-warning">In progress</label></td>
</tr>
<tr>
<td>John</td>
<td>53275533</td>
<td>14 May 2017</td>
<td><label class="badge badge-info">Fixed</label></td>
</tr>
<tr>
<td>Peter</td>
<td>53275534</td>
<td>16 May 2017</td>
<td><label class="badge badge-success">Completed</label></td>
</tr>
<tr>
<td>Dave</td>
<td>53275535</td>
<td>20 May 2017</td>
<td><label class="badge badge-warning">In progress</label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Hoverable Table</h4>
<p class="card-description"> Add class <code>.table-hover</code>
</p>
<table class="table table-hover">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Sale</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jacob</td>
<td>Photoshop</td>
<td class="text-danger"> 28.76% <i class="mdi mdi-arrow-down"></i></td>
<td><label class="badge badge-danger">Pending</label></td>
</tr>
<tr>
<td>Messsy</td>
<td>Flash</td>
<td class="text-danger"> 21.06% <i class="mdi mdi-arrow-down"></i></td>
<td><label class="badge badge-warning">In progress</label></td>
</tr>
<tr>
<td>John</td>
<td>Premier</td>
<td class="text-danger"> 35.00% <i class="mdi mdi-arrow-down"></i></td>
<td><label class="badge badge-info">Fixed</label></td>
</tr>
<tr>
<td>Peter</td>
<td>After effects</td>
<td class="text-success"> 82.00% <i class="mdi mdi-arrow-up"></i></td>
<td><label class="badge badge-success">Completed</label></td>
</tr>
<tr>
<td>Dave</td>
<td>53275535</td>
<td class="text-success"> 98.05% <i class="mdi mdi-arrow-up"></i></td>
<td><label class="badge badge-warning">In progress</label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Striped Table</h4>
<p class="card-description"> Add class <code>.table-striped</code>
</p>
<table class="table table-striped">
<thead>
<tr>
<th> User </th>
<th> First name </th>
<th> Progress </th>
<th> Amount </th>
<th> Deadline </th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-1">
<img src="../../assets/images/faces-clipart/pic-1.png" alt="image" />
</td>
<td> Herman Beck </td>
<td>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td class="py-1">
<img src="../../assets/images/faces-clipart/pic-2.png" alt="image" />
</td>
<td> Messsy Adam </td>
<td>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $245.30 </td>
<td> July 1, 2015 </td>
</tr>
<tr>
<td class="py-1">
<img src="../../assets/images/faces-clipart/pic-3.png" alt="image" />
</td>
<td> John Richards </td>
<td>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $138.00 </td>
<td> Apr 12, 2015 </td>
</tr>
<tr>
<td class="py-1">
<img src="../../assets/images/faces-clipart/pic-4.png" alt="image" />
</td>
<td> Peter Meggik </td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td class="py-1">
<img src="../../assets/images/faces-clipart/pic-1.png" alt="image" />
</td>
<td> Edward </td>
<td>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $ 160.25 </td>
<td> May 03, 2015 </td>
</tr>
<tr>
<td class="py-1">
<img src="../../assets/images/faces-clipart/pic-2.png" alt="image" />
</td>
<td> John Doe </td>
<td>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $ 123.21 </td>
<td> April 05, 2015 </td>
</tr>
<tr>
<td class="py-1">
<img src="../../assets/images/faces-clipart/pic-3.png" alt="image" />
</td>
<td> Henry Tom </td>
<td>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $ 150.00 </td>
<td> June 16, 2015 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Bordered table</h4>
<p class="card-description"> Add class <code>.table-bordered</code>
</p>
<table class="table table-bordered">
<thead>
<tr>
<th> # </th>
<th> First name </th>
<th> Progress </th>
<th> Amount </th>
<th> Deadline </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Herman Beck </td>
<td>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td> 2 </td>
<td> Messsy Adam </td>
<td>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $245.30 </td>
<td> July 1, 2015 </td>
</tr>
<tr>
<td> 3 </td>
<td> John Richards </td>
<td>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $138.00 </td>
<td> Apr 12, 2015 </td>
</tr>
<tr>
<td> 4 </td>
<td> Peter Meggik </td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td> 5 </td>
<td> Edward </td>
<td>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $ 160.25 </td>
<td> May 03, 2015 </td>
</tr>
<tr>
<td> 6 </td>
<td> John Doe </td>
<td>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $ 123.21 </td>
<td> April 05, 2015 </td>
</tr>
<tr>
<td> 7 </td>
<td> Henry Tom </td>
<td>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td> $ 150.00 </td>
<td> June 16, 2015 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Inverse table</h4>
<p class="card-description"> Add class <code>.table-dark</code>
</p>
<table class="table table-dark">
<thead>
<tr>
<th> # </th>
<th> First name </th>
<th> Amount </th>
<th> Deadline </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Herman Beck </td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td> 2 </td>
<td> Messsy Adam </td>
<td> $245.30 </td>
<td> July 1, 2015 </td>
</tr>
<tr>
<td> 3 </td>
<td> John Richards </td>
<td> $138.00 </td>
<td> Apr 12, 2015 </td>
</tr>
<tr>
<td> 4 </td>
<td> Peter Meggik </td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr>
<td> 5 </td>
<td> Edward </td>
<td> $ 160.25 </td>
<td> May 03, 2015 </td>
</tr>
<tr>
<td> 6 </td>
<td> John Doe </td>
<td> $ 123.21 </td>
<td> April 05, 2015 </td>
</tr>
<tr>
<td> 7 </td>
<td> Henry Tom </td>
<td> $ 150.00 </td>
<td> June 16, 2015 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-12 stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Table with contextual classes</h4>
<p class="card-description"> Add class <code>.table-{color}</code>
</p>
<table class="table table-bordered">
<thead>
<tr>
<th> # </th>
<th> First name </th>
<th> Product </th>
<th> Amount </th>
<th> Deadline </th>
</tr>
</thead>
<tbody>
<tr class="table-info">
<td> 1 </td>
<td> Herman Beck </td>
<td> Photoshop </td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr class="table-warning">
<td> 2 </td>
<td> Messsy Adam </td>
<td> Flash </td>
<td> $245.30 </td>
<td> July 1, 2015 </td>
</tr>
<tr class="table-danger">
<td> 3 </td>
<td> John Richards </td>
<td> Premeire </td>
<td> $138.00 </td>
<td> Apr 12, 2015 </td>
</tr>
<tr class="table-success">
<td> 4 </td>
<td> Peter Meggik </td>
<td> After effects </td>
<td> $ 77.99 </td>
<td> May 15, 2015 </td>
</tr>
<tr class="table-primary">
<td> 5 </td>
<td> Edward </td>
<td> Illustrator </td>
<td> $ 160.25 </td>
<td> May 03, 2015 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:../../partials/_footer.html -->
<footer class="footer">
<div class="footer-inner-wraper">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard templates</a> from Bootstrapdash.com</span>
</div>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/hoverable-collapse.js"></script>
<script src="../../assets/js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<!-- End custom js for this page -->
</body>
</html>

View File

@ -0,0 +1,765 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End Plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar default-layout-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" href="../../index.html"><img src="../../assets/images/logo.svg" alt="logo" /></a>
<a class="navbar-brand brand-logo-mini" href="../../index.html"><img src="../../assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-stretch">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
<div class="search-field d-none d-xl-block">
<form class="d-flex align-items-center h-100" action="#">
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<i class="input-group-text border-0 mdi mdi-magnify"></i>
</div>
<input type="text" class="form-control bg-transparent border-0" placeholder="Search products">
</div>
</form>
</div>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="reportDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Reports </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="reportDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-pdf mr-2"></i>PDF </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-excel mr-2"></i>Excel </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-word mr-2"></i>doc </a>
</div>
</li>
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="projectDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Projects </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="projectDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-eye-outline mr-2"></i>View Project </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-pencil-outline mr-2"></i>Edit Project </a>
</div>
</li>
<li class="nav-item nav-language dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="languageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-language-icon">
<i class="flag-icon flag-icon-us" title="us" id="us"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="languageDropdown">
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-ae" title="ae" id="ae"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">Arabic</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-gb" title="GB" id="gb"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
</div>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="nav-profile-text">
<p class="mb-1 text-black">Henry Klein</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown dropdown-menu-right p-0 border-0 font-size-sm" aria-labelledby="profileDropdown" data-x-placement="bottom-end">
<div class="p-3 text-center bg-primary">
<img class="img-avatar img-avatar48 img-avatar-thumb" src="../../assets/images/faces/face28.png" alt="">
</div>
<div class="p-2">
<h5 class="dropdown-header text-uppercase pl-2 text-dark">User Options</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Inbox</span>
<span class="p-0">
<span class="badge badge-primary">3</span>
<i class="mdi mdi-email-open-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Profile</span>
<span class="p-0">
<span class="badge badge-success">1</span>
<i class="mdi mdi-account-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="javascript:void(0)">
<span>Settings</span>
<i class="mdi mdi-settings"></i>
</a>
<div role="separator" class="dropdown-divider"></div>
<h5 class="dropdown-header text-uppercase pl-2 text-dark mt-2">Actions</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Lock Account</span>
<i class="mdi mdi-lock ml-1"></i>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Log Out</span>
<i class="mdi mdi-logout ml-1"></i>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-email-outline"></i>
<span class="count-symbol bg-success"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="messageDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Messages</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face4.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Mark send you a message</h6>
<p class="text-gray mb-0"> 1 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face2.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Cregh send you a message</h6>
<p class="text-gray mb-0"> 15 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face3.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Profile picture updated</h6>
<p class="text-gray mb-0"> 18 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">4 new messages</h6>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
<i class="mdi mdi-bell-outline"></i>
<span class="count-symbol bg-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Notifications</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-success">
<i class="mdi mdi-calendar"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Event today</h6>
<p class="text-gray ellipsis mb-0"> Just a reminder that you have an event today </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="mdi mdi-settings"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Settings</h6>
<p class="text-gray ellipsis mb-0"> Update dashboard </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-info">
<i class="mdi mdi-link-variant"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Launch Admin</h6>
<p class="text-gray ellipsis mb-0"> New admin wow! </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">See all notifications</h6>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="mdi mdi-menu"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../../partials/_sidebar.html -->
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item nav-category">Main</li>
<li class="nav-item">
<a class="nav-link" href="../../index.html">
<span class="icon-bg"><i class="mdi mdi-cube menu-icon"></i></span>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<span class="icon-bg"><i class="mdi mdi-crosshairs-gps menu-icon"></i></span>
<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/buttons.html">Buttons</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/typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/icons/mdi.html">
<span class="icon-bg"><i class="mdi mdi-contacts menu-icon"></i></span>
<span class="menu-title">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/forms/basic_elements.html">
<span class="icon-bg"><i class="mdi mdi-format-list-bulleted menu-icon"></i></span>
<span class="menu-title">Forms</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/charts/chartjs.html">
<span class="icon-bg"><i class="mdi mdi-chart-bar menu-icon"></i></span>
<span class="menu-title">Charts</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/tables/basic-table.html">
<span class="icon-bg"><i class="mdi mdi-table-large menu-icon"></i></span>
<span class="menu-title">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<span class="icon-bg"><i class="mdi mdi-lock menu-icon"></i></span>
<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/blank-page.html"> Blank Page </a></li>
<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/register.html"> Register </a></li>
<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 documentation-link">
<a class="nav-link" href="http://www.bootstrapdash.com/demo/connect-plus-free/jquery/documentation/documentation.html" target="_blank">
<span class="icon-bg">
<i class="mdi mdi-file-document-box menu-icon"></i>
</span>
<span class="menu-title">Documentation</span>
</a>
</li>
<li class="nav-item sidebar-user-actions">
<div class="user-details">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="d-flex align-items-center">
<div class="sidebar-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="sidebar-profile-text">
<p class="mb-1">Henry Klein</p>
</div>
</div>
</div>
<div class="badge badge-danger">3</div>
</div>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-settings menu-icon"></i>
<span class="menu-title">Settings</span>
</a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-speedometer menu-icon"></i>
<span class="menu-title">Take Tour</span></a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-logout menu-icon"></i>
<span class="menu-title">Log Out</span></a>
</div>
</li>
</ul>
</nav>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="page-header">
<h3 class="page-title"> Buttons </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">UI Elements</a></li>
<li class="breadcrumb-item active" aria-current="page">Buttons</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Rounded buttons</h4>
<p class="card-description">Add class <code>.btn-rounded</code></p>
<div class="template-demo">
<button type="button" class="btn btn-primary btn-rounded btn-fw">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded btn-fw">Secondary</button>
<button type="button" class="btn btn-success btn-rounded btn-fw">Success</button>
<button type="button" class="btn btn-danger btn-rounded btn-fw">Danger</button>
<button type="button" class="btn btn-warning btn-rounded btn-fw">Warning</button>
<button type="button" class="btn btn-info btn-rounded btn-fw">Info</button>
<button type="button" class="btn btn-light btn-rounded btn-fw">Light</button>
<button type="button" class="btn btn-dark btn-rounded btn-fw">Dark</button>
<button type="button" class="btn btn-link btn-rounded btn-fw">Link</button>
</div>
</div>
<div class="card-body">
<h4 class="card-title">Outlined buttons</h4>
<p class="card-description">Add class <code>.btn-outline-{color}</code> for outline buttons</p>
<div class="template-demo">
<button type="button" class="btn btn-outline-primary btn-fw">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-fw">Secondary</button>
<button type="button" class="btn btn-outline-success btn-fw">Success</button>
<button type="button" class="btn btn-outline-danger btn-fw">Danger</button>
<button type="button" class="btn btn-outline-warning btn-fw">Warning</button>
<button type="button" class="btn btn-outline-info btn-fw">Info</button>
<button type="button" class="btn btn-outline-light btn-fw">Light</button>
<button type="button" class="btn btn-outline-dark btn-fw">Dark</button>
<button type="button" class="btn btn-link btn-fw">Link</button>
</div>
</div>
<div class="card-body">
<h4 class="card-title">Single color buttons</h4>
<p class="card-description">Add class <code>.btn-{color}</code> for buttons in theme colors</p>
<div class="template-demo">
<button type="button" class="btn btn-primary btn-fw">Primary</button>
<button type="button" class="btn btn-secondary btn-fw">Secondary</button>
<button type="button" class="btn btn-success btn-fw">Success</button>
<button type="button" class="btn btn-danger btn-fw">Danger</button>
<button type="button" class="btn btn-warning btn-fw">Warning</button>
<button type="button" class="btn btn-info btn-fw">Info</button>
<button type="button" class="btn btn-light btn-fw">Light</button>
<button type="button" class="btn btn-dark btn-fw">Dark</button>
<button type="button" class="btn btn-link btn-fw">Link</button>
</div>
</div>
<div class="card-body">
<h4 class="card-title">Inverse buttons</h4>
<p class="card-description">Add class <code>.btn-inverse-{color} for inverse buttons</code></p>
<div class="template-demo">
<button type="button" class="btn btn-inverse-primary btn-fw">Primary</button>
<button type="button" class="btn btn-inverse-secondary btn-fw">Secondary</button>
<button type="button" class="btn btn-inverse-success btn-fw">Success</button>
<button type="button" class="btn btn-inverse-danger btn-fw">Danger</button>
<button type="button" class="btn btn-inverse-warning btn-fw">Warning</button>
<button type="button" class="btn btn-inverse-info btn-fw">Info</button>
<button type="button" class="btn btn-inverse-light btn-fw">Light</button>
<button type="button" class="btn btn-inverse-dark btn-fw">Dark</button>
<button type="button" class="btn btn-link btn-fw">Link</button>
</div>
</div>
<div class="card-body">
<h4 class="card-title">Normal buttons</h4>
<p class="card-description">Use any of the available button classes to quickly create a styled button.</p>
<div class="template-demo">
<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</div>
</div>
</div>
<div class="col-md-8 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-7">
<h4 class="card-title">Icon Buttons</h4>
<p class="card-description">Add class <code>.btn-icon</code> for buttons with only icons</p>
<div class="template-demo d-flex justify-content-between flex-nowrap">
<button type="button" class="btn btn-primary btn-rounded btn-icon">
<i class="mdi mdi-home-outline"></i>
</button>
<button type="button" class="btn btn-dark btn-rounded btn-icon">
<i class="mdi mdi-internet-explorer"></i>
</button>
<button type="button" class="btn btn-danger btn-rounded btn-icon">
<i class="mdi mdi-email-open"></i>
</button>
<button type="button" class="btn btn-info btn-rounded btn-icon">
<i class="mdi mdi-star"></i>
</button>
<button type="button" class="btn btn-success btn-rounded btn-icon">
<i class="mdi mdi-map-marker"></i>
</button>
</div>
<div class="template-demo d-flex justify-content-between flex-nowrap">
<button type="button" class="btn btn-inverse-primary btn-rounded btn-icon">
<i class="mdi mdi-home-outline"></i>
</button>
<button type="button" class="btn btn-inverse-dark btn-icon">
<i class="mdi mdi-internet-explorer"></i>
</button>
<button type="button" class="btn btn-inverse-danger btn-icon">
<i class="mdi mdi-email-open"></i>
</button>
<button type="button" class="btn btn-inverse-info btn-icon">
<i class="mdi mdi-star"></i>
</button>
<button type="button" class="btn btn-inverse-success btn-icon">
<i class="mdi mdi-map-marker"></i>
</button>
</div>
<div class="template-demo d-flex justify-content-between flex-nowrap mt-4">
<button type="button" class="btn btn-outline-secondary btn-rounded btn-icon">
<i class="mdi mdi-heart-outline text-danger"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-rounded btn-icon">
<i class="mdi mdi-music text-dark"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-rounded btn-icon">
<i class="mdi mdi-star text-primary"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-rounded btn-icon">
<i class="mdi mdi-signal text-info"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-rounded btn-icon">
<i class="mdi mdi-trending-up text-success"></i>
</button>
</div>
<div class="template-demo d-flex justify-content-between flex-nowrap">
<button type="button" class="btn btn-outline-secondary btn-rounded btn-icon">
<i class="mdi mdi-heart-outline"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-rounded btn-icon">
<i class="mdi mdi-music"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-rounded btn-icon">
<i class="mdi mdi-star"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-rounded btn-icon">
<i class="mdi mdi-signal"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-rounded btn-icon">
<i class="mdi mdi-trending-up"></i>
</button>
</div>
</div>
<div class="col-md-5">
<h4 class="card-title">Button Size</h4>
<p class="card-description">Use class <code>.btn-{size}</code></p>
<div class="template-demo">
<button type="button" class="btn btn-outline-secondary btn-lg">btn-lg</button>
<button type="button" class="btn btn-outline-secondary btn-md">btn-md</button>
<button type="button" class="btn btn-outline-secondary btn-sm">btn-sm</button>
</div>
<div class="template-demo mt-4">
<button type="button" class="btn btn-danger btn-lg">btn-lg</button>
<button type="button" class="btn btn-success btn-md">btn-md</button>
<button type="button" class="btn btn-primary btn-sm">btn-sm</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Block buttons</h4>
<p class="card-description">Add class <code>.btn-block</code></p>
<div class="template-demo">
<button type="button" class="btn btn-info btn-lg btn-block">Block buttons <i class="mdi mdi-menu float-right"></i>
</button>
<button type="button" class="btn btn-dark btn-lg btn-block">Block buttons</button>
<button type="button" class="btn btn-primary btn-lg btn-block">
<i class="mdi mdi-account"></i> Block buttons </button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block buttons</button>
</div>
</div>
</div>
</div>
<div class="col-12 grid-margin">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h4 class="card-title">Button groups</h4>
<p class="card-description">Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code></p>
<div class="template-demo">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">
<i class="mdi mdi-heart-outline"></i>
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="mdi mdi-calendar"></i>
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="mdi mdi-clock"></i>
</button>
</div>
</div>
<div class="template-demo">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">
<i class="mdi mdi-heart-outline"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="mdi mdi-calendar"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="mdi mdi-clock"></i>
</button>
</div>
</div>
<div class="template-demo mt-4">
<div class="btn-group-vertical" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">
<i class="mdi mdi-format-vertical-align-top"></i>
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="mdi mdi-format-vertical-align-center"></i>
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="mdi mdi-format-vertical-align-bottom"></i>
</button>
</div>
<div class="btn-group-vertical" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">Default</button>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item">Go back</a>
<a class="dropdown-item">Delete</a>
<a class="dropdown-item">Swap</a>
</div>
</div>
<button type="button" class="btn btn-outline-secondary">Default</button>
</div>
<div class="btn-group-vertical" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">Top</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Bottom</button>
</div>
</div>
<div class="template-demo mt-4">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">
<i class="mdi mdi-star d-block mb-1"></i> Favourites </button>
<button type="button" class="btn btn-outline-secondary">
<i class="mdi mdi-reload d-block mb-1"></i> Reload </button>
<button type="button" class="btn btn-outline-secondary">
<i class="mdi mdi-account d-block mb-1"></i> Users </button>
</div>
</div>
</div>
<div class="col-md-6">
<h4 class="card-title">Button with text and icon</h4>
<p class="card-description">Wrap icon and text inside <code>.btn-icon-text</code> and use <code>.btn-icon-prepend</code> or <code>.btn-icon-append</code> for icon tags</p>
<div class="template-demo">
<button type="button" class="btn btn-primary btn-icon-text">
<i class="mdi mdi-file-check btn-icon-prepend"></i> Submit </button>
<button type="button" class="btn btn-gradient-dark btn-icon-text"> Edit <i class="mdi mdi-file-check btn-icon-append"></i>
</button>
<button type="button" class="btn btn-success btn-icon-text">
<i class="mdi mdi-alert btn-icon-prepend"></i> Warning </button>
</div>
<div class="template-demo">
<button type="button" class="btn btn-danger btn-icon-text">
<i class="mdi mdi-upload btn-icon-prepend"></i> Upload </button>
<button type="button" class="btn btn-info btn-icon-text"> Print <i class="mdi mdi-printer btn-icon-append"></i>
</button>
<button type="button" class="btn btn-warning btn-icon-text">
<i class="mdi mdi-reload btn-icon-prepend"></i> Reset </button>
</div>
<div class="template-demo mt-2">
<button type="button" class="btn btn-outline-primary btn-icon-text">
<i class="mdi mdi-file-check btn-icon-prepend"></i> Submit </button>
<button type="button" class="btn btn-outline-secondary btn-icon-text"> Edit <i class="mdi mdi-file-check btn-icon-append"></i>
</button>
<button type="button" class="btn btn-outline-success btn-icon-text">
<i class="mdi mdi-alert btn-icon-prepend"></i> Warning </button>
</div>
<div class="template-demo">
<button type="button" class="btn btn-outline-danger btn-icon-text">
<i class="mdi mdi-upload btn-icon-prepend"></i> Upload </button>
<button type="button" class="btn btn-outline-info btn-icon-text"> Print <i class="mdi mdi-printer btn-icon-append"></i>
</button>
<button type="button" class="btn btn-outline-warning btn-icon-text">
<i class="mdi mdi-reload btn-icon-prepend"></i> Reset </button>
</div>
<div class="template-demo mt-2">
<button class="btn btn-outline-dark btn-icon-text">
<i class="mdi mdi-apple btn-icon-prepend mdi-36px"></i>
<span class="d-inline-block text-left">
<small class="font-weight-light d-block">Available on the</small> App Store </span>
</button>
<button class="btn btn-outline-dark btn-icon-text">
<i class="mdi mdi-android-debug-bridge btn-icon-prepend mdi-36px"></i>
<span class="d-inline-block text-left">
<small class="font-weight-light d-block">Get it on the</small> Google Play </span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Social Icon Buttons</h4>
<p class="card-description">Add class <code>.btn-social-icon</code></p>
<div class="template-demo">
<button type="button" class="btn btn-social-icon btn-outline-facebook"><i class="mdi mdi-facebook"></i></button>
<button type="button" class="btn btn-social-icon btn-outline-youtube"><i class="mdi mdi-youtube"></i></button>
<button type="button" class="btn btn-social-icon btn-outline-twitter"><i class="mdi mdi-twitter"></i></button>
<button type="button" class="btn btn-social-icon btn-outline-dribbble"><i class="mdi mdi-dribbble"></i></button>
<button type="button" class="btn btn-social-icon btn-outline-linkedin"><i class="mdi mdi-linkedin"></i></button>
<button type="button" class="btn btn-social-icon btn-outline-google"><i class="mdi mdi-google-plus"></i></button>
</div>
<div class="template-demo">
<button type="button" class="btn btn-social-icon btn-facebook"><i class="mdi mdi-facebook"></i></button>
<button type="button" class="btn btn-social-icon btn-youtube"><i class="mdi mdi-youtube"></i></button>
<button type="button" class="btn btn-social-icon btn-twitter"><i class="mdi mdi-twitter"></i></button>
<button type="button" class="btn btn-social-icon btn-dribbble"><i class="mdi mdi-dribbble"></i></button>
<button type="button" class="btn btn-social-icon btn-linkedin"><i class="mdi mdi-linkedin"></i></button>
<button type="button" class="btn btn-social-icon btn-google"><i class="mdi mdi-google-plus"></i></button>
</div>
<div class="template-demo">
<button type="button" class="btn btn-social-icon btn-facebook btn-rounded"><i class="mdi mdi-facebook"></i></button>
<button type="button" class="btn btn-social-icon btn-youtube btn-rounded"><i class="mdi mdi-youtube"></i></button>
<button type="button" class="btn btn-social-icon btn-twitter btn-rounded"><i class="mdi mdi-twitter"></i></button>
<button type="button" class="btn btn-social-icon btn-dribbble btn-rounded"><i class="mdi mdi-dribbble"></i></button>
<button type="button" class="btn btn-social-icon btn-linkedin btn-rounded"><i class="mdi mdi-linkedin"></i></button>
<button type="button" class="btn btn-social-icon btn-google btn-rounded"><i class="mdi mdi-google-plus"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Social button with text</h4>
<p class="card-description">Add class <code>.btn-social-icon-text</code></p>
<div class="template-demo">
<button type="button" class="btn btn-social-icon-text btn-facebook"><i class="mdi mdi-facebook"></i>Facebook</button>
<button type="button" class="btn btn-social-icon-text btn-youtube"><i class="mdi mdi-youtube"></i>Youtube</button>
<button type="button" class="btn btn-social-icon-text btn-twitter"><i class="mdi mdi-twitter"></i>Twitter</button>
<button type="button" class="btn btn-social-icon-text btn-dribbble"><i class="mdi mdi-dribbble"></i>Dribbble</button>
<button type="button" class="btn btn-social-icon-text btn-linkedin"><i class="mdi mdi-linkedin"></i>Linkedin</button>
<button type="button" class="btn btn-social-icon-text btn-google"><i class="mdi mdi-google-plus"></i>Google</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:../../partials/_footer.html -->
<footer class="footer">
<div class="footer-inner-wraper">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard templates</a> from Bootstrapdash.com</span>
</div>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/hoverable-collapse.js"></script>
<script src="../../assets/js/misc.js"></script>
<!-- endinject -->
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,739 @@
<!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>Connect Plus</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End Plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar default-layout-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" href="../../index.html"><img src="../../assets/images/logo.svg" alt="logo" /></a>
<a class="navbar-brand brand-logo-mini" href="../../index.html"><img src="../../assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-stretch">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
<div class="search-field d-none d-xl-block">
<form class="d-flex align-items-center h-100" action="#">
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<i class="input-group-text border-0 mdi mdi-magnify"></i>
</div>
<input type="text" class="form-control bg-transparent border-0" placeholder="Search products">
</div>
</form>
</div>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="reportDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Reports </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="reportDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-pdf mr-2"></i>PDF </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-excel mr-2"></i>Excel </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-word mr-2"></i>doc </a>
</div>
</li>
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="projectDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Projects </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="projectDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-eye-outline mr-2"></i>View Project </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-pencil-outline mr-2"></i>Edit Project </a>
</div>
</li>
<li class="nav-item nav-language dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="languageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-language-icon">
<i class="flag-icon flag-icon-us" title="us" id="us"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="languageDropdown">
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-ae" title="ae" id="ae"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">Arabic</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-gb" title="GB" id="gb"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
</div>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="nav-profile-text">
<p class="mb-1 text-black">Henry Klein</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown dropdown-menu-right p-0 border-0 font-size-sm" aria-labelledby="profileDropdown" data-x-placement="bottom-end">
<div class="p-3 text-center bg-primary">
<img class="img-avatar img-avatar48 img-avatar-thumb" src="../../assets/images/faces/face28.png" alt="">
</div>
<div class="p-2">
<h5 class="dropdown-header text-uppercase pl-2 text-dark">User Options</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Inbox</span>
<span class="p-0">
<span class="badge badge-primary">3</span>
<i class="mdi mdi-email-open-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Profile</span>
<span class="p-0">
<span class="badge badge-success">1</span>
<i class="mdi mdi-account-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="javascript:void(0)">
<span>Settings</span>
<i class="mdi mdi-settings"></i>
</a>
<div role="separator" class="dropdown-divider"></div>
<h5 class="dropdown-header text-uppercase pl-2 text-dark mt-2">Actions</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Lock Account</span>
<i class="mdi mdi-lock ml-1"></i>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Log Out</span>
<i class="mdi mdi-logout ml-1"></i>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-email-outline"></i>
<span class="count-symbol bg-success"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="messageDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Messages</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face4.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Mark send you a message</h6>
<p class="text-gray mb-0"> 1 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face2.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Cregh send you a message</h6>
<p class="text-gray mb-0"> 15 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../assets/images/faces/face3.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Profile picture updated</h6>
<p class="text-gray mb-0"> 18 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">4 new messages</h6>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
<i class="mdi mdi-bell-outline"></i>
<span class="count-symbol bg-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Notifications</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-success">
<i class="mdi mdi-calendar"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Event today</h6>
<p class="text-gray ellipsis mb-0"> Just a reminder that you have an event today </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="mdi mdi-settings"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Settings</h6>
<p class="text-gray ellipsis mb-0"> Update dashboard </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-info">
<i class="mdi mdi-link-variant"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Launch Admin</h6>
<p class="text-gray ellipsis mb-0"> New admin wow! </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">See all notifications</h6>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="mdi mdi-menu"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../../partials/_sidebar.html -->
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item nav-category">Main</li>
<li class="nav-item">
<a class="nav-link" href="../../index.html">
<span class="icon-bg"><i class="mdi mdi-cube menu-icon"></i></span>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<span class="icon-bg"><i class="mdi mdi-crosshairs-gps menu-icon"></i></span>
<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/buttons.html">Buttons</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/typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/icons/mdi.html">
<span class="icon-bg"><i class="mdi mdi-contacts menu-icon"></i></span>
<span class="menu-title">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/forms/basic_elements.html">
<span class="icon-bg"><i class="mdi mdi-format-list-bulleted menu-icon"></i></span>
<span class="menu-title">Forms</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/charts/chartjs.html">
<span class="icon-bg"><i class="mdi mdi-chart-bar menu-icon"></i></span>
<span class="menu-title">Charts</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../pages/tables/basic-table.html">
<span class="icon-bg"><i class="mdi mdi-table-large menu-icon"></i></span>
<span class="menu-title">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<span class="icon-bg"><i class="mdi mdi-lock menu-icon"></i></span>
<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/blank-page.html"> Blank Page </a></li>
<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/register.html"> Register </a></li>
<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 documentation-link">
<a class="nav-link" href="http://www.bootstrapdash.com/demo/connect-plus-free/jquery/documentation/documentation.html" target="_blank">
<span class="icon-bg">
<i class="mdi mdi-file-document-box menu-icon"></i>
</span>
<span class="menu-title">Documentation</span>
</a>
</li>
<li class="nav-item sidebar-user-actions">
<div class="user-details">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="d-flex align-items-center">
<div class="sidebar-profile-img">
<img src="../../assets/images/faces/face28.png" alt="image">
</div>
<div class="sidebar-profile-text">
<p class="mb-1">Henry Klein</p>
</div>
</div>
</div>
<div class="badge badge-danger">3</div>
</div>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-settings menu-icon"></i>
<span class="menu-title">Settings</span>
</a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-speedometer menu-icon"></i>
<span class="menu-title">Take Tour</span></a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-logout menu-icon"></i>
<span class="menu-title">Log Out</span></a>
</div>
</li>
</ul>
</nav>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="page-header">
<h3 class="page-title"> Typography </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">UI Elements</a></li>
<li class="breadcrumb-item active" aria-current="page">Typography</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Headings</h4>
<p class="card-description"> Add tags <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> or class <code>.h1</code> to <code>.h6</code>
</p>
<div class="template-demo">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Headings with secondary text</h4>
<p class="card-description"> Add faded secondary text to headings </p>
<div class="template-demo">
<h1> h1. Heading <small class="text-muted"> Secondary text </small>
</h1>
<h2> h2. Heading <small class="text-muted"> Secondary text </small>
</h2>
<h3> h3. Heading <small class="text-muted"> Secondary text </small>
</h3>
<h4> h4. Heading <small class="text-muted"> Secondary text </small>
</h4>
<h5> h5. Heading <small class="text-muted"> Secondary text </small>
</h5>
<h6> h6. Heading <small class="text-muted"> Secondary text </small>
</h6>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Display headings</h4>
<p class="card-description"> Add class <code>.display1</code> to <code>.display-4</code>
</p>
<div class="template-demo">
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch">
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Paragraph</h4>
<p class="card-description"> Write text in <code>&lt;p&gt;</code> tag </p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley not only five centuries, </p>
</div>
</div>
</div>
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Icon size</h4>
<p class="card-description"> Add class <code>.icon-lg</code>, <code>.icon-md</code>, <code>.icon-sm</code>
</p>
<div class="row">
<div class="col-md-4 d-flex align-items-center">
<div class="d-flex flex-row align-items-center">
<i class="mdi mdi-compass icon-lg text-warning"></i>
<p class="mb-0 ml-1"> Icon-lg </p>
</div>
</div>
<div class="col-md-4 d-flex align-items-center">
<div class="d-flex flex-row align-items-center">
<i class="mdi mdi-compass icon-md text-success"></i>
<p class="mb-0 ml-1"> Icon-md </p>
</div>
</div>
<div class="col-md-4 d-flex align-items-center">
<div class="d-flex flex-row align-items-center">
<i class="mdi mdi-compass icon-sm text-danger"></i>
<p class="mb-0 ml-1"> Icon-sm </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Blockquotes</h4>
<p class="card-description"> Wrap content inside<code>&lt;blockquote class="blockquote"&gt;</code>
</p>
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</div>
<div class="card-body">
<blockquote class="blockquote blockquote-primary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Address</h4>
<p class="card-description"> Use <code>&lt;address&gt;</code> tag </p>
<div class="row">
<div class="col-md-6">
<address>
<p class="font-weight-bold">Connect Plus imc</p>
<p> 695 lsom Ave, </p>
<p> Suite 00 </p>
<p> San Francisco, CA 94107 </p>
</address>
</div>
<div class="col-md-6">
<address class="text-primary">
<p class="font-weight-bold"> E-mail </p>
<p class="mb-2"> johndoe@examplemeail.com </p>
<p class="font-weight-bold"> Web Address </p>
<p> www.Connect Plus.com </p>
</address>
</div>
</div>
</div>
<div class="card-body">
<h4 class="card-title">Lead</h4>
<p class="card-description"> Use class <code>.lead</code>
</p>
<p class="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. </p>
</div>
</div>
</div>
<div class="col-md-12 grid-margin">
<div class="card">
<div class="card-body">
<h4 class="card-title">Text colors</h4>
<p class="card-description"> Use class <code>.text-primary</code>, <code>.text-secondary</code> etc. for text in theme colors </p>
<div class="row">
<div class="col-md-6">
<p class="text-primary">.text-primary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
</div>
<div class="col-md-6">
<p class="text-light bg-dark pl-1">.text-light</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark pl-1">.text-white</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Top aligned media</h4>
<div class="media">
<i class="mdi mdi-earth icon-md text-info d-flex align-self-start mr-3"></i>
<div class="media-body">
<p class="card-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Center aligned media</h4>
<div class="media">
<i class="mdi mdi-earth icon-md text-info d-flex align-self-center mr-3"></i>
<div class="media-body">
<p class="card-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Bottom aligned media</h4>
<div class="media">
<i class="mdi mdi-earth icon-md text-info d-flex align-self-end mr-3"></i>
<div class="media-body">
<p class="card-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Highlighted Text</h4>
<p class="card-description"> Wrap the text in <code>&lt;mark&gt;</code> to highlight text </p>
<p> It is a long <mark class="bg-warning text-white">established</mark> fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution </p>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">List Unordered</h4>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Bold text</h4>
<p class="card-description"> Use class<code>.font-weight-bold</code>
</p>
<p> It is a long <span class="font-weight-bold">established fact</span> that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution </p>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">List Ordered</h4>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit></li>
</ol>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title text-primary">Underline</h4>
<p class="card-description"> Wrap in <code>&lt;u&gt;</code> tag for underline </p>
<p>
<u>lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.</u>
</p>
</div>
<div class="card-body">
<h4 class="card-title text-danger">Lowercase</h4>
<p class="card-description"> Use class <code>.text-lowercase</code>
</p>
<p class="text-lowercase"> lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="card-body">
<h4 class="card-title text-warning">Uppercase</h4>
<p class="card-description"> Use class <code>.text-uppercase</code>
</p>
<p class="text-uppercase"> lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Mute</h4>
<p class="card-description"> Use class <code>.text-muted</code>
</p>
<p class="text-muted"> lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="card-body">
<h4 class="card-title text-success">Strike</h4>
<p class="card-description"> Wrap content in <code>&lt;del&gt;</code> tag </p>
<p>
<del> lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua. </del>
</p>
</div>
<div class="card-body">
<h4 class="card-title text-info">Capitalized</h4>
<p class="card-description"> Use class <code>.text-capitalize</code>
</p>
<p class="text-capitalize"> lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">List with icon</h4>
<p class="card-description">Add class <code>.list-ticked</code> to <code>&lt;ul&gt;</code></p>
<ul class="list-ticked">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">List with icon</h4>
<p class="card-description">Add class <code>.list-arrow</code> to <code>&lt;ul&gt;</code></p>
<ul class="list-arrow">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">List with icon</h4>
<p class="card-description">Add class <code>.list-star</code> to <code>&lt;ul&gt;</code></p>
<ul class="list-star">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:../../partials/_footer.html -->
<footer class="footer">
<div class="footer-inner-wraper">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard templates</a> from Bootstrapdash.com</span>
</div>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/hoverable-collapse.js"></script>
<script src="../../assets/js/misc.js"></script>
<!-- endinject -->
</body>
</html>

View File

@ -0,0 +1,8 @@
<footer class="footer">
<div class="footer-inner-wraper">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard templates</a> from Bootstrapdash.com</span>
</div>
</div>
</footer>

View File

@ -0,0 +1,212 @@
<nav class="navbar default-layout-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" href="index.html"><img src="assets/images/logo.svg" alt="logo" /></a>
<a class="navbar-brand brand-logo-mini" href="index.html"><img src="assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-stretch">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
<div class="search-field d-none d-xl-block">
<form class="d-flex align-items-center h-100" action="#">
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<i class="input-group-text border-0 mdi mdi-magnify"></i>
</div>
<input type="text" class="form-control bg-transparent border-0" placeholder="Search products">
</div>
</form>
</div>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="reportDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Reports </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="reportDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-pdf mr-2"></i>PDF </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-excel mr-2"></i>Excel </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-file-word mr-2"></i>doc </a>
</div>
</li>
<li class="nav-item dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="projectDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> Projects </a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="projectDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-eye-outline mr-2"></i>View Project </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-pencil-outline mr-2"></i>Edit Project </a>
</div>
</li>
<li class="nav-item nav-language dropdown d-none d-md-block">
<a class="nav-link dropdown-toggle" id="languageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-language-icon">
<i class="flag-icon flag-icon-us" title="us" id="us"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="languageDropdown">
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-ae" title="ae" id="ae"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">Arabic</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="nav-language-icon mr-2">
<i class="flag-icon flag-icon-gb" title="GB" id="gb"></i>
</div>
<div class="nav-language-text">
<p class="mb-1 text-black">English</p>
</div>
</a>
</div>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="nav-profile-img">
<img src="assets/images/faces/face28.png" alt="image">
</div>
<div class="nav-profile-text">
<p class="mb-1 text-black">Henry Klein</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown dropdown-menu-right p-0 border-0 font-size-sm" aria-labelledby="profileDropdown" data-x-placement="bottom-end">
<div class="p-3 text-center bg-primary">
<img class="img-avatar img-avatar48 img-avatar-thumb" src="assets/images/faces/face28.png" alt="">
</div>
<div class="p-2">
<h5 class="dropdown-header text-uppercase pl-2 text-dark">User Options</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Inbox</span>
<span class="p-0">
<span class="badge badge-primary">3</span>
<i class="mdi mdi-email-open-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Profile</span>
<span class="p-0">
<span class="badge badge-success">1</span>
<i class="mdi mdi-account-outline ml-1"></i>
</span>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="javascript:void(0)">
<span>Settings</span>
<i class="mdi mdi-settings"></i>
</a>
<div role="separator" class="dropdown-divider"></div>
<h5 class="dropdown-header text-uppercase pl-2 text-dark mt-2">Actions</h5>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Lock Account</span>
<i class="mdi mdi-lock ml-1"></i>
</a>
<a class="dropdown-item py-1 d-flex align-items-center justify-content-between" href="#">
<span>Log Out</span>
<i class="mdi mdi-logout ml-1"></i>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-email-outline"></i>
<span class="count-symbol bg-success"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="messageDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Messages</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="assets/images/faces/face4.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Mark send you a message</h6>
<p class="text-gray mb-0"> 1 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="assets/images/faces/face2.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Cregh send you a message</h6>
<p class="text-gray mb-0"> 15 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="assets/images/faces/face3.jpg" alt="image" class="profile-pic">
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject ellipsis mb-1 font-weight-normal">Profile picture updated</h6>
<p class="text-gray mb-0"> 18 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">4 new messages</h6>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
<i class="mdi mdi-bell-outline"></i>
<span class="count-symbol bg-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
<h6 class="p-3 mb-0 bg-primary text-white py-4">Notifications</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-success">
<i class="mdi mdi-calendar"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Event today</h6>
<p class="text-gray ellipsis mb-0"> Just a reminder that you have an event today </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="mdi mdi-settings"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Settings</h6>
<p class="text-gray ellipsis mb-0"> Update dashboard </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-info">
<i class="mdi mdi-link-variant"></i>
</div>
</div>
<div class="preview-item-content d-flex align-items-start flex-column justify-content-center">
<h6 class="preview-subject font-weight-normal mb-1">Launch Admin</h6>
<p class="text-gray ellipsis mb-0"> New admin wow! </p>
</div>
</a>
<div class="dropdown-divider"></div>
<h6 class="p-3 mb-0 text-center">See all notifications</h6>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="mdi mdi-menu"></span>
</button>
</div>
</nav>

View File

@ -0,0 +1,109 @@
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item nav-category">Main</li>
<li class="nav-item">
<a class="nav-link" href="index.html">
<span class="icon-bg"><i class="mdi mdi-cube menu-icon"></i></span>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<span class="icon-bg"><i class="mdi mdi-crosshairs-gps menu-icon"></i></span>
<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/buttons.html">Buttons</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/typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/icons/mdi.html">
<span class="icon-bg"><i class="mdi mdi-contacts menu-icon"></i></span>
<span class="menu-title">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/forms/basic_elements.html">
<span class="icon-bg"><i class="mdi mdi-format-list-bulleted menu-icon"></i></span>
<span class="menu-title">Forms</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/charts/chartjs.html">
<span class="icon-bg"><i class="mdi mdi-chart-bar menu-icon"></i></span>
<span class="menu-title">Charts</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/tables/basic-table.html">
<span class="icon-bg"><i class="mdi mdi-table-large menu-icon"></i></span>
<span class="menu-title">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<span class="icon-bg"><i class="mdi mdi-lock menu-icon"></i></span>
<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/blank-page.html"> Blank Page </a></li>
<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/register.html"> Register </a></li>
<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 documentation-link">
<a class="nav-link" href="http://www.bootstrapdash.com/demo/connect-plus-free/jquery/documentation/documentation.html" target="_blank">
<span class="icon-bg">
<i class="mdi mdi-file-document-box menu-icon"></i>
</span>
<span class="menu-title">Documentation</span>
</a>
</li>
<li class="nav-item sidebar-user-actions">
<div class="user-details">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="d-flex align-items-center">
<div class="sidebar-profile-img">
<img src="assets/images/faces/face28.png" alt="image">
</div>
<div class="sidebar-profile-text">
<p class="mb-1">Henry Klein</p>
</div>
</div>
</div>
<div class="badge badge-danger">3</div>
</div>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-settings menu-icon"></i>
<span class="menu-title">Settings</span>
</a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-speedometer menu-icon"></i>
<span class="menu-title">Take Tour</span></a>
</div>
</li>
<li class="nav-item sidebar-user-actions">
<div class="sidebar-user-menu">
<a href="#" class="nav-link"><i class="mdi mdi-logout menu-icon"></i>
<span class="menu-title">Log Out</span></a>
</div>
</li>
</ul>
</nav>

Binary file not shown.

After

Width:  |  Height:  |  Size: 808 KiB

14291
src/a3b/admin/css/style.css Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 332 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 153 187" style="enable-background:new 0 0 153 187;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.2;fill:#FFFFFF;}
</style>
<g>
<title>3</title>
<desc>Created with Sketch.</desc>
<g id="Mask-_x2B_-Mask-Mask" transform="translate(14.000000, 0.000000)">
<g id="Mask">
</g>
<g id="Mask_1_">
<path class="st0" d="M138,141.2c-3.6,0.5-7.3,0.8-11,0.8c-29.6,0-55.4-16.5-68.6-40.9c-6-11-9.4-23.7-9.4-37.1
c0-26.5,13.2-49.9,33.4-64H138v129.5"/>
</g>
<g id="Mask_2_">
<path class="st0" d="M138,141.2V187H-15c0.2-43.3,31.9-79.1,73.4-85.9c4.6-0.8,9.3-1.1,14.1-1.1c26.1,0,49.5,11.4,65.5,29.5"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 920 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 B

Some files were not shown because too many files have changed in this diff Show More