Archive: Namaste PHP AMQP framework v1.0 (2017-2020)
952 days continuous production uptime, 40k+ tp/s single node. Original corpo Bitbucket history not included — clean archive commit.
This commit is contained in:
BIN
html/License.pdf
Normal file
BIN
html/License.pdf
Normal file
Binary file not shown.
26
html/README.txt
Normal file
26
html/README.txt
Normal file
@@ -0,0 +1,26 @@
|
||||
Material Design for Bootstrap
|
||||
|
||||
version: MDB Admin Dashboard Templates Pack 4.5.8
|
||||
|
||||
Documentation:
|
||||
https://mdbootstrap.com/
|
||||
|
||||
Getting started:
|
||||
https://mdbootstrap.com/getting-started/
|
||||
|
||||
Tutorials:
|
||||
MDB-Bootstrap: https://mdbootstrap.com/bootstrap-tutorial/
|
||||
MDB-Wordpress: https://mdbootstrap.com/wordpress-tutorial/
|
||||
|
||||
Templates:
|
||||
https://mdbootstrap.com/templates/
|
||||
|
||||
License:
|
||||
https://mdbootstrap.com/license/
|
||||
|
||||
Support:
|
||||
https://mdbootstrap.com/forums/forum/support/
|
||||
|
||||
Contact:
|
||||
office@mdbootstrap.com
|
||||
|
||||
197
html/css/addons/datatables.css
Normal file
197
html/css/addons/datatables.css
Normal file
@@ -0,0 +1,197 @@
|
||||
/*
|
||||
* MDBootstrap integration with Datatables
|
||||
* Learn more: https://mdbootstrap.com/content/bootstrap-datatables/
|
||||
* About MDBootstrap: https://mdbootstrap.com/
|
||||
*
|
||||
* This combined file was created by the DataTables downloader builder:
|
||||
* https://datatables.net/download
|
||||
*
|
||||
* To rebuild or modify this file with the latest versions of the included
|
||||
* software please visit:
|
||||
* https://datatables.net/download/#bs4/dt-1.10.18
|
||||
*
|
||||
* Included libraries:
|
||||
* DataTables 1.10.18
|
||||
*/
|
||||
|
||||
table.dataTable thead {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table.dataTable thead>tr>th:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
table.dataTable thead>tr>td:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length.d-flex.flex-row label {
|
||||
margin-top: 1.2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length.d-flex.flex-row .select-wrapper.mdb-select span,
|
||||
div.dataTables_wrapper div.dataTables_length.d-flex.flex-row .select-wrapper.mdb-select .select-dropdown {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length label,
|
||||
div.dataTables_wrapper div.dataTables_filter label {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length select,
|
||||
div.dataTables_wrapper div.dataTables_length input,
|
||||
div.dataTables_wrapper div.dataTables_filter select,
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_filter {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
margin-left: .5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_info,
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
font-weight: normal;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link:focus {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link:focus {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
div.dataTables_wrapper div .dataTables_length,
|
||||
div.dataTables_wrapper div .dataTables_filter,
|
||||
div.dataTables_wrapper div .dataTables_info,
|
||||
div.dataTables_wrapper div .dataTables_paginate ul.pagination {
|
||||
text-align: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bs-select select {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
table.dataTable thead {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table.dataTable thead>tr>th:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
table.dataTable thead>tr>td:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length.d-flex.flex-row label {
|
||||
margin-top: 1.2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length.d-flex.flex-row .select-wrapper.mdb-select span,
|
||||
div.dataTables_wrapper div.dataTables_length.d-flex.flex-row .select-wrapper.mdb-select .select-dropdown {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length label,
|
||||
div.dataTables_wrapper div.dataTables_filter label {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length select,
|
||||
div.dataTables_wrapper div.dataTables_length input,
|
||||
div.dataTables_wrapper div.dataTables_filter select,
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_filter {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
margin-left: .5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_info,
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
font-weight: normal;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link:focus {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link:focus {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
div.dataTables_wrapper div .dataTables_length,
|
||||
div.dataTables_wrapper div .dataTables_filter,
|
||||
div.dataTables_wrapper div .dataTables_info,
|
||||
div.dataTables_wrapper div .dataTables_paginate ul.pagination {
|
||||
text-align: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bs-select select {
|
||||
display: inline-block !important;
|
||||
}
|
||||
1
html/css/addons/datatables.min.css
vendored
Normal file
1
html/css/addons/datatables.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
table.dataTable thead{cursor:pointer}table.dataTable thead>tr>td:active,table.dataTable thead>tr>th:active{outline:0}div.dataTables_wrapper div.dataTables_length.d-flex.flex-row label{margin-top:1.2rem;margin-right:1rem}div.dataTables_wrapper div.dataTables_length.d-flex.flex-row .select-wrapper.mdb-select .select-dropdown,div.dataTables_wrapper div.dataTables_length.d-flex.flex-row .select-wrapper.mdb-select span{margin-top:1rem}div.dataTables_wrapper div.dataTables_filter label,div.dataTables_wrapper div.dataTables_length label{text-align:left;font-weight:400;padding-top:.5rem;padding-bottom:.5rem}div.dataTables_wrapper div.dataTables_filter input,div.dataTables_wrapper div.dataTables_filter select,div.dataTables_wrapper div.dataTables_length input,div.dataTables_wrapper div.dataTables_length select{width:auto}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter input{margin-left:.5rem;display:inline-block}div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{font-weight:400;padding-top:1rem;padding-bottom:1rem}div.dataTables_wrapper div.dataTables_paginate{text-align:right;margin:0}div.dataTables_wrapper div.dataTables_paginate ul.pagination{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link:focus{background-color:#4285f4}div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link:focus{-webkit-box-shadow:none;box-shadow:none}@media (max-width:767px){div.dataTables_wrapper div .dataTables_filter,div.dataTables_wrapper div .dataTables_info,div.dataTables_wrapper div .dataTables_length,div.dataTables_wrapper div .dataTables_paginate ul.pagination{text-align:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}}.bs-select select{display:inline-block!important}
|
||||
8981
html/css/bootstrap.css
vendored
Executable file
8981
html/css/bootstrap.css
vendored
Executable file
File diff suppressed because it is too large
Load Diff
6
html/css/bootstrap.min.css
vendored
Executable file
6
html/css/bootstrap.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
16238
html/css/mdb.css
Normal file
16238
html/css/mdb.css
Normal file
File diff suppressed because it is too large
Load Diff
52
html/css/mdb.min.css
vendored
Normal file
52
html/css/mdb.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
html/css/style.css
Normal file
7
html/css/style.css
Normal file
@@ -0,0 +1,7 @@
|
||||
/* Your custom styles */
|
||||
.shadow-textarea textarea.form-control::placeholder {
|
||||
font-weight: 300;
|
||||
}
|
||||
.shadow-textarea textarea.form-control {
|
||||
padding-left: 0.8rem;
|
||||
}
|
||||
0
html/css/style.min.css
vendored
Normal file
0
html/css/style.min.css
vendored
Normal file
BIN
html/font/fa/FontAwesome.otf
Normal file
BIN
html/font/fa/FontAwesome.otf
Normal file
Binary file not shown.
BIN
html/font/fa/fontawesome-webfont.eot
Normal file
BIN
html/font/fa/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
html/font/fa/fontawesome-webfont.svg
Normal file
2671
html/font/fa/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
BIN
html/font/fa/fontawesome-webfont.ttf
Normal file
BIN
html/font/fa/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
html/font/fa/fontawesome-webfont.woff
Normal file
BIN
html/font/fa/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
html/font/fa/fontawesome-webfont.woff2
Normal file
BIN
html/font/fa/fontawesome-webfont.woff2
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Bold.eot
Normal file
BIN
html/font/roboto/Roboto-Bold.eot
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Bold.ttf
Normal file
BIN
html/font/roboto/Roboto-Bold.ttf
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Bold.woff
Normal file
BIN
html/font/roboto/Roboto-Bold.woff
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Bold.woff2
Normal file
BIN
html/font/roboto/Roboto-Bold.woff2
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Light.eot
Normal file
BIN
html/font/roboto/Roboto-Light.eot
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Light.ttf
Normal file
BIN
html/font/roboto/Roboto-Light.ttf
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Light.woff
Normal file
BIN
html/font/roboto/Roboto-Light.woff
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Light.woff2
Normal file
BIN
html/font/roboto/Roboto-Light.woff2
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Medium.eot
Normal file
BIN
html/font/roboto/Roboto-Medium.eot
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Medium.ttf
Normal file
BIN
html/font/roboto/Roboto-Medium.ttf
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Medium.woff
Normal file
BIN
html/font/roboto/Roboto-Medium.woff
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Medium.woff2
Normal file
BIN
html/font/roboto/Roboto-Medium.woff2
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Regular.eot
Normal file
BIN
html/font/roboto/Roboto-Regular.eot
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Regular.ttf
Normal file
BIN
html/font/roboto/Roboto-Regular.ttf
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Regular.woff
Normal file
BIN
html/font/roboto/Roboto-Regular.woff
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Regular.woff2
Normal file
BIN
html/font/roboto/Roboto-Regular.woff2
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Thin.eot
Normal file
BIN
html/font/roboto/Roboto-Thin.eot
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Thin.ttf
Normal file
BIN
html/font/roboto/Roboto-Thin.ttf
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Thin.woff
Normal file
BIN
html/font/roboto/Roboto-Thin.woff
Normal file
Binary file not shown.
BIN
html/font/roboto/Roboto-Thin.woff2
Normal file
BIN
html/font/roboto/Roboto-Thin.woff2
Normal file
Binary file not shown.
407
html/html/alerts/alerts.html
Normal file
407
html/html/alerts/alerts.html
Normal file
@@ -0,0 +1,407 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Alerts</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
<!-- Fixed button -->
|
||||
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
|
||||
<a class="btn-floating btn-lg red">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</a>
|
||||
|
||||
<ul class="list-unstyled">
|
||||
<li><a class="btn-floating red"><i class="fa fa-star"></i></a></li>
|
||||
<li><a class="btn-floating yellow darken-1"><i class="fa fa-user"></i></a></li>
|
||||
<li><a class="btn-floating green"><i class="fa fa-envelope"></i></a></li>
|
||||
<li><a class="btn-floating blue"><i class="fa fa-shopping-cart"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Fixed button -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="card text-center mb-5 py-5">
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Types</strong></h4>
|
||||
|
||||
|
||||
<a class="btn btn-info" onclick="toastr.info('Hi! I am info message.');">Info message</a>
|
||||
|
||||
<a class="btn btn-warning" onclick="toastr.warning('Hi! I am warning message.');">Warning message</a>
|
||||
|
||||
<a class="btn btn-success" onclick="toastr.success('Hi! I am success message.');">Success message</a>
|
||||
|
||||
<a class="btn btn-danger" onclick="toastr.error('Hi! I am error message.');">Error message</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card text-center mb-5 py-5">
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Position</strong></h4>
|
||||
|
||||
|
||||
<div class="mb-4">
|
||||
|
||||
<a class="btn btn-indigo" onclick="toastr.info('Hi! I am info message.', '', {positionClass: 'toast-top-left'});">Top left</a>
|
||||
|
||||
<a class="btn btn-indigo" onclick="toastr.info('Hi! I am info message.', '', {positionClass: 'toast-top-center'});">Top center</a>
|
||||
|
||||
<a class="btn btn-indigo" onclick="toastr.info('Hi! I am info message.', '', {positionClass: 'toast-top-right'});">Top right</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
|
||||
<a class="btn btn-indigo" onclick="toastr.info('Hi! I am info message.', '', {positionClass: 'toast-bottom-left'});">Bottom left</a>
|
||||
|
||||
<a class="btn btn-indigo" onclick="toastr.info('Hi! I am info message.', '', {positionClass: 'toast-bottom-center'});">Bottom center</a>
|
||||
|
||||
<a class="btn btn-indigo" onclick="toastr.info('Hi! I am info message.', '', {positionClass: 'toast-bottom-right'});">Bottom right</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-5">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/javascript/alerts/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
410
html/html/calendar/calendar.html
Normal file
410
html/html/calendar/calendar.html
Normal file
@@ -0,0 +1,410 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
<!-- FullCalendar -->
|
||||
<link rel="stylesheet" href="../../js/vendor/fullcalendar-3.4.0/fullcalendar.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Calendar</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-ins dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- Section: Calendar -->
|
||||
<section>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div id="calendar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.Section: Calendar -->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!-- Moment -->
|
||||
<script type="text/javascript" src="../../js/vendor/fullcalendar-3.4.0/lib/moment.min.js"></script>
|
||||
<!-- Moment -->
|
||||
<script type="text/javascript" src="../../js/vendor/fullcalendar-3.4.0/fullcalendar.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
$(document).ready(function() {
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay,listWeek'
|
||||
},
|
||||
defaultDate: '2017-08-16',
|
||||
navLinks: true, // can click day/week names to navigate views
|
||||
editable: true,
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: '2017-08-01'
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: '2017-08-07',
|
||||
end: '2017-08-10'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2017-08-09T16:00:00'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2017-08-16T16:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Conference',
|
||||
start: '2017-08-11',
|
||||
end: '2017-08-13'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2017-08-12T10:30:00',
|
||||
end: '2017-08-12T12:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: '2017-08-12T12:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2017-08-12T14:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Happy Hour',
|
||||
start: '2017-08-12T17:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Dinner',
|
||||
start: '2017-08-12T20:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: '2017-08-13T07:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
url: 'http://google.com/',
|
||||
start: '2017-08-28'
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
990
html/html/charts/charts.html
Normal file
990
html/html/charts/charts.html
Normal file
@@ -0,0 +1,990 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Charts</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Main panel-->
|
||||
<section class="mb-5">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Section: Chart-->
|
||||
<section>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-5 col-lg-12 mr-0">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue-gradient">
|
||||
<h2 class="h2-responsive mb-0">Sales</h2>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade pb-0">
|
||||
|
||||
<!--Panel data-->
|
||||
<div class="row card-body pt-3">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-6">
|
||||
|
||||
<!--Date select-->
|
||||
<p class="lead"><span class="badge info-color p-2">Data range</span></p>
|
||||
<select class="mdb-select colorful-select dropdown-info">
|
||||
<option value="" disabled selected>Choose time period</option>
|
||||
<option value="1">Today</option>
|
||||
<option value="2">Yesterday</option>
|
||||
<option value="3">Last 7 days</option>
|
||||
<option value="3">Last 30 days</option>
|
||||
<option value="3">Last week</option>
|
||||
<option value="3">Last month</option>
|
||||
</select>
|
||||
|
||||
<!--Date pickers-->
|
||||
<p class="lead mt-5"><span class="badge info-color p-2">Custom date</span></p>
|
||||
<br>
|
||||
<div class="md-form">
|
||||
<input placeholder="Selected date" type="text" id="from" class="form-control datepicker">
|
||||
<label for="date-picker-example">From</label>
|
||||
</div>
|
||||
<div class="md-form">
|
||||
<input placeholder="Selected date" type="text" id="to" class="form-control datepicker">
|
||||
<label for="date-picker-example">To</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/First column-->
|
||||
|
||||
<!--Second column-->
|
||||
<div class="col-md-6 text-center">
|
||||
|
||||
<!--Summary-->
|
||||
<p>Total sales: <strong>2000$</strong>
|
||||
<button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top" title="Total sales in the given period"><i class="fa fa-question"></i></button>
|
||||
</p>
|
||||
<p>Average sales: <strong>100$</strong>
|
||||
<button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top" title="Average daily sales in the given period"><i class="fa fa-question"></i></button>
|
||||
</p>
|
||||
|
||||
<!--Change chart-->
|
||||
<span class="min-chart my-4" id="chart-sales" data-percent="76"><span class="percent"></span></span>
|
||||
<h5>
|
||||
<span class="badge green p-2">Change <i class="fa fa-arrow-circle-up ml-1"></i></span>
|
||||
<button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top" title="Percentage change compared to the same period in the past"><i class="fa fa-question"></i>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
<!--/Second column-->
|
||||
|
||||
</div>
|
||||
<!--/Panel data-->
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-7 col-lg-12 mb-4">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header indigo">
|
||||
|
||||
<!-- Chart -->
|
||||
<canvas id="lineChart-main" height="175"></canvas>
|
||||
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Chart-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Main panel-->
|
||||
|
||||
<!--Section: Chart types-->
|
||||
<section>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue">
|
||||
<h5 class="mb-0">Line chart</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<canvas id="lineChart" height="200px"></canvas>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue">
|
||||
<h5 class="mb-0">Radar chart</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<canvas id="radarChart" height="200px"></canvas>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue">
|
||||
<h5 class="mb-0">Bar chart</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<canvas id="barChart" height="200px"></canvas>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue">
|
||||
<h5 class="mb-0">Polar area chart</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<canvas id="polarChart" height="200px"></canvas>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue">
|
||||
<h5 class="mb-0">Pie Chart</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<canvas id="pieChart" height="200px"></canvas>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue">
|
||||
<h5 class="mb-0">Doughnut Chart</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<canvas id="doughnutChart" height="200px"></canvas>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue">
|
||||
<h5 class="mb-0">Minimalist chart</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<span class="min-chart my-3" id="chart-sales" data-percent="56"><span class="percent"></span></span>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue">
|
||||
<h5 class="mb-0">Minimalist chart</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<span class="min-chart my-3" id="chart-roi" data-percent="76"><span class="percent"></span></span>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue">
|
||||
<h5 class="mb-0">Minimalist chart</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<span class="min-chart my-3" id="chart-conversion" data-percent="100"><span class="percent"></span></span>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Chart types-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4 pt-5">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/javascript/charts/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// Data Picker Initialization
|
||||
$('.datepicker').pickadate();
|
||||
|
||||
// Material Select Initialization
|
||||
$(document).ready(function () {
|
||||
$('.mdb-select').material_select();
|
||||
});
|
||||
|
||||
// Tooltips Initialization
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- Charts -->
|
||||
<script>
|
||||
// Small chart
|
||||
$(function () {
|
||||
$('.min-chart#chart-sales').easyPieChart({
|
||||
barColor: "#4caf50",
|
||||
onStep: function (from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//Main chart
|
||||
var ctxL = document.getElementById("lineChart-main").getContext('2d');
|
||||
var myLineChart = new Chart(ctxL, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "#fff",
|
||||
backgroundColor: 'rgba(255, 255, 255, .3)',
|
||||
borderColor: 'rgba(255, 255, 255, .9)',
|
||||
data: [0, 10, 5, 2, 20, 30, 45],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: "#fff",
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: "rgba(255,255,255,.25)"
|
||||
},
|
||||
ticks: {
|
||||
fontColor: "#fff",
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: "rgba(255,255,255,.25)"
|
||||
},
|
||||
ticks: {
|
||||
fontColor: "#fff",
|
||||
},
|
||||
}],
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Charts 2-->
|
||||
<script>
|
||||
//line
|
||||
var ctxL = document.getElementById("lineChart").getContext('2d');
|
||||
var myLineChart = new Chart(ctxL, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
//radar
|
||||
var ctxR = document.getElementById("radarChart").getContext('2d');
|
||||
var myRadarChart = new Chart(ctxR, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
//bar
|
||||
var ctxB = document.getElementById("barChart").getContext('2d');
|
||||
var myBarChart = new Chart(ctxB, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(255, 206, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255,99,132,1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)',
|
||||
'rgba(75, 192, 192, 1)',
|
||||
'rgba(153, 102, 255, 1)',
|
||||
'rgba(255, 159, 64, 1)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
optionss: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//polar
|
||||
var ctxPA = document.getElementById("polarChart").getContext('2d');
|
||||
var myPolarChart = new Chart(ctxPA, {
|
||||
type: 'polarArea',
|
||||
data: {
|
||||
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100, 40, 120],
|
||||
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
|
||||
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
//pie
|
||||
var ctxP = document.getElementById("pieChart").getContext('2d');
|
||||
var myPieChart = new Chart(ctxP, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100, 40, 120],
|
||||
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
|
||||
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
//doughnut
|
||||
var ctxD = document.getElementById("doughnutChart").getContext('2d');
|
||||
var myLineChart = new Chart(ctxD, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100, 40, 120],
|
||||
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
|
||||
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
//minimalist
|
||||
$(function () {
|
||||
$('.min-chart#chart-sales').easyPieChart({
|
||||
barColor: "#4caf50",
|
||||
onStep: function (from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
}
|
||||
});
|
||||
|
||||
$('.min-chart#chart-roi').easyPieChart({
|
||||
barColor: "#F44336",
|
||||
onStep: function (from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
}
|
||||
});
|
||||
|
||||
$('.min-chart#chart-conversion').easyPieChart({
|
||||
barColor: "#9e9e9e",
|
||||
onStep: function (from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
342
html/html/components/_navigation.html
Normal file
342
html/html/components/_navigation.html
Normal file
@@ -0,0 +1,342 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Material Design for Bootstrap</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
724
html/html/components/buttons.html
Normal file
724
html/html/components/buttons.html
Normal file
@@ -0,0 +1,724 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Buttons</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
<!-- Fixed button -->
|
||||
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
|
||||
<a class="btn-floating btn-lg red">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</a>
|
||||
|
||||
<ul class="list-unstyled">
|
||||
<li><a class="btn-floating red"><i class="fa fa-star"></i></a></li>
|
||||
<li><a class="btn-floating yellow darken-1"><i class="fa fa-user"></i></a></li>
|
||||
<li><a class="btn-floating green"><i class="fa fa-envelope"></i></a></li>
|
||||
<li><a class="btn-floating blue"><i class="fa fa-shopping-cart"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Fixed button -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<h2 class="font-weight-bold mt-lg-5 mb-5 pb-4"><strong>Buttons</strong></h2>
|
||||
|
||||
<!--Section: Basic buttons-->
|
||||
<section class="mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Basic buttons</strong></h4>
|
||||
|
||||
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<!-- Default button -->
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<!-- Secondary button -->
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<!-- Indicates a successful or positive action -->
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<!-- Contextual button for informational alert messages -->
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<!-- Indicates caution should be taken with this action -->
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<!-- Indicates a dangerous or potentially negative action -->
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
|
||||
</section>
|
||||
<!--Section: Basic buttons-->
|
||||
|
||||
<!--Section: Outline buttons-->
|
||||
<section class="mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Outline buttons</strong></h4>
|
||||
|
||||
<button type="button" class="btn btn-outline-primary waves-effect">Primary</button>
|
||||
<button type="button" class="btn btn-outline-default waves-effect">Default</button>
|
||||
<button type="button" class="btn btn-outline-secondary waves-effect">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success waves-effect">Success</button>
|
||||
<button type="button" class="btn btn-outline-info waves-effect">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning waves-effect">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger waves-effect">Danger</button>
|
||||
|
||||
</section>
|
||||
<!--Section: Outline buttons-->
|
||||
|
||||
<!--Section: Additional buttons-->
|
||||
<section class="mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Additional buttons</strong></h4>
|
||||
|
||||
<!--Elegant-->
|
||||
<button type="button" class="btn btn-elegant">Elegant</button>
|
||||
<!--Unique-->
|
||||
<button type="button" class="btn btn-unique">Unique</button>
|
||||
<!--Pink-->
|
||||
<button type="button" class="btn btn-pink">Pink</button>
|
||||
<!--Purple-->
|
||||
<button type="button" class="btn btn-purple">Purple</button>
|
||||
<!--Deep-purple-->
|
||||
<button type="button" class="btn btn-deep-purple">Deep-purple</button>
|
||||
<!--Indigo-->
|
||||
<button type="button" class="btn btn-indigo">Indigo</button>
|
||||
<!--Light blue-->
|
||||
<button type="button" class="btn btn-light-blue">Light blue</button>
|
||||
<!--Cyan-->
|
||||
<button type="button" class="btn btn-cyan">Cyan</button>
|
||||
<p></p>
|
||||
<!--Dark-green-->
|
||||
<button type="button" class="btn btn-dark-green">Dark-green</button>
|
||||
<!--Light-green-->
|
||||
<button type="button" class="btn btn-light-green">Light-green</button>
|
||||
<!--Yellow-->
|
||||
<button type="button" class="btn btn-yellow">Yellow</button>
|
||||
<!--Amber-->
|
||||
<button type="button" class="btn btn-amber">Amber</button>
|
||||
<!--Deep-orange-->
|
||||
<button type="button" class="btn btn-deep-orange">Deep-orange</button>
|
||||
<!--Brown-->
|
||||
<button type="button" class="btn btn-brown">Brown</button>
|
||||
<!--Blue-grey-->
|
||||
<button type="button" class="btn btn-blue-grey">Blue-grey</button>
|
||||
<!--MDB-->
|
||||
<button type="button" class="btn btn-mdb-color">MDB</button>
|
||||
|
||||
</section>
|
||||
<!--Section: Additional buttons-->
|
||||
|
||||
<!--Section: Gradient buttons-->
|
||||
<section class="">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-5 mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Gradient buttons</strong></h4>
|
||||
|
||||
<button class="btn peach-gradient btn-rounded">Peach</button>
|
||||
<button class="btn purple-gradient btn-rounded">Purple</button>
|
||||
<button class="btn blue-gradient btn-rounded">Blue</button>
|
||||
<button class="btn aqua-gradient btn-rounded">Aqua</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-5 mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Radio buttons</strong></h4>
|
||||
<div class="btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-primary active">
|
||||
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Gradient buttons-->
|
||||
|
||||
<!--Section: Style and size-->
|
||||
<section class="">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-5 mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Style</strong></h4>
|
||||
|
||||
<button class="btn btn-secondary">Default</button>
|
||||
<button class="btn btn-secondary btn-rounded">Round</button>
|
||||
<button class="btn btn-secondary btn-rounded"> <i class="fa fa-heart mr-2"></i> With icon</button>
|
||||
<a class="btn-floating btn-secondary"><i class="fa fa-leaf"></i></a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-5 mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Sizes</strong></h4>
|
||||
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-primary">Regular button</button>
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Style and size-->
|
||||
|
||||
<!--Section: Social buttons-->
|
||||
<section class="">
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-xl-2 mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Regular</strong></h4>
|
||||
|
||||
<!--Facebook-->
|
||||
<button type="button" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</button>
|
||||
<!--Twitter-->
|
||||
<button type="button" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</button>
|
||||
<!--Google +-->
|
||||
<button type="button" class="btn btn-gplus"><i class="fa fa-google-plus left"></i> Google +</button>
|
||||
<!--Linkedin-->
|
||||
<button type="button" class="btn btn-li"><i class="fa fa-linkedin left"></i> Linkedin</button>
|
||||
<!--Instagram-->
|
||||
<button type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</button>
|
||||
<!--Pinterest-->
|
||||
<button type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</button>
|
||||
<!--Youtube-->
|
||||
<button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</button>
|
||||
<!--Dribbble-->
|
||||
<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble left"></i> Dribbble</button>
|
||||
<!--Vkontakte-->
|
||||
<button type="button" class="btn btn-vk"><i class="fa fa-vk left"></i> Vkontakte</button>
|
||||
<!--Stack Overflow-->
|
||||
<button type="button" class="btn btn-so px-4"><i class="fa fa-stack-overflow left"></i> Stack Overflow</button>
|
||||
<!--Slack-->
|
||||
<button type="button" class="btn btn-slack"><i class="fa fa-slack left"></i> Slack</button>
|
||||
<!--Comments-->
|
||||
<button type="button" class="btn btn-comm"><i class="fa fa-comments left"></i> Comments</button>
|
||||
<!--Github-->
|
||||
<button type="button" class="btn btn-git"><i class="fa fa-github left"></i> Github</button>
|
||||
<!--Email-->
|
||||
<button type="button" class="btn btn-email"><i class="fa fa-envelope left"></i> Email</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 col-xl-1 mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Simple</strong></h4>
|
||||
|
||||
<!--Facebook-->
|
||||
<button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i></button>
|
||||
<!--Twitter-->
|
||||
<button type="button" class="btn btn-tw"><i class="fa fa-twitter"></i></button>
|
||||
<!--Google +-->
|
||||
<button type="button" class="btn btn-gplus"><i class="fa fa-google-plus"></i></button>
|
||||
<!--Linkedin-->
|
||||
<button type="button" class="btn btn-li"><i class="fa fa-linkedin"></i></button>
|
||||
<!--Instagram-->
|
||||
<button type="button" class="btn btn-ins"><i class="fa fa-instagram"></i></button>
|
||||
<!--Pinterest-->
|
||||
<button type="button" class="btn btn-pin"><i class="fa fa-pinterest"></i></button>
|
||||
<!--Youtube-->
|
||||
<button type="button" class="btn btn-yt"><i class="fa fa-youtube"></i></button>
|
||||
<!--Dribbble-->
|
||||
<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble left"></i></button>
|
||||
<!--Vkontakte-->
|
||||
<button type="button" class="btn btn-vk"><i class="fa fa-vk"></i></button>
|
||||
<!--Stack Overflow-->
|
||||
<button type="button" class="btn btn-so"><i class="fa fa-stack-overflow"></i></button>
|
||||
<!--Slack-->
|
||||
<button type="button" class="btn btn-slack"><i class="fa fa-slack"></i></button>
|
||||
<!--Comments-->
|
||||
<button type="button" class="btn btn-comm"><i class="fa fa-comments"></i></button>
|
||||
<!--Github-->
|
||||
<button type="button" class="btn btn-git"><i class="fa fa-github"></i></button>
|
||||
<!--Email-->
|
||||
<button type="button" class="btn btn-email"><i class="fa fa-envelope"></i></button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 col-xl-2 mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>With counters</strong></h4>
|
||||
|
||||
<!--Facebook-->
|
||||
<button type="button" class="btn btn-fb">
|
||||
<i class="fa fa-facebook left"></i>
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Twitter-->
|
||||
<button type="button" class="btn btn-tw">
|
||||
<i class="fa fa-twitter left"></i>
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Google +-->
|
||||
<button type="button" class="btn btn-gplus">
|
||||
<i class="fa fa-google-plus left"></i>
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Linkedin-->
|
||||
<button type="button" class="btn btn-li">
|
||||
<i class="fa fa-linkedin left"></i>
|
||||
<span>Linkedin</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Instagram-->
|
||||
<button type="button" class="btn btn-ins">
|
||||
<i class="fa fa-instagram left"></i>
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Pinterest-->
|
||||
<button type="button" class="btn btn-pin">
|
||||
<i class="fa fa-pinterest left"></i>
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Youtube-->
|
||||
<button type="button" class="btn btn-yt">
|
||||
<i class="fa fa-youtube left"></i>
|
||||
<span>Youtube</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Dribbble-->
|
||||
<button type="button" class="btn btn-dribbble">
|
||||
<i class="fa fa-dribbble left"></i>
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Vkontakte-->
|
||||
<button type="button" class="btn btn-vk">
|
||||
<i class="fa fa-vk left"></i>
|
||||
<span>Vkontakte</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Stack Overflow-->
|
||||
<button type="button" class="btn btn-so px-4">
|
||||
<i class="fa fa-stack-overflow left"></i>
|
||||
<span>Stack Overflow</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Slack-->
|
||||
<button type="button" class="btn btn-slack">
|
||||
<i class="fa fa-slack left"></i>
|
||||
<span>Slack</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Comments-->
|
||||
<button type="button" class="btn btn-comm">
|
||||
<i class="fa fa-comments left"></i>
|
||||
<span>Comments</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Github-->
|
||||
<button type="button" class="btn btn-git">
|
||||
<i class="fa fa-github left"></i>
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
<!--Emails-->
|
||||
<button type="button" class="btn btn-email">
|
||||
<i class="fa fa-envelope left"></i>
|
||||
<span>Emails</span>
|
||||
</button>
|
||||
<span class="counter">22</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-xl-1 mb-5 pb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Round</strong></h4>
|
||||
|
||||
<!--Facebook-->
|
||||
<a type="button" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></a>
|
||||
<!--Twitter-->
|
||||
<a type="button" class="btn-floating btn-tw"><i class="fa fa-twitter"></i></a>
|
||||
<!--Google +-->
|
||||
<a type="button" class="btn-floating btn-gplus"><i class="fa fa-google-plus"></i></a>
|
||||
<!--Linkedin-->
|
||||
<a type="button" class="btn-floating btn-li"><i class="fa fa-linkedin"></i></a>
|
||||
<!--Instagram-->
|
||||
<a type="button" class="btn-floating btn-ins"><i class="fa fa-instagram"></i></a>
|
||||
<!--Pinterest-->
|
||||
<a type="button" class="btn-floating btn-pin"><i class="fa fa-pinterest"></i></a>
|
||||
<!--Youtube-->
|
||||
<a type="button" class="btn-floating btn-yt"><i class="fa fa-youtube"></i></a>
|
||||
<!--Dribbble-->
|
||||
<a type="button" class="btn-floating btn-dribbble"><i class="fa fa-dribbble"></i></a>
|
||||
<!--Vkontakte-->
|
||||
<a type="button" class="btn-floating btn-vk"><i class="fa fa-vk"></i></a>
|
||||
<!--Stack Overflow-->
|
||||
<a type="button" class="btn-floating btn-so"><i class="fa fa-stack-overflow"></i></a>
|
||||
<!--Slack-->
|
||||
<a type="button" class="btn-floating btn-slack"><i class="fa fa-slack"></i></a>
|
||||
<!--Github-->
|
||||
<a type="button" class="btn-floating btn-git"><i class="fa fa-github"></i></a>
|
||||
<!--Comments-->
|
||||
<a type="button" class="btn-floating btn-comm"><i class="fa fa-comments"></i></a>
|
||||
<!--Email-->
|
||||
<a type="button" class="btn-floating btn-email"><i class="fa fa-envelope"></i></a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: social buttons-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/buttons/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
949
html/html/components/cards.html
Normal file
949
html/html/components/cards.html
Normal file
@@ -0,0 +1,949 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Cards</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
|
||||
<!--Section: Cascading cards-->
|
||||
<section>
|
||||
<h2 class="font-weight-bold mt-lg-5 mb-5 pb-4"><strong>Cascading cards</strong></h2>
|
||||
|
||||
<div class="row pb-4">
|
||||
<!--Subheading-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Wider</strong></h4>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade wider">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" class="card-img-top">
|
||||
<a href="#!">
|
||||
<div class="mask rgba-white-slight"></div>
|
||||
</a>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<!--Title-->
|
||||
<h4 class="card-title"><strong>Alice Mayer</strong></h4>
|
||||
<h5 class="indigo-text"><strong>Photographer</strong></h5>
|
||||
|
||||
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam.
|
||||
</p>
|
||||
|
||||
|
||||
<!--Linkedin-->
|
||||
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin"> </i></a>
|
||||
<!--Twitter-->
|
||||
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter"> </i></a>
|
||||
<!--Dribbble-->
|
||||
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<!--Subheading-->
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Narrower</strong></h4>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower" style="margin-top: 44px">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="card-img-top" alt="">
|
||||
<a>
|
||||
<div class="mask rgba-white-slight"></div>
|
||||
</a>
|
||||
</div>
|
||||
<!--/.Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<h5 class="pink-text"><i class="fa fa-cutlery"></i> Culinary</h5>
|
||||
<!--Title-->
|
||||
<h4 class="card-title">Cheat day inspirations</h4>
|
||||
<!--Text-->
|
||||
<p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
|
||||
nisi ut aliquid ex ea commodi.</p>
|
||||
<a class="btn btn-unique waves-effect waves-light">Button</a>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<!--Subheading-->
|
||||
<h4 class="mb-4 dark-grey-text font-weight-bold"><strong>Regular</strong></h4>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/men.jpg" class="card-img-top" alt="">
|
||||
<a>
|
||||
<div class="mask rgba-white-slight"></div>
|
||||
</a>
|
||||
</div>
|
||||
<!--/.Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<!--Title-->
|
||||
<h4 class="card-title"><strong>Billy Cullen</strong></h4>
|
||||
<h5>Web developer</h5>
|
||||
|
||||
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae.
|
||||
Facere modi sunt, quod quibusdam.
|
||||
</p>
|
||||
|
||||
<!--Facebook-->
|
||||
<a type="button" class="btn-floating btn-small btn-fb waves-effect waves-light"><i class="fa fa-facebook"></i></a>
|
||||
<!--Twitter-->
|
||||
<a type="button" class="btn-floating btn-small btn-tw waves-effect waves-light"><i class="fa fa-twitter"></i></a>
|
||||
<!--Google +-->
|
||||
<a type="button" class="btn-floating btn-small btn-dribbble waves-effect waves-light"><i class="fa fa-dribbble"></i></a>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Cascading cards-->
|
||||
|
||||
<!--Section: Cascading panels-->
|
||||
<section>
|
||||
<h3 class="mb-4 dark-grey-text font-weight-bold"><strong>Cascading panels</strong></h3>
|
||||
|
||||
<div class="row mb-5">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header purple-gradient">
|
||||
<h2 class="card-header-title">Mattonit</h2>
|
||||
<p>The Boar</p>
|
||||
<div class="text-center">
|
||||
<!--Facebook-->
|
||||
<a type="button" class="btn-floating btn-small waves-effect waves-light"><i class="fa fa-facebook"></i></a>
|
||||
<!--Twitter-->
|
||||
<a type="button" class="btn-floating btn-small waves-effect waves-light"><i class="fa fa-twitter"></i></a>
|
||||
<!--Google +-->
|
||||
<a type="button" class="btn-floating btn-small waves-effect waves-light"><i class="fa fa-google-plus"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
|
||||
modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus
|
||||
non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem
|
||||
ullam corporis suscipit laboriosam.</p>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade wider">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header peach-gradient">
|
||||
<h2 class="card-header-title mb-2">Title of the news</h2>
|
||||
<p class=""><i class="fa fa-calendar"></i> 26.07.2017</p>
|
||||
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade ext-center">
|
||||
|
||||
<p class="card-text mr-2 ml-2 pb-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
|
||||
modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus
|
||||
non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum.</p>
|
||||
|
||||
<a href="#" class="orange-text mt-1 d-flex flex-row-reverse">
|
||||
<h5 class="waves-effect p-2">Read more <i class="fa fa-chevron-right"></i></h5>
|
||||
</a>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue-gradient">
|
||||
<h2 class="card-header-title">Marta</h2>
|
||||
<p>Deserve for her own card</p>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
|
||||
modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus
|
||||
non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem
|
||||
ullam corporis suscipit laboriosam.
|
||||
</p>
|
||||
<hr>
|
||||
<!--Twitter-->
|
||||
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter"> </i></a>
|
||||
<!--Linkedin-->
|
||||
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin"> </i></a>
|
||||
<!--Facebook-->
|
||||
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
|
||||
<!--Email-->
|
||||
<a class="p-2 m-2 fa-lg email-ic"><i class="fa fa-envelope"> </i></a>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Cascading panels-->
|
||||
|
||||
<!--Section: Reverse cascade-->
|
||||
<section>
|
||||
<h3 class="mb-4 dark-grey-text font-weight-bold"><strong>Reverse cascade</strong></h3>
|
||||
|
||||
<div class="row mb-5 pb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade wider reverse my-4 mx-3">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(135).jpg" class="card-img-top">
|
||||
<a href="#!">
|
||||
<div class="mask"></div>
|
||||
</a>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<!--Title-->
|
||||
<h4 class="card-title"><strong>My adventure</strong></h4>
|
||||
<h5 class="indigo-text"><strong>Photography</strong></h5>
|
||||
|
||||
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam
|
||||
rem aperiam.
|
||||
</p>
|
||||
|
||||
<!--Linkedin-->
|
||||
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin"> </i></a>
|
||||
<!--Twitter-->
|
||||
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter"> </i></a>
|
||||
<!--Dribbble-->
|
||||
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Reverse cascade-->
|
||||
|
||||
<!--Section: Additional cards-->
|
||||
<section class="mb-5">
|
||||
|
||||
<div class="row">
|
||||
<!--Subheading-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<h4 id="" class="mb-4 font-weight-bold dark-grey-text"><strong>Waves effect</strong></h4>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" class="card-img-top" alt="">
|
||||
<a href="#!">
|
||||
<div class="mask"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<!--Title-->
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<!--Text-->
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
||||
content.
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<!--Subheading-->
|
||||
<h4 id="" class="mb-4 font-weight-bold dark-grey-text"><strong>Basic example</strong></h4>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card image-->
|
||||
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg" alt="Card image cap">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<!--Title-->
|
||||
<h4 class="card-title"><strong>Card title</strong></h4>
|
||||
<!--Text-->
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
||||
content.
|
||||
</p>
|
||||
<a href="#" class="btn btn-pink btn-rounded">Button</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<!--Subheading-->
|
||||
<h4 id="" class="mb-4 font-weight-bold dark-grey-text"><strong>Testimonial card</strong></h4>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card testimonial-card" style="max-width: 22rem;">
|
||||
|
||||
<!--Bacground color-->
|
||||
<div class="card-up aqua-gradient">
|
||||
</div>
|
||||
|
||||
<!--Avatar-->
|
||||
<div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle img-fluid">
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<!--Name-->
|
||||
<h4 class="card-title dark-grey-text"><strong>Martha Smith</strong></h4>
|
||||
<hr>
|
||||
<!--Quotation-->
|
||||
<p class="card-text pt-2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci Sed ut perspiciatis
|
||||
unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
|
||||
aperiam. Facere modi sunt, quod quibusdam dignissimos neque rem nihil.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Additional cards-->
|
||||
|
||||
<!--Section: Overlay cards-->
|
||||
<section class="mb-5">
|
||||
<h3 id="" class="font-weight-bold dark-grey-text mb-4"><strong>Image overlay</strong></h3>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!-- Card -->
|
||||
<div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">
|
||||
|
||||
<!-- Content -->
|
||||
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
|
||||
<div>
|
||||
<h6 class="pink-text"><i class="fa fa-pie-chart"></i><strong> Marketing</strong></h6>
|
||||
<h3 class="card-title pt-4 pb-3 font-weight-bold"><strong>This is card title</strong></h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam,
|
||||
voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto
|
||||
nulla ipsum dignissimos. Odit sed qui, dolorum!.</p>
|
||||
<a class="btn btn-pink btn-rounded waves-effect waves-light"><i class="fa fa-clone left"></i> View project</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
</div>
|
||||
<!-- Card -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg');">
|
||||
<div class="text-white text-center d-flex align-items-center rgba-indigo-strong py-5 px-4">
|
||||
<div>
|
||||
<h6 class="orange-text"><i class="fa fa-desktop"></i><strong> Software</strong></h6>
|
||||
<h3 class="card-title pt-4 pb-3 font-weight-bold"><strong>This is card title</strong></h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam,
|
||||
voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto
|
||||
nulla ipsum dignissimos. Odit sed qui, dolorum!</p>
|
||||
<a class="btn btn-deep-orange btn-rounded waves-effect waves-light"><i class="fa fa-clone left"></i> View project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Overlay cards-->
|
||||
|
||||
<!--Section: Additional cards-->
|
||||
<section class="mb-5">
|
||||
|
||||
<div class="row">
|
||||
<!--Subheading-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<h4 id="" class="font-weight-bold mb-4 dark-grey-text"><strong>Action button</strong></h4>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
<!--Card image-->
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/food.jpg" class="card-img-top" alt="sample">
|
||||
<a>
|
||||
<div class="mask rgba-white-slight"></div>
|
||||
</a>
|
||||
</div>
|
||||
<!--/.Card image-->
|
||||
<!--Button-->
|
||||
<a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<!--Title-->
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<hr>
|
||||
<!--Text-->
|
||||
<p class="card-text mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
<!-- Card footer -->
|
||||
<div class="mdb-color lighten-3 text-center rounded-bottom">
|
||||
<ul class="list-unstyled list-inline font-small mt-3">
|
||||
<li class="list-inline-item pr-2 white-text"><i class="fa fa-clock-o pr-1"></i>05/10/2015</li>
|
||||
<li class="list-inline-item pr-2"><a href="#" class="white-text"><i class="fa fa-comments-o pr-1"></i>12</a></li>
|
||||
<li class="list-inline-item pr-2"><a href="#" class="white-text"><i class="fa fa-facebook pr-1"> </i>21</a></li>
|
||||
<li class="list-inline-item"><a href="#" class="white-text"><i class="fa fa-twitter pr-1"> </i>5</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Card footer -->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<!--Subheading-->
|
||||
<h4 id="" class="font-weight-bold mb-4 dark-grey-text"><strong>Light version</strong></h4>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<!--Card Light-->
|
||||
<div class="card">
|
||||
<!--Card image-->
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28131%29.jpg" class="card-img-top" alt="fern">
|
||||
<a>
|
||||
<div class="mask rgba-white-slight"></div>
|
||||
</a>
|
||||
</div>
|
||||
<!--/.Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<!--Social shares button-->
|
||||
<a class="activator mr-3"><i class="fa fa-share-alt"></i></a>
|
||||
<!--Title-->
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<hr>
|
||||
<!--Text-->
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a class="link-text"><h5>Read more <i class="fa fa-chevron-right"></i></h5></a>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card Light-->
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<!--Subheading-->
|
||||
<h4 id="" class="font-weight-bold mb-4 dark-grey-text"><strong>Dark card</strong></h4>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Card Dark-->
|
||||
<div class="card card-dark">
|
||||
<!--Card image-->
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2821%29.jpg" class="card-img-top" alt="work desk">
|
||||
<a>
|
||||
<div class="mask rgba-white-slight"></div>
|
||||
</a>
|
||||
</div>
|
||||
<!--/.Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body elegant-color white-text rounded-bottom">
|
||||
<!--Social shares button-->
|
||||
<a class="activator mr-3"><i class="fa fa-share-alt white-text"></i></a>
|
||||
<!--Title-->
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<hr class="hr-light">
|
||||
<!--Text-->
|
||||
<p class="font-small mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#!" class="white-text d-flex justify-content-end"><h5>Read more</h5><span><i class="fa fa-chevron-right pl-2"></i></span></a>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card Dark-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Additional cards-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/cards/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
435
html/html/components/collapse.html
Normal file
435
html/html/components/collapse.html
Normal file
@@ -0,0 +1,435 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
<link rel="stylesheet" href="../../css/style.css">
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboard<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Accordion</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Accordion-->
|
||||
<section>
|
||||
|
||||
<h2 class="mt-lg-5 mb-5 pb-4 font-weight-bold"><strong>Accordion</strong></h2>
|
||||
|
||||
<!--Accordion wrapper-->
|
||||
<div class="accordion z-depth-1" id="accordionEx" role="tablist" aria-multiselectable="true" style="max-width: 42rem;">
|
||||
|
||||
<!-- Accordion card -->
|
||||
<div class="card">
|
||||
|
||||
<!-- Card header -->
|
||||
<div class="card-header" role="tab" id="headingOne">
|
||||
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
<h5 class="mb-0">
|
||||
Collapsible Group Item #1 <i class="fa fa-angle-down rotate-icon"></i>
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Card body -->
|
||||
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionEx" >
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
|
||||
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
|
||||
moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch
|
||||
et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
|
||||
synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion card -->
|
||||
|
||||
<!-- Accordion card -->
|
||||
<div class="card">
|
||||
|
||||
<!-- Card header -->
|
||||
<div class="card-header" role="tab" id="headingTwo">
|
||||
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
<h5 class="mb-0">
|
||||
Collapsible Group Item #2 <i class="fa fa-angle-down rotate-icon"></i>
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Card body -->
|
||||
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordionEx" >
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
|
||||
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
|
||||
moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch
|
||||
et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
|
||||
synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion card -->
|
||||
|
||||
<!-- Accordion card -->
|
||||
<div class="card">
|
||||
|
||||
<!-- Card header -->
|
||||
<div class="card-header" role="tab" id="headingThree">
|
||||
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
<h5 class="mb-0">
|
||||
Collapsible Group Item #3 <i class="fa fa-angle-down rotate-icon"></i>
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Card body -->
|
||||
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordionEx">
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
|
||||
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
|
||||
moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch
|
||||
et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
|
||||
synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion card -->
|
||||
</div>
|
||||
<!--/.Accordion wrapper-->
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Accordion-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4 pt-5 mt-5">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/javascript/collapse/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
360
html/html/components/date.html
Normal file
360
html/html/components/date.html
Normal file
@@ -0,0 +1,360 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Date picker</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-5 mx-auto">
|
||||
<div class="card px-5 py-3 mt-5 mx-2">
|
||||
|
||||
<div class="md-form">
|
||||
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
|
||||
<label for="date-picker-example" class="active">Select date</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4 pt-5 mt-5">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/javascript/time-picker/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// Data Picker Initialization
|
||||
$('.datepicker').pickadate();
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
569
html/html/components/list.html
Normal file
569
html/html/components/list.html
Normal file
@@ -0,0 +1,569 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>List group</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
<h2 class="mt-lg-5 mb-5 font-weight-bold"><strong>List group</strong></h2>
|
||||
|
||||
<!--Section: Basic examples-->
|
||||
<section class="mb-5 pb-5">
|
||||
<h5 class="my-5 dark-grey-text font-weight-bold">Basic examples</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<ul class="list-group z-depth-1">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
|
||||
<ul class="list-group z-depth-1">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Dapibus ac facilisis in
|
||||
<span class="badge badge-primary badge-pill">2</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<span class="badge badge-primary badge-pill">1</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<span class="badge badge-primary badge-pill">10</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<span class="badge badge-primary badge-pill">5</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Basic examples-->
|
||||
|
||||
<!--Section: Linked items-->
|
||||
<section class="mb-5 pb-5">
|
||||
<h5 class="my-5 dark-grey-text font-weight-bold">Linked items</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<div class="list-group z-depth-1">
|
||||
<a href="#" class="list-group-item active"> Cras justo odio</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="list-group z-depth-1">
|
||||
<a href="#" class="list-group-item active">Cras justo odio</a>
|
||||
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
|
||||
<div class="list-group z-depth-1">
|
||||
<a href="#" class="list-group-item disabled">Cras justo odio</a>
|
||||
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Linked items-->
|
||||
|
||||
<!--Section: Reviews-->
|
||||
<section class="mb-5 pb-5">
|
||||
<h5 class="my-5 dark-grey-text font-weight-bold">Reviews</h5>
|
||||
|
||||
<!--First review-->
|
||||
<div class="media mb-3">
|
||||
<a class="media-left waves-light">
|
||||
<img class="rounded-circle" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg" alt="Generic placeholder image">
|
||||
</a>
|
||||
<div class="media-body ml-3">
|
||||
<h5 class="media-heading font-weight-bold">John Doe</h5>
|
||||
<ul class="rating">
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star grey-text"></i></li>
|
||||
<li><i class="fa fa-star grey-text"></i></li>
|
||||
</ul>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta.
|
||||
Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum
|
||||
sit id ullam eum vel delectus!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Second review-->
|
||||
<div class="media mb-3">
|
||||
<a class="media-left waves-light">
|
||||
<img class="rounded-circle" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-10.jpg" alt="Generic placeholder image">
|
||||
</a>
|
||||
<div class="media-body ml-3">
|
||||
<h5 class="media-heading font-weight-bold">Anna Casie</h5>
|
||||
<ul class="rating">
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
</ul>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta.
|
||||
Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum
|
||||
sit id ullam eum vel delectus!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Second review-->
|
||||
<div class="media mb-1">
|
||||
<a class="media-left waves-light">
|
||||
<img class="rounded-circle" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-16.jpg" alt="Generic placeholder image">
|
||||
</a>
|
||||
<div class="media-body ml-3">
|
||||
<h5 class="media-heading font-weight-bold">Maria Kate</h5>
|
||||
<ul class="rating">
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star amber-text"></i></li>
|
||||
<li><i class="fa fa-star grey-text"></i></li>
|
||||
</ul>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta.
|
||||
Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum
|
||||
sit id ullam eum vel delectus!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Reviews-->
|
||||
|
||||
<!--Section: Linked items-->
|
||||
<section class="mb-5 pb-5">
|
||||
<h5 class="my-5 dark-grey-text font-weight-bold">Custom content</h5>
|
||||
|
||||
<div class="list-group z-depth-1">
|
||||
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="font-weight-bold mb-3 mt-2">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="font-weight-bold mb-3 mt-2">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="font-weight-bold mb-3 mt-2">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Linked items-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/list-group/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
705
html/html/components/pagination.html
Normal file
705
html/html/components/pagination.html
Normal file
@@ -0,0 +1,705 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Pagination</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
|
||||
<h2 class="mt-lg-5 mb-5 font-weight-bold"><strong>Pagination</strong></h2>
|
||||
|
||||
<!--Section: Pagination-->
|
||||
<section class="mb-5 pb-5">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 col-lg-5">
|
||||
<h5 class="my-5 dark-grey-text font-weight-bold">Basic</h5>
|
||||
|
||||
<div class="row mb-5">
|
||||
<!--Pagination -->
|
||||
<nav class="my-4">
|
||||
<ul class="pagination pagination-circle pg-blue mb-0">
|
||||
|
||||
<!--First-->
|
||||
<li class="page-item disabled"><a class="page-link">First</a></li>
|
||||
|
||||
<!--Arrow left-->
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--Numbers-->
|
||||
<li class="page-item active"><a class="page-link">1</a></li>
|
||||
<li class="page-item"><a class="page-link">2</a></li>
|
||||
<li class="page-item"><a class="page-link">3</a></li>
|
||||
<li class="page-item"><a class="page-link">4</a></li>
|
||||
<li class="page-item"><a class="page-link">5</a></li>
|
||||
|
||||
<!--Arrow right-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--First-->
|
||||
<li class="page-item"><a class="page-link">Last</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<!--/Pagination -->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-5">
|
||||
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<nav>
|
||||
<ul class="pagination pg-blue">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<h5 class="my-5 dark-grey-text font-weight-bold">Colors</h5>
|
||||
|
||||
<!--Pagination blue-->
|
||||
<nav>
|
||||
<ul class="pagination pg-blue">
|
||||
<!--Arrow left-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--Numbers-->
|
||||
<li class="page-item active"><a class="page-link">1</a></li>
|
||||
<li class="page-item"><a class="page-link">2</a></li>
|
||||
<li class="page-item"><a class="page-link">3</a></li>
|
||||
<li class="page-item"><a class="page-link">4</a></li>
|
||||
<li class="page-item"><a class="page-link">5</a></li>
|
||||
|
||||
<!--Arrow right-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!--/Pagination blue-->
|
||||
|
||||
<!--Pagination red-->
|
||||
<nav>
|
||||
<ul class="pagination pg-red">
|
||||
<!--Arrow left-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--Numbers-->
|
||||
<li class="page-item active"><a class="page-link">1</a></li>
|
||||
<li class="page-item"><a class="page-link">2</a></li>
|
||||
<li class="page-item"><a class="page-link">3</a></li>
|
||||
<li class="page-item"><a class="page-link">4</a></li>
|
||||
<li class="page-item"><a class="page-link">5</a></li>
|
||||
|
||||
<!--Arrow right-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!--/Pagination red-->
|
||||
|
||||
<!--Pagination teal-->
|
||||
<nav>
|
||||
<ul class="pagination pg-teal">
|
||||
<!--Arrow left-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--Numbers-->
|
||||
<li class="page-item active"><a class="page-link">1</a></li>
|
||||
<li class="page-item"><a class="page-link">2</a></li>
|
||||
<li class="page-item"><a class="page-link">3</a></li>
|
||||
<li class="page-item"><a class="page-link">4</a></li>
|
||||
<li class="page-item"><a class="page-link">5</a></li>
|
||||
|
||||
<!--Arrow right-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!--/Pagination teal-->
|
||||
|
||||
<!--Pagination dark-->
|
||||
<nav>
|
||||
<ul class="pagination pg-dark">
|
||||
<!--Arrow left-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--Numbers-->
|
||||
<li class="page-item active"><a class="page-link">1</a></li>
|
||||
<li class="page-item"><a class="page-link">2</a></li>
|
||||
<li class="page-item"><a class="page-link">3</a></li>
|
||||
<li class="page-item"><a class="page-link">4</a></li>
|
||||
<li class="page-item"><a class="page-link">5</a></li>
|
||||
|
||||
<!--Arrow right-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!--/Pagination dark-->
|
||||
|
||||
<!--Pagination amber-->
|
||||
<nav>
|
||||
<ul class="pagination pg-amber">
|
||||
<!--Arrow left-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--Numbers-->
|
||||
<li class="page-item active"><a class="page-link">1</a></li>
|
||||
<li class="page-item"><a class="page-link">2</a></li>
|
||||
<li class="page-item"><a class="page-link">3</a></li>
|
||||
<li class="page-item"><a class="page-link">4</a></li>
|
||||
<li class="page-item"><a class="page-link">5</a></li>
|
||||
|
||||
<!--Arrow right-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!--/Pagination amber-->
|
||||
|
||||
<!--Pagination purple-->
|
||||
<nav>
|
||||
<ul class="pagination pg-purple">
|
||||
<!--Arrow left-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--Numbers-->
|
||||
<li class="page-item active"><a class="page-link">1</a></li>
|
||||
<li class="page-item"><a class="page-link">2</a></li>
|
||||
<li class="page-item"><a class="page-link">3</a></li>
|
||||
<li class="page-item"><a class="page-link">4</a></li>
|
||||
<li class="page-item"><a class="page-link">5</a></li>
|
||||
|
||||
<!--Arrow right-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!--/Pagination purple-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<h5 class="my-5 dark-grey-text font-weight-bold">Size</h5>
|
||||
<h6 class="title mt-5 dark-grey-text font-weight-bold">Large</h6>
|
||||
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<nav>
|
||||
<ul class="pagination pagination-lg">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
|
||||
<h6 class="title mt-4 mb-3 dark-grey-text font-weight-bold">Small</h6>
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</section>
|
||||
<!--Section: Background variants-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-5">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/pagination/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
510
html/html/components/panels.html
Normal file
510
html/html/components/panels.html
Normal file
@@ -0,0 +1,510 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Panels</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
<h2 class="font-weight-bold mt-lg-5 mb-5 pb-4"><strong>Panels</strong></h2>
|
||||
|
||||
<!--Section: Background variants-->
|
||||
<section class="mb-5 pb-5">
|
||||
<h5 class="my-5 dark-grey-text font-weight-bold">Background variants</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
|
||||
<!--Card indigo-->
|
||||
<div class="card indigo text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card indigo-->
|
||||
<br>
|
||||
<!--Card pink-->
|
||||
<div class="card pink lighten-2 text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card pink-->
|
||||
<br>
|
||||
<!--Card info-->
|
||||
<div class="card info-color text-center z-depth-2 mb-4">
|
||||
<div class="card-body">
|
||||
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card info-->
|
||||
|
||||
<!--Card white-->
|
||||
<div class="card white text-center z-depth-2 mb-4">
|
||||
<div class="card-body">
|
||||
<p class="dark-grey mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card white-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
|
||||
<!--Card red-->
|
||||
<div class="card red lighten-1 text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card red-->
|
||||
<br>
|
||||
<!--Card success-->
|
||||
<div class="card success-color text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card success-->
|
||||
<br>
|
||||
<!--Card mdb-->
|
||||
<div class="card mdb-color lighten-2 text-center z-depth-2 mb-4">
|
||||
<div class="card-body">
|
||||
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card mdb-->
|
||||
|
||||
<!--Card transparent-->
|
||||
<div class="card transparent text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="dark-grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card transparent-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Background variants-->
|
||||
|
||||
<!--Section: Basic examples-->
|
||||
<section class="mb-5">
|
||||
<h5 class="my-5 dark-grey-text font-weight-bold">Basic examples</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card card-body">
|
||||
<h4 class="card-title">Panel title</h4>
|
||||
<p class="card-text mt-3 mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<div class="flex-row">
|
||||
<a class="card-link">Card link</a>
|
||||
<a class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card">
|
||||
<div class="card-header deep-orange lighten-1 white-text">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a class="btn btn-deep-orange">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<div class="card-header success-color white-text">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a class="btn btn-success btn-sm">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer text-muted success-color white-text">
|
||||
<p class="mb-0">2 days ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Basic examples-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/panels/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
371
html/html/components/popovers.html
Normal file
371
html/html/components/popovers.html
Normal file
@@ -0,0 +1,371 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Popovers</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-xl-10 mx-auto">
|
||||
|
||||
<div class="card py-5 mt-5">
|
||||
|
||||
<div class="card-body mx-auto">
|
||||
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="popover on left" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on left</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="popover on top" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on top</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="popover on bottom" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on bottom</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="popover on right" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on right</button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4 pt-5 mt-5 pb-5">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/javascript/popovers/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// popovers Initialization
|
||||
$(function () {
|
||||
$('[data-toggle="popover"]').popover()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
472
html/html/components/progress.html
Normal file
472
html/html/components/progress.html
Normal file
@@ -0,0 +1,472 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Progress bars</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
|
||||
<section>
|
||||
|
||||
<div class="row">
|
||||
<h2 class="mt-lg-5 mb-5 pb-4 font-weight-bold"><strong>Progress bars</strong></h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
|
||||
<h5 class="mb-3 dark-grey-text font-weight-bold">Basic examples</h5>
|
||||
|
||||
<div class="mb-2 progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="my-2 progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="my-2 progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="my-2 progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="my-2 progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<h5 class="mt-5 mb-3 pt-4 dark-grey-text font-weight-bold">Contextual alternatives</h5>
|
||||
|
||||
<div class="my-2 progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="my-2 progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="my-2 progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="my-2 progress">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<h5 class="mt-5 mb-3 pt-4 dark-grey-text font-weight-bold">Infinite loading</h5>
|
||||
|
||||
<div class="progress primary-color-dark">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row mb-5">
|
||||
<h5 class="mt-5 mb-3 pt-4 dark-grey-text font-weight-bold">Circles</h5>
|
||||
</div>
|
||||
|
||||
<div class="row mb-5">
|
||||
<div class="col-md-4">
|
||||
|
||||
<!--Big blue-->
|
||||
<div class="preloader-wrapper big active"><div class="spinner-layer spinner-blue-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<!--Medium red-->
|
||||
<div class="preloader-wrapper active"><div class="spinner-layer spinner-red-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<!--Small yellow-->
|
||||
<div class="preloader-wrapper small active"><div class="spinner-layer spinner-yellow-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row mb-5">
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<!--Big blue-->
|
||||
<div class="preloader-wrapper big active"><div class="spinner-layer spinner-blue-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>
|
||||
|
||||
<!--Medium red-->
|
||||
<div class="preloader-wrapper active"><div class="spinner-layer spinner-red-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>
|
||||
|
||||
<!--Small yellow-->
|
||||
<div class="preloader-wrapper small active"><div class="spinner-layer spinner-yellow-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="preloader-wrapper big active crazy"><div class="spinner-layer spinner-red-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="preloader-wrapper small active crazy"><div class="spinner-layer spinner-green-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/progress-bars/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
516
html/html/components/stepper.html
Normal file
516
html/html/components/stepper.html
Normal file
@@ -0,0 +1,516 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Steppers</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
<!--Section: Horizontal stepper-->
|
||||
<section class="mb-5">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue-gradient">
|
||||
<h5 class="mb-0">Horizontal stepper</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center table-responsive">
|
||||
|
||||
<!-- Horizontal Steppers -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
|
||||
<!-- Stepers Wrapper -->
|
||||
<ul class="stepper stepper-horizontal">
|
||||
|
||||
<!-- First Step -->
|
||||
<li class="completed">
|
||||
<a href="#!">
|
||||
<span class="circle">1</span>
|
||||
<span class="label">First step</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Second Step -->
|
||||
<li class="active">
|
||||
<a href="#!">
|
||||
<span class="circle">2</span>
|
||||
<span class="label">Second step</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Third Step -->
|
||||
<li class="warning">
|
||||
<a href="#!">
|
||||
<span class="circle"><i class="fa fa-warning"></i></span>
|
||||
<span class="label">Third step</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- /.Stepers Wrapper -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.Horizontal Steppers -->
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Horizontal stepper-->
|
||||
|
||||
<!--Section: Horizontal stepper-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header peach-gradient">
|
||||
<h5 class="mb-0">Vertical stepper</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
|
||||
|
||||
<!-- Vertical Steppers -->
|
||||
<div class="row mt-1">
|
||||
<div class="col-md-12">
|
||||
|
||||
<!-- Stepers Wrapper -->
|
||||
<ul class="stepper stepper-vertical">
|
||||
|
||||
<!-- First Step -->
|
||||
<li class="completed">
|
||||
<a href="#!">
|
||||
<span class="circle">1</span>
|
||||
<span class="label">First step</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Second Step -->
|
||||
<li class="active">
|
||||
|
||||
<!--Section Title -->
|
||||
<a href="#!">
|
||||
<span class="circle">2</span>
|
||||
<span class="label">Second step</span>
|
||||
</a>
|
||||
|
||||
<!-- Section Description -->
|
||||
<div class="step-content grey lighten-3">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate
|
||||
facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque
|
||||
nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi
|
||||
veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque
|
||||
quia excepturi adipisci pariatur totam, atque odit fugiat.</p>
|
||||
<p>Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores
|
||||
tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas
|
||||
fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Third Step -->
|
||||
<li class="warning">
|
||||
<a href="#!">
|
||||
<span class="circle"><i class="fa fa-warning"></i></span>
|
||||
<span class="label">Third step</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Fourth Step -->
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="circle">4</span>
|
||||
<span class="label">Fourth step</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- /.Stepers Wrapper -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Steppers Navigation -->
|
||||
<div class="row mt-1">
|
||||
<div class="col-md-12 text-right">
|
||||
<button class="btn btn btn-flat waves-effect">Cancel</button>
|
||||
<button class="btn btn-primary">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.Vertical Steppers -->
|
||||
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Horizontal stepper-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4 pt-5 mt-5 pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/bootstrap-steps-stepper/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
839
html/html/components/tabs.html
Normal file
839
html/html/components/tabs.html
Normal file
@@ -0,0 +1,839 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Tabs & pills</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
<h2 class="mt-lg-5 mb-5 pb-4 font-weight-bold"><strong>Tabs & pills</strong></h2>
|
||||
|
||||
<!--Basic example-->
|
||||
<section class="section">
|
||||
|
||||
<h5 class="mt-5 mb-5 dark-grey-text font-weight-bold">Basic examples</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-5">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs nav-justified">
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Follow</a>
|
||||
</li>
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link" data-toggle="tab" href="#panel3" role="tab">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Tab panels -->
|
||||
<div class="tab-content card">
|
||||
<!--Panel 1-->
|
||||
<div class="tab-pane fade in show active" id="panel1" role="tabpanel">
|
||||
<br>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 1-->
|
||||
<!--Panel 2-->
|
||||
<div class="tab-pane fade" id="panel2" role="tabpanel">
|
||||
<br>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 2-->
|
||||
<!--Panel 3-->
|
||||
<div class="tab-pane fade" id="panel3" role="tabpanel">
|
||||
<br>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 3-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs nav-justified indigo" role="tablist">
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link active" data-toggle="tab" href="#panel5" role="tab"><i class="fa fa-user"></i> Profile</a>
|
||||
</li>
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link" data-toggle="tab" href="#panel6" role="tab"><i class="fa fa-heart"></i> Follow</a>
|
||||
</li>
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link" data-toggle="tab" href="#panel7" role="tab"><i class="fa fa-envelope"></i> Mail</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Tab panels -->
|
||||
<div class="tab-content">
|
||||
<!--Panel 1-->
|
||||
<div class="tab-pane fade in show active" id="panel5" role="tabpanel">
|
||||
<br>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 1-->
|
||||
<!--Panel 2-->
|
||||
<div class="tab-pane fade" id="panel6" role="tabpanel">
|
||||
<br>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 2-->
|
||||
<!--Panel 3-->
|
||||
<div class="tab-pane fade" id="panel7" role="tabpanel">
|
||||
<br>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 3-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<ul class="nav md-pills nav-justified pills-deep-orange">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" href="#panel4" role="tab">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#panel11" role="tab">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#panel12" role="tab">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#panel13" role="tab">Help</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab panels -->
|
||||
<div class="tab-content">
|
||||
|
||||
<!--Panel 1-->
|
||||
<div class="tab-pane fade in show active" id="panel11" role="tabpanel">
|
||||
<br>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
|
||||
</div>
|
||||
<!--/.Panel 1-->
|
||||
|
||||
<!--Panel 2-->
|
||||
<div class="tab-pane fade" id="panel12" role="tabpanel">
|
||||
<br>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
|
||||
</div>
|
||||
<!--/.Panel 2-->
|
||||
|
||||
<!--Panel 3-->
|
||||
<div class="tab-pane fade" id="panel13" role="tabpanel">
|
||||
<br>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
|
||||
</div>
|
||||
<!--/.Panel 3-->
|
||||
|
||||
<!--Panel 4-->
|
||||
<div class="tab-pane fade" id="panel14" role="tabpanel">
|
||||
<br>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
|
||||
</div>
|
||||
<!--/.Panel 4-->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Basic example-->
|
||||
|
||||
<!--Classic tabs-->
|
||||
<section class="section mb-5 pb-4">
|
||||
<h5 class="mt-5 mb-5 dark-grey-text font-weight-bold">Classic tabs</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 my-3">
|
||||
<div class="classic-tabs">
|
||||
<!-- Nav tabs -->
|
||||
<div class="tabs-wrapper">
|
||||
<ul class="nav tabs-blue" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light active waves-effect waves-light" data-toggle="tab" href="#panel36" role="tab">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel37" role="tab">Follow</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel38" role="tab">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel39" role="tab">Be awesome</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Tab panels -->
|
||||
<div class="tab-content card">
|
||||
<!--Panel 1-->
|
||||
<div class="tab-pane fade in show active" id="panel36" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 1-->
|
||||
<!--Panel 2-->
|
||||
<div class="tab-pane fade" id="panel37" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 2-->
|
||||
<!--Panel 3-->
|
||||
<div class="tab-pane fade" id="panel38" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 3-->
|
||||
<!--Panel 4-->
|
||||
<div class="tab-pane fade" id="panel39" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 4-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-3">
|
||||
<div class="classic-tabs">
|
||||
<!-- Nav tabs -->
|
||||
<div class="tabs-wrapper">
|
||||
<ul class="nav tabs-grey" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light active waves-effect waves-light" data-toggle="tab" href="#panel71" role="tab"><i class="fa fa-user fa-2x" aria-hidden="true"></i><br> Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel72" role="tab"><i class="fa fa-heart fa-2x" aria-hidden="true"></i><br> Follow</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel73" role="tab"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i><br> Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel74" role="tab"><i class="fa fa-star fa-2x" aria-hidden="true"></i><br> Be awesome</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Tab panels -->
|
||||
<div class="tab-content card">
|
||||
<!--Panel 1-->
|
||||
<div class="tab-pane fade in show active" id="panel71" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 1-->
|
||||
<!--Panel 2-->
|
||||
<div class="tab-pane fade" id="panel72" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 2-->
|
||||
<!--Panel 3-->
|
||||
<div class="tab-pane fade" id="panel73" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 3-->
|
||||
<!--Panel 4-->
|
||||
<div class="tab-pane fade" id="panel74" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 4-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 my-3">
|
||||
<div class="classic-tabs">
|
||||
<!-- Nav tabs -->
|
||||
<div class="tabs-wrapper">
|
||||
<ul class="nav tabs-pink" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light active waves-effect waves-light" data-toggle="tab" href="#panel75" role="tab"><i class="fa fa-user fa-2x" aria-hidden="true"></i><br> Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel76" role="tab"><i class="fa fa-heart fa-2x" aria-hidden="true"></i><br> Follow</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel77" role="tab"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i><br> Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel78" role="tab"><i class="fa fa-star fa-2x" aria-hidden="true"></i><br> Be awesome</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Tab panels -->
|
||||
<div class="tab-content card">
|
||||
<!--Panel 1-->
|
||||
<div class="tab-pane fade in show active" id="panel75" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 1-->
|
||||
<!--Panel 2-->
|
||||
<div class="tab-pane fade" id="panel76" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 2-->
|
||||
<!--Panel 3-->
|
||||
<div class="tab-pane fade" id="panel77" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 3-->
|
||||
<!--Panel 4-->
|
||||
<div class="tab-pane fade" id="panel78" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 4-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 my-3">
|
||||
<div class="classic-tabs">
|
||||
<!-- Nav tabs -->
|
||||
<div class="tabs-wrapper">
|
||||
<ul class="nav tabs-success" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light active waves-effect waves-light" data-toggle="tab" href="#panel79" role="tab"><i class="fa fa-user fa-2x" aria-hidden="true"></i><br> Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel80" role="tab"><i class="fa fa-heart fa-2x" aria-hidden="true"></i><br> Follow</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel81" role="tab"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i><br> Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel82" role="tab"><i class="fa fa-star fa-2x" aria-hidden="true"></i><br> Be awesome</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Tab panels -->
|
||||
<div class="tab-content card">
|
||||
<!--Panel 1-->
|
||||
<div class="tab-pane fade in show active" id="panel79" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 1-->
|
||||
<!--Panel 2-->
|
||||
<div class="tab-pane fade" id="panel80" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 2-->
|
||||
<!--Panel 3-->
|
||||
<div class="tab-pane fade" id="panel81" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 3-->
|
||||
<!--Panel 4-->
|
||||
<div class="tab-pane fade" id="panel82" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 4-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 my-3">
|
||||
<div class="classic-tabs">
|
||||
<!-- Nav tabs -->
|
||||
<div class="tabs-wrapper">
|
||||
<ul class="nav tabs-primary" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light active waves-effect waves-light" data-toggle="tab" href="#panel83" role="tab"><i class="fa fa-user fa-2x" aria-hidden="true"></i><br> Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel84" role="tab"><i class="fa fa-heart fa-2x" aria-hidden="true"></i><br> Follow</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel85" role="tab"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i><br> Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light waves-effect waves-light" data-toggle="tab" href="#panel86" role="tab"><i class="fa fa-star fa-2x" aria-hidden="true"></i><br> Be awesome</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Tab panels -->
|
||||
<div class="tab-content card">
|
||||
<!--Panel 1-->
|
||||
<div class="tab-pane fade in show active" id="panel83" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 1-->
|
||||
<!--Panel 2-->
|
||||
<div class="tab-pane fade" id="panel84" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 2-->
|
||||
<!--Panel 3-->
|
||||
<div class="tab-pane fade" id="panel85" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 3-->
|
||||
<!--Panel 4-->
|
||||
<div class="tab-pane fade" id="panel86" role="tabpanel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
|
||||
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
|
||||
Tempora, placeat ratione porro voluptate odit minima.</p>
|
||||
</div>
|
||||
<!--/.Panel 4-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Classic tabs-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/tabs/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
395
html/html/components/tags.html
Normal file
395
html/html/components/tags.html
Normal file
@@ -0,0 +1,395 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Tags, Labels & Badges</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
<h2 class="mt-lg-5 mb-5 pb-4 font-weight-bold"><strong>Tags, Labels & Badges</strong></h2>
|
||||
|
||||
<!--Basic example-->
|
||||
<section class="section">
|
||||
|
||||
<h5 class="mt-5 mb-5 dark-grey-text font-weight-bold">Basic examples</h5>
|
||||
|
||||
<div class="row pb-4">
|
||||
|
||||
<div class="col-lg-4 col-md-12 mt-2 mb-4">
|
||||
<div class="chip pink lighten-4">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Contact Person"> Jane Doe
|
||||
</div>
|
||||
<div class="chip pink lighten-4">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Contact Person"> Anna Black
|
||||
</div>
|
||||
|
||||
<div class="chip pink lighten-4">
|
||||
Tag 1
|
||||
<i class="close fa fa-times"></i>
|
||||
</div>
|
||||
<div class="chip pink lighten-4">
|
||||
Tag 2
|
||||
<i class="close fa fa-times"></i>
|
||||
</div>
|
||||
<div class="chip pink lighten-4">
|
||||
Tag 3
|
||||
<i class="close fa fa-times"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-md-8 mb-4">
|
||||
<h1>Example heading <span class="badge red">New</span></h1>
|
||||
<h2>Example heading <span class="badge blue">New</span></h2>
|
||||
<h3>Example heading <span class="badge pink">New</span></h3>
|
||||
<h4>Example heading <span class="badge green">New</span></h4>
|
||||
<h5>Example heading <span class="badge grey">New</span></h5>
|
||||
<h6>Example heading <span class="badge indigo">New</span></h6>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-4 mb-4">
|
||||
<span class="badge badge-default">Default</span> <br>
|
||||
<span class="badge badge-primary">Primary</span> <br>
|
||||
<span class="badge badge-success">Success</span> <br>
|
||||
<span class="badge badge-info">Info</span> <br>
|
||||
<span class="badge badge-warning">Warning</span> <br>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Basic example-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/badges/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
378
html/html/components/time.html
Normal file
378
html/html/components/time.html
Normal file
@@ -0,0 +1,378 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Time picker</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-5 ml-auto">
|
||||
<div class="card px-5 py-3 mt-5 mx-2">
|
||||
|
||||
<div class="md-form">
|
||||
<input placeholder="Selected time" type="text" id="input_starttime" class="form-control timepicker">
|
||||
<label for="input_starttime" class="active">Light version, 12hours</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-5 mr-auto">
|
||||
<div class="card px-5 py-3 mt-5 mx-2">
|
||||
|
||||
<div class="md-form">
|
||||
<input placeholder="Selected time" type="text" id="input_endtime" class="form-control timepicker">
|
||||
<label for="input_starttime" class="active">Dark version, 24 hours</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4 pt-5 mt-5">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/javascript/time-picker/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// Time Picker Initialization
|
||||
$('#input_starttime').pickatime({
|
||||
twelvehour: true
|
||||
});
|
||||
$('#input_endtime').pickatime({
|
||||
// 12 or 24 hour
|
||||
twelvehour: false,
|
||||
// Light or Dark theme
|
||||
darktheme: true
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
368
html/html/components/tooltips.html
Normal file
368
html/html/components/tooltips.html
Normal file
@@ -0,0 +1,368 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Tooltips</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-xl-10 mx-auto">
|
||||
|
||||
<div class="card p-5 mt-5">
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4 pt-5 mt-5 pb-5">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/javascript/tooltips/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// Tooltips Initialization
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
342
html/html/css/_navigation.html
Normal file
342
html/html/css/_navigation.html
Normal file
@@ -0,0 +1,342 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Material Design for Bootstrap</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
666
html/html/css/animations.html
Normal file
666
html/html/css/animations.html
Normal file
@@ -0,0 +1,666 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Animations</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Scroll-->
|
||||
<section>
|
||||
|
||||
<h2 class="mt-lg-5 mb-5 font-weight-bold dark-grey-text"><strong>Animations</strong></h2>
|
||||
|
||||
<style>
|
||||
.wow {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="mb-5">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" alt="A view on mountains." class="img-fluid wow bounceInUp">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(32).jpg" alt="Cottage on a lake surrounded by mountains."
|
||||
class="img-fluid wow tada">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" alt="Cyclist riding down the mountain path."
|
||||
class="img-fluid wow fadeInLeft">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="View on mountains from mountain top."
|
||||
class="img-fluid wow fadeInRight">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).jpg" alt="Rocky shore in the morning." class="img-fluid wow fadeInUp"
|
||||
data-wow-delay="0.2s">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Rocky shore in the morning." class="img-fluid wow fadeInUp"
|
||||
data-wow-delay="0.6s">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
<!--Section: Scroll-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Intro-->
|
||||
<section id="showcase">
|
||||
|
||||
<h4 class="mt-4 mb-5 dark-grey-text"><strong>70+ CSS animations</strong></h4>
|
||||
|
||||
<!--Description-->
|
||||
<p class="description pb-4">A bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home
|
||||
pages, sliders, and general just-add-water-awesomeness.</p>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section class="text-center mt-5">
|
||||
|
||||
<span id="animationSandbox" style="display: inline-block;"><img src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png" alt="Transparent MDB Logo" id="animated-img"></span>
|
||||
|
||||
<form>
|
||||
|
||||
<h3 class="my-5">Select an animation</h3>
|
||||
|
||||
<ul class="list-unstyled">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-6">
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>ATTENTION SEEKERS</option>
|
||||
<option value="bounce">- bounce</option>
|
||||
<option value="flash">- flash</option>
|
||||
<option value="pulse">- pulse</option>
|
||||
<option value="rubberBand">- rubberBand</option>
|
||||
<option value="shake">- shake</option>
|
||||
<option value="swing">- swing</option>
|
||||
<option value="tada">- tada</option>
|
||||
<option value="wobble">- wobble</option>
|
||||
<option value="jackInTheBox">- jackInTheBox</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>BOUNCING ENTRANCES</option>
|
||||
<option value="bounceIn">- bounceIn</option>
|
||||
<option value="bounceInDown">- bounceInDown</option>
|
||||
<option value="bounceInLeft">- bounceInLeft</option>
|
||||
<option value="bounceInRight">- bounceInRight</option>
|
||||
<option value="bounceInUp">- bounceInUp</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>BOUNCING EXITS</option>
|
||||
<option value="bounceOut">- bounceOut</option>
|
||||
<option value="bounceOutDown">- bounceOutDown</option>
|
||||
<option value="bounceOutLeft">- bounceOutLeft</option>
|
||||
<option value="bounceOutRight">- bounceOutRight</option>
|
||||
<option value="bounceOutUp">- bounceOutUp</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>FADING ENTRANCES</option>
|
||||
<option value="fadeIn">- fadeIn</option>
|
||||
<option value="fadeInDown">- fadeInDown</option>
|
||||
<option value="fadeInDownBig">- fadeInDownBig</option>
|
||||
<option value="fadeInLeft">- fadeInLeft</option>
|
||||
<option value="fadeInLeftBig">- fadeInLeftBig</option>
|
||||
<option value="fadeInRight">- fadeInRight</option>
|
||||
<option value="fadeInRightBig">- fadeInRightBig</option>
|
||||
<option value="fadeInUp">- fadeInUp</option>
|
||||
<option value="fadeInUpBig">- fadeInUpBig</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>FADING EXITS</option>
|
||||
<option value="fadeOut">- fadeOut</option>
|
||||
<option value="fadeOutDown">- fadeOutDown</option>
|
||||
<option value="fadeOutDownBig">- fadeOutDownBig</option>
|
||||
<option value="fadeOutLeft">- fadeOutLeft</option>
|
||||
<option value="fadeOutLeftBig">- fadeOutLeftBig</option>
|
||||
<option value="fadeOutRight">- fadeOutRight</option>
|
||||
<option value="fadeOutRightBig">- fadeOutRightBig</option>
|
||||
<option value="fadeOutUp">- fadeOutUp</option>
|
||||
<option value="fadeOutUpBig">- fadeOutUpBig</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>FLIPPERS</option>
|
||||
<option value="flip">- flip</option>
|
||||
<option value="flipInX">- flipInX</option>
|
||||
<option value="flipInY">- flipInY</option>
|
||||
<option value="flipOutX">- flipOutX</option>
|
||||
<option value="flipOutY">- flipOutY</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>LIGHTSPEED</option>
|
||||
<option value="lightSpeedIn">- lightSpeedIn</option>
|
||||
<option value="lightSpeedOut">- lightSpeedOut</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>ROTATING ENTRANCES</option>
|
||||
<option value="rotateIn">- rotateIn</option>
|
||||
<option value="rotateInDownLeft">- rotateInDownLeft</option>
|
||||
<option value="rotateInDownRight">- rotateInDownRight</option>
|
||||
<option value="rotateInUpLeft">- rotateInUpLeft</option>
|
||||
<option value="rotateInUpRight">- rotateInUpRight</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>ROTATING EXITS</option>
|
||||
<option value="rotateOut">- rotateOut</option>
|
||||
<option value="rotateOutDownLeft">- rotateOutDownLeft</option>
|
||||
<option value="rotateOutDownRight">- rotateOutDownRight</option>
|
||||
<option value="rotateOutUpLeft">- rotateOutUpLeft</option>
|
||||
<option value="rotateOutUpRight">- rotateOutUpRight</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>SLIDING ENTRANCES</option>
|
||||
<option value="slideInUp">- slideInUp</option>
|
||||
<option value="slideInDown">- slideInDown</option>
|
||||
<option value="slideInLeft">- slideInLeft</option>
|
||||
<option value="slideInRight">- slideInRight</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>SLIDING EXITS</option>
|
||||
<option value="slideOutUp">- slideOutUp</option>
|
||||
<option value="slideOutDown">- slideOutDown</option>
|
||||
<option value="slideOutLeft">- slideOutLeft</option>
|
||||
<option value="slideOutRight">- slideOutRight</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>ZOOM ENTRANCES</option>
|
||||
<option value="zoomIn">zoomIn</option>
|
||||
<option value="zoomInDown">zoomInDown</option>
|
||||
<option value="zoomInLeft">zoomInLeft</option>
|
||||
<option value="zoomInRight">zoomInRight</option>
|
||||
<option value="zoomInUp">zoomInUp</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>ZOOM EXITS</option>
|
||||
<option value="zoomOut">- zoomOut</option>
|
||||
<option value="zoomOutDown">- zoomOutDown</option>
|
||||
<option value="zoomOutLeft">- zoomOutLeft</option>
|
||||
<option value="zoomOutRight">- zoomOutRight</option>
|
||||
<option value="zoomOutUp">- zoomOutUp</option>
|
||||
</select>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<li>
|
||||
<select class="mdb-select js--animations">
|
||||
<option value="" disabled selected>SPECIALS</option>
|
||||
<option value="hinge">- hinge</option>
|
||||
<option value="rollIn">- rollIn</option>
|
||||
<option value="rollOut">- rollOut</option>
|
||||
|
||||
</select>
|
||||
</li>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
</section>
|
||||
<!--/Section: Intro-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center mt-5">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/css/animations/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// Animations Initalization
|
||||
new WOW().init();
|
||||
</script>
|
||||
|
||||
<!-- Animation showcase -->
|
||||
<script>
|
||||
function testAnim(x) {
|
||||
$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
|
||||
$(this).removeClass();
|
||||
});
|
||||
};
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.js--triggerAnimation').click(function (e) {
|
||||
e.preventDefault();
|
||||
var anim = $('.js--animations').val();
|
||||
testAnim(anim);
|
||||
});
|
||||
|
||||
$('.js--animations').change(function () {
|
||||
var anim = $(this).val();
|
||||
testAnim(anim);
|
||||
});
|
||||
});
|
||||
|
||||
// Material Select Initialization
|
||||
$(document).ready(function () {
|
||||
$('.mdb-select').material_select();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
550
html/html/css/code.html
Normal file
550
html/html/css/code.html
Normal file
@@ -0,0 +1,550 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Code</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<style>
|
||||
.code-toolbar {
|
||||
background-color: #fff;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--Section: Intro-->
|
||||
<section id="introduction">
|
||||
|
||||
<!--Title-->
|
||||
<h2 class="font-weight-bold mt-5"><strong>Code</strong></h2>
|
||||
|
||||
<!--Description-->
|
||||
<p class="description">Styles for inline code snippets and longer, multiline blocks of code.</p>
|
||||
|
||||
</section>
|
||||
<!--/Section: Intro-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: -->
|
||||
<section id="inline-code">
|
||||
|
||||
<!--Title-->
|
||||
<h4 class="mb-3 dark-grey-text font-weight-bold"><strong>Inline code</strong></h4>
|
||||
|
||||
<!--Description-->
|
||||
<p class="description">Wrap inline snippets of code with <code><code></code>. Be sure to escape HTML angle brackets.</p>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<p>For example, <code><section></code> should be wrapped as inline.</p>
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
<!--Section: Code-->
|
||||
<section>
|
||||
<pre class="code-toolbar">
|
||||
<code class="language-markup">
|
||||
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
|
||||
</code>
|
||||
</pre>
|
||||
</section>
|
||||
<!--Section: Code-->
|
||||
|
||||
</section>
|
||||
<!--/Section: -->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: -->
|
||||
<section id="code-blocks">
|
||||
|
||||
<!--Title-->
|
||||
<h4 class="mb-3 dark-grey-text font-weight-bold"><strong>Code blocks</strong></h4>
|
||||
|
||||
<!--Description-->
|
||||
<p class="description">Use <code><pre></code>s for multiple lines of code. Once again, be sure to escape any angle brackets
|
||||
in the code for proper rendering. You may optionally add the <code>.pre-scrollable</code> class, which
|
||||
will set a max-height of 350px and provide a y-axis scrollbar.</p>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<pre><code><p>Sample text here...</p>
|
||||
<p>And another line of sample text here...</p>
|
||||
</code></pre>
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
<!--Section: Code-->
|
||||
<section>
|
||||
<pre class="code-toolbar">
|
||||
<code class="language-markup">
|
||||
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
|
||||
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
|
||||
</code></pre>
|
||||
</code>
|
||||
</pre>
|
||||
</section>
|
||||
<!--Section: Code-->
|
||||
|
||||
</section>
|
||||
<!--/Section: -->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: -->
|
||||
<section id="variables">
|
||||
|
||||
<!--Title-->
|
||||
<h4 class="mb-3 dark-grey-text font-weight-bold"><strong>Variables</strong></h4>
|
||||
|
||||
<!--Description-->
|
||||
<p class="description">For indicating variables use the <code><var></code> tag.</p>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
<!--Section: Code-->
|
||||
<section>
|
||||
<pre class="code-toolbar">
|
||||
<code class="language-markup">
|
||||
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
|
||||
</code>
|
||||
</pre>
|
||||
</section>
|
||||
<!--Section: Code-->
|
||||
|
||||
</section>
|
||||
<!--/Section: -->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: -->
|
||||
<section id="user-input">
|
||||
|
||||
<!--Title-->
|
||||
<h4 class="mb-3 dark-grey-text font-weight-bold"><strong>User input</strong></h4>
|
||||
|
||||
<!--Description-->
|
||||
<p class="description">Use the <code><kbd></code> to indicate input that is typically entered via keyboard.</p>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.</p>
|
||||
|
||||
<p>To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
</p>
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
<!--Section: Code-->
|
||||
<section>
|
||||
<pre class="code-toolbar">
|
||||
<code class="language-markup">
|
||||
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
|
||||
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
</code>
|
||||
</pre>
|
||||
</section>
|
||||
<!--Section: Code-->
|
||||
|
||||
</section>
|
||||
<!--/Section: -->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: -->
|
||||
<section id="sample-output" class="pb-3">
|
||||
|
||||
<!--Title-->
|
||||
<h4 class="mb-3 dark-grey-text font-weight-bold"><strong>Sample output</strong></h4>
|
||||
|
||||
<!--Description-->
|
||||
<p class="description">For indicating sample output from a program use the <code>samp</code> tag.</p>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
<!--Section: Code-->
|
||||
<section>
|
||||
<pre class="code-toolbar">
|
||||
<code class="language-markup">
|
||||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||||
</code>
|
||||
</pre>
|
||||
</section>
|
||||
<!--Section: Code-->
|
||||
|
||||
</section>
|
||||
<!--/Section: -->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/content/bootstrap-code/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1688
html/html/css/colors.html
Normal file
1688
html/html/css/colors.html
Normal file
File diff suppressed because it is too large
Load Diff
827
html/html/css/grid.html
Normal file
827
html/html/css/grid.html
Normal file
@@ -0,0 +1,827 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Grid system</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<h2 class="mt-5 font-weight-bold"><strong>Grid system</strong></h2>
|
||||
|
||||
<!--Section: Five grid tiers-->
|
||||
<section class="mt-5">
|
||||
|
||||
<h4 class="my-5 dark-grey-text font-weight-bold"><strong>Five grid tiers</strong></h4>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-sm-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-sm-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-sm-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-sm-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-sm-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-sm-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-lg-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-lg-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-lg-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-xl-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-xl-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-xl-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Five grid tiers-->
|
||||
|
||||
<!--Section: Three equal columns-->
|
||||
<section class="mb-5">
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<h4 class="my-5 pt-4 dark-grey-text font-weight-bold"><strong>Three equal columns</strong></h4>
|
||||
|
||||
<div class="row mt-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Three equal columns-->
|
||||
|
||||
<!--Section: Two columns-->
|
||||
<section class="mb-5">
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<h4 class="my-5 pt-4 dark-grey-text font-weight-bold"><strong>Two columns</strong></h4>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-8">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-md-8</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Two columns-->
|
||||
|
||||
<!--Section: Mixed: mobile and desktop-->
|
||||
<section class="mb-5">
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<h4 class="my-5 pt-4 dark-grey-text font-weight-bold"><strong>Mixed: mobile and desktop</strong></h4>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-12 .col-md-8</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-6 .col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-6 .col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-6 .col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-6 .col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-6">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-md-6</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-6">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-6</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Mixed: mobile and desktop-->
|
||||
|
||||
<!--Section: Mixed: mobile, tablet, and desktop-->
|
||||
<section class="mb-5">
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<h4 class="my-5 pt-4 dark-grey-text font-weight-bold"><strong>Mixed: mobile, tablet, and desktop</strong></h4>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-12 col-sm-6 col-lg-8">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-12 .col-sm-6 .col-lg-8</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-6 col-lg-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-6 .col-lg-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-6 col-sm-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-6. col-sm-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-6 col-sm-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-6 .col-sm-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-6 col-sm-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class=" mb-0">.col-6 .col-sm-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Mixed: mobile, tablet, and desktop-->
|
||||
|
||||
<!--Section: Two columns with two nested columns-->
|
||||
<section class="mb-5 pb-4">
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<h4 class="my-5 pt-4 dark-grey-text font-weight-bold"><strong>Two columns with two nested columns</strong></h4>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-8">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-4 mt-2">.col-md-8</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card grey lighten-2 text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-md-6</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card grey lighten-2 text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">.col-md-6</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body">
|
||||
<p class="my-5">.col-md-4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Two columns with two nested columns-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/layout/layout-grid/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
911
html/html/css/hover.html
Normal file
911
html/html/css/hover.html
Normal file
@@ -0,0 +1,911 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Hover effects</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Hover effects-->
|
||||
<section>
|
||||
|
||||
<h2 class="mt-lg-5 mb-5 font-weight-bold"><strong>Hover effects</strong></h2>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mt-5">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="">
|
||||
<div class="mask flex-center rgba-red-strong">
|
||||
<p class="white-text">Strong overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="">
|
||||
<div class="mask flex-center rgba-red-light">
|
||||
<p class="white-text">Light overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="">
|
||||
<div class="mask flex-center rgba-red-slight">
|
||||
<p class="white-text">Super light overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Zoom effect-->
|
||||
<div class="view overlay zoom">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid " alt="">
|
||||
<div class="mask flex-center waves-effect waves-light">
|
||||
<p class="white-text">Zoom effect</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-5 mb-4">
|
||||
|
||||
<h4 class="text-center">Shadow effect</h4>
|
||||
<br>
|
||||
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(132).jpg" class="img-fluid rounded-circle hoverable"
|
||||
alt="">
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Hover effects-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Colors and intensity-->
|
||||
<section>
|
||||
|
||||
<!--Title-->
|
||||
<h4 class="my-5 font-weight-bold dark-grey-text"><strong>Colors and intensity</strong></h4>
|
||||
|
||||
<!--Description-->
|
||||
<p class="description">Use one of the classes below to change the color and intensity of the overlay.</p>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<h4>Light overlay</h4>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light blue overlay.">
|
||||
<div class="mask rgba-blue-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-blue-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light red overlay.">
|
||||
<div class="mask rgba-red-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-red-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light pink overlay.">
|
||||
<div class="mask rgba-pink-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-pink-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light purple overlay.">
|
||||
<div class="mask rgba-purple-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-purple-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light indigo overlay.">
|
||||
<div class="mask rgba-indigo-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-indigo-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light cyan overlay.">
|
||||
<div class="mask rgba-cyan-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-cyan-light</code></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light teal overlay.">
|
||||
<div class="mask rgba-teal-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-teal-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light green overlay.">
|
||||
<div class="mask rgba-green-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-green-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light lime overlay.">
|
||||
<div class="mask rgba-lime-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-lime-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light yellow overlay.">
|
||||
<div class="mask rgba-yellow-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-yellow-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light orange overlay.">
|
||||
<div class="mask rgba-orange-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-orange-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light brown overlay.">
|
||||
<div class="mask rgba-brown-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-brown-light</code></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light grey overlay.">
|
||||
<div class="mask rgba-grey-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-grey-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light blue-grey overlay.">
|
||||
<div class="mask rgba-blue-grey-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-blue-grey-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light black overlay.">
|
||||
<div class="mask rgba-black-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-black-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light stylish overlay.">
|
||||
<div class="mask rgba-stylish-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-stylish-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light white overlay.">
|
||||
<div class="mask rgba-white-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-white-light</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Strong overlay</h4>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong blue overlay.">
|
||||
<div class="mask rgba-blue-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-blue-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong red overlay.">
|
||||
<div class="mask rgba-red-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-red-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong pink overlay.">
|
||||
<div class="mask rgba-pink-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-pink-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong purple overlay.">
|
||||
<div class="mask rgba-purple-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-purple-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong indigo overlay.">
|
||||
<div class="mask rgba-indigo-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-indigo-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong cyan overlay.">
|
||||
<div class="mask rgba-cyan-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-cyan-strong</code></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong teal overlay.">
|
||||
<div class="mask rgba-teal-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-teal-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong green overlay.">
|
||||
<div class="mask rgba-green-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-green-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong lime overlay.">
|
||||
<div class="mask rgba-lime-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-lime-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong yellow overlay.">
|
||||
<div class="mask rgba-yellow-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-yellow-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong orange overlay.">
|
||||
<div class="mask rgba-orange-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-orange-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong brown overlay.">
|
||||
<div class="mask rgba-brown-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-brown-strong</code></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong grey overlay.">
|
||||
<div class="mask rgba-grey-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-grey-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong blue-grey overlay.">
|
||||
<div class="mask rgba-blue-grey-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-blue-grey-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong black overlay.">
|
||||
<div class="mask rgba-black-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-black-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong stylish overlay.">
|
||||
<div class="mask rgba-stylish-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-stylish-strong</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong white overlay.">
|
||||
<div class="mask rgba-white-strong"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-white-strong</code></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<h4>Super Light overlay</h4>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light blue overlay.">
|
||||
<div class="mask rgba-blue-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-blue-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light red overlay.">
|
||||
<div class="mask rgba-red-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-red-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light pink overlay.">
|
||||
<div class="mask rgba-pink-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-pink-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light purple overlay.">
|
||||
<div class="mask rgba-purple-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-purple-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light indigo overlay.">
|
||||
<div class="mask rgba-indigo-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-indigo-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light cyan overlay.">
|
||||
<div class="mask rgba-cyan-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-cyan-slight</code></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light teal overlay.">
|
||||
<div class="mask rgba-teal-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-teal-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light green overlay.">
|
||||
<div class="mask rgba-green-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-green-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light lime overlay.">
|
||||
<div class="mask rgba-lime-light"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-lime-light</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light yellow overlay.">
|
||||
<div class="mask rgba-yellow-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-yellow-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light orange overlay.">
|
||||
<div class="mask rgba-orange-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-orange-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light brown overlay.">
|
||||
<div class="mask rgba-brown-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-brown-slight</code></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light grey overlay.">
|
||||
<div class="mask rgba-grey-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-grey-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light blue-grey overlay.">
|
||||
<div class="mask rgba-blue-grey-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-blue-grey-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light black overlay.">
|
||||
<div class="mask rgba-black-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-black-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light stylish overlay.">
|
||||
<div class="mask rgba-stylish-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-stylish-slight</code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a super light white overlay.">
|
||||
<div class="mask rgba-white-slight"></div>
|
||||
</div>
|
||||
<p class="text-center"><code>.rgba-white-slight</code></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
</section>
|
||||
<!--/Section: Colors and intensity-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center mt-5">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/css/hover-effects/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
604
html/html/css/icons.html
Normal file
604
html/html/css/icons.html
Normal file
@@ -0,0 +1,604 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Icons</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Intro-->
|
||||
<section id="introduction">
|
||||
|
||||
<!--Title-->
|
||||
<h2 class="mt-lg-5 font-weight-bold"><strong>Icons</strong></h2>
|
||||
|
||||
<!--Description-->
|
||||
<p>MDB Admin Dashboard uses a powerful set of icons called Font Awesome.</p>
|
||||
<p class="description">Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow,
|
||||
and anything that can be done with the power of CSS.</p>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section class="mt-5">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-6 mb-4">
|
||||
<h4><i class="fa fa-flag blue-text pr-2" aria-hidden="true"></i> One Font, 628 Icons</h4> In a single
|
||||
collection, Font Awesome is a pictographic language of web-related actions.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 mb-4">
|
||||
<h4><i class="fa fa-ban indigo-text pr-2" aria-hidden="true"></i> No JavaScript Required</h4> Fewer
|
||||
compatibility concerns because Font Awesome doesn't require JavaScript.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 mb-4">
|
||||
<h4><i class="fa fa-arrows-alt teal-text pr-2" aria-hidden="true"></i> Infinite Scalability</h4>
|
||||
Scalable vector graphics means every icon looks awesome at any size.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-6 mb-4">
|
||||
<h4><i class="fa fa-microphone green-text pr-2" aria-hidden="true"></i> Free, as in Speech</h4> Font
|
||||
Awesome is completely free for commercial use.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 mb-4">
|
||||
<h4><i class="fa fa-pencil deep-purple-text pr-2" aria-hidden="true"></i> CSS Control</h4> Easily
|
||||
style icon color, size, shadow, and anything that's possible with CSS.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 mb-4">
|
||||
<h4><i class="fa fa-eye cyan-text pr-2" aria-hidden="true"></i> Perfect on Retina Displays</h4> Font
|
||||
Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-6 mb-4">
|
||||
<h4><i class="fa fa-wheelchair blue-text pr-2" aria-hidden="true"></i> Accessibility-minded</h4>
|
||||
Font Awesome <i class="fa fa-heart" aria-hidden="true"></i><span class="sr-only">loves</span> screen readers and helps make your icons accessible on the web.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
</section>
|
||||
<!--/Section: Intro-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Examples-->
|
||||
<section>
|
||||
<h4 class="mb-5 pb-4 font-weight-bold dark-grey-text"><strong>Examples</strong></h4>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-center mb-5">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<i class="fa fa-3x mb-3 fa-area-chart red-text"></i>
|
||||
<h5 class="font-weight-bold">Analytics</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
|
||||
assumenda deleniti hic.</p>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<i class="fa fa-3x mb-3 fa-book cyan-text"></i>
|
||||
<h5 class="font-weight-bold">Tutorials</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
|
||||
assumenda deleniti hic.</p>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<i class="fa fa-3x mb-3 fa-coffee orange-text"></i>
|
||||
<h5 class="font-weight-bold">Relax</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
|
||||
assumenda deleniti hic.</p>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-5">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="col-1 col-md-2 float-left">
|
||||
<i class="fa fa-2x fa-bullhorn blue-text"></i>
|
||||
</div>
|
||||
<div class="col-10 col-md-9 col-lg-10 float-right">
|
||||
<h4 class="font-weight-bold">Marketing</h4>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
|
||||
minima assumenda.</p>
|
||||
<a class="btn btn-primary btn-sm ml-0">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="col-1 col-md-2 float-left">
|
||||
<i class="fa fa-2x fa-cogs pink-text"></i>
|
||||
</div>
|
||||
<div class="col-10 col-md-9 col-lg-10 float-right">
|
||||
<h4 class="font-weight-bold">Customization</h4>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
|
||||
minima assumenda.</p>
|
||||
<a class="btn btn-pink btn-sm ml-0">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="col-1 col-md-2 float-left">
|
||||
<i class="fa fa-2x fa-dashboard deep-orange-text"></i>
|
||||
</div>
|
||||
<div class="col-10 col-md-9 col-lg-10 float-right">
|
||||
<h4 class="font-weight-bold">Support</h4>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
|
||||
minima assumenda.</p>
|
||||
<a class="btn btn-secondary btn-sm ml-0">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-5 pb-5">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body my-4">
|
||||
<i class="fa fa-3x mb-4 fa-heart red-text"></i>
|
||||
<h4 class="font-weight-bold">Passion</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body my-4">
|
||||
<i class="fa fa-3x mb-4 fa-book cyan-text"></i>
|
||||
<h4 class="font-weight-bold">Education</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body my-4">
|
||||
<i class="fa fa-3x mb-4 fa-plane green-text"></i>
|
||||
<h4 class="font-weight-bold">Travel</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card white text-center z-depth-2">
|
||||
<div class="card-body my-4">
|
||||
<i class="fa fa-3x mb-4 fa-laptop amber-text"></i>
|
||||
<h4 class="font-weight-bold">Work</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card transparent text-center z-depth-2">
|
||||
<div class="card-body my-4">
|
||||
<i class="fa fa-3x mb-4 fa-camera-retro indigo-text"></i>
|
||||
<h5 class="font-weight-bold indigo-text"><strong>PHOTOGRAPHY</strong></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card transparent text-center z-depth-2">
|
||||
<div class="card-body my-4">
|
||||
<i class="fa fa-3x mb-4 fa-pencil teal-text"></i>
|
||||
<h5 class="font-weight-bold teal-text"><strong>DESIGN</strong></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card transparent text-center z-depth-2">
|
||||
<div class="card-body my-4">
|
||||
<i class="fa fa-3x mb-4 fa-desktop deep-purple-text"></i>
|
||||
<h5 class="font-weight-bold deep-purple-text"><strong>MARKETING</strong></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card transparent text-center z-depth-2">
|
||||
<div class="card-body my-4">
|
||||
<i class="fa fa-3x mb-4 fa-code blue-text"></i>
|
||||
<h5 class="font-weight-bold blue-text"><strong>DEVELOPMENT</strong></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Examples-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/content/icons-list/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
807
html/html/css/images.html
Normal file
807
html/html/css/images.html
Normal file
@@ -0,0 +1,807 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Images</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: -->
|
||||
<section id="responsive-images">
|
||||
|
||||
<!--Title-->
|
||||
<h2 class="mt-lg-5 mb-5 font-weight-bold"><strong>Responsive images</strong></h2>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-4">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(134).jpg" class="img-fluid" alt="Responsive image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(134).jpg" class="img-fluid" alt="Responsive image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-8">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(134).jpg" class="img-fluid" alt="Responsive image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
</section>
|
||||
<!--/Section: -->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: -->
|
||||
<section id="image-thumbnails">
|
||||
|
||||
<!--Title-->
|
||||
<h4 class="mt-4 mb-5 font-weight-bold dark-grey-text"><strong>With shadows</strong></h4>
|
||||
|
||||
<!--Section: Live preview-->
|
||||
<section>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(54).jpg" class="img-fluid z-depth-1" alt="">
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(54).jpg" class="img-fluid z-depth-1-half" alt="">
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(54).jpg" class="img-fluid z-depth-2" alt="">
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(54).jpg" class="img-fluid z-depth-3" alt="">
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(54).jpg" class="img-fluid z-depth-4" alt="">
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(54).jpg" class="img-fluid z-depth-5" alt="">
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Live preview-->
|
||||
|
||||
</section>
|
||||
<!--/Section: -->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Overlay-->
|
||||
<section>
|
||||
|
||||
<h4 class="my-5 font-weight-bold dark-grey-text"><strong>Overlays</strong></h4>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask flex-center rgba-teal-slight">
|
||||
<p class="white-text">super light overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask flex-center rgba-teal-light">
|
||||
<p class="white-text">light overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask flex-center rgba-teal-strong">
|
||||
<p class="white-text">strong overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Overlay-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Patterns-->
|
||||
<section>
|
||||
|
||||
<h4 class="my-5 font-weight-bold dark-grey-text"><strong>Patterns</strong></h4>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-1 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask pattern-2 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-2</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-3 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-3</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-4 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-4</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask pattern-5 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-5</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-6 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-6</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-7 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-7</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask pattern-8 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-8</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-9 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-9</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Patterns-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Hover effects-->
|
||||
<section>
|
||||
|
||||
<h4 class="my-5 font-weight-bold dark-grey-text"><strong>Patterns</strong></h4>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mt-5">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="">
|
||||
<div class="mask flex-center rgba-red-strong">
|
||||
<p class="white-text">Strong overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="">
|
||||
<div class="mask flex-center rgba-red-light">
|
||||
<p class="white-text">Light overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="">
|
||||
<div class="mask flex-center rgba-red-slight">
|
||||
<p class="white-text">Super light overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Zoom effect-->
|
||||
<div class="view overlay zoom">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid " alt="">
|
||||
<div class="mask flex-center waves-effect waves-light">
|
||||
<p class="white-text">Zoom effect</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-5 mb-4">
|
||||
|
||||
<h4 class="text-center">Shadow effect</h4>
|
||||
<br>
|
||||
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(132).jpg" class="img-fluid rounded-circle hoverable"
|
||||
alt="">
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Hover effects-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Waves effect-->
|
||||
<section class="pb-5">
|
||||
|
||||
<h4 class="my-5 font-weight-bold dark-grey-text"><strong>Waves effect (click on the images)</strong></h4>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-6 mb-4">
|
||||
|
||||
<!--Mask with wave-->
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(54).jpg" class="img-fluid" alt="Sample image with waves effect.">
|
||||
<a>
|
||||
<div class="mask rgba-white-slight"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-6 mb-4">
|
||||
|
||||
<!--Mask with wave-->
|
||||
<div class="view overlay">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(53).jpg" class="img-fluid" alt="Sample image with waves effect.">
|
||||
<a>
|
||||
<div class="mask waves-effect"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Waves effect-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/content/bootstrap-images/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
556
html/html/css/masks.html
Normal file
556
html/html/css/masks.html
Normal file
@@ -0,0 +1,556 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Masks</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Overlay-->
|
||||
<section>
|
||||
|
||||
<h4 class="my-5 font-weight-bold dark-grey-text"><strong>Overlays</strong></h4>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask flex-center rgba-teal-slight">
|
||||
<p class="white-text">super light overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask flex-center rgba-teal-light">
|
||||
<p class="white-text">light overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask flex-center rgba-teal-strong">
|
||||
<p class="white-text">strong overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Overlay-->
|
||||
|
||||
<hr class="mb-5">
|
||||
|
||||
<!--Section: Patterns-->
|
||||
<section>
|
||||
|
||||
<h4 class="my-5 font-weight-bold dark-grey-text"><strong>Patterns</strong></h4>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-1 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask pattern-2 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-2</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-3 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-3</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-4 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-4</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask pattern-5 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-5</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-6 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-6</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-4">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-7 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-7</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="">
|
||||
<div class="mask pattern-8 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-8</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
|
||||
<div class="view">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
|
||||
<div class="mask pattern-9 flex-center waves-effect waves-light">
|
||||
<p class="white-text">.pattern-9</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Patterns-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center mt-5">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/css/masks/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
571
html/html/css/media.html
Normal file
571
html/html/css/media.html
Normal file
@@ -0,0 +1,571 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Media object</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container">
|
||||
<h2 class="mt-5 font-weight-bold"><strong>Media object</strong></h2>
|
||||
|
||||
<!--Section: Example-->
|
||||
<section class="mb-5 pb-5">
|
||||
|
||||
<h4 class="my-5 dark-grey-text font-weight-bold"><strong>Example</strong></h4>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="media ml-3">
|
||||
<img class="d-flex mr-3 z-depth-1" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0"><strong>Media heading</strong></h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
||||
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
||||
Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Example-->
|
||||
|
||||
<!--Section: Order-->
|
||||
<section class="mb-5 pb-5">
|
||||
|
||||
<h4 class="my-5 dark-grey-text font-weight-bold"><strong>Order</strong></h4>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1"><strong>Media object</strong></h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
||||
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
||||
Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
<img class="d-flex ml-3 z-depth-1" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Order-->
|
||||
|
||||
<!--Section: Nesting-->
|
||||
<section class="mb-5 pb-5">
|
||||
|
||||
<h4 class="my-5 dark-grey-text font-weight-bold"><strong>Nesting</strong></h4>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
<img class="d-flex mr-3 rounded-circle z-depth-1" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0"><strong>Media heading</strong></h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
||||
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
||||
Donec lacinia congue felis in faucibus.
|
||||
|
||||
<div class="media mt-4">
|
||||
<a class="d-flex pr-3" href="#">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image" class="rounded-circle z-depth-1">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0"><strong>Media heading</strong></h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
||||
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
||||
Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Nesting-->
|
||||
|
||||
<!--Section: Alignment-->
|
||||
<section class="mb-5 pb-5">
|
||||
|
||||
<h4 class="my-5 dark-grey-text font-weight-bold"><strong>Alignment</strong></h4>
|
||||
<!--Card-->
|
||||
<div class="card mb-5">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
<img class="d-flex align-self-start mr-3 z-depth-1" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0"><strong>Top-aligned media</strong></h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
|
||||
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
|
||||
nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
<!--Card-->
|
||||
<div class="card mb-5">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
<img class="d-flex align-self-center mr-3 z-depth-1" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0"><strong>Center-aligned media</strong></h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
|
||||
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
|
||||
nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
<img class="d-flex align-self-end mr-3 z-depth-1" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0"><strong>Bottom-aligned media</strong></h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
|
||||
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
|
||||
nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Alignment-->
|
||||
|
||||
<!--Section: Media list-->
|
||||
<section class="mb-5">
|
||||
|
||||
<h4 class="my-5 dark-grey-text font-weight-bold"><strong>Media list</strong></h4>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled">
|
||||
<li class="media">
|
||||
<img class="d-flex mr-3 z-depth-1" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1"><strong>List-based media object</strong></h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
||||
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
||||
Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="media my-5">
|
||||
<img class="d-flex mr-3 z-depth-1" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1"><strong>List-based media object</strong></h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
||||
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
||||
Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="d-flex mr-3 z-depth-1" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1"><strong>List-based media object</strong></h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
||||
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
||||
Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Media list-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/layout/media/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
410
html/html/css/shadows.html
Normal file
410
html/html/css/shadows.html
Normal file
@@ -0,0 +1,410 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Shadows</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<style>
|
||||
.shadow-box-example {
|
||||
height: 120px;
|
||||
width: 100%;
|
||||
background-color: #64b5f6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--Section: Examples-->
|
||||
<section>
|
||||
|
||||
<h2 class="mt-lg-5 mb-5 font-weight-bold"><strong>Shadows</strong></h2>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="shadow-box-example z-depth-1 flex-center">
|
||||
<p class="white-text">.z-depth-1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="shadow-box-example z-depth-1-half flex-center">
|
||||
<p class="white-text">.z-depth-1-half</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="shadow-box-example z-depth-2 flex-center">
|
||||
<p class="white-text">.z-depth-2</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="shadow-box-example z-depth-3 flex-center">
|
||||
<p class="white-text">.z-depth-3</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="shadow-box-example z-depth-4 flex-center">
|
||||
<p class="white-text">.z-depth-4</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="shadow-box-example z-depth-5 flex-center">
|
||||
<p class="white-text">.z-depth-5</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="shadow-box-example hoverable flex-center">
|
||||
<p class="white-text">hover me!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Examples-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center my-5">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/css/shadows/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
490
html/html/css/skins.html
Normal file
490
html/html/css/skins.html
Normal file
@@ -0,0 +1,490 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Skins</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<h2 class="mt-lg-5 mb-5 font-weight-bold"><strong>Skins</strong></h2>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-center">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 mb-4 col-md-12">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/screens/skins/white.jpg" alt="Basic MDB template with a white skin." class="img-fluid z-depth-1">
|
||||
<a href="https://mdbootstrap.com/previews/docs/latest/html/skins/white-skin.html" target="_blank" class="btn btn-primary my-4">Live preview <i class="fa fa-eye ml-2"></i></a>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 mb-4 col-md-6">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/screens/skins/black.jpg" alt="Basic MDB template with a white skin." class="img-fluid z-depth-1">
|
||||
<a href="https://mdbootstrap.com/previews/docs/latest/html/skins/black-skin.html" target="_blank" class="btn btn-primary my-4">Live preview <i class="fa fa-eye ml-2"></i></a>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 mb-4 col-md-6">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/screens/skins/cyan.jpg" alt="Basic MDB template with a white skin." class="img-fluid z-depth-1">
|
||||
<a href="https://mdbootstrap.com/previews/docs/latest/html/skins/cyan-skin.html" target="_blank" class="btn btn-primary my-4">Live preview <i class="fa fa-eye ml-2"></i></a>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-center">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 mb-4 col-md-12">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/screens/skins/mdb.jpg" alt="Basic MDB template with a white skin." class="img-fluid z-depth-1">
|
||||
<a href="https://mdbootstrap.com/previews/docs/latest/html/skins/mdb-skin.html" target="_blank" class="btn btn-primary my-4">Live preview <i class="fa fa-eye ml-2"></i></a>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 mb-4 col-md-6">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/screens/skins/deep-purple.jpg" alt="Basic MDB template with a white skin." class="img-fluid z-depth-1">
|
||||
<a href="https://mdbootstrap.com/previews/docs/latest/html/skins/deep-purple-skin.html" target="_blank" class="btn btn-primary my-4">Live preview <i class="fa fa-eye ml-2"></i></a>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 mb-4 col-md-6">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/screens/skins/navy-blue.jpg" alt="Basic MDB template with a white skin." class="img-fluid z-depth-1">
|
||||
<a href="https://mdbootstrap.com/previews/docs/latest/html/skins/navy-blue-skin.html" target="_blank" class="btn btn-primary my-4">Live preview <i class="fa fa-eye ml-2"></i></a>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-center">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 mb-4 col-md-12">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/screens/skins/pink.jpg" alt="Basic MDB template with a white skin." class="img-fluid z-depth-1">
|
||||
<a href="https://mdbootstrap.com/previews/docs/latest/html/skins/pink-skin.html" target="_blank" class="btn btn-primary my-4">Live preview <i class="fa fa-eye ml-2"></i></a>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 mb-4 col-md-6">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/screens/skins/indigo.jpg" alt="Basic MDB template with a white skin." class="img-fluid z-depth-1">
|
||||
<a href="https://mdbootstrap.com/previews/docs/latest/html/skins/indigo-skin.html" target="_blank" class="btn btn-primary my-4">Live preview <i class="fa fa-eye ml-2"></i></a>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 mb-4 col-md-6">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/screens/skins/light-blue.jpg" alt="Basic MDB template with a white skin." class="img-fluid z-depth-1">
|
||||
<a href="https://mdbootstrap.com/previews/docs/latest/html/skins/light-blue-skin.html" target="_blank" class="btn btn-primary my-4">Live preview <i class="fa fa-eye ml-2"></i></a>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-center">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 mb-4 col-md-12">
|
||||
|
||||
<img src="https://mdbootstrap.com/img/screens/skins/grey.jpg" alt="Basic MDB template with a white skin." class="img-fluid z-depth-1">
|
||||
<a href="https://mdbootstrap.com/previews/docs/latest/html/skins/grey-skin.html" target="_blank" class="btn btn-primary my-4">Live preview <i class="fa fa-eye ml-2"></i></a>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center mb-5">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/css/skins/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
635
html/html/css/typography.html
Normal file
635
html/html/css/typography.html
Normal file
@@ -0,0 +1,635 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Typography</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<section>
|
||||
|
||||
<h2 class="mt-lg-5 mb-3 font-weight-bold"><strong>Typography</strong></h2>
|
||||
|
||||
<!--Description-->
|
||||
<div class="description">
|
||||
<p>MDB Admin Dashboard includes simple and easily customized typography for headings, body text, lists, and more.
|
||||
For even more control, check out the <a href="https://mdbootstrap.com/utilities/">textual utility classes</a>.</p>
|
||||
|
||||
<p>The standard font for MDBootstrap is minimalist and elegant "<strong>Roboto</strong>" from Google.</p>
|
||||
|
||||
<blockquote class="blockquote bq-primary">
|
||||
<p class="bq-title">About "Roboto"</p>
|
||||
<p>Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the
|
||||
same time, the font features friendly and open curves. While some grotesques distort their letterforms
|
||||
to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their
|
||||
natural width. This makes for a more natural reading rhythm more commonly found in humanist and
|
||||
serif types.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!--Section: Headings-->
|
||||
<section>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12">
|
||||
|
||||
<h4 class="mt-4 mb-5 font-weight-bold dark-grey-text"><strong>Standard</strong></h4>
|
||||
|
||||
<h1>h1. heading</h1>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>h2. heading</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>h3. heading</h3>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4>h4. heading</h4>
|
||||
|
||||
<hr>
|
||||
|
||||
<h5>h5. heading</h5>
|
||||
|
||||
<hr>
|
||||
|
||||
<h6>h6. heading</h6>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
|
||||
<h4 class="mt-4 mb-5 font-weight-bold dark-grey-text"><strong>Classes</strong></h4>
|
||||
|
||||
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p class="h3">h3. Bootstrap heading</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
|
||||
<h4 class="mt-4 mb-5 font-weight-bold dark-grey-text"><strong>Responsive</strong></h4>
|
||||
|
||||
|
||||
<h1 class="h1-responsive">h1. heading</h1>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2 class="h2-responsive">h2. heading</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="h3-responsive">h3. heading</h3>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 class="h4-responsive">h4. heading</h4>
|
||||
|
||||
<hr>
|
||||
|
||||
<h5 class="h5-responsive">h5. heading</h5>
|
||||
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Headings-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Customize-->
|
||||
<section>
|
||||
|
||||
<h3>
|
||||
<strong>Fancy display heading</strong>
|
||||
<small class="text-muted">With faded secondary text</small>
|
||||
</h3>
|
||||
|
||||
</section>
|
||||
<!--Section: Customize-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Display headings-->
|
||||
<section>
|
||||
|
||||
<h1 class="display-1">Display 1</h1>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1 class="display-2">Display 2</h1>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1 class="display-3">Display 3</h1>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1 class="display-4">Display 4</h1>
|
||||
|
||||
</section>
|
||||
<!--Section: Display headings-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Lead-->
|
||||
<section>
|
||||
|
||||
<h5>
|
||||
<u>Lead</u>
|
||||
</h5>
|
||||
<p class="lead">
|
||||
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
<h5>
|
||||
<u>Regular paragraph</u>
|
||||
</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis tenetur sit voluptatem molestias ad neque
|
||||
veritatis! Alias natus, nobis laudantium, veritatis, atque illum ipsam nisi voluptas nesciunt harum laborum
|
||||
perspiciatis!
|
||||
</p>
|
||||
|
||||
</section>
|
||||
<!--Section: Lead-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Inline text elements-->
|
||||
<section>
|
||||
|
||||
<p>You can use the mark tag to
|
||||
<mark>highlight</mark> text.</p>
|
||||
<p>
|
||||
<del>This line of text is meant to be treated as deleted text.</del>
|
||||
</p>
|
||||
<p>
|
||||
<s>This line of text is meant to be treated as no longer accurate.</s>
|
||||
</p>
|
||||
<p>
|
||||
<ins>This line of text is meant to be treated as an addition to the document.</ins>
|
||||
</p>
|
||||
<p>
|
||||
<u>This line of text will render as underlined</u>
|
||||
</p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
|
||||
</section>
|
||||
<!--Section: Inline text elements-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Text notifications-->
|
||||
<section>
|
||||
|
||||
<blockquote class="blockquote bq-primary mb-5">
|
||||
<p class="bq-title">Info notification</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum
|
||||
illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque!
|
||||
Sit, rem, in?</p>
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="blockquote bq-warning mb-5">
|
||||
<p class="bq-title">Warning notification</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum
|
||||
illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque!
|
||||
Sit, rem, in?</p>
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="blockquote bq-success mb-5">
|
||||
<p class="bq-title">Success notification</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum
|
||||
illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque!
|
||||
Sit, rem, in?</p>
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="blockquote bq-danger mb-5">
|
||||
<p class="bq-title">Danger notification</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum
|
||||
illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque!
|
||||
Sit, rem, in?</p>
|
||||
</blockquote>
|
||||
|
||||
</section>
|
||||
<!--Section: Text notifications-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Text color-->
|
||||
<section>
|
||||
|
||||
|
||||
<p class="red-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
||||
<p class="pink-text">Impedit architecto, totam hic sunt eum odio, deleniti.</p>
|
||||
<p class="purple-text">Similique ex, expedita minus assumenda a magni beatae dolorum itaque.</p>
|
||||
<p class="deep-purple-text">Veritatis eum libero nam, adipisci, necessitatibus eos.</p>
|
||||
<p class="indigo-text">Sapiente, ea. Molestias sunt nihil saepe numquam quas perferendis.</p>
|
||||
<p class="blue-text">Sapiente sit, possimus maiores, quo alias corporis cum eum nesciunt.</p>
|
||||
<p class="light-blue-text">Corrupti adipisci, praesentium iusto eos, iure debitis modi.</p>
|
||||
<p class="cyan-text">Odio autem veritatis aliquam consequuntur ea voluptatibus.</p>
|
||||
<p class="teal-text">Similique, adipisci ea, sequi magnam sit inventore.</p>
|
||||
<p class="green-text">Eos et vitae, odit deserunt dignissimos voluptas.</p>
|
||||
<p class="light-green-text">Fugit nihil numquam inventore accusantium tenetur ex est.</p>
|
||||
<p class="lime-text">Sed odit inventore illum excepturi officia, reiciendis numquam modi.</p>
|
||||
<p class="yellow-text">At odio animi distinctio, aut enim tempora nobis error odit mollitia.</p>
|
||||
<p class="amber-text">Quo at accusamus vel earum hic, inventore non, minima sint.</p>
|
||||
<p class="orange-text">Iusto odit eos distinctio temporibus voluptates ad, illo repellat.</p>
|
||||
<p class="deep-orange-text">Quas fugit fuga assumenda nihil esse et culpa reiciendis voluptatum.</p>
|
||||
<p class="brown-text">Excepturi iusto amet sunt illo ad debitis quibusdam eius, consequatur.</p>
|
||||
<p class="grey-text">Non sint nulla incidunt, odit repellat tempore, veniam ratione fugit.</p>
|
||||
<p class="blue-grey-text">Eius, provident. Quo similique, repellat atque voluptas explicabo odio.</p>
|
||||
<p class="white-text mdb-color">In consequuntur error, non consequatur expedita maxime dolorum.</p>
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Text color-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/content/typography/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
580
html/html/css/utilities.html
Normal file
580
html/html/css/utilities.html
Normal file
@@ -0,0 +1,580 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Utilities / helpers</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<h2 class="font-weight-bold mt-5 mb-5"><strong>Utilities / helpers</strong></h2>
|
||||
|
||||
<!--Description-->
|
||||
<p class="description mb-4"><strong>MDB Admin Dashboard</strong> includes dozens of utilities—classes with a single purpose. They’re designed to reduce the frequency
|
||||
of highly repetitive declarations in your CSS while allowing for quick and easy development.</p>
|
||||
|
||||
<!-- List -->
|
||||
<div class="list-group z-depth-1">
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-borders/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Borders</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Use border utilities to quickly style the <code>border</code> and <code>border-radius</code> of an
|
||||
element. Great for images, buttons, or any other element.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-clearfix/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Clearfix</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Easily clear <code>floats</code> by adding <code>.clearfix</code> to the parent element. Utilizes
|
||||
the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-close-icon/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Close icon</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Use a generic close icon for dismissing content like modals and alerts. <strong>Be sure to include text for screen readers</strong>,
|
||||
as we’ve done with <code>aria-label</code>.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-display-property/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Display</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Quickly and responsively toggle the display value of components and more with our display utilities.
|
||||
Includes support for some of the more common values, as well as some extras for controlling display
|
||||
when printing.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-embeds/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Embeds</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic
|
||||
ratio that scales on any device.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-float/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Float</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Toggle floats on any element, across any breakpoint, using our responsive float utilities.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/flexbox/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Flexbox</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more
|
||||
with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS
|
||||
may be necessary.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-image-replacement/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Image replacement</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Swap text for background images with the image replacement class.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-position/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Position</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Use these shorthand utilities for quickly configuring the position of an element.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-screenreaders/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Screenreaders</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Hide an element to all devices except screen readers with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it’s focused (e.g. by a keyboard-only
|
||||
user). Can also be used as mixins.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-sizing/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Sizing</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
|
||||
Includes support for <code>25%</code>, <code>50%</code>, <code>75%</code>, and <code>100%</code> by default.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-spacing/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Spacing</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Assign responsive-friendly <code>margin</code> or <code>padding</code> values to an element or a
|
||||
subset of its sides with shorthand classes. Includes support for individual properties, all properties,
|
||||
and vertical and horizontal properties. Classes are built from a default Sass map ranging from
|
||||
<code>.25rem</code> to <code>3rem</code>.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-text/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Text</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Documentation and examples for common text utilities to control alignment, wrapping, weight, and
|
||||
more.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-vertical-align/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Vertical align</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align
|
||||
only affects inline, inline-block, inline-table, and table cell elements.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
<!-- Item -->
|
||||
<a target="_blank" href="https://mdbootstrap.com/utilities/bootstrap-visibility/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="h5 mb-3">Visibility</h5>
|
||||
</div>
|
||||
<p class="mb-1 mr-4">Control the visibility, without modifying the display, of elements with visibility utilities.</p>
|
||||
</div>
|
||||
|
||||
<i class="fa fa-chevron-right" style="font-size: 1.3rem;"></i>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
|
||||
</div>
|
||||
<!-- List -->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section>
|
||||
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center my-5">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/utilities/bootstrap-borders/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
342
html/html/dashboards/_navigation.html
Normal file
342
html/html/dashboards/_navigation.html
Normal file
@@ -0,0 +1,342 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Material Design for Bootstrap</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1147
html/html/dashboards/v-1.html
Normal file
1147
html/html/dashboards/v-1.html
Normal file
File diff suppressed because it is too large
Load Diff
756
html/html/dashboards/v-2.html
Normal file
756
html/html/dashboards/v-2.html
Normal file
@@ -0,0 +1,756 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Dashboard v.2</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Analytical panel-->
|
||||
<section class="mb-5">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Section: Chart-->
|
||||
<section>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-5 col-md-12 mr-0">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header primary-color">
|
||||
<h4 class="h4-responsive mb-0 font-weight-bold">Traffic</h4>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade pb-0">
|
||||
|
||||
<!--Panel data-->
|
||||
<div class="row card-body pt-3">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<!--Date select-->
|
||||
<h4><span class="badge big-badge primary-color">Data range</span></h4>
|
||||
<select class="mdb-select">
|
||||
<option value="" disabled selected>Choose time period</option>
|
||||
<option value="1">Today</option>
|
||||
<option value="2">Yesterday</option>
|
||||
<option value="3">Last 7 days</option>
|
||||
<option value="3">Last 30 days</option>
|
||||
<option value="3">Last week</option>
|
||||
<option value="3">Last month</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<!--Date pickers-->
|
||||
<h4><span class="badge big-badge primary-color">Custom date</span></h4>
|
||||
<br>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="md-form">
|
||||
<input placeholder="Selected date" type="text" id="from" class="form-control datepicker">
|
||||
<label for="date-picker-example">From</label>
|
||||
</div>
|
||||
<div class="md-form">
|
||||
<input placeholder="Selected date" type="text" id="to" class="form-control datepicker">
|
||||
<label for="date-picker-example">To</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/First column-->
|
||||
|
||||
</div>
|
||||
<!--/Panel data-->
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-7 col-md-12 mb-4">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header primary-color">
|
||||
|
||||
<!-- Chart -->
|
||||
<canvas id="traffic" height="145px"></canvas>
|
||||
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Chart-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Analytical panel-->
|
||||
|
||||
<!-- Section: data tables -->
|
||||
<section class="section">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h4 class="h4-responsive text-center mb-3">
|
||||
Visits by Browser
|
||||
</h4>
|
||||
|
||||
<canvas id="doughnutChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table large-header">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-weight-bold dark-grey-text"><strong>Keywords</strong></th>
|
||||
<th class="font-weight-bold dark-grey-text"><strong>Visits</strong></th>
|
||||
<th class="font-weight-bold dark-grey-text"><strong>Pages</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Material Design</td>
|
||||
<td>15</td>
|
||||
<td>307</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bootstrap</td>
|
||||
<td>32</td>
|
||||
<td>504</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MDBootstrap</td>
|
||||
<td>41</td>
|
||||
<td>613</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Frontend</td>
|
||||
<td>14</td>
|
||||
<td>208</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<button class="btn btn btn-flat grey lighten-3 btn-rounded waves-effect float-right font-weight-bold dark-grey-text">View full report</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<table class="table large-header">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-weight-bold dark-grey-text"><strong>Country</strong></th>
|
||||
<th class="font-weight-bold dark-grey-text"><strong>Visits</strong></th>
|
||||
<th class="font-weight-bold dark-grey-text"><strong>Pages</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/us.png" class="flag"> United States</td>
|
||||
<td>15</td>
|
||||
<td>307</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/in.png" class="flag"> India</td>
|
||||
<td>32</td>
|
||||
<td>504</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/cn.png" class="flag"> China</td>
|
||||
<td>41</td>
|
||||
<td>613</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/pl.png" class="flag"> Poland</td>
|
||||
<td>14</td>
|
||||
<td>208</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/it.png" class="flag"> Italy</td>
|
||||
<td>24</td>
|
||||
<td>314</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button class="btn btn btn-flat grey lighten-3 btn-rounded waves-effect float-right font-weight-bold dark-grey-text">View full report</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<table class="table large-header mb-1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-weight-bold dark-grey-text"><strong>Browser</strong></th>
|
||||
<th class="font-weight-bold dark-grey-text"><strong>Visits</strong></th>
|
||||
<th class="font-weight-bold dark-grey-text"><strong>Pages</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Google Chrome</td>
|
||||
<td>15</td>
|
||||
<td>307</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mozilla Firefox</td>
|
||||
<td>32</td>
|
||||
<td>504</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Safari</td>
|
||||
<td>41</td>
|
||||
<td>613</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Opera</td>
|
||||
<td>14</td>
|
||||
<td>208</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Microsoft Edge</td>
|
||||
<td>24</td>
|
||||
<td>314</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button class="btn btn btn-flat grey lighten-3 btn-rounded waves-effect font-weight-bold dark-grey-text float-right">View full report</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- /.Section: data tables -->
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!--/Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Initializations-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// Data Picker Initialization
|
||||
$('.datepicker').pickadate();
|
||||
|
||||
// Material Select Initialization
|
||||
$(document).ready(function () {
|
||||
$('.mdb-select').material_select();
|
||||
});
|
||||
|
||||
// Tooltips Initialization
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
var data = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: "#4CAF50",
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(255,255,255,.25)",
|
||||
strokeColor: "rgba(255,255,255,.75)",
|
||||
pointColor: "#fff",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
var dataPie = [{
|
||||
value: 300,
|
||||
color: "#4caf50",
|
||||
highlight: "#66bb6a",
|
||||
label: "Google Chrome"
|
||||
}, {
|
||||
value: 50,
|
||||
color: "#03a9f4",
|
||||
highlight: "#29b6f6",
|
||||
label: "Edge"
|
||||
}, {
|
||||
value: 100,
|
||||
color: "#d32f2f",
|
||||
highlight: "#e53935",
|
||||
label: "Firefox"
|
||||
}]
|
||||
|
||||
var option = {
|
||||
responsive: true,
|
||||
// set font color
|
||||
scaleFontColor: "#fff",
|
||||
// font family
|
||||
defaultFontFamily: "'Roboto', sans-serif",
|
||||
// background grid lines color
|
||||
scaleGridLineColor: "rgba(255,255,255,.1)",
|
||||
// hide vertical lines
|
||||
scaleShowVerticalLines: false,
|
||||
};
|
||||
|
||||
// // Get the context of the canvas element we want to select
|
||||
// var ctx = document.getElementById("sales").getContext('2d');
|
||||
// var myLineChart = new Chart(ctx).Line(data, option); //'Line' defines type of the chart.
|
||||
|
||||
// // Get the context of the canvas element we want to select
|
||||
// var ctx = document.getElementById("conversion").getContext('2d');
|
||||
// var myRadarChart = new Chart(ctx).Radar(data, option);
|
||||
|
||||
// Get the context of the canvas element we want to select
|
||||
|
||||
//bar
|
||||
var ctxB = document.getElementById("traffic").getContext('2d');
|
||||
var myBarChart = new Chart(ctxB, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["January", "Febuary", "March", "April", "May", "June"],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: "white"
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: "white"
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
fontColor: "white"
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//pie
|
||||
var ctxP = document.getElementById("doughnutChart").getContext('2d');
|
||||
var myPieChart = new Chart(ctxP, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ["March", "April", "May", "June"],
|
||||
datasets: [
|
||||
{
|
||||
data: [160, 50, 80, 60],
|
||||
backgroundColor: ["#4285F4", "#ffbb33", "#29b6f6", "#FF5252"],
|
||||
hoverBackgroundColor: ["#6ea0f2", "#fec451", "#52c3f6", "#fa6e6e"]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$('.min-chart#chart-sales').easyPieChart({
|
||||
barColor: "#4caf50",
|
||||
onStep: function (from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
699
html/html/dashboards/v-3.html
Normal file
699
html/html/dashboards/v-3.html
Normal file
@@ -0,0 +1,699 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Dashboard v.3</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- First row -->
|
||||
<div class="row mt-lg-5">
|
||||
<!-- First column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-money primary-color"></i>
|
||||
<div class="data">
|
||||
<p>SALES</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">4 571 $</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
|
||||
<!-- Second column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-line-chart warning-color"></i>
|
||||
<div class="data">
|
||||
<p>SUBSCRIPTIONS</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">375</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar red accent-2" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Worse than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
|
||||
<!-- Third column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-pie-chart light-blue lighten-1"></i>
|
||||
<div class="data">
|
||||
<p>TRAFFIC</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">21 479</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar red accent-2" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Worse than last week (75%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
|
||||
<!-- Fourth column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-bar-chart red accent-2"></i>
|
||||
<div class="data">
|
||||
<p>ORGANIC TRAFFIC</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">4 567</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.First row -->
|
||||
|
||||
<!-- Second row -->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!-- First column -->
|
||||
|
||||
<div class="col-lg-6 col-md-12">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header white-text primary-color">
|
||||
Recent comments and replies
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<table class="table no-header mt-1">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</td>
|
||||
<td class="hour"><small><span class="grey-text float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Merry Joe</td>
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</td>
|
||||
<td class="hour"><small><span class="grey-text float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jessie Doe</td>
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</td>
|
||||
<td class="hour"><small><span class="grey-text float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button class="btn btn btn-flat grey lighten-3 btn-rounded waves-effect font-weight-bold dark-grey-text float-right">View full report</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
<!-- Panel -->
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header white-text primary-color">
|
||||
Issues
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
|
||||
<table class="table">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-weight-bold dark-grey-text">Status</th>
|
||||
<th class="font-weight-bold dark-grey-text">Title</th>
|
||||
<th class="font-weight-bold dark-grey-text">User</th>
|
||||
<th class="font-weight-bold dark-grey-text">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge green">Open</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge green">Open</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge warning-color">In progress</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge red">Closed</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.Panel -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- /.First column -->
|
||||
|
||||
<div class="col-lg-6 col-md-12">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header white-text primary-color">
|
||||
Users activity
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-1">
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Pages/Visits</small>
|
||||
<h4>139 419</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">New visitors</small>
|
||||
<h4>51.94%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Last week</small>
|
||||
<h4>51 932</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Pages/Visits</small>
|
||||
<h4>139 419</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">New visitors</small>
|
||||
<h4>51.94%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small>Last week</small>
|
||||
<h4>51 932</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-1">
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Pages/Visits</small>
|
||||
<h4>139 419</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">New visitors</small>
|
||||
<h4>51.94%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Last week</small>
|
||||
<h4>51 932</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn btn-flat grey lighten-3 btn-rounded waves-effect font-weight-bold dark-grey-text float-right">View full report</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
<!-- Panel -->
|
||||
<div class="card mb-4 text-center py-3 red accent-2 white-text">
|
||||
<i class="fa fa-bell fa-3x mb-3"></i>
|
||||
<h4 class="h4-responsive">28 important messages</h4>
|
||||
</div>
|
||||
<!-- /.Panel -->
|
||||
|
||||
<!--Section: Intro-->
|
||||
<section class="mt-lg-5">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card">
|
||||
<div class="card-header white-text grey darken-1">
|
||||
Orders
|
||||
</div>
|
||||
|
||||
<h6 class="ml-4 pt-4 mt-1 dark-grey-text font-weight-bold"><i class="fa fa-long-arrow-up blue-text mr-3" aria-hidden="true"></i> 2000</h6>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 45%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="font-small grey-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class=" col-md-6 mb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card">
|
||||
<div class="card-header white-text warning-color">
|
||||
Monthly sales
|
||||
</div>
|
||||
|
||||
<h6 class="ml-4 pt-4 mt-1 dark-grey-text font-weight-bold"><i class="fa fa-long-arrow-up blue-text mr-3" aria-hidden="true"></i> $ 2000</h6>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="font-small grey-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
</section>
|
||||
|
||||
<!-- Second column -->
|
||||
|
||||
|
||||
<!-- /.Second column -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- /.Second row -->
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!--/Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,699 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Dashboard v.3</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- First row -->
|
||||
<div class="row mt-lg-5">
|
||||
<!-- First column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-money primary-color"></i>
|
||||
<div class="data">
|
||||
<p>SALES</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">4 571 $</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
|
||||
<!-- Second column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-line-chart warning-color"></i>
|
||||
<div class="data">
|
||||
<p>SUBSCRIPTIONS</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">375</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar grey darken-2" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Worse than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
|
||||
<!-- Third column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-pie-chart light-blue lighten-1"></i>
|
||||
<div class="data">
|
||||
<p>TRAFFIC</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">21 479</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar grey darken-2" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Worse than last week (75%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
|
||||
<!-- Fourth column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-bar-chart red accent-2"></i>
|
||||
<div class="data">
|
||||
<p>ORGANIC TRAFFIC</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">4 567</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.First row -->
|
||||
|
||||
<!-- Second row -->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!-- First column -->
|
||||
|
||||
<div class="col-lg-6 col-md-12">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header white-text primary-color">
|
||||
Recent comments and replies
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<table class="table no-header mt-1">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</td>
|
||||
<td class="hour"><small><span class="grey-text float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Merry Joe</td>
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</td>
|
||||
<td class="hour"><small><span class="grey-text float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jessie Doe</td>
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</td>
|
||||
<td class="hour"><small><span class="grey-text float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button class="btn btn btn-flat grey lighten-3 btn-rounded waves-effect font-weight-bold dark-grey-text float-right">View full report</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
<!-- Panel -->
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header white-text primary-color">
|
||||
Issues
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
|
||||
<table class="table">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-weight-bold dark-grey-text">Status</th>
|
||||
<th class="font-weight-bold dark-grey-text">Title</th>
|
||||
<th class="font-weight-bold dark-grey-text">User</th>
|
||||
<th class="font-weight-bold dark-grey-text">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge green">Open</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge green">Open</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge warning-color">In progress</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge red">Closed</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.Panel -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- /.First column -->
|
||||
|
||||
<div class="col-lg-6 col-md-12">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header white-text primary-color">
|
||||
Users activity
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-1">
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Pages/Visits</small>
|
||||
<h4>139 419</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">New visitors</small>
|
||||
<h4>51.94%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Last week</small>
|
||||
<h4>51 932</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Pages/Visits</small>
|
||||
<h4>139 419</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">New visitors</small>
|
||||
<h4>51.94%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small>Last week</small>
|
||||
<h4>51 932</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-1">
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Pages/Visits</small>
|
||||
<h4>139 419</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">New visitors</small>
|
||||
<h4>51.94%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Last week</small>
|
||||
<h4>51 932</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn btn-flat grey lighten-3 btn-rounded waves-effect font-weight-bold dark-grey-text float-right">View full report</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
<!-- Panel -->
|
||||
<div class="card mb-4 text-center py-3 red accent-2 white-text">
|
||||
<i class="fa fa-bell fa-3x mb-3"></i>
|
||||
<h4 class="h4-responsive">28 important messages</h4>
|
||||
</div>
|
||||
<!-- /.Panel -->
|
||||
|
||||
<!--Section: Intro-->
|
||||
<section class="mt-lg-5">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card">
|
||||
<div class="card-header white-text grey darken-1">
|
||||
Orders
|
||||
</div>
|
||||
|
||||
<h6 class="ml-4 pt-4 mt-1 dark-grey-text font-weight-bold"><i class="fa fa-long-arrow-up blue-text mr-3" aria-hidden="true"></i> 2000</h6>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="progress">
|
||||
<div class="progress-bar grey darken-2" role="progressbar" style="width: 45%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="font-small grey-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class=" col-md-6 mb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card">
|
||||
<div class="card-header white-text warning-color">
|
||||
Monthly sales
|
||||
</div>
|
||||
|
||||
<h6 class="ml-4 pt-4 mt-1 dark-grey-text font-weight-bold"><i class="fa fa-long-arrow-up blue-text mr-3" aria-hidden="true"></i> $ 2000</h6>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="progress">
|
||||
<div class="progress-bar grey darken-2" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="font-small grey-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
</section>
|
||||
|
||||
<!-- Second column -->
|
||||
|
||||
|
||||
<!-- /.Second column -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- /.Second row -->
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!--/Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
699
html/html/dashboards/v-3.html~HEAD
Normal file
699
html/html/dashboards/v-3.html~HEAD
Normal file
@@ -0,0 +1,699 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Dashboard v.3</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- First row -->
|
||||
<div class="row mt-lg-5">
|
||||
<!-- First column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-money primary-color"></i>
|
||||
<div class="data">
|
||||
<p>SALES</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">4 571 $</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
|
||||
<!-- Second column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-line-chart warning-color"></i>
|
||||
<div class="data">
|
||||
<p>SUBSCRIPTIONS</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">375</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar grey darken-2" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Worse than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
|
||||
<!-- Third column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-pie-chart light-blue lighten-1"></i>
|
||||
<div class="data">
|
||||
<p>TRAFFIC</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">21 479</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar grey darken-2" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Worse than last week (75%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
|
||||
<!-- Fourth column -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade cascading-admin-card">
|
||||
|
||||
<!--Card Data-->
|
||||
<div class="admin-up">
|
||||
<i class="fa fa-bar-chart red accent-2"></i>
|
||||
<div class="data">
|
||||
<p>ORGANIC TRAFFIC</p>
|
||||
<h3 class="font-weight-bold dark-grey-text">4 567</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="card-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.First row -->
|
||||
|
||||
<!-- Second row -->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!-- First column -->
|
||||
|
||||
<div class="col-lg-6 col-md-12">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header white-text primary-color">
|
||||
Recent comments and replies
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<table class="table no-header mt-1">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</td>
|
||||
<td class="hour"><small><span class="grey-text float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Merry Joe</td>
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</td>
|
||||
<td class="hour"><small><span class="grey-text float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jessie Doe</td>
|
||||
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</td>
|
||||
<td class="hour"><small><span class="grey-text float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button class="btn btn btn-flat grey lighten-3 btn-rounded waves-effect font-weight-bold dark-grey-text float-right">View full report</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
<!-- Panel -->
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header white-text primary-color">
|
||||
Issues
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
|
||||
<table class="table">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-weight-bold dark-grey-text">Status</th>
|
||||
<th class="font-weight-bold dark-grey-text">Title</th>
|
||||
<th class="font-weight-bold dark-grey-text">User</th>
|
||||
<th class="font-weight-bold dark-grey-text">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge green">Open</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge green">Open</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge warning-color">In progress</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge red">Closed</span></td>
|
||||
<td>Lorem ipsum dolor</td>
|
||||
<td>John Doe</td>
|
||||
<td class="hour"><small><span class="grey-text"><i class="fa fa-clock-o" aria-hidden="true"></i> 12 min</span></small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.Panel -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- /.First column -->
|
||||
|
||||
<div class="col-lg-6 col-md-12">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header white-text primary-color">
|
||||
Users activity
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-1">
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Pages/Visits</small>
|
||||
<h4>139 419</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">New visitors</small>
|
||||
<h4>51.94%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Last week</small>
|
||||
<h4>51 932</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Pages/Visits</small>
|
||||
<h4>139 419</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">New visitors</small>
|
||||
<h4>51.94%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small>Last week</small>
|
||||
<h4>51 932</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-1">
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Pages/Visits</small>
|
||||
<h4>139 419</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">New visitors</small>
|
||||
<h4>51.94%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<small class="grey-text">Last week</small>
|
||||
<h4>51 932</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn btn-flat grey lighten-3 btn-rounded waves-effect font-weight-bold dark-grey-text float-right">View full report</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
<!-- Panel -->
|
||||
<div class="card mb-4 text-center py-3 red accent-2 white-text">
|
||||
<i class="fa fa-bell fa-3x mb-3"></i>
|
||||
<h4 class="h4-responsive">28 important messages</h4>
|
||||
</div>
|
||||
<!-- /.Panel -->
|
||||
|
||||
<!--Section: Intro-->
|
||||
<section class="mt-lg-5">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card">
|
||||
<div class="card-header white-text grey darken-1">
|
||||
Orders
|
||||
</div>
|
||||
|
||||
<h6 class="ml-4 pt-4 mt-1 dark-grey-text font-weight-bold"><i class="fa fa-long-arrow-up blue-text mr-3" aria-hidden="true"></i> 2000</h6>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="progress">
|
||||
<div class="progress-bar grey darken-2" role="progressbar" style="width: 45%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="font-small grey-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class=" col-md-6 mb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card">
|
||||
<div class="card-header white-text warning-color">
|
||||
Monthly sales
|
||||
</div>
|
||||
|
||||
<h6 class="ml-4 pt-4 mt-1 dark-grey-text font-weight-bold"><i class="fa fa-long-arrow-up blue-text mr-3" aria-hidden="true"></i> $ 2000</h6>
|
||||
<!--/.Card Data-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
<div class="progress">
|
||||
<div class="progress-bar grey darken-2" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!--Text-->
|
||||
<p class="font-small grey-text">Better than last week (25%)</p>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
</section>
|
||||
|
||||
<!-- Second column -->
|
||||
|
||||
|
||||
<!-- /.Second column -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- /.Second row -->
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!--/Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
736
html/html/dashboards/v-4.html
Normal file
736
html/html/dashboards/v-4.html
Normal file
@@ -0,0 +1,736 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Dashboard v.4</p>
|
||||
</div>
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<!--Section heading-->
|
||||
<div class="mt-lg-5 mb-5">
|
||||
<h4 class="text-left font-weight-bold dark-grey-text">Your business is growing</h4>
|
||||
<p class="grey-text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
|
||||
<hr>
|
||||
</div>
|
||||
<!--Section: Analytical panel-->
|
||||
<section class="mb-5">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Section: Chart-->
|
||||
<section>
|
||||
<!--Grid row-->
|
||||
<div class="row mb-4">
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-5 col-md-12 mr-0">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header light-blue lighten-1">
|
||||
<h4 class="h4-responsive font-weight-bold mb-0">Visitors by country</h4>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade pb-0">
|
||||
<!--Panel data-->
|
||||
<div class="card-body pt-2">
|
||||
<table class="table no-header">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/us.png" class="flag mr-2"> United States</td>
|
||||
<td>307</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/in.png" class="flag mr-2"> India</td>
|
||||
<td>504</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/cn.png" class="flag mr-2"> China</td>
|
||||
<td>613</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/pl.png" class="flag mr-2"> Poland</td>
|
||||
<td>208</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/it.png" class="flag mr-2"> Italy</td>
|
||||
<td>314</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="btn btn-flat grey lighten-3 btn-rounded waves-effect float-right font-weight-bold dark-grey-text">View full report</button>
|
||||
</div>
|
||||
<!--/Panel data-->
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-7 col-md-12 mb-4">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue-gradient">
|
||||
<!-- Chart -->
|
||||
<div id="world-map" style="width: 100%; height: 400px"></div>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
<!--Second row-->
|
||||
<div class="row mb-0">
|
||||
<!--First column-->
|
||||
<div class="col-md-12">
|
||||
<!--Panel content-->
|
||||
<div class="card-body pt-0">
|
||||
<div class="table-responsive">
|
||||
<!--Table-->
|
||||
<table class="table table-hover">
|
||||
<!--Table head-->
|
||||
<thead>
|
||||
<tr class="rgba-stylish-strong white-text">
|
||||
<th>Campaign name</th>
|
||||
<th>Source</th>
|
||||
<th>Conversion rate</th>
|
||||
<th>Invested</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!--/Table head-->
|
||||
<!--Table body-->
|
||||
<tbody>
|
||||
<tr class="none-top-border">
|
||||
<td>Newsletter</td>
|
||||
<td>Newsletter</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Facebook</td>
|
||||
<td>Facebook</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adwords</td>
|
||||
<td>Adwords</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sponsored post</td>
|
||||
<td>Sponsored post</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Newsletter 2</td>
|
||||
<td>Newsletter 2</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!--/Table body-->
|
||||
</table>
|
||||
<!--/Table-->
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel content-->
|
||||
</div>
|
||||
<!--/First column-->
|
||||
</div>
|
||||
<!--/Second row-->
|
||||
</section>
|
||||
<!--Section: Chart-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</section>
|
||||
<!--Section: Analytical panel-->
|
||||
<!--Section: Cascading panels-->
|
||||
<section class="mb-5">
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header mdb-color lighten-4">
|
||||
<canvas id="seo" height="155px"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<div class="list-group list-panel">
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Cras justo odio <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Dapibus ac facilisi<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Morbi leo risus <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Porta ac consectet<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Vestibulum at eros <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header primary-color">
|
||||
<canvas id="traffic" height="155px"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<div class="list-group list-panel">
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Cras justo odio <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Dapibus ac facilisi<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Morbi leo risus <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Porta ac consectet<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Vestibulum at eros <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header red accent-2">
|
||||
<canvas id="conversion" height="155px"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<div class="list-group list-panel">
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Cras justo odio <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Dapibus ac facilisi<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Morbi leo risus <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Porta ac consectet<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Vestibulum at eros <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
</section>
|
||||
<!--Section: Cascading panels-->
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<script>
|
||||
/*Global settings*/
|
||||
Chart.defaults.global.defaultFontColor = '#fff';
|
||||
|
||||
$(function() {
|
||||
var data = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: "#4CAF50"
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(255,255,255,.25)",
|
||||
strokeColor: "rgba(255,255,255,.75)",
|
||||
pointColor: "#fff",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
var dataPie = [{
|
||||
value: 300,
|
||||
color: "#F7464A",
|
||||
highlight: "#FF5A5E",
|
||||
label: "Red"
|
||||
}, {
|
||||
value: 50,
|
||||
color: "#46BFBD",
|
||||
highlight: "#5AD3D1",
|
||||
label: "Green"
|
||||
}, {
|
||||
value: 100,
|
||||
color: "#FDB45C",
|
||||
highlight: "#FFC870",
|
||||
label: "Yellow"
|
||||
}]
|
||||
|
||||
var option = {
|
||||
responsive: true,
|
||||
// set font color
|
||||
scaleFontColor: "#fff",
|
||||
// font family
|
||||
defaultFontFamily: "'Roboto', sans-serif",
|
||||
// background grid lines color
|
||||
scaleGridLineColor: "rgba(255,255,255,.1)",
|
||||
// hide vertical lines
|
||||
scaleShowVerticalLines: false,
|
||||
};
|
||||
|
||||
//Get the context of the canvas element we want to select
|
||||
// var ctx = document.getElementById("sales").getContext('2d');
|
||||
// var myLineChart = new Chart(ctx).Line(data, option); //'Line' defines type of the chart.
|
||||
|
||||
// Get the context of the canvas element we want to select
|
||||
// var ctx = document.getElementById("conversion").getContext('2d');
|
||||
// var myRadarChart = new Chart(ctx).Radar(data, option);
|
||||
|
||||
//radar
|
||||
var ctxR = document.getElementById("conversion").getContext('2d');
|
||||
var myRadarChart = new Chart(ctxR, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 90, 81, 56, 55]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: [28, 48, 40, 19, 96, 27]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scaleFontColor: "#FFFFFF"
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//bar
|
||||
var ctx = document.getElementById("traffic").getContext('2d');
|
||||
var myBarChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["January", "Febuary", "March", "April", "May", "June"],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)'
|
||||
],
|
||||
borderWidth: 1,
|
||||
color: 'rgba(255, 255, 255, 1)'
|
||||
}]
|
||||
},
|
||||
optionss: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//pie
|
||||
var ctxP = document.getElementById("seo").getContext('2d');
|
||||
var myPieChart = new Chart(ctxP, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ["March", "April", "May", "June"],
|
||||
datasets: [{
|
||||
data: [160, 50, 100, 40],
|
||||
backgroundColor: ["#4285F4", "#ffbb33", "#45cafc", "#FF5252"],
|
||||
hoverBackgroundColor: ["#6ea0f2", "#fec451", "#78daffbtn-primaryvisit", "#fa6e6e"]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('.min-chart#chart-sales').easyPieChart({
|
||||
barColor: "#4caf50",
|
||||
onStep: function(from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// Data Picker Initialization
|
||||
$('.datepicker').pickadate();
|
||||
|
||||
|
||||
// Material Select Initialization
|
||||
$(document).ready(function() {
|
||||
$('.mdb-select').material_select();
|
||||
});
|
||||
|
||||
// Sidenav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
// Tooltips Initialization
|
||||
$(function() {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
<!-- JVectorMap -->
|
||||
<link rel="stylesheet" href="../../js/vendor/jvectormap/jquery-jvectormap-2.0.3.css" type="text/css" media="screen" />
|
||||
<script src="../../js/vendor/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
|
||||
<script src="../../js/vendor/jvectormap/jquery-jvectormap-world-mill.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
colors = {};
|
||||
|
||||
colors['ca'] = '#A4D886';
|
||||
colors['ru'] = '#FCECA2';
|
||||
colors['cn'] = '#F9573B';
|
||||
colors['us'] = '#87CEEB';
|
||||
colors['jp'] = '#34BD0E';
|
||||
colors['au'] = '#BCC7FC';
|
||||
colors['kz'] = '#D4624E';
|
||||
colors['de'] = '#34BD0E';
|
||||
|
||||
$('#world-map').vectorMap({
|
||||
colors: colors,
|
||||
hoverOpacity: 0.7, // opacity for :hover
|
||||
hoverColor: false
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<!-- /.JVectorMap -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,736 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Dashboard v.4</p>
|
||||
</div>
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<!--Section heading-->
|
||||
<div class="mt-lg-5 mb-5">
|
||||
<h4 class="text-left font-weight-bold dark-grey-text">Your business is growing</h4>
|
||||
<p class="grey-text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
|
||||
<hr>
|
||||
</div>
|
||||
<!--Section: Analytical panel-->
|
||||
<section class="mb-5">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Section: Chart-->
|
||||
<section>
|
||||
<!--Grid row-->
|
||||
<div class="row mb-4">
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-5 col-md-12 mr-0">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header light-blue lighten-1">
|
||||
<h4 class="h4-responsive font-weight-bold mb-0">Visitors by country</h4>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade pb-0">
|
||||
<!--Panel data-->
|
||||
<div class="card-body pt-2">
|
||||
<table class="table no-header">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/us.png" class="flag mr-2"> United States</td>
|
||||
<td>307</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/in.png" class="flag mr-2"> India</td>
|
||||
<td>504</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/cn.png" class="flag mr-2"> China</td>
|
||||
<td>613</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/pl.png" class="flag mr-2"> Poland</td>
|
||||
<td>208</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/it.png" class="flag mr-2"> Italy</td>
|
||||
<td>314</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="btn btn-flat grey lighten-3 btn-rounded waves-effect float-right font-weight-bold dark-grey-text">View full report</button>
|
||||
</div>
|
||||
<!--/Panel data-->
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-7 col-md-12 mb-4">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue-gradient">
|
||||
<!-- Chart -->
|
||||
<div id="world-map" style="width: 100%; height: 400px"></div>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
<!--Second row-->
|
||||
<div class="row mb-0">
|
||||
<!--First column-->
|
||||
<div class="col-md-12">
|
||||
<!--Panel content-->
|
||||
<div class="card-body pt-0">
|
||||
<div class="table-responsive">
|
||||
<!--Table-->
|
||||
<table class="table table-hover">
|
||||
<!--Table head-->
|
||||
<thead>
|
||||
<tr class="rgba-stylish-strong white-text">
|
||||
<th>Campaign name</th>
|
||||
<th>Source</th>
|
||||
<th>Conversion rate</th>
|
||||
<th>Invested</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!--/Table head-->
|
||||
<!--Table body-->
|
||||
<tbody>
|
||||
<tr class="none-top-border">
|
||||
<td>Newsletter</td>
|
||||
<td>Newsletter</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Facebook</td>
|
||||
<td>Facebook</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adwords</td>
|
||||
<td>Adwords</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sponsored post</td>
|
||||
<td>Sponsored post</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Newsletter 2</td>
|
||||
<td>Newsletter 2</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!--/Table body-->
|
||||
</table>
|
||||
<!--/Table-->
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel content-->
|
||||
</div>
|
||||
<!--/First column-->
|
||||
</div>
|
||||
<!--/Second row-->
|
||||
</section>
|
||||
<!--Section: Chart-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</section>
|
||||
<!--Section: Analytical panel-->
|
||||
<!--Section: Cascading panels-->
|
||||
<section class="mb-5">
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header mdb-color lighten-4">
|
||||
<canvas id="seo" height="155px"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<div class="list-group list-panel">
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Cras justo odio <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Dapibus ac facilisi<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Morbi leo risus <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Porta ac consectet<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Vestibulum at eros <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header primary-color">
|
||||
<canvas id="traffic" height="155px"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<div class="list-group list-panel">
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Cras justo odio <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Dapibus ac facilisi<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Morbi leo risus <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Porta ac consectet<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Vestibulum at eros <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header red accent-2">
|
||||
<canvas id="conversion" height="155px"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<div class="list-group list-panel">
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Cras justo odio <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Dapibus ac facilisi<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Morbi leo risus <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Porta ac consectet<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Vestibulum at eros <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
</section>
|
||||
<!--Section: Cascading panels-->
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<script>
|
||||
/*Global settings*/
|
||||
Chart.defaults.global.defaultFontColor = '#fff';
|
||||
|
||||
$(function() {
|
||||
var data = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: "#4CAF50"
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(255,255,255,.25)",
|
||||
strokeColor: "rgba(255,255,255,.75)",
|
||||
pointColor: "#fff",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
var dataPie = [{
|
||||
value: 300,
|
||||
color: "#F7464A",
|
||||
highlight: "#FF5A5E",
|
||||
label: "Red"
|
||||
}, {
|
||||
value: 50,
|
||||
color: "#46BFBD",
|
||||
highlight: "#5AD3D1",
|
||||
label: "Green"
|
||||
}, {
|
||||
value: 100,
|
||||
color: "#FDB45C",
|
||||
highlight: "#FFC870",
|
||||
label: "Yellow"
|
||||
}]
|
||||
|
||||
var option = {
|
||||
responsive: true,
|
||||
// set font color
|
||||
scaleFontColor: "#fff",
|
||||
// font family
|
||||
defaultFontFamily: "'Roboto', sans-serif",
|
||||
// background grid lines color
|
||||
scaleGridLineColor: "rgba(255,255,255,.1)",
|
||||
// hide vertical lines
|
||||
scaleShowVerticalLines: false,
|
||||
};
|
||||
|
||||
//Get the context of the canvas element we want to select
|
||||
// var ctx = document.getElementById("sales").getContext('2d');
|
||||
// var myLineChart = new Chart(ctx).Line(data, option); //'Line' defines type of the chart.
|
||||
|
||||
// Get the context of the canvas element we want to select
|
||||
// var ctx = document.getElementById("conversion").getContext('2d');
|
||||
// var myRadarChart = new Chart(ctx).Radar(data, option);
|
||||
|
||||
//radar
|
||||
var ctxR = document.getElementById("conversion").getContext('2d');
|
||||
var myRadarChart = new Chart(ctxR, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 90, 81, 56, 55]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: [28, 48, 40, 19, 96, 27]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scaleFontColor: "#FFFFFF"
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//bar
|
||||
var ctx = document.getElementById("traffic").getContext('2d');
|
||||
var myBarChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["January", "Febuary", "March", "April", "May", "June"],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)'
|
||||
],
|
||||
borderWidth: 1,
|
||||
color: 'rgba(255, 255, 255, 1)'
|
||||
}]
|
||||
},
|
||||
optionss: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//pie
|
||||
var ctxP = document.getElementById("seo").getContext('2d');
|
||||
var myPieChart = new Chart(ctxP, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ["March", "April", "May", "June"],
|
||||
datasets: [{
|
||||
data: [160, 50, 100, 40],
|
||||
backgroundColor: ["#4285F4", "#ffbb33", "#45cafc", "#FF5252"],
|
||||
hoverBackgroundColor: ["#6ea0f2", "#fec451", "#78daffbtn-primaryvisit", "#fa6e6e"]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('.min-chart#chart-sales').easyPieChart({
|
||||
barColor: "#4caf50",
|
||||
onStep: function(from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// Data Picker Initialization
|
||||
$('.datepicker').pickadate();
|
||||
|
||||
|
||||
// Material Select Initialization
|
||||
$(document).ready(function() {
|
||||
$('.mdb-select').material_select();
|
||||
});
|
||||
|
||||
// Sidenav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
// Tooltips Initialization
|
||||
$(function() {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
<!-- JVectorMap -->
|
||||
<link rel="stylesheet" href="../../js/vendor/jvectormap/jquery-jvectormap-2.0.3.css" type="text/css" media="screen" />
|
||||
<script src="../../js/vendor/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
|
||||
<script src="../../js/vendor/jvectormap/jquery-jvectormap-world-mill.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
colors = {};
|
||||
|
||||
colors['ca'] = '#A4D886';
|
||||
colors['ru'] = '#FCECA2';
|
||||
colors['cn'] = '#F9573B';
|
||||
colors['us'] = '#87CEEB';
|
||||
colors['jp'] = '#34BD0E';
|
||||
colors['au'] = '#BCC7FC';
|
||||
colors['kz'] = '#D4624E';
|
||||
colors['de'] = '#34BD0E';
|
||||
|
||||
$('#world-map').vectorMap({
|
||||
colors: colors,
|
||||
hoverOpacity: 0.7, // opacity for :hover
|
||||
hoverColor: false
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<!-- /.JVectorMap -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
736
html/html/dashboards/v-4.html~HEAD
Normal file
736
html/html/dashboards/v-4.html~HEAD
Normal file
@@ -0,0 +1,736 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Dashboard v.4</p>
|
||||
</div>
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<!--Section heading-->
|
||||
<div class="mt-lg-5 mb-5">
|
||||
<h4 class="text-left font-weight-bold dark-grey-text">Your business is growing</h4>
|
||||
<p class="grey-text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
|
||||
<hr>
|
||||
</div>
|
||||
<!--Section: Analytical panel-->
|
||||
<section class="mb-5">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Section: Chart-->
|
||||
<section>
|
||||
<!--Grid row-->
|
||||
<div class="row mb-4">
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-5 col-md-12 mr-0">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header light-blue lighten-1">
|
||||
<h4 class="h4-responsive font-weight-bold mb-0">Visitors by country</h4>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade pb-0">
|
||||
<!--Panel data-->
|
||||
<div class="card-body pt-2">
|
||||
<table class="table no-header">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/us.png" class="flag mr-2"> United States</td>
|
||||
<td>307</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/in.png" class="flag mr-2"> India</td>
|
||||
<td>504</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/cn.png" class="flag mr-2"> China</td>
|
||||
<td>613</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/pl.png" class="flag mr-2"> Poland</td>
|
||||
<td>208</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../../img/flags/it.png" class="flag mr-2"> Italy</td>
|
||||
<td>314</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="btn btn-flat grey lighten-3 btn-rounded waves-effect float-right font-weight-bold dark-grey-text">View full report</button>
|
||||
</div>
|
||||
<!--/Panel data-->
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
<!--Grid column-->
|
||||
<div class="col-xl-7 col-md-12 mb-4">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue-gradient">
|
||||
<!-- Chart -->
|
||||
<div id="world-map" style="width: 100%; height: 400px"></div>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
<!--Second row-->
|
||||
<div class="row mb-0">
|
||||
<!--First column-->
|
||||
<div class="col-md-12">
|
||||
<!--Panel content-->
|
||||
<div class="card-body pt-0">
|
||||
<div class="table-responsive">
|
||||
<!--Table-->
|
||||
<table class="table table-hover">
|
||||
<!--Table head-->
|
||||
<thead>
|
||||
<tr class="rgba-stylish-strong white-text">
|
||||
<th>Campaign name</th>
|
||||
<th>Source</th>
|
||||
<th>Conversion rate</th>
|
||||
<th>Invested</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!--/Table head-->
|
||||
<!--Table body-->
|
||||
<tbody>
|
||||
<tr class="none-top-border">
|
||||
<td>Newsletter</td>
|
||||
<td>Newsletter</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Facebook</td>
|
||||
<td>Facebook</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adwords</td>
|
||||
<td>Adwords</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sponsored post</td>
|
||||
<td>Sponsored post</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Newsletter 2</td>
|
||||
<td>Newsletter 2</td>
|
||||
<td>5%</td>
|
||||
<td>100$</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!--/Table body-->
|
||||
</table>
|
||||
<!--/Table-->
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel content-->
|
||||
</div>
|
||||
<!--/First column-->
|
||||
</div>
|
||||
<!--/Second row-->
|
||||
</section>
|
||||
<!--Section: Chart-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</section>
|
||||
<!--Section: Analytical panel-->
|
||||
<!--Section: Cascading panels-->
|
||||
<section class="mb-5">
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header mdb-color lighten-4">
|
||||
<canvas id="seo" height="155px"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<div class="list-group list-panel">
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Cras justo odio <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Dapibus ac facilisi<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Morbi leo risus <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Porta ac consectet<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Vestibulum at eros <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header primary-color">
|
||||
<canvas id="traffic" height="155px"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<div class="list-group list-panel">
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Cras justo odio <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Dapibus ac facilisi<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Morbi leo risus <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Porta ac consectet<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Vestibulum at eros <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header red accent-2">
|
||||
<canvas id="conversion" height="155px"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
<div class="list-group list-panel">
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Cras justo odio <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Dapibus ac facilisi<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Morbi leo risus <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Porta ac consectet<i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
<a href="#" class="list-group-item d-flex justify-content-between dark-grey-text">Vestibulum at eros <i class="fa fa-wrench ml-auto" data-toggle="tooltip" data-placement="top" title="Click to fix"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
</section>
|
||||
<!--Section: Cascading panels-->
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<script>
|
||||
/*Global settings*/
|
||||
Chart.defaults.global.defaultFontColor = '#fff';
|
||||
|
||||
$(function() {
|
||||
var data = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: "#4CAF50"
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(255,255,255,.25)",
|
||||
strokeColor: "rgba(255,255,255,.75)",
|
||||
pointColor: "#fff",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
var dataPie = [{
|
||||
value: 300,
|
||||
color: "#F7464A",
|
||||
highlight: "#FF5A5E",
|
||||
label: "Red"
|
||||
}, {
|
||||
value: 50,
|
||||
color: "#46BFBD",
|
||||
highlight: "#5AD3D1",
|
||||
label: "Green"
|
||||
}, {
|
||||
value: 100,
|
||||
color: "#FDB45C",
|
||||
highlight: "#FFC870",
|
||||
label: "Yellow"
|
||||
}]
|
||||
|
||||
var option = {
|
||||
responsive: true,
|
||||
// set font color
|
||||
scaleFontColor: "#fff",
|
||||
// font family
|
||||
defaultFontFamily: "'Roboto', sans-serif",
|
||||
// background grid lines color
|
||||
scaleGridLineColor: "rgba(255,255,255,.1)",
|
||||
// hide vertical lines
|
||||
scaleShowVerticalLines: false,
|
||||
};
|
||||
|
||||
//Get the context of the canvas element we want to select
|
||||
// var ctx = document.getElementById("sales").getContext('2d');
|
||||
// var myLineChart = new Chart(ctx).Line(data, option); //'Line' defines type of the chart.
|
||||
|
||||
// Get the context of the canvas element we want to select
|
||||
// var ctx = document.getElementById("conversion").getContext('2d');
|
||||
// var myRadarChart = new Chart(ctx).Radar(data, option);
|
||||
|
||||
//radar
|
||||
var ctxR = document.getElementById("conversion").getContext('2d');
|
||||
var myRadarChart = new Chart(ctxR, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 90, 81, 56, 55]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: [28, 48, 40, 19, 96, 27]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scaleFontColor: "#FFFFFF"
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//bar
|
||||
var ctx = document.getElementById("traffic").getContext('2d');
|
||||
var myBarChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["January", "Febuary", "March", "April", "May", "June"],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)',
|
||||
'rgba(255, 255, 255, 0.3)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)'
|
||||
],
|
||||
borderWidth: 1,
|
||||
color: 'rgba(255, 255, 255, 1)'
|
||||
}]
|
||||
},
|
||||
optionss: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//pie
|
||||
var ctxP = document.getElementById("seo").getContext('2d');
|
||||
var myPieChart = new Chart(ctxP, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ["March", "April", "May", "June"],
|
||||
datasets: [{
|
||||
data: [160, 50, 100, 40],
|
||||
backgroundColor: ["#4285F4", "#ffbb33", "#45cafc", "#FF5252"],
|
||||
hoverBackgroundColor: ["#6ea0f2", "#fec451", "#78daffbtn-primaryvisit", "#fa6e6e"]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('.min-chart#chart-sales').easyPieChart({
|
||||
barColor: "#4caf50",
|
||||
onStep: function(from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// Data Picker Initialization
|
||||
$('.datepicker').pickadate();
|
||||
|
||||
|
||||
// Material Select Initialization
|
||||
$(document).ready(function() {
|
||||
$('.mdb-select').material_select();
|
||||
});
|
||||
|
||||
// Sidenav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
// Tooltips Initialization
|
||||
$(function() {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
<!-- JVectorMap -->
|
||||
<link rel="stylesheet" href="../../js/vendor/jvectormap/jquery-jvectormap-2.0.3.css" type="text/css" media="screen" />
|
||||
<script src="../../js/vendor/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
|
||||
<script src="../../js/vendor/jvectormap/jquery-jvectormap-world-mill.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
colors = {};
|
||||
|
||||
colors['ca'] = '#A4D886';
|
||||
colors['ru'] = '#FCECA2';
|
||||
colors['cn'] = '#F9573B';
|
||||
colors['us'] = '#87CEEB';
|
||||
colors['jp'] = '#34BD0E';
|
||||
colors['au'] = '#BCC7FC';
|
||||
colors['kz'] = '#D4624E';
|
||||
colors['de'] = '#34BD0E';
|
||||
|
||||
$('#world-map').vectorMap({
|
||||
colors: colors,
|
||||
hoverOpacity: 0.7, // opacity for :hover
|
||||
hoverColor: false
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<!-- /.JVectorMap -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
756
html/html/dashboards/v-5.html
Normal file
756
html/html/dashboards/v-5.html
Normal file
@@ -0,0 +1,756 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Dashboard v.5</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Heading & Date-->
|
||||
<div class="row mb-5 mt-lg-5">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-6 panel-title mb-5 mt-3">
|
||||
<h5><span class="px-4 py-3 white-text z-depth-1-half blue lighten-1" style="
|
||||
border-radius: 5px;">Search analitycs</span></h5>
|
||||
</div>
|
||||
<!--/First column-->
|
||||
|
||||
<!--Second column-->
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body pb-1">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-4 col-sm-12">
|
||||
<!--Date select-->
|
||||
<select class="mdb-select colorful-select dropdown-primary">
|
||||
<option value="3">Last 30 days</option>
|
||||
<option value="1">Today</option>
|
||||
<option value="2">Yesterday</option>
|
||||
<option value="3">Last 7 days</option>
|
||||
<option value="3">Previous week</option>
|
||||
<option value="3">Previous month</option>
|
||||
<option value="3">Custom date</option>
|
||||
</select>
|
||||
<!--/Date select-->
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 px-4">
|
||||
<div class="md-form mr-2 mt-2">
|
||||
<input placeholder="From" type="text" id="from" class="form-control datepicker">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 px-4">
|
||||
<div class="md-form mt-2">
|
||||
<input placeholder="To" type="text" id="to" class="form-control datepicker">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/Second column-->
|
||||
|
||||
</div>
|
||||
<!--Heading & Date-->
|
||||
|
||||
<!--Section: Main chart-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue-gradient">
|
||||
<canvas id="sales"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade blue-panel text-center">
|
||||
|
||||
<!--Second row-->
|
||||
<div class="row mx-3 mb-0 text-center">
|
||||
<div class="col mt-1 mb-2">
|
||||
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-info btn-md active">
|
||||
<input type="checkbox" name="options" id="option1" autocomplete="off" checked>Clicks <strong>1000</strong> <i class="fa fa-arrow-up ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-info btn-md">
|
||||
<input type="checkbox" name="options" id="option2" autocomplete="off">Impressions <strong>1000</strong> <i class="fa fa-arrow-up ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn red accent-2 btn-md">
|
||||
<input type="checkbox" name="options" id="option2" autocomplete="off">CTR <strong>5%</strong> <i class="fa fa-arrow-down ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn red accent-2 btn-md">
|
||||
<input type="checkbox" name="options" id="option2" autocomplete="off">Position <strong>4.14</strong> <i class="fa fa-arrow-down ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/Second row-->
|
||||
|
||||
<!--Third row-->
|
||||
<div class="row mx-3 mb-5 text-center">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col">
|
||||
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option1" autocomplete="off" checked>Queries
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option2" autocomplete="off">Pages
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option3" autocomplete="off">Countries
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option4" autocomplete="off">Devices
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option4" autocomplete="off">Search type
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/Second column-->
|
||||
|
||||
</div>
|
||||
<!--/Third row-->
|
||||
|
||||
<!--Third row-->
|
||||
<div class="row mb-0">
|
||||
<!--First column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<!--Panel content-->
|
||||
<div class="card-body pt-0">
|
||||
<!--Table-->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<!--Table head-->
|
||||
<thead class="rgba-stylish-strong white-text">
|
||||
<tr>
|
||||
<th>Queries</th>
|
||||
<th>Clicks</th>
|
||||
<th>Impressions</th>
|
||||
<th>CTR</th>
|
||||
<th>Position</th>
|
||||
<th>Day</th>
|
||||
<th>Week</th>
|
||||
<th>Month</th>
|
||||
<th>Local</th>
|
||||
<th>Global</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!--/Table head-->
|
||||
|
||||
<!--Table body-->
|
||||
<tbody>
|
||||
<tr class="none-top-border">
|
||||
<td>bootstrap material design</td>
|
||||
<td>1000</td>
|
||||
<td>10000</td>
|
||||
<td>5%</td>
|
||||
<td>3.21</td>
|
||||
<td>2 <span class="badge primary-color">1 <i class="fa fa-arrow-circle-up"></i></span></td>
|
||||
<td>2 <span class="badge red accent-2">1 <i class="fa fa-arrow-circle-down"></i></span></td>
|
||||
<td>2 <span class="badge grey">0 </span></td>
|
||||
<td>200 (US)</td>
|
||||
<td>2000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bootstrap material design</td>
|
||||
<td>1000</td>
|
||||
<td>10000</td>
|
||||
<td>5%</td>
|
||||
<td>3.21</td>
|
||||
<td>2 <span class="badge primary-color">1 <i class="fa fa-arrow-circle-up"></i></span></td>
|
||||
<td>2 <span class="badge red accent-2">1 <i class="fa fa-arrow-circle-down"></i></span></td>
|
||||
<td>2 <span class="badge grey">0 </span></td>
|
||||
<td>200 (US)</td>
|
||||
<td>2000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bootstrap material design</td>
|
||||
<td>1000</td>
|
||||
<td>10000</td>
|
||||
<td>5%</td>
|
||||
<td>3.21</td>
|
||||
<td>2 <span class="badge primary-color">1 <i class="fa fa-arrow-circle-up"></i></span></td>
|
||||
<td>2 <span class="badge red accent-2">1 <i class="fa fa-arrow-circle-down"></i></span></td>
|
||||
<td>2 <span class="badge grey">0 </span></td>
|
||||
<td>200 (US)</td>
|
||||
<td>2000</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
<!--/Table body-->
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<!--/Table-->
|
||||
|
||||
<!--Bottom Table UI-->
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
<!--Name-->
|
||||
<select class="mdb-select colorful-select dropdown-primary mt-2">
|
||||
<option value="" disabled >Rows number</option>
|
||||
<option value="1" selected>5 rows</option>
|
||||
<option value="2">25 rows</option>
|
||||
<option value="3">50 rows</option>
|
||||
<option value="4">100 rows</option>
|
||||
</select>
|
||||
|
||||
<!--Pagination -->
|
||||
<nav class="my-4">
|
||||
<ul class="pagination pagination-circle pg-blue mb-0">
|
||||
|
||||
<!--First-->
|
||||
<li class="page-item disabled clearfix d-none d-md-block"><a class="page-link">First</a></li>
|
||||
|
||||
<!--Arrow left-->
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--Numbers-->
|
||||
<li class="page-item active"><a class="page-link">1</a></li>
|
||||
<li class="page-item"><a class="page-link">2</a></li>
|
||||
<li class="page-item"><a class="page-link">3</a></li>
|
||||
<li class="page-item"><a class="page-link">4</a></li>
|
||||
<li class="page-item"><a class="page-link">5</a></li>
|
||||
|
||||
<!--Arrow right-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--First-->
|
||||
<li class="page-item clearfix d-none d-md-block"><a class="page-link">Last</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<!--/Pagination -->
|
||||
|
||||
</div>
|
||||
<!--Bottom Table UI-->
|
||||
|
||||
</div>
|
||||
<!--/.Panel content-->
|
||||
|
||||
</div>
|
||||
<!--/First column-->
|
||||
</div>
|
||||
<!--/Third row-->
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--/Section: Main chart-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// Data Picker Initialization
|
||||
$('.datepicker').pickadate();
|
||||
|
||||
// Material Select Initialization
|
||||
$(document).ready(function () {
|
||||
$('.mdb-select').material_select();
|
||||
});
|
||||
|
||||
// Tooltips Initialization
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
/*Global settings*/
|
||||
Chart.defaults.global.defaultFontColor = '#fff';
|
||||
$(function () {
|
||||
var data = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: "#4CAF50"
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(255,255,255,.25)",
|
||||
strokeColor: "rgba(255,255,255,.75)",
|
||||
pointColor: "#fff",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [28, 48, 40, 19, 56, 27, 60]
|
||||
}]
|
||||
};
|
||||
|
||||
var dataOneLine = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [35, 55, 44, 58, 53, 55, 60],
|
||||
backgroundColor: "#4CAF50"
|
||||
}]
|
||||
};
|
||||
|
||||
var option = {
|
||||
responsive: true,
|
||||
// set font color
|
||||
scaleFontColor: "#fff",
|
||||
// font family
|
||||
defaultFontFamily: "'Roboto', sans-serif",
|
||||
// background grid lines color
|
||||
scaleGridLineColor: "rgba(255,255,255,.1)",
|
||||
// hide vertical lines
|
||||
scaleShowVerticalLines: false,
|
||||
};
|
||||
|
||||
//line
|
||||
var ctxL = document.getElementById("sales").getContext('2d');
|
||||
var myLineChart = new Chart(ctxL, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)'
|
||||
],
|
||||
borderWidth: 1,
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)'
|
||||
],
|
||||
borderWidth: 1,
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,756 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Dashboard v.5</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Heading & Date-->
|
||||
<div class="row mb-5 mt-lg-5">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-6 panel-title mb-5 mt-3">
|
||||
<h5><span class="px-4 py-3 white-text z-depth-1-half blue lighten-1" style="
|
||||
border-radius: 5px;">Search analitycs</span></h5>
|
||||
</div>
|
||||
<!--/First column-->
|
||||
|
||||
<!--Second column-->
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body pb-1">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-4 col-sm-12">
|
||||
<!--Date select-->
|
||||
<select class="mdb-select colorful-select dropdown-primary">
|
||||
<option value="3">Last 30 days</option>
|
||||
<option value="1">Today</option>
|
||||
<option value="2">Yesterday</option>
|
||||
<option value="3">Last 7 days</option>
|
||||
<option value="3">Previous week</option>
|
||||
<option value="3">Previous month</option>
|
||||
<option value="3">Custom date</option>
|
||||
</select>
|
||||
<!--/Date select-->
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 px-4">
|
||||
<div class="md-form mr-2 mt-2">
|
||||
<input placeholder="From" type="text" id="from" class="form-control datepicker">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 px-4">
|
||||
<div class="md-form mt-2">
|
||||
<input placeholder="To" type="text" id="to" class="form-control datepicker">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/Second column-->
|
||||
|
||||
</div>
|
||||
<!--Heading & Date-->
|
||||
|
||||
<!--Section: Main chart-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue-gradient">
|
||||
<canvas id="sales"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade blue-panel text-center">
|
||||
|
||||
<!--Second row-->
|
||||
<div class="row mx-3 mb-0 text-center">
|
||||
<div class="col mt-1 mb-2">
|
||||
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-info btn-md active">
|
||||
<input type="checkbox" name="options" id="option1" autocomplete="off" checked>Clicks <strong>1000</strong> <i class="fa fa-arrow-up ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-info btn-md">
|
||||
<input type="checkbox" name="options" id="option2" autocomplete="off">Impressions <strong>1000</strong> <i class="fa fa-arrow-up ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn red accent-2 btn-md">
|
||||
<input type="checkbox" name="options" id="option2" autocomplete="off">CTR <strong>5%</strong> <i class="fa fa-arrow-down ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn red accent-2 btn-md">
|
||||
<input type="checkbox" name="options" id="option2" autocomplete="off">Position <strong>4.14</strong> <i class="fa fa-arrow-down ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/Second row-->
|
||||
|
||||
<!--Third row-->
|
||||
<div class="row mx-3 mb-5 text-center">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col">
|
||||
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option1" autocomplete="off" checked>Queries
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option2" autocomplete="off">Pages
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option3" autocomplete="off">Countries
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option4" autocomplete="off">Devices
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option4" autocomplete="off">Search type
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/Second column-->
|
||||
|
||||
</div>
|
||||
<!--/Third row-->
|
||||
|
||||
<!--Third row-->
|
||||
<div class="row mb-0">
|
||||
<!--First column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<!--Panel content-->
|
||||
<div class="card-body pt-0">
|
||||
<!--Table-->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<!--Table head-->
|
||||
<thead class="rgba-stylish-strong white-text">
|
||||
<tr>
|
||||
<th>Queries</th>
|
||||
<th>Clicks</th>
|
||||
<th>Impressions</th>
|
||||
<th>CTR</th>
|
||||
<th>Position</th>
|
||||
<th>Day</th>
|
||||
<th>Week</th>
|
||||
<th>Month</th>
|
||||
<th>Local</th>
|
||||
<th>Global</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!--/Table head-->
|
||||
|
||||
<!--Table body-->
|
||||
<tbody>
|
||||
<tr class="none-top-border">
|
||||
<td>bootstrap material design</td>
|
||||
<td>1000</td>
|
||||
<td>10000</td>
|
||||
<td>5%</td>
|
||||
<td>3.21</td>
|
||||
<td>2 <span class="badge primary-color">1 <i class="fa fa-arrow-circle-up"></i></span></td>
|
||||
<td>2 <span class="badge red accent-2">1 <i class="fa fa-arrow-circle-down"></i></span></td>
|
||||
<td>2 <span class="badge grey">0 </span></td>
|
||||
<td>200 (US)</td>
|
||||
<td>2000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bootstrap material design</td>
|
||||
<td>1000</td>
|
||||
<td>10000</td>
|
||||
<td>5%</td>
|
||||
<td>3.21</td>
|
||||
<td>2 <span class="badge primary-color">1 <i class="fa fa-arrow-circle-up"></i></span></td>
|
||||
<td>2 <span class="badge red accent-2">1 <i class="fa fa-arrow-circle-down"></i></span></td>
|
||||
<td>2 <span class="badge grey">0 </span></td>
|
||||
<td>200 (US)</td>
|
||||
<td>2000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bootstrap material design</td>
|
||||
<td>1000</td>
|
||||
<td>10000</td>
|
||||
<td>5%</td>
|
||||
<td>3.21</td>
|
||||
<td>2 <span class="badge primary-color">1 <i class="fa fa-arrow-circle-up"></i></span></td>
|
||||
<td>2 <span class="badge red accent-2">1 <i class="fa fa-arrow-circle-down"></i></span></td>
|
||||
<td>2 <span class="badge grey">0 </span></td>
|
||||
<td>200 (US)</td>
|
||||
<td>2000</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
<!--/Table body-->
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<!--/Table-->
|
||||
|
||||
<!--Bottom Table UI-->
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
<!--Name-->
|
||||
<select class="mdb-select colorful-select dropdown-primary mt-2">
|
||||
<option value="" disabled >Rows number</option>
|
||||
<option value="1" selected>5 rows</option>
|
||||
<option value="2">25 rows</option>
|
||||
<option value="3">50 rows</option>
|
||||
<option value="4">100 rows</option>
|
||||
</select>
|
||||
|
||||
<!--Pagination -->
|
||||
<nav class="my-4">
|
||||
<ul class="pagination pagination-circle pg-blue mb-0">
|
||||
|
||||
<!--First-->
|
||||
<li class="page-item disabled clearfix d-none d-md-block"><a class="page-link">First</a></li>
|
||||
|
||||
<!--Arrow left-->
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--Numbers-->
|
||||
<li class="page-item active"><a class="page-link">1</a></li>
|
||||
<li class="page-item"><a class="page-link">2</a></li>
|
||||
<li class="page-item"><a class="page-link">3</a></li>
|
||||
<li class="page-item"><a class="page-link">4</a></li>
|
||||
<li class="page-item"><a class="page-link">5</a></li>
|
||||
|
||||
<!--Arrow right-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--First-->
|
||||
<li class="page-item clearfix d-none d-md-block"><a class="page-link">Last</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<!--/Pagination -->
|
||||
|
||||
</div>
|
||||
<!--Bottom Table UI-->
|
||||
|
||||
</div>
|
||||
<!--/.Panel content-->
|
||||
|
||||
</div>
|
||||
<!--/First column-->
|
||||
</div>
|
||||
<!--/Third row-->
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--/Section: Main chart-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// Data Picker Initialization
|
||||
$('.datepicker').pickadate();
|
||||
|
||||
// Material Select Initialization
|
||||
$(document).ready(function () {
|
||||
$('.mdb-select').material_select();
|
||||
});
|
||||
|
||||
// Tooltips Initialization
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
/*Global settings*/
|
||||
Chart.defaults.global.defaultFontColor = '#fff';
|
||||
$(function () {
|
||||
var data = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: "#4CAF50"
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(255,255,255,.25)",
|
||||
strokeColor: "rgba(255,255,255,.75)",
|
||||
pointColor: "#fff",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [28, 48, 40, 19, 56, 27, 60]
|
||||
}]
|
||||
};
|
||||
|
||||
var dataOneLine = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [35, 55, 44, 58, 53, 55, 60],
|
||||
backgroundColor: "#4CAF50"
|
||||
}]
|
||||
};
|
||||
|
||||
var option = {
|
||||
responsive: true,
|
||||
// set font color
|
||||
scaleFontColor: "#fff",
|
||||
// font family
|
||||
defaultFontFamily: "'Roboto', sans-serif",
|
||||
// background grid lines color
|
||||
scaleGridLineColor: "rgba(255,255,255,.1)",
|
||||
// hide vertical lines
|
||||
scaleShowVerticalLines: false,
|
||||
};
|
||||
|
||||
//line
|
||||
var ctxL = document.getElementById("sales").getContext('2d');
|
||||
var myLineChart = new Chart(ctxL, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)'
|
||||
],
|
||||
borderWidth: 1,
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)'
|
||||
],
|
||||
borderWidth: 1,
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
756
html/html/dashboards/v-5.html~HEAD
Normal file
756
html/html/dashboards/v-5.html~HEAD
Normal file
@@ -0,0 +1,756 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Dashboard v.5</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Heading & Date-->
|
||||
<div class="row mb-5 mt-lg-5">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-6 panel-title mb-5 mt-3">
|
||||
<h5><span class="px-4 py-3 white-text z-depth-1-half blue lighten-1" style="
|
||||
border-radius: 5px;">Search analitycs</span></h5>
|
||||
</div>
|
||||
<!--/First column-->
|
||||
|
||||
<!--Second column-->
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body pb-1">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-4 col-sm-12">
|
||||
<!--Date select-->
|
||||
<select class="mdb-select colorful-select dropdown-primary">
|
||||
<option value="3">Last 30 days</option>
|
||||
<option value="1">Today</option>
|
||||
<option value="2">Yesterday</option>
|
||||
<option value="3">Last 7 days</option>
|
||||
<option value="3">Previous week</option>
|
||||
<option value="3">Previous month</option>
|
||||
<option value="3">Custom date</option>
|
||||
</select>
|
||||
<!--/Date select-->
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 px-4">
|
||||
<div class="md-form mr-2 mt-2">
|
||||
<input placeholder="From" type="text" id="from" class="form-control datepicker">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 px-4">
|
||||
<div class="md-form mt-2">
|
||||
<input placeholder="To" type="text" id="to" class="form-control datepicker">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/Second column-->
|
||||
|
||||
</div>
|
||||
<!--Heading & Date-->
|
||||
|
||||
<!--Section: Main chart-->
|
||||
<section>
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header blue-gradient">
|
||||
<canvas id="sales"></canvas>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade blue-panel text-center">
|
||||
|
||||
<!--Second row-->
|
||||
<div class="row mx-3 mb-0 text-center">
|
||||
<div class="col mt-1 mb-2">
|
||||
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-info btn-md active">
|
||||
<input type="checkbox" name="options" id="option1" autocomplete="off" checked>Clicks <strong>1000</strong> <i class="fa fa-arrow-up ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-info btn-md">
|
||||
<input type="checkbox" name="options" id="option2" autocomplete="off">Impressions <strong>1000</strong> <i class="fa fa-arrow-up ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn red accent-2 btn-md">
|
||||
<input type="checkbox" name="options" id="option2" autocomplete="off">CTR <strong>5%</strong> <i class="fa fa-arrow-down ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn red accent-2 btn-md">
|
||||
<input type="checkbox" name="options" id="option2" autocomplete="off">Position <strong>4.14</strong> <i class="fa fa-arrow-down ml-2 white-text"></i> <strong> 25%</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/Second row-->
|
||||
|
||||
<!--Third row-->
|
||||
<div class="row mx-3 mb-5 text-center">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col">
|
||||
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option1" autocomplete="off" checked>Queries
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option2" autocomplete="off">Pages
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option3" autocomplete="off">Countries
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option4" autocomplete="off">Devices
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group mt-1" data-toggle="buttons">
|
||||
<label class="btn btn-primary btn-md">
|
||||
<input type="radio" name="options" id="option4" autocomplete="off">Search type
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/Second column-->
|
||||
|
||||
</div>
|
||||
<!--/Third row-->
|
||||
|
||||
<!--Third row-->
|
||||
<div class="row mb-0">
|
||||
<!--First column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<!--Panel content-->
|
||||
<div class="card-body pt-0">
|
||||
<!--Table-->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<!--Table head-->
|
||||
<thead class="rgba-stylish-strong white-text">
|
||||
<tr>
|
||||
<th>Queries</th>
|
||||
<th>Clicks</th>
|
||||
<th>Impressions</th>
|
||||
<th>CTR</th>
|
||||
<th>Position</th>
|
||||
<th>Day</th>
|
||||
<th>Week</th>
|
||||
<th>Month</th>
|
||||
<th>Local</th>
|
||||
<th>Global</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!--/Table head-->
|
||||
|
||||
<!--Table body-->
|
||||
<tbody>
|
||||
<tr class="none-top-border">
|
||||
<td>bootstrap material design</td>
|
||||
<td>1000</td>
|
||||
<td>10000</td>
|
||||
<td>5%</td>
|
||||
<td>3.21</td>
|
||||
<td>2 <span class="badge primary-color">1 <i class="fa fa-arrow-circle-up"></i></span></td>
|
||||
<td>2 <span class="badge red accent-2">1 <i class="fa fa-arrow-circle-down"></i></span></td>
|
||||
<td>2 <span class="badge grey">0 </span></td>
|
||||
<td>200 (US)</td>
|
||||
<td>2000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bootstrap material design</td>
|
||||
<td>1000</td>
|
||||
<td>10000</td>
|
||||
<td>5%</td>
|
||||
<td>3.21</td>
|
||||
<td>2 <span class="badge primary-color">1 <i class="fa fa-arrow-circle-up"></i></span></td>
|
||||
<td>2 <span class="badge red accent-2">1 <i class="fa fa-arrow-circle-down"></i></span></td>
|
||||
<td>2 <span class="badge grey">0 </span></td>
|
||||
<td>200 (US)</td>
|
||||
<td>2000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bootstrap material design</td>
|
||||
<td>1000</td>
|
||||
<td>10000</td>
|
||||
<td>5%</td>
|
||||
<td>3.21</td>
|
||||
<td>2 <span class="badge primary-color">1 <i class="fa fa-arrow-circle-up"></i></span></td>
|
||||
<td>2 <span class="badge red accent-2">1 <i class="fa fa-arrow-circle-down"></i></span></td>
|
||||
<td>2 <span class="badge grey">0 </span></td>
|
||||
<td>200 (US)</td>
|
||||
<td>2000</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
<!--/Table body-->
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<!--/Table-->
|
||||
|
||||
<!--Bottom Table UI-->
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
<!--Name-->
|
||||
<select class="mdb-select colorful-select dropdown-primary mt-2">
|
||||
<option value="" disabled >Rows number</option>
|
||||
<option value="1" selected>5 rows</option>
|
||||
<option value="2">25 rows</option>
|
||||
<option value="3">50 rows</option>
|
||||
<option value="4">100 rows</option>
|
||||
</select>
|
||||
|
||||
<!--Pagination -->
|
||||
<nav class="my-4">
|
||||
<ul class="pagination pagination-circle pg-blue mb-0">
|
||||
|
||||
<!--First-->
|
||||
<li class="page-item disabled clearfix d-none d-md-block"><a class="page-link">First</a></li>
|
||||
|
||||
<!--Arrow left-->
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--Numbers-->
|
||||
<li class="page-item active"><a class="page-link">1</a></li>
|
||||
<li class="page-item"><a class="page-link">2</a></li>
|
||||
<li class="page-item"><a class="page-link">3</a></li>
|
||||
<li class="page-item"><a class="page-link">4</a></li>
|
||||
<li class="page-item"><a class="page-link">5</a></li>
|
||||
|
||||
<!--Arrow right-->
|
||||
<li class="page-item">
|
||||
<a class="page-link" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!--First-->
|
||||
<li class="page-item clearfix d-none d-md-block"><a class="page-link">Last</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<!--/Pagination -->
|
||||
|
||||
</div>
|
||||
<!--Bottom Table UI-->
|
||||
|
||||
</div>
|
||||
<!--/.Panel content-->
|
||||
|
||||
</div>
|
||||
<!--/First column-->
|
||||
</div>
|
||||
<!--/Third row-->
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--/Section: Main chart-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// Data Picker Initialization
|
||||
$('.datepicker').pickadate();
|
||||
|
||||
// Material Select Initialization
|
||||
$(document).ready(function () {
|
||||
$('.mdb-select').material_select();
|
||||
});
|
||||
|
||||
// Tooltips Initialization
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
/*Global settings*/
|
||||
Chart.defaults.global.defaultFontColor = '#fff';
|
||||
$(function () {
|
||||
var data = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: "#4CAF50"
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(255,255,255,.25)",
|
||||
strokeColor: "rgba(255,255,255,.75)",
|
||||
pointColor: "#fff",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [28, 48, 40, 19, 56, 27, 60]
|
||||
}]
|
||||
};
|
||||
|
||||
var dataOneLine = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(0,0,0,.15)",
|
||||
data: [35, 55, 44, 58, 53, 55, 60],
|
||||
backgroundColor: "#4CAF50"
|
||||
}]
|
||||
};
|
||||
|
||||
var option = {
|
||||
responsive: true,
|
||||
// set font color
|
||||
scaleFontColor: "#fff",
|
||||
// font family
|
||||
defaultFontFamily: "'Roboto', sans-serif",
|
||||
// background grid lines color
|
||||
scaleGridLineColor: "rgba(255,255,255,.1)",
|
||||
// hide vertical lines
|
||||
scaleShowVerticalLines: false,
|
||||
};
|
||||
|
||||
//line
|
||||
var ctxL = document.getElementById("sales").getContext('2d');
|
||||
var myLineChart = new Chart(ctxL, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)'
|
||||
],
|
||||
borderWidth: 1,
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(255, 255, 255, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)',
|
||||
'rgba(255, 255, 255, 1)'
|
||||
],
|
||||
borderWidth: 1,
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1081
html/html/dashboards/v-6.html
Normal file
1081
html/html/dashboards/v-6.html
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1081
html/html/dashboards/v-6.html~HEAD
Normal file
1081
html/html/dashboards/v-6.html~HEAD
Normal file
File diff suppressed because it is too large
Load Diff
342
html/html/forms/_navigation.html
Normal file
342
html/html/forms/_navigation.html
Normal file
@@ -0,0 +1,342 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Material Design for Bootstrap</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
810
html/html/forms/basic.html
Normal file
810
html/html/forms/basic.html
Normal file
@@ -0,0 +1,810 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Forms basic</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Inputs-->
|
||||
<section class="section card mb-5">
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<!--Section heading-->
|
||||
<h1 class="text-center my-5 h1">Inputs</h1>
|
||||
|
||||
<h5 class="pb-5">Input fields</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
|
||||
<div class="md-form">
|
||||
<input type="text" id="form1" class="form-control">
|
||||
<label for="form1" class="">Basic example</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
|
||||
<div class="md-form form-sm">
|
||||
<input type="text" id="form2" class="form-control form-control-sm">
|
||||
<label for="form2" class="">Small input</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
|
||||
<div class="md-form">
|
||||
<input placeholder="Placeholder" type="text" id="form3" class="form-control">
|
||||
<label for="form3" class="active">Example label</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<div class="md-form">
|
||||
<input value="John Doe" type="text" id="form4" class="form-control">
|
||||
<label class="active" for="form4">Prefilling text inputs</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<div class="md-form">
|
||||
<input type="text" id="form5" class="form-control" disabled>
|
||||
<label for="form5" class="disabled">Disabled input</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-left">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Email validation-->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix"></i>
|
||||
<input type="email" id="form6" class="form-control validate">
|
||||
<label for="form6" data-error="wrong" data-success="right">Type your email</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Password validation-->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix"></i>
|
||||
<input type="password" id="form7" class="form-control validate">
|
||||
<label for="form7" data-error="wrong" data-success="right">Type your password</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<h5 class="pb-5">Error or Success Messages</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-left">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Email validation-->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix"></i>
|
||||
<input type="email" id="form8" class="form-control validate">
|
||||
<label for="form8" data-error="wrong" data-success="right">Type your email</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Password validation-->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix"></i>
|
||||
<input type="password" id="form9" class="form-control validate">
|
||||
<label for="form9" data-error="wrong" data-success="right">Type your password</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<h5 class="pb-5">Textarea</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-left">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Basic textarea-->
|
||||
<div class="md-form">
|
||||
<textarea type="text" id="form10" class="md-textarea form-control" rows="3"></textarea>
|
||||
<label for="form10">Basic textarea</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Textarea with icon prefix-->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-pencil prefix"></i>
|
||||
<textarea type="text" id="form11" class="md-textarea form-control" rows="3"></textarea>
|
||||
<label for="form11">Icon Prefix</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<h5 class="pb-5">Checkboxes and Radio</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<fieldset class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkbox1" checked="checked">
|
||||
<label class="form-check-label" for="checkbox1">Classic checkbox</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="form-check mt-4">
|
||||
<input class="form-check-input filled-in" type="checkbox" id="checkbox2" checked="checked">
|
||||
<label class="form-check-label" for="checkbox2">Filled-in checkbox</label>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<fieldset class="form-check mb-4">
|
||||
<input class="form-check-input" name="group1" type="radio" id="radio1" checked="checked">
|
||||
<label class="form-check-label" for="radio1">Option 1</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="form-check mb-4">
|
||||
<input class="form-check-input" name="group1" type="radio" id="radio2">
|
||||
<label class="form-check-label" for="radio2">Option 2</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="form-check mb-4">
|
||||
<input class="form-check-input" name="group1" type="radio" id="radio3">
|
||||
<label class="form-check-label" for="radio3">Option 3</label>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!-- Switch -->
|
||||
<div class="switch">
|
||||
<label>
|
||||
Off
|
||||
<input type="checkbox" checked="checked">
|
||||
<span class="lever"></span> On
|
||||
</label>
|
||||
</div>
|
||||
<!-- Disabled Switch -->
|
||||
<div class="switch">
|
||||
<label>
|
||||
Off
|
||||
<input disabled="" type="checkbox">
|
||||
<span class="lever"></span> On
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<h5 class="pb-5">File input</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<form>
|
||||
<div class="md-form">
|
||||
<div class="file-field">
|
||||
<div class="btn btn-primary btn-sm float-left">
|
||||
<span>Choose file</span>
|
||||
<input type="file">
|
||||
</div>
|
||||
<div class="file-path-wrapper">
|
||||
<input class="file-path validate" type="text" placeholder="Upload your file">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<form action="#">
|
||||
<div class="md-form">
|
||||
<div class="file-field">
|
||||
<div class="btn btn-primary btn-sm float-left">
|
||||
<span>Choose files</span>
|
||||
<input type="file" multiple>
|
||||
</div>
|
||||
<div class="file-path-wrapper">
|
||||
<input class="file-path validate" type="text" placeholder="Upload one or more files">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<h5 class="pb-5">Range</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-12 mb-4">
|
||||
|
||||
<form class="range-field">
|
||||
<input type="range" min="0" max="100"><span class="thumb"><span class="value"></span></span>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<h5 class="">Character counters</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-5">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6">
|
||||
<div style="height:83px;"></div>
|
||||
<div class="md-form">
|
||||
<input id="input-char-counter" type="text" length="10" class="form-control">
|
||||
<label for="input-char-counter">Input text</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="md-form">
|
||||
<textarea id="textarea-char-counter" class="md-textarea form-control" rows="3" length="120"></textarea>
|
||||
<label for="textarea-char-counter">Type your text</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<h5 class="pb-5">Select</h5>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-5">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<!--Name-->
|
||||
<select class="mdb-select" multiple>
|
||||
<option value="" disabled selected>Basic select</option>
|
||||
<option value="1">USA</option>
|
||||
<option value="2">Germany</option>
|
||||
<option value="3">France</option>
|
||||
<option value="3">Poland</option>
|
||||
<option value="3">Japan</option>
|
||||
</select>
|
||||
<button class="btn-save btn btn-primary btn-sm">Save</button>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Name-->
|
||||
<!--Name-->
|
||||
<select class="mdb-select colorful-select dropdown-primary" multiple>
|
||||
<option value="" disabled selected>Material select</option>
|
||||
<option value="1">USA</option>
|
||||
<option value="2">Germany</option>
|
||||
<option value="3">France</option>
|
||||
<option value="3">Poland</option>
|
||||
<option value="3">Japan</option>
|
||||
</select>
|
||||
<label>Label example</label>
|
||||
<button class="btn-save btn btn-primary btn-sm">Save</button>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Name-->
|
||||
<select class="mdb-select">
|
||||
<optgroup label="team 1" >
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
</optgroup>
|
||||
<optgroup label="team 2">
|
||||
<option value="3">Option 3</option>
|
||||
<option value="4">Option 4</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<!--Name-->
|
||||
<select class="mdb-select" multiple searchable="Search here..">
|
||||
<option value="" disabled selected>Search select</option>
|
||||
<option value="1">USA</option>
|
||||
<option value="2">Germany</option>
|
||||
<option value="3">France</option>
|
||||
<option value="3">Poland</option>
|
||||
<option value="3">Japan</option>
|
||||
</select>
|
||||
<button class="btn-save btn btn-primary btn-sm">Save</button>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Name-->
|
||||
<select class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here..">
|
||||
<option value="" disabled selected>Choose your country</option>
|
||||
<option value="1">USA</option>
|
||||
<option value="2">Germany</option>
|
||||
<option value="3">France</option>
|
||||
<option value="3">Poland</option>
|
||||
<option value="3">Japan</option>
|
||||
</select>
|
||||
<label>Search material selects</label>
|
||||
<button class="btn-save btn btn-primary btn-sm">Save</button>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Name-->
|
||||
<select class="mdb-select" multiple searchable="Search here..">
|
||||
<option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">example 1</option>
|
||||
<option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" class="rounded-circle">example 2</option>
|
||||
<option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" class="rounded-circle">example 1</option>
|
||||
</select>
|
||||
<button class="btn-save btn btn-primary btn-sm">Save</button>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Inputs-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-5">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/inputs/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
// Material Select Initialization
|
||||
$(document).ready(function () {
|
||||
$('.mdb-select').material_select();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
618
html/html/forms/extended.html
Normal file
618
html/html/forms/extended.html
Normal file
@@ -0,0 +1,618 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Forms extended</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Login form -->
|
||||
<form>
|
||||
<p class="h5 text-center mb-4">Sign in</p>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="defaultForm-email" class="form-control">
|
||||
<label for="defaultForm-email">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix grey-text"></i>
|
||||
<input type="password" id="defaultForm-pass" class="form-control">
|
||||
<label for="defaultForm-pass">Your password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-default">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Login form -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Register form -->
|
||||
<form>
|
||||
<p class="h5 text-center mb-4">Sign up</p>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix grey-text"></i>
|
||||
<input type="text" id="orangeForm-name" class="form-control">
|
||||
<label for="orangeForm-name">Your name</label>
|
||||
</div>
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="orangeForm-email" class="form-control">
|
||||
<label for="orangeForm-email">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix grey-text"></i>
|
||||
<input type="password" id="orangeForm-pass" class="form-control">
|
||||
<label for="orangeForm-pass">Your password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-deep-orange">Sign up</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<!-- Register form -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Subscription form -->
|
||||
<form>
|
||||
<p class="h5 text-center mb-4">Subscribe</p>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix grey-text"></i>
|
||||
<input type="text" id="form3" class="form-control">
|
||||
<label for="form3">Your name</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="form2" class="form-control">
|
||||
<label for="form2">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-indigo">Send <i class="fa fa-paper-plane-o ml-1"></i></button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<!-- Subscription form -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Contact v.1-->
|
||||
<section class="section pb-5">
|
||||
|
||||
<!--Section heading-->
|
||||
<h2 class="text-center my-5 h1 pt-4">Contact us</h2>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto pb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate
|
||||
esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-5 mb-4">
|
||||
|
||||
<!--Form with header-->
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
<!--Header-->
|
||||
<div class="form-header blue accent-1">
|
||||
<h3><i class="fa fa-envelope"></i> Write to us:</h3>
|
||||
</div>
|
||||
|
||||
<p>We'll write rarely, but only the best content.</p>
|
||||
<br>
|
||||
|
||||
<!--Body-->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix grey-text"></i>
|
||||
<input type="text" id="form-name" class="form-control">
|
||||
<label for="form-name">Your name</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="form-email" class="form-control">
|
||||
<label for="form-email">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-tag prefix grey-text"></i>
|
||||
<input type="text" id="form-Subject" class="form-control">
|
||||
<label for="form-Subject">Subject</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-pencil prefix grey-text"></i>
|
||||
<textarea type="text" id="form-text" class="md-textarea form-control" rows="3"></textarea>
|
||||
<label for="form-text">Icon Prefix</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-light-blue">Submit</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Form with header-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-7">
|
||||
|
||||
<!--Google map-->
|
||||
<div id="map-container" class="z-depth-1-half map-container" style="height: 400px"></div>
|
||||
|
||||
<br>
|
||||
<!--Buttons-->
|
||||
<div class="row text-center">
|
||||
<div class="col-md-4">
|
||||
<a class="btn-floating blue accent-1"><i class="fa fa-map-marker"></i></a>
|
||||
<p>San Francisco, CA 94126</p>
|
||||
<p>United States</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a class="btn-floating blue accent-1"><i class="fa fa-phone"></i></a>
|
||||
<p>+ 01 234 567 89</p>
|
||||
<p>Mon - Fri, 8:00-22:00</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a class="btn-floating blue accent-1"><i class="fa fa-envelope"></i></a>
|
||||
<p>info@gmail.com</p>
|
||||
<p>sale@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Contact v.1-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/forms/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
</script>
|
||||
<!--Google Maps-->
|
||||
<script src="https://maps.google.com/maps/api/js"></script>
|
||||
|
||||
<script>
|
||||
function init_map() {
|
||||
|
||||
var var_location = new google.maps.LatLng(40.725118, -73.997699);
|
||||
|
||||
var var_mapoptions = {
|
||||
center: var_location,
|
||||
|
||||
zoom: 14
|
||||
};
|
||||
|
||||
var var_marker = new google.maps.Marker({
|
||||
position: var_location,
|
||||
map: var_map,
|
||||
title: "New York"
|
||||
});
|
||||
|
||||
var var_map = new google.maps.Map(document.getElementById("map-container"),
|
||||
var_mapoptions);
|
||||
|
||||
var_marker.setMap(var_map);
|
||||
|
||||
}
|
||||
|
||||
google.maps.event.addDomListener(window, 'load', init_map);
|
||||
</script> gl
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,618 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Forms extended</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Login form -->
|
||||
<form>
|
||||
<p class="h5 text-center mb-4">Sign in</p>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="defaultForm-email" class="form-control">
|
||||
<label for="defaultForm-email">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix grey-text"></i>
|
||||
<input type="password" id="defaultForm-pass" class="form-control">
|
||||
<label for="defaultForm-pass">Your password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-default">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Login form -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Register form -->
|
||||
<form>
|
||||
<p class="h5 text-center mb-4">Sign up</p>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix grey-text"></i>
|
||||
<input type="text" id="orangeForm-name" class="form-control">
|
||||
<label for="orangeForm-name">Your name</label>
|
||||
</div>
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="orangeForm-email" class="form-control">
|
||||
<label for="orangeForm-email">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix grey-text"></i>
|
||||
<input type="password" id="orangeForm-pass" class="form-control">
|
||||
<label for="orangeForm-pass">Your password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-deep-orange">Sign up</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<!-- Register form -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Subscription form -->
|
||||
<form>
|
||||
<p class="h5 text-center mb-4">Subscribe</p>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix grey-text"></i>
|
||||
<input type="text" id="form3" class="form-control">
|
||||
<label for="form3">Your name</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="form2" class="form-control">
|
||||
<label for="form2">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-indigo">Send <i class="fa fa-paper-plane-o ml-1"></i></button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<!-- Subscription form -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Contact v.1-->
|
||||
<section class="section pb-5">
|
||||
|
||||
<!--Section heading-->
|
||||
<h2 class="text-center my-5 h1 pt-4">Contact us</h2>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto pb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate
|
||||
esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-5 mb-4">
|
||||
|
||||
<!--Form with header-->
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
<!--Header-->
|
||||
<div class="form-header blue accent-1">
|
||||
<h3><i class="fa fa-envelope"></i> Write to us:</h3>
|
||||
</div>
|
||||
|
||||
<p>We'll write rarely, but only the best content.</p>
|
||||
<br>
|
||||
|
||||
<!--Body-->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix grey-text"></i>
|
||||
<input type="text" id="form-name" class="form-control">
|
||||
<label for="form-name">Your name</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="form-email" class="form-control">
|
||||
<label for="form-email">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-tag prefix grey-text"></i>
|
||||
<input type="text" id="form-Subject" class="form-control">
|
||||
<label for="form-Subject">Subject</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-pencil prefix grey-text"></i>
|
||||
<textarea type="text" id="form-text" class="md-textarea form-control" rows="3"></textarea>
|
||||
<label for="form-text">Icon Prefix</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-light-blue">Submit</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Form with header-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-7">
|
||||
|
||||
<!--Google map-->
|
||||
<div id="map-container" class="z-depth-1-half map-container" style="height: 400px"></div>
|
||||
|
||||
<br>
|
||||
<!--Buttons-->
|
||||
<div class="row text-center">
|
||||
<div class="col-md-4">
|
||||
<a class="btn-floating blue accent-1"><i class="fa fa-map-marker"></i></a>
|
||||
<p>San Francisco, CA 94126</p>
|
||||
<p>United States</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a class="btn-floating blue accent-1"><i class="fa fa-phone"></i></a>
|
||||
<p>+ 01 234 567 89</p>
|
||||
<p>Mon - Fri, 8:00-22:00</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a class="btn-floating blue accent-1"><i class="fa fa-envelope"></i></a>
|
||||
<p>info@gmail.com</p>
|
||||
<p>sale@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Contact v.1-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/forms/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
</script>
|
||||
<!--Google Maps-->
|
||||
<script src="https://maps.google.com/maps/api/js"></script>
|
||||
|
||||
<script>
|
||||
function init_map() {
|
||||
|
||||
var var_location = new google.maps.LatLng(40.725118, -73.997699);
|
||||
|
||||
var var_mapoptions = {
|
||||
center: var_location,
|
||||
|
||||
zoom: 14
|
||||
};
|
||||
|
||||
var var_marker = new google.maps.Marker({
|
||||
position: var_location,
|
||||
map: var_map,
|
||||
title: "New York"
|
||||
});
|
||||
|
||||
var var_map = new google.maps.Map(document.getElementById("map-container"),
|
||||
var_mapoptions);
|
||||
|
||||
var_marker.setMap(var_map);
|
||||
|
||||
}
|
||||
|
||||
google.maps.event.addDomListener(window, 'load', init_map);
|
||||
</script> gl
|
||||
</body>
|
||||
|
||||
</html>
|
||||
618
html/html/forms/extended.html~HEAD
Normal file
618
html/html/forms/extended.html~HEAD
Normal file
@@ -0,0 +1,618 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Forms extended</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Login form -->
|
||||
<form>
|
||||
<p class="h5 text-center mb-4">Sign in</p>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="defaultForm-email" class="form-control">
|
||||
<label for="defaultForm-email">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix grey-text"></i>
|
||||
<input type="password" id="defaultForm-pass" class="form-control">
|
||||
<label for="defaultForm-pass">Your password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-default">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Login form -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Register form -->
|
||||
<form>
|
||||
<p class="h5 text-center mb-4">Sign up</p>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix grey-text"></i>
|
||||
<input type="text" id="orangeForm-name" class="form-control">
|
||||
<label for="orangeForm-name">Your name</label>
|
||||
</div>
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="orangeForm-email" class="form-control">
|
||||
<label for="orangeForm-email">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix grey-text"></i>
|
||||
<input type="password" id="orangeForm-pass" class="form-control">
|
||||
<label for="orangeForm-pass">Your password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-deep-orange">Sign up</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<!-- Register form -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card">
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Subscription form -->
|
||||
<form>
|
||||
<p class="h5 text-center mb-4">Subscribe</p>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix grey-text"></i>
|
||||
<input type="text" id="form3" class="form-control">
|
||||
<label for="form3">Your name</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="form2" class="form-control">
|
||||
<label for="form2">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-indigo">Send <i class="fa fa-paper-plane-o ml-1"></i></button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<!-- Subscription form -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!--Section: Contact v.1-->
|
||||
<section class="section pb-5">
|
||||
|
||||
<!--Section heading-->
|
||||
<h2 class="text-center my-5 h1 pt-4">Contact us</h2>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto pb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate
|
||||
esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-5 mb-4">
|
||||
|
||||
<!--Form with header-->
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
<!--Header-->
|
||||
<div class="form-header blue accent-1">
|
||||
<h3><i class="fa fa-envelope"></i> Write to us:</h3>
|
||||
</div>
|
||||
|
||||
<p>We'll write rarely, but only the best content.</p>
|
||||
<br>
|
||||
|
||||
<!--Body-->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix grey-text"></i>
|
||||
<input type="text" id="form-name" class="form-control">
|
||||
<label for="form-name">Your name</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix grey-text"></i>
|
||||
<input type="text" id="form-email" class="form-control">
|
||||
<label for="form-email">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-tag prefix grey-text"></i>
|
||||
<input type="text" id="form-Subject" class="form-control">
|
||||
<label for="form-Subject">Subject</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-pencil prefix grey-text"></i>
|
||||
<textarea type="text" id="form-text" class="md-textarea form-control" rows="3"></textarea>
|
||||
<label for="form-text">Icon Prefix</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-light-blue">Submit</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Form with header-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-7">
|
||||
|
||||
<!--Google map-->
|
||||
<div id="map-container" class="z-depth-1-half map-container" style="height: 400px"></div>
|
||||
|
||||
<br>
|
||||
<!--Buttons-->
|
||||
<div class="row text-center">
|
||||
<div class="col-md-4">
|
||||
<a class="btn-floating blue accent-1"><i class="fa fa-map-marker"></i></a>
|
||||
<p>San Francisco, CA 94126</p>
|
||||
<p>United States</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a class="btn-floating blue accent-1"><i class="fa fa-phone"></i></a>
|
||||
<p>+ 01 234 567 89</p>
|
||||
<p>Mon - Fri, 8:00-22:00</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a class="btn-floating blue accent-1"><i class="fa fa-envelope"></i></a>
|
||||
<p>info@gmail.com</p>
|
||||
<p>sale@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Contact v.1-->
|
||||
|
||||
<!--Section: Docs link-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Panel-->
|
||||
<div class="card text-center">
|
||||
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Read the full documentation for these components.</p>
|
||||
<a href="https://mdbootstrap.com/components/forms/" target="_blank" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel-->
|
||||
|
||||
|
||||
</section>
|
||||
<!--Section: Docs link-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
|
||||
</script>
|
||||
<!--Google Maps-->
|
||||
<script src="https://maps.google.com/maps/api/js"></script>
|
||||
|
||||
<script>
|
||||
function init_map() {
|
||||
|
||||
var var_location = new google.maps.LatLng(40.725118, -73.997699);
|
||||
|
||||
var var_mapoptions = {
|
||||
center: var_location,
|
||||
|
||||
zoom: 14
|
||||
};
|
||||
|
||||
var var_marker = new google.maps.Marker({
|
||||
position: var_location,
|
||||
map: var_map,
|
||||
title: "New York"
|
||||
});
|
||||
|
||||
var var_map = new google.maps.Map(document.getElementById("map-container"),
|
||||
var_mapoptions);
|
||||
|
||||
var_marker.setMap(var_map);
|
||||
|
||||
}
|
||||
|
||||
google.maps.event.addDomListener(window, 'load', init_map);
|
||||
</script> gl
|
||||
</body>
|
||||
|
||||
</html>
|
||||
372
html/html/maps/full.html
Normal file
372
html/html/maps/full.html
Normal file
@@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Full page map</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main class=" m-0 p-0">
|
||||
<div class="container-fluid m-0 p-0">
|
||||
|
||||
<!--Google map-->
|
||||
<div id="map-container" style="height: 100vh"></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-0">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--Google Maps-->
|
||||
<script src="https://maps.google.com/maps/api/js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
function init_map() {
|
||||
|
||||
var var_location = new google.maps.LatLng(40.725118, -73.997699);
|
||||
|
||||
var var_mapoptions = {
|
||||
center: var_location,
|
||||
zoom: 14
|
||||
};
|
||||
|
||||
var var_marker = new google.maps.Marker({
|
||||
position: var_location,
|
||||
map: var_map,
|
||||
title: "New York"
|
||||
});
|
||||
|
||||
var var_map = new google.maps.Map(document.getElementById("map-container"),
|
||||
var_mapoptions);
|
||||
|
||||
var_marker.setMap(var_map);
|
||||
|
||||
}
|
||||
|
||||
google.maps.event.addDomListener(window, 'load', init_map);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
646
html/html/maps/google.html
Normal file
646
html/html/maps/google.html
Normal file
@@ -0,0 +1,646 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
.card.card-cascade .view.gradient-card-header {
|
||||
padding: 1.2rem 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Google maps</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Regular maps-->
|
||||
<section class="mb-5 pt-5">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header mdb-color lighten-3">
|
||||
<h5 class="mb-0">Regular map</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<!--Google map-->
|
||||
<div id="map-container" class="z-depth-1" style="height: 300px"></div>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 mb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header mdb-color lighten-3">
|
||||
<h5 class="mb-0">Custom map</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<!--Google map-->
|
||||
<div id="map-container-2" class="z-depth-1" style="height: 300px"></div>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Regular maps-->
|
||||
|
||||
<!--Section: Satellite map-->
|
||||
<section class="pb-4">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card card-cascade narrower">
|
||||
|
||||
<!--Card image-->
|
||||
<div class="view view-cascade gradient-card-header mdb-color lighten-3">
|
||||
<h5 class="mb-0">Satellite map</h5>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body card-body-cascade text-center">
|
||||
|
||||
<!--Google map-->
|
||||
<div id="map-container-3" class="z-depth-1" style="height: 300px"></div>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</section>
|
||||
<!--Section: Satellite map-->
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--Google Maps-->
|
||||
<script src="https://maps.google.com/maps/api/js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// Satellite map
|
||||
function satellite_map() {
|
||||
var var_location = new google.maps.LatLng(48.856847, 2.296832);
|
||||
|
||||
var var_mapoptions = {
|
||||
center: var_location,
|
||||
zoom: 16,
|
||||
mapTypeId: 'satellite'
|
||||
};
|
||||
|
||||
var var_map = new google.maps.Map(document.getElementById("map-container-3"),
|
||||
var_mapoptions);
|
||||
|
||||
var var_marker = new google.maps.Marker({
|
||||
position: var_location,
|
||||
map: var_map,
|
||||
title: "Paris, France"
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Regular map
|
||||
function regular_map() {
|
||||
var var_location = new google.maps.LatLng(40.725118, -73.997699);
|
||||
|
||||
var var_mapoptions = {
|
||||
center: var_location,
|
||||
zoom: 14
|
||||
};
|
||||
|
||||
var var_map = new google.maps.Map(document.getElementById("map-container"),
|
||||
var_mapoptions);
|
||||
|
||||
var var_marker = new google.maps.Marker({
|
||||
position: var_location,
|
||||
map: var_map,
|
||||
title: "New York"
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Custom map
|
||||
function custom_map() {
|
||||
|
||||
var var_location = new google.maps.LatLng(40.725118, -73.997699);
|
||||
|
||||
var var_mapoptions = {
|
||||
center: var_location,
|
||||
zoom: 14,
|
||||
styles: [
|
||||
{
|
||||
"featureType": "administrative",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "off"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "simplified"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "simplified"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "simplified"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "simplified"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "simplified"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "off"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road.local",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "on"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "geometry",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "on"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road.arterial",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "off"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"color": "#5f94ff"
|
||||
},
|
||||
{
|
||||
"lightness": 26
|
||||
},
|
||||
{
|
||||
"gamma": 5.86
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"weight": 0.6
|
||||
},
|
||||
{
|
||||
"saturation": -85
|
||||
},
|
||||
{
|
||||
"lightness": 61
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape",
|
||||
"elementType": "all",
|
||||
"stylers": [
|
||||
{
|
||||
"hue": "#0066ff"
|
||||
},
|
||||
{
|
||||
"saturation": 74
|
||||
},
|
||||
{
|
||||
"lightness": 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var var_map = new google.maps.Map(document.getElementById("map-container-2"),
|
||||
var_mapoptions);
|
||||
|
||||
var var_marker = new google.maps.Marker({
|
||||
position: var_location,
|
||||
map: var_map,
|
||||
title: "New York"
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Initialize maps
|
||||
google.maps.event.addDomListener(window, 'load', satellite_map);
|
||||
google.maps.event.addDomListener(window, 'load', regular_map);
|
||||
google.maps.event.addDomListener(window, 'load', custom_map);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
382
html/html/maps/vector.html
Normal file
382
html/html/maps/vector.html
Normal file
@@ -0,0 +1,382 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Vector map</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<h4 class=" mb-5 mt-3 dark-grey-text font-weight-bold text-center"><strong>Vector world map</strong></h4>
|
||||
|
||||
<div id="world-map" style="width:100%;height:420px;"></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!-- JVectorMap -->
|
||||
<link rel="stylesheet" href="../../js/vendor/jvectormap/jquery-jvectormap-2.0.3.css" type="text/css" media="screen" />
|
||||
<script src="../../js/vendor/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
|
||||
<script src="../../js/vendor/jvectormap/jquery-jvectormap-world-mill.js"></script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
colors = {};
|
||||
|
||||
colors['ca'] = '#A4D886';
|
||||
colors['ru'] = '#FCECA2';
|
||||
colors['cn'] = '#F9573B';
|
||||
colors['us'] = '#87CEEB';
|
||||
colors['jp'] = '#34BD0E';
|
||||
colors['au'] = '#BCC7FC';
|
||||
colors['kz'] = '#D4624E';
|
||||
colors['de'] = '#34BD0E';
|
||||
|
||||
$('#world-map').vectorMap({
|
||||
colors: colors,
|
||||
hoverOpacity: 0.7, // opacity for :hover
|
||||
hoverColor: false,
|
||||
color: '#aaaaaa',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#cbced4'
|
||||
}
|
||||
},
|
||||
series: {
|
||||
regions: [{
|
||||
values: {
|
||||
IN:'#5478ab',
|
||||
DK:'#88b7d6',
|
||||
PL:'#5478ab',
|
||||
IQ:'#98c6e5',
|
||||
PK:'#88b7d6',
|
||||
RU:'#95c9ed',
|
||||
CN:'#add8f5',
|
||||
AU:'#5478ab',
|
||||
AR:'#b6d4e9',
|
||||
FR:'#9ccbeb',
|
||||
NG:'#98c6e5',
|
||||
CA:'#5478ab',
|
||||
US:'#9ccbeb'
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<!-- /.JVectorMap -->
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2196
html/html/modals/modals.html
Normal file
2196
html/html/modals/modals.html
Normal file
File diff suppressed because it is too large
Load Diff
342
html/html/pages/_navigation.html
Normal file
342
html/html/pages/_navigation.html
Normal file
@@ -0,0 +1,342 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Material Design for Bootstrap</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-0 mt-5">
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
518
html/html/pages/about.html
Normal file
518
html/html/pages/about.html
Normal file
@@ -0,0 +1,518 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags always come first -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap Template</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link href="../../css/mdb.min.css" rel="stylesheet">
|
||||
<!-- Custom styles -->
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.jarallax {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.jarallax {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) and (max-width: 850px) {
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.jarallax {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 560px) and (max-width: 650px) {
|
||||
header .jarallax h1 {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
header .jarallax h5 {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.top-nav-collapse {
|
||||
background-color: #3f51b5!important;
|
||||
}
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: transparent!important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: #3f51b5!important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 800px) and (max-width: 850px) {
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: #3f51b5!important;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Main Navigation -->
|
||||
<header>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
|
||||
<div class="container smooth-scroll">
|
||||
<a class="navbar-brand" href="#"><strong>MDB</strong></a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#team" data-offset="60">Team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#products" data-offset="60">Products</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#gallery" data-offset="60">Gallery</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#contact" data-offset="60">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<div class="md-form my-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Intro Section -->
|
||||
<div id="home" class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2853%29.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;">
|
||||
<div class="mask rgba-stylish-light">
|
||||
<div class="container h-100 d-flex justify-content-center align-items-center">
|
||||
<div class="row pt-5 mt-3">
|
||||
<div class="col-md-12 mb-3">
|
||||
<div class="intro-info-content text-center">
|
||||
<h1 class="display-3 white-text mb-5 wow fadeInDown" data-wow-delay="0.3s">ABOUT <a class="white-text font-weight-bold">US</a></h1>
|
||||
<h5 class="text-uppercase white-text mb-5 font-weight-bold wow fadeInDown" data-wow-delay="0.3s">Lorem ipsum dolor sit amet consectetur. </h5>
|
||||
<a class="btn btn-light-blue btn-lg wow fadeInDown" data-wow-delay="0.3s">portfolio</a>
|
||||
<a class="btn btn-indigo btn-lg wow fadeInDown" data-wow-delay="0.3s">About</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<!-- Main Navigation -->
|
||||
|
||||
<!-- Main Layout -->
|
||||
<main>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Section: Team v.3 -->
|
||||
<section id="team" class="section team-section pb-4 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!-- Section heading -->
|
||||
<h2 class="text-center my-5 h1">Our amazing team</h2>
|
||||
<!-- Section description -->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<!-- Grid row -->
|
||||
<div class="row mb-lg-4 text-center text-md-left">
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-lg-6 col-md-12 mb-4">
|
||||
|
||||
<div class="col-md-6 float-left">
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="z-depth-1" alt="First sample avatar image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 float-right">
|
||||
<h4><strong>John Doe</strong></h4>
|
||||
<h6 class="font-weight-bold grey-text mb-4">Web Designer</h6>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
|
||||
|
||||
<!-- Facebook -->
|
||||
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
|
||||
<!-- Twitter -->
|
||||
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter"> </i></a>
|
||||
<!-- Dribbble -->
|
||||
<a class="p-2 m-2 fa-lg dribbble-ic"><i class="fa fa-dribbble"> </i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-lg-6 col-md-12 mb-4">
|
||||
|
||||
<div class="col-md-6 float-left">
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="z-depth-1" alt="Second sample avatar image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 float-right">
|
||||
<h4><strong>Maria Kate</strong></h4>
|
||||
<h6 class="font-weight-bold grey-text mb-4">Photographer</h6>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
|
||||
|
||||
<!-- Facebook -->
|
||||
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
|
||||
<!-- YouTube -->
|
||||
<a class="p-2 m-2 fa-lg yt-ic"><i class="fa fa-youtube"> </i></a>
|
||||
<!-- Instagram -->
|
||||
<a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram"> </i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
</div>
|
||||
<!-- Grid row -->
|
||||
|
||||
<!-- Grid row -->
|
||||
<div class="row text-center text-md-left">
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-lg-6 col-md-12 mb-4">
|
||||
|
||||
<div class="col-md-6 float-left">
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" class="z-depth-1" alt="Fourth sample avatar image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 float-right">
|
||||
<h4><strong>Anna Deynah</strong></h4>
|
||||
<h6 class="font-weight-bold grey-text mb-4">Web Developer</h6>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
|
||||
|
||||
<!-- Facebook -->
|
||||
<a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook"> </i></a>
|
||||
<!-- Twitter -->
|
||||
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter"> </i></a>
|
||||
<!-- GitHub -->
|
||||
<a class="p-2 m-2 fa-lg git-ic"><i class="fa fa-github"> </i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-lg-6 col-md-12 mb-4">
|
||||
<div class="col-md-6 float-left">
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg" class="z-depth-1" alt="Fifth sample avatar image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 float-right">
|
||||
<h4><strong>Sarah Melyah</strong></h4>
|
||||
<h6 class="font-weight-bold grey-text mb-4">Front-end Developer</h6>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
|
||||
|
||||
<!-- Google + -->
|
||||
<a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus"> </i></a>
|
||||
<!-- LinkedIn -->
|
||||
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin"> </i></a>
|
||||
<!-- Email -->
|
||||
<a class="p-2 m-2 fa-lg email-ic"><i class="fa fa-envelope"> </i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
</div>
|
||||
<!-- Grid row -->
|
||||
|
||||
</section>
|
||||
<!-- Section: Team v.3 -->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!-- Section: Features v.1 -->
|
||||
<section id="products" class="text-center wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!-- Section heading -->
|
||||
<h1 class="text-center my-5 h1">We create awesome products</h1>
|
||||
<!-- Section description -->
|
||||
<p class="text-center mb-5 w-responsive mx-auto lead grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
|
||||
|
||||
<!-- Grid row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<i class="fa fa-4x fa-area-chart pink-text"></i>
|
||||
<h4 class="font-weight-bold my-4">Analytics</h4>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<i class="fa fa-4x fa-pencil cyan-text"></i>
|
||||
<h4 class="font-weight-bold my-4">Design</h4>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<i class="fa fa-4x fa-laptop indigo-text"></i>
|
||||
<h4 class="font-weight-bold my-4">Development</h4>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
</div>
|
||||
<!-- Grid row -->
|
||||
|
||||
</section>
|
||||
<!-- Section: Features v.1 -->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!-- Section: Gallery -->
|
||||
<section id="gallery" class="section wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!-- Section heading -->
|
||||
<h1 class="text-center my-5 h1">Our work</h1>
|
||||
<!-- Section description -->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
|
||||
|
||||
<div class="row pb-4">
|
||||
<div class="col-md-12">
|
||||
|
||||
<div id="mdb-lightbox-ui"></div>
|
||||
|
||||
<div class="mdb-lightbox">
|
||||
|
||||
<figure class="col-md-4">
|
||||
<a href="https://mdbootstrap.com/img/Photos/Horizontal/People/12-col/img%20(132).jpg" data-size="1600x1067">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/12-col/img%20(132).jpg" class="img-fluid z-depth-1" />
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
<figure class="col-md-4">
|
||||
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Work/12-col/img%20(40).jpg" data-size="1600x1067">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(40).jpg" class="img-fluid z-depth-1" />
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
<figure class="col-md-4">
|
||||
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Work/12-col/img%20(14).jpg" data-size="1600x1067">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/12-col/img%20(14).jpg" class="img-fluid z-depth-1" />
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- /Section: Gallery -->
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<!-- Section: Contact v.2 -->
|
||||
<section id="contact" class="section pb-5 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!-- Section heading -->
|
||||
<h2 class="text-center my-5 h1">Contact us</h2>
|
||||
<!-- Section description -->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-md-8 col-xl-9">
|
||||
<form>
|
||||
|
||||
<!-- Grid row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-md-6">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-name" class="form-control">
|
||||
<label for="contact-name" class="">Your name</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-md-6">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-email" class="form-control">
|
||||
<label for="contact-email" class="">Your email</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
</div>
|
||||
<!-- Grid row -->
|
||||
|
||||
<!-- Grid row -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-Subject" class="form-control">
|
||||
<label for="contact-Subject" class="">Subject</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grid row -->
|
||||
|
||||
<!-- Grid row -->
|
||||
<div class="row mb-4">
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="md-form mb-0">
|
||||
<textarea type="text" id="contact-message" class="md-textarea form-control" rows="3"></textarea>
|
||||
<label for="contact-message">Your message</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grid row -->
|
||||
|
||||
</form>
|
||||
|
||||
<div class="text-center text-md-left mb-4">
|
||||
<a class="btn btn-light-blue">Send</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
<!-- Grid column -->
|
||||
<div class="col-md-4 col-xl-3">
|
||||
<ul class="contact-icons list-unstyled text-center">
|
||||
<li><i class="fa fa-map-marker fa-2x"></i>
|
||||
<p>San Francisco, CA 94126, USA</p>
|
||||
</li>
|
||||
|
||||
<li><i class="fa fa-phone fa-2x"></i>
|
||||
<p>+ 01 234 567 89</p>
|
||||
</li>
|
||||
|
||||
<li><i class="fa fa-envelope fa-2x"></i>
|
||||
<p>contact@mdbootstrap.com</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Grid column -->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- Section: Contact v.2 -->
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!-- Main Layout -->
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="page-footer pt-4 mt-4 text-center text-md-left grey">
|
||||
|
||||
<!-- Footer Links -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<!-- First column -->
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-uppercase font-weight-bold">Footer Content</h6>
|
||||
<p>Here you can use rows and columns here to organize your footer content.</p>
|
||||
</div>
|
||||
<!-- First column -->
|
||||
|
||||
<!-- Second column -->
|
||||
<div class="col-md-3">
|
||||
<h6 class="text-uppercase font-weight-bold">Links</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Second column -->
|
||||
|
||||
<!-- Third column -->
|
||||
<div class="col-md-3">
|
||||
<h6 class="text-uppercase font-weight-bold">Links</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Third column -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Links -->
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Copyright -->
|
||||
|
||||
</footer>
|
||||
<!-- Footer -->
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<script>
|
||||
new WOW().init();
|
||||
|
||||
// MDB Lightbox Init
|
||||
$(function () {
|
||||
$("#mdb-lightbox-ui").load("../../mdb-addons/mdb-lightbox-ui.html");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
544
html/html/pages/chat.html
Normal file
544
html/html/pages/chat.html
Normal file
@@ -0,0 +1,544 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
.avatar-sm {
|
||||
width: 56px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Chat</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Chat-->
|
||||
<section class="section">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4">
|
||||
|
||||
<!--Name-->
|
||||
<div class="md-form mb-4">
|
||||
<i class="fa fa-search prefix"></i>
|
||||
<input type="text" id="searchConv" class="form-control">
|
||||
<label for="searchConv" class="">Search Message</label>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Messages -->
|
||||
<div class="list-group">
|
||||
|
||||
<!-- Single message -->
|
||||
<a href="#" class="list-group-item list-group-item-action media active">
|
||||
<!-- Avatar -->
|
||||
<img class="mr-3 avatar-sm float-left" src="https://mdbootstrap.com/img/Photos/Avatars/adach.jpg">
|
||||
|
||||
<!-- Author -->
|
||||
<div class="d-flex justify-content-between mb-1 ">
|
||||
<hp class="mb-1"><strong>Dawid Adach</strong></hp>
|
||||
<small>13 July</small>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<p class="text-truncate"><strong>You: </strong> Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
|
||||
<!-- Single message -->
|
||||
<a href="#" class="list-group-item list-group-item-action media">
|
||||
<!-- Avatar -->
|
||||
<img class="mr-3 avatar-sm float-left" src="https://secure.gravatar.com/avatar/8c051fd54e4c811e02bbc78d50549280?s=150&d=mm&r=g">
|
||||
|
||||
<!-- Author -->
|
||||
<div class="d-flex justify-content-between mb-1 ">
|
||||
<hp class="mb-1"><strong>Michal Szymanski</strong></hp>
|
||||
<small>14 July</small>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<p class="text-truncate"><span class="badge red">MDB Team</span> <strong>Michal: </strong> Donec id elit non
|
||||
mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
|
||||
<!-- Single message -->
|
||||
<a href="#" class="list-group-item list-group-item-action media">
|
||||
<!-- Avatar -->
|
||||
<img class="mr-3 avatar-sm float-left" src="https://mdbootstrap.com/img/Photos/Avatars/piotr.jpg">
|
||||
|
||||
<!-- Author -->
|
||||
<div class="d-flex justify-content-between mb-1 ">
|
||||
<hp class="mb-1"><strong>Piotr Bender</strong></hp>
|
||||
<small>15 July</small>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<p class="text-truncate"><strong>Piotr: </strong> Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
|
||||
<!-- Single message -->
|
||||
<a href="#" class="list-group-item list-group-item-action media">
|
||||
<!-- Avatar -->
|
||||
<img class="mr-3 avatar-sm float-left" src="https://mdbootstrap.com/img/Photos/Avatars/michal.jpg">
|
||||
|
||||
<!-- Author -->
|
||||
<div class="d-flex justify-content-between mb-1 ">
|
||||
<hp class="mb-1"><strong>Michal Krawczyk</strong></hp>
|
||||
<small>16 July</small>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<p class="text-truncate"><strong>You: </strong> Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
|
||||
<!-- Single message -->
|
||||
<a href="#" class="list-group-item list-group-item-action media">
|
||||
<!-- Avatar -->
|
||||
<img class="mr-3 avatar-sm float-left" src="https://mdbootstrap.com/img/Photos/Avatars/laura.jpg">
|
||||
|
||||
<!-- Author -->
|
||||
<div class="d-flex justify-content-between mb-1 ">
|
||||
<hp class="mb-1"><strong>Laura Choromanska</strong></hp>
|
||||
<small>16 July</small>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<p class="text-truncate"><strong>Laura: </strong> Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
|
||||
<!-- Single message -->
|
||||
<a href="#" class="list-group-item list-group-item-action media">
|
||||
<!-- Avatar -->
|
||||
<img class="mr-3 avatar-sm float-left" src="https://mdbootstrap.com/img/Photos/Avatars/bartek.jpg">
|
||||
|
||||
<!-- Author -->
|
||||
<div class="d-flex justify-content-between mb-1 ">
|
||||
<hp class="mb-1"><strong>Bartłomiej Malanowski</strong></hp>
|
||||
<small>16 July</small>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<p class="text-truncate"><strong>Miroslaw: </strong> Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
|
||||
<!-- Single message -->
|
||||
<a href="#" class="list-group-item list-group-item-action media">
|
||||
<!-- Avatar -->
|
||||
<img class="mr-3 avatar-sm float-left" src="https://mdbootstrap.com/img/Photos/Avatars/filip.jpg">
|
||||
|
||||
<!-- Author -->
|
||||
<div class="d-flex justify-content-between mb-1 ">
|
||||
<hp class="mb-1"><strong>Filip Kapusta</strong></hp>
|
||||
<small>16 July</small>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<p class="text-truncate"><strong>You: </strong> Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!-- Messages -->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-8 mt-lg-0 mt-5">
|
||||
|
||||
<!-- Conversation -->
|
||||
<div class="border border-dark p-4">
|
||||
|
||||
<!-- My Message -->
|
||||
<div class="text-center"><small>16 July, 23:54</small></div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<p class="primary-color rounded p-3 text-white w-75 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae modi exercitationem
|
||||
dignissimos repellat, voluptas iure quod aliquid voluptatem perspiciatis quidem
|
||||
sit eos, cum fugit voluptatibus quos laboriosam sed tenetur voluptate!</p>
|
||||
</div>
|
||||
|
||||
<!-- Your Message -->
|
||||
<div class="text-center"><small>16 July, 23:55</small></div>
|
||||
<div class="d-flex justify-content-start media">
|
||||
<!-- Avatar -->
|
||||
<img class="mr-3 avatar-sm float-left" src="https://mdbootstrap.com/img/Photos/Avatars/adach.jpg">
|
||||
|
||||
<p class="grey lighten-3 rounded p-3 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae modi exercitationem
|
||||
dignissimos repellat, voluptas iure quod aliquid voluptatem perspiciatis quidem
|
||||
sit eos, cum fugit voluptatibus quos laboriosam sed tenetur voluptate!</p>
|
||||
</div>
|
||||
|
||||
<!-- Your Message -->
|
||||
<div class="text-center"><small>16 July, 23:56</small></div>
|
||||
<div class="d-flex justify-content-start media">
|
||||
<!-- Avatar -->
|
||||
<img class="mr-3 avatar-sm float-left" src="https://mdbootstrap.com/img/Photos/Avatars/adach.jpg">
|
||||
|
||||
<p class="grey lighten-3 rounded p-3 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae modi exercitationem
|
||||
dignissimos repellat, voluptas iure quod aliquid voluptatem perspiciatis quidem
|
||||
sit eos, cum fugit voluptatibus quos laboriosam sed tenetur voluptate!</p>
|
||||
</div>
|
||||
|
||||
<!-- My Message -->
|
||||
<div class="text-center"><small>16 July, 23:54</small></div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<p class="primary-color rounded p-3 text-white w-75 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae modi exercitationem
|
||||
dignissimos repellat, voluptas iure quod aliquid voluptatem perspiciatis quidem
|
||||
sit eos, cum fugit voluptatibus quos laboriosam sed tenetur voluptate!</p>
|
||||
</div>
|
||||
|
||||
<!-- New message -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="d-flex flex-row">
|
||||
|
||||
<div class="md-form chat-message-type">
|
||||
<textarea type="text" id="form7" class="md-textarea form-control" rows="3"></textarea>
|
||||
<label for="form7">Type your message</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<a class="btn btn-primary btn-lg">Send</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.New message -->
|
||||
|
||||
</div>
|
||||
<!-- Conversation -->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--/.Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Chat-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
552
html/html/pages/customers.html
Normal file
552
html/html/pages/customers.html
Normal file
@@ -0,0 +1,552 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Customers</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Customers-->
|
||||
<section class="section team-section">
|
||||
|
||||
<!-- First row -->
|
||||
<div class="row">
|
||||
<!-- First column -->
|
||||
<div class="col-md-8">
|
||||
<div class="row mb-1">
|
||||
<div class="col-md-9">
|
||||
<h4 class="h4-responsive mt-1">Your Clients</h4>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="md-form">
|
||||
<input placeholder="Search..." type="text" id="form5" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 mb-1">
|
||||
<!-- Tabs -->
|
||||
<div class="classic-tabs">
|
||||
<!-- Nav tabs -->
|
||||
<div class="tabs-wrapper">
|
||||
<ul class="nav tabs-primary primary-color" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light active" data-toggle="tab" href="#panel83" role="tab">Personal Clients</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light" data-toggle="tab" href="#panel84" role="tab">Corporate Clients</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Tab panels -->
|
||||
<div class="tab-content card">
|
||||
<!--Panel 1-->
|
||||
<div class="tab-pane fade show active" id="panel83" role="tabpanel">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Abby</td>
|
||||
<td>Barrett</td>
|
||||
<td>@abbeme</td>
|
||||
<td>
|
||||
<a class="blue-text" data-toggle="tooltip" data-placement="top" title="See results"><i class="fa fa-user"></i></a>
|
||||
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil"></i></a>
|
||||
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Danny</td>
|
||||
<td>Collins</td>
|
||||
<td>@dennis</td>
|
||||
<td>
|
||||
<a class="blue-text" data-toggle="tooltip" data-placement="top" title="See results"><i class="fa fa-user"></i></a>
|
||||
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil"></i></a>
|
||||
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Clara</td>
|
||||
<td>Ericson</td>
|
||||
<td>@claris</td>
|
||||
<td>
|
||||
<a class="blue-text" data-toggle="tooltip" data-placement="top" title="See results"><i class="fa fa-user"></i></a>
|
||||
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil"></i></a>
|
||||
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>Jessie</td>
|
||||
<td>Doe</td>
|
||||
<td>@jessiedoeofficial</td>
|
||||
<td>
|
||||
<a class="blue-text" data-toggle="tooltip" data-placement="top" title="See results"><i class="fa fa-user"></i></a>
|
||||
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil"></i></a>
|
||||
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">5</th>
|
||||
<td>Saul</td>
|
||||
<td>Hudson</td>
|
||||
<td>@slash</td>
|
||||
<td>
|
||||
<a class="blue-text" data-toggle="tooltip" data-placement="top" title="See results"><i class="fa fa-user"></i></a>
|
||||
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil"></i></a>
|
||||
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel 1-->
|
||||
<!--Panel 2-->
|
||||
<div class="tab-pane fade" id="panel84" role="tabpanel">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Company Name</th>
|
||||
<th>Username</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>PiedPiper</td>
|
||||
<td>@piedpiper</td>
|
||||
<td>
|
||||
<a class="blue-text" data-toggle="tooltip" data-placement="top" title="See results"><i class="fa fa-user"></i></a>
|
||||
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil"></i></a>
|
||||
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Github, Inc</td>
|
||||
<td>@github</td>
|
||||
<td>
|
||||
<a class="blue-text" data-toggle="tooltip" data-placement="top" title="See results"><i class="fa fa-user"></i></a>
|
||||
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil"></i></a>
|
||||
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Twitter, Inc</td>
|
||||
<td>@twitter</td>
|
||||
<td>
|
||||
<a class="blue-text" data-toggle="tooltip" data-placement="top" title="See results"><i class="fa fa-user"></i></a>
|
||||
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil"></i></a>
|
||||
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>Alphabet, Inc</td>
|
||||
<td>@alphabet</td>
|
||||
<td>
|
||||
<a class="blue-text" data-toggle="tooltip" data-placement="top" title="See results"><i class="fa fa-user"></i></a>
|
||||
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil"></i></a>
|
||||
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">5</th>
|
||||
<td>Adobe Corporation</td>
|
||||
<td>@adobe</td>
|
||||
<td>
|
||||
<a class="blue-text" data-toggle="tooltip" data-placement="top" title="See results"><i class="fa fa-user"></i></a>
|
||||
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-pencil"></i></a>
|
||||
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Panel 2-->
|
||||
</div>
|
||||
<!-- /.Tabs -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.First column -->
|
||||
<!-- Second column -->
|
||||
<div class="col-md-4 mb-1">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card profile-card">
|
||||
|
||||
<!--Avatar-->
|
||||
<div class="avatar z-depth-1-half mb-4">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle" alt="First sample avatar image">
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0 mt-0">
|
||||
<!--Name-->
|
||||
<div class="text-center">
|
||||
<h3 class="mb-3 font-weight-bold"><strong>Anna Deynah</strong></h3>
|
||||
<h6 class="font-weight-bold blue-text mb-4">Web Designer</h6>
|
||||
</div>
|
||||
|
||||
<ul class="striped list-unstyled">
|
||||
<li><strong>E-mail address:</strong> a.doe@example.com</li>
|
||||
|
||||
<li><strong>Phone number:</strong> +1 234 5678 90</li>
|
||||
|
||||
<li><strong>Company:</strong> The Company, Inc</li>
|
||||
|
||||
<li><strong>Twitter username:</strong> @anna.doe</li>
|
||||
|
||||
<li><strong>Instagram username:</strong> @anna.doe</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Card-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.Second column -->
|
||||
</div>
|
||||
<!-- /.First row -->
|
||||
|
||||
</section>
|
||||
<!--Section: Customers-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
452
html/html/pages/invoice.html
Normal file
452
html/html/pages/invoice.html
Normal file
@@ -0,0 +1,452 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<!-- Your custom styles (optional) -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="fixed-sn white-skin">
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
||||
<ul class="custom-scrollbar">
|
||||
<!-- Logo -->
|
||||
<li class="logo-sn waves-effect">
|
||||
<div class="text-center">
|
||||
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
||||
</li>
|
||||
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
||||
</li>
|
||||
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
||||
</li>
|
||||
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
||||
</li>
|
||||
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
||||
</li>
|
||||
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
||||
</li>
|
||||
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
||||
</li>
|
||||
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
||||
</li>
|
||||
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
||||
</li>
|
||||
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
||||
</li>
|
||||
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
||||
</li>
|
||||
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
||||
</li>
|
||||
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
||||
</li>
|
||||
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
||||
</li>
|
||||
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
||||
</li>
|
||||
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
||||
</li>
|
||||
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
||||
</li>
|
||||
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
||||
</li>
|
||||
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
||||
</li>
|
||||
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
||||
</li>
|
||||
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
||||
</li>
|
||||
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
||||
</li>
|
||||
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
||||
</li>
|
||||
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
||||
</li>
|
||||
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
||||
</li>
|
||||
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
||||
</li>
|
||||
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
||||
</li>
|
||||
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
||||
</li>
|
||||
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
||||
</li>
|
||||
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
||||
</li>
|
||||
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
||||
</li>
|
||||
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
||||
</li>
|
||||
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
||||
</li>
|
||||
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
||||
</li>
|
||||
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
||||
</li>
|
||||
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
||||
</li>
|
||||
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
||||
</li>
|
||||
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
||||
</li>
|
||||
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
||||
</li>
|
||||
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
||||
</li>
|
||||
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
||||
</li>
|
||||
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
||||
</li>
|
||||
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
||||
</li>
|
||||
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Simple link -->
|
||||
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
||||
|
||||
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
||||
|
||||
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
||||
|
||||
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
||||
|
||||
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</ul>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</div>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumb-dn mr-auto">
|
||||
<p>Invoice</p>
|
||||
</div>
|
||||
|
||||
<!--Navbar links-->
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
||||
|
||||
<!-- Dropdown -->
|
||||
<li class="nav-item dropdown notifications-nav">
|
||||
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
||||
<span class="d-none d-md-inline-block">Notifications</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
||||
<span>New order received</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
||||
<span>Your campaign is about to end</span>
|
||||
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Log Out</a>
|
||||
<a class="dropdown-item" href="#">My account</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--/Navbar links-->
|
||||
</nav>
|
||||
<!-- /.Navbar -->
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
||||
|
||||
<!--Main layout-->
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
|
||||
<!--Section: Heading-->
|
||||
<section class="mb-4">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body d-flex justify-content-between">
|
||||
<h4 class="h4-responsive mt-3">Invoice #124190</h4>
|
||||
|
||||
<div>
|
||||
<a href="#" class="btn btn-secondary">Pay now</a>
|
||||
<a href="#" class="btn btn-primary"><i class="fa fa-print left"></i> Print</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Heading-->
|
||||
|
||||
<!--Section: Invoice details-->
|
||||
<section class="mb-4">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 text-left">
|
||||
|
||||
<p><small>From:</small></p>
|
||||
<p><strong>Awesome Company Inc</strong></p>
|
||||
<p>134 Richardson Ave</p>
|
||||
<p>San Francisco, CA 94123</p>
|
||||
<p><strong>Invoice date:</strong> November 18, 2016</p>
|
||||
<p><strong>Due date:</strong> December 2, 2016</p>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6 text-right">
|
||||
|
||||
<h4 class="h4-responsive"><small>Invoice No.</small><br/><strong><span class="blue-text">#124190</span></strong></h4>
|
||||
|
||||
<p><small>To:</small></p>
|
||||
<p><strong>The Company, Inc</strong></p>
|
||||
<p>1-245 East Russel Road</p>
|
||||
<p>Munger, MI 48747</p>
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Invoice details-->
|
||||
|
||||
<!--Section: Invoice table-->
|
||||
<section>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="table-responsive">
|
||||
<!-- Item list -->
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item list</th>
|
||||
<th>Quantity</th>
|
||||
<th>Unit Price</th>
|
||||
<th>Tax</th>
|
||||
<th>Total price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>MDBootstrap Corporate License</td>
|
||||
<td>1</td>
|
||||
<td>$319</td>
|
||||
<td>$73.37</td>
|
||||
<td>$319</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Material Design for Wordpress</td>
|
||||
<td>2</td>
|
||||
<td>$69</td>
|
||||
<td>$31.74</td>
|
||||
<td>$138</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MDBootstrap Portfolio Template Personal Licence</td>
|
||||
<td>1</td>
|
||||
<td>$49</td>
|
||||
<td>$11.27</td>
|
||||
<td>$49</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MDBootstrap Magazine Corporate Licence</td>
|
||||
<td>1</td>
|
||||
<td>$249</td>
|
||||
<td>$57.27</td>
|
||||
<td>$249</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- /.Item list -->
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled text-right">
|
||||
<li><strong>Sub Total:</strong><span class="float-right ml-3">$755</span></li>
|
||||
<li><strong>TAX:</strong><span class="float-right ml-3">$173,65</span></li>
|
||||
<li><strong>TOTAL:</strong><span class="float-right ml-3">$755</span></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Invoice table-->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!--Main layout-->
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<!--Custom scripts-->
|
||||
<script>
|
||||
// SideNav Initialization
|
||||
$(".button-collapse").sideNav();
|
||||
|
||||
var container = document.querySelector('.custom-scrollbar');
|
||||
Ps.initialize(container, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
711
html/html/pages/landing.html
Normal file
711
html/html/pages/landing.html
Normal file
@@ -0,0 +1,711 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<style>
|
||||
.intro-2 {
|
||||
background: url("https://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.top-nav-collapse {
|
||||
background-color: #9da4b1 !important;
|
||||
}
|
||||
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: #9da4b1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rgba-gradient {
|
||||
background: -webkit-linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
|
||||
background: -webkit-gradient(linear, 45deg, from(rgba(29, 236, 197, 0.4)), to(rgba(96, 0, 136, 0.4)));
|
||||
background: linear-gradient(to 45deg, rgba(29, 236, 197, 0.4), rgba(96, 0, 136, 0.4) 100%);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(229, 228, 255, 0.2);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
h6 {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.view {
|
||||
height: 1040px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 800px) and (max-width: 850px) {
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.view {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
footer.page-footer {
|
||||
background-color: #9da4b1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Main Navigation -->
|
||||
<header>
|
||||
|
||||
<!--Navbar-->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#"><strong>MDB</strong></a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<div class="md-form my-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Intro Section -->
|
||||
<section class="view intro-2">
|
||||
<div class="mask rgba-gradient">
|
||||
<div class="container h-100 d-flex justify-content-center align-items-center">
|
||||
<div class="d-flex align-items-center content-height">
|
||||
<div class="row flex-center pt-5 mt-3">
|
||||
<div class="col-md-6 text-center text-md-left mb-5">
|
||||
<div class="white-text">
|
||||
<h1 class="h1-responsive font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
|
||||
<hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
|
||||
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga
|
||||
nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea
|
||||
dolor molestiae, quisquam iste, maiores. Nulla.</h6>
|
||||
<br>
|
||||
<a class="btn btn-outline-white btn-rounded wow fadeInLeft" data-wow-delay="0.3s">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-5 offset-xl-1">
|
||||
<!-- Form -->
|
||||
<div class="card wow fadeInRight" data-wow-delay="0.3s">
|
||||
<div class="card-body">
|
||||
<!-- Header -->
|
||||
<div class="text-center">
|
||||
<h3 class="white-text"><i class="fa fa-user white-text"></i> Register:</h3>
|
||||
<hr class="hr-light">
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix white-text"></i>
|
||||
<input type="text" id="form3" class="form-control">
|
||||
<label for="form3" class="white-text">Your name</label>
|
||||
</div>
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix white-text"></i>
|
||||
<input type="text" id="form2" class="form-control">
|
||||
<label for="form2" class="white-text">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix white-text"></i>
|
||||
<input type="password" id="form4" class="form-control">
|
||||
<label for="form4" class="white-text">Your password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-light-blue btn-rounded">Sign up</button>
|
||||
<hr class="hr-light mb-3 mt-4">
|
||||
|
||||
<div class="inline-ul text-center d-flex justify-content-center">
|
||||
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text"></i></a>
|
||||
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text"> </i></a>
|
||||
<a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram white-text"> </i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.Form -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</header>
|
||||
<!-- Main Navigation -->
|
||||
|
||||
|
||||
|
||||
<!--Main Layout-->
|
||||
<main>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!--Section: Features v.4-->
|
||||
<section class="section my-5wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h1 class="text-center my-5 h1">Why is it so great?</h1>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-flag-checkered indigo-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">International</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-flask blue-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Experimental</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-glass cyan-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Relaxing</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-2 text-center text-md-left flex-center">
|
||||
<img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="" class="z-depth-0">
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-heart deep-purple-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Beloved</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-flash purple-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Rapid</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-magic pink-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Magical</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--/Section: Features v.4-->
|
||||
|
||||
<hr class="mb-5">
|
||||
|
||||
<!--Section: Testimonials v.3-->
|
||||
<section class="section team-section text-center my-5 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h1 class="text-center my-5 h1">Testimonials</h1>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-center">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
|
||||
<div class="testimonial">
|
||||
<!--Avatar-->
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid">
|
||||
</div>
|
||||
|
||||
<!--Content-->
|
||||
<h4 class="font-weight-bold mt-4 mb-3">Anna Deynah</h4>
|
||||
<h6 class="mb-3 font-weight-bold grey-text">Web Designer</h6>
|
||||
<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.</p>
|
||||
|
||||
<!--Review-->
|
||||
<div class="orange-text">
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star-half-full"> </i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="testimonial">
|
||||
<!--Avatar-->
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle z-depth-1 img-fluid">
|
||||
</div>
|
||||
|
||||
<!--Content-->
|
||||
<h4 class="font-weight-bold mt-4 mb-3">John Doe</h4>
|
||||
<h6 class="mb-3 font-weight-bold grey-text">Web Developer</h6>
|
||||
<p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
|
||||
|
||||
<!--Review-->
|
||||
<div class="orange-text">
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="testimonial">
|
||||
<!--Avatar-->
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid">
|
||||
</div>
|
||||
<!--Content-->
|
||||
<h4 class="font-weight-bold mt-4 mb-3">Maria Kate</h4>
|
||||
<h6 class="mb-3 font-weight-bold grey-text">Photographer</h6>
|
||||
<p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
|
||||
|
||||
<!--Review-->
|
||||
<div class="orange-text">
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star-o"> </i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Testimonials v.3-->
|
||||
|
||||
<hr class="mb-5">
|
||||
|
||||
<!--Section: Pricing v.3-->
|
||||
<section class="section my-5 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h1 class="text-center my-5 h1">Our pricing plans</h1>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card hoverable">
|
||||
|
||||
<!--Content-->
|
||||
<div class="text-center">
|
||||
<div class="card-body">
|
||||
<h5>Basic plan</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="card-circle d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-home light-blue-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Price-->
|
||||
<h2 class="font-weight-bold my-3">59$</h2>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis
|
||||
accusamus deleniti cumque hic laborum.</p>
|
||||
<a class="btn btn-light-blue btn-rounded">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card purple-gradient hoverable">
|
||||
|
||||
<!--Content-->
|
||||
<div class="text-center white-text">
|
||||
<div class="card-body">
|
||||
<h5>Premium plan</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="card-circle d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-group white-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Price-->
|
||||
<h2 class="font-weight-bold my-3">79$</h2>
|
||||
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non
|
||||
distinctio cupiditate sequi atque.</p>
|
||||
<a class="btn btn-outline-white btn-rounded">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card hoverable">
|
||||
|
||||
<!--Content-->
|
||||
<div class="text-center">
|
||||
<div class="card-body">
|
||||
<h5>Advanced plan</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="card-circle d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-bar-chart light-blue-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Price-->
|
||||
<h2 class="font-weight-bold my-3">99$</h2>
|
||||
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium
|
||||
repellat eveniet quia vitae.</p>
|
||||
<a class="btn btn-light-blue btn-rounded">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Pricing v.3-->
|
||||
|
||||
<hr class="mb-5">
|
||||
|
||||
<!--Section: Contact v.2-->
|
||||
<section class="section my-5 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h2 class="text-center my-5 h1">Contact us</h2>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-8 col-xl-9">
|
||||
<form>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-name" class="form-control">
|
||||
<label for="contact-name" class="">Your name</label>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-email" class="form-control">
|
||||
<label for="contact-email" class="">Your email</label>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-Subject" class="form-control">
|
||||
<label for="contact-Subject" class="">Subject</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="md-form mb-0">
|
||||
<textarea type="text" id="contact-message" class="md-textarea form-control" rows="3"></textarea>
|
||||
<label for="contact-message">Your message</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</form>
|
||||
|
||||
<div class="text-center text-md-left my-4">
|
||||
<a class="btn btn-light-blue btn-rounded">Send</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 col-xl-3">
|
||||
<ul class="contact-icons list-unstyled text-center">
|
||||
<li><i class="fa fa-map-marker fa-2x"></i>
|
||||
<p>San Francisco, CA 94126, USA</p>
|
||||
</li>
|
||||
|
||||
<li><i class="fa fa-phone fa-2x"></i>
|
||||
<p>+ 01 234 567 89</p>
|
||||
</li>
|
||||
|
||||
<li><i class="fa fa-envelope fa-2x"></i>
|
||||
<p>contact@mdbootstrap.com</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Contact v.2-->
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!--Main Layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-4 mt-4 text-center text-md-left">
|
||||
|
||||
<!--Footer Links-->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-3">
|
||||
<h5 class="text-uppercase font-weight-bold">Footer Content </h5>
|
||||
<p>Here you can use rows and columns here to organize your footer content.</p>
|
||||
</div>
|
||||
<!--/.First column-->
|
||||
|
||||
<hr class="w-100 clearfix d-md-none">
|
||||
|
||||
<!--Second column-->
|
||||
<div class="col-md-2 ml-auto">
|
||||
<h5 class="text-uppercase font-weight-bold">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
<li><a href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.Second column-->
|
||||
|
||||
<hr class="w-100 clearfix d-md-none">
|
||||
|
||||
<!--Third column-->
|
||||
<div class="col-md-2 ml-auto">
|
||||
<h5 class="text-uppercase font-weight-bold">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
<li><a href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.Third column-->
|
||||
|
||||
<hr class="w-100 clearfix d-md-none">
|
||||
|
||||
<!--Fourth column-->
|
||||
<div class="col-md-2 ml-auto">
|
||||
<h5 class="text-uppercase font-weight-bold">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
<li><a href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.Fourth column-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="container">
|
||||
<!--Grid row-->
|
||||
<div class="row mb-3">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<ul class="list-unstyled d-flex justify-content-center mb-0 py-4 list-inline">
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg pin-ic"><i class="fa fa-pinterest white-text fa-lg"> </i></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!--/First column-->
|
||||
</div>
|
||||
<!--/Grid row-->
|
||||
</div>
|
||||
<!--/.Footer Links-->
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<script>
|
||||
new WOW().init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,711 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<style>
|
||||
.intro-2 {
|
||||
background: url("https://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.top-nav-collapse {
|
||||
background-color: #9da4b1 !important;
|
||||
}
|
||||
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: #9da4b1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rgba-gradient {
|
||||
background: -webkit-linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
|
||||
background: -webkit-gradient(linear, 45deg, from(rgba(29, 236, 197, 0.4)), to(rgba(96, 0, 136, 0.4)));
|
||||
background: linear-gradient(to 45deg, rgba(29, 236, 197, 0.4), rgba(96, 0, 136, 0.4) 100%);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(229, 228, 255, 0.2);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
h6 {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.view {
|
||||
height: 1040px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 800px) and (max-width: 850px) {
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.view {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
footer.page-footer {
|
||||
background-color: #9da4b1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Main Navigation -->
|
||||
<header>
|
||||
|
||||
<!--Navbar-->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#"><strong>MDB</strong></a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<div class="md-form my-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Intro Section -->
|
||||
<section class="view intro-2">
|
||||
<div class="mask rgba-gradient">
|
||||
<div class="container h-100 d-flex justify-content-center align-items-center">
|
||||
<div class="d-flex align-items-center content-height">
|
||||
<div class="row flex-center pt-5 mt-3">
|
||||
<div class="col-md-6 text-center text-md-left mb-5">
|
||||
<div class="white-text">
|
||||
<h1 class="h1-responsive font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
|
||||
<hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
|
||||
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga
|
||||
nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea
|
||||
dolor molestiae, quisquam iste, maiores. Nulla.</h6>
|
||||
<br>
|
||||
<a class="btn btn-outline-white btn-rounded wow fadeInLeft" data-wow-delay="0.3s">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-5 offset-xl-1">
|
||||
<!-- Form -->
|
||||
<div class="card wow fadeInRight" data-wow-delay="0.3s">
|
||||
<div class="card-body">
|
||||
<!-- Header -->
|
||||
<div class="text-center">
|
||||
<h3 class="white-text"><i class="fa fa-user white-text"></i> Register:</h3>
|
||||
<hr class="hr-light">
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix white-text"></i>
|
||||
<input type="text" id="form3" class="form-control">
|
||||
<label for="form3" class="white-text">Your name</label>
|
||||
</div>
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix white-text"></i>
|
||||
<input type="text" id="form2" class="form-control">
|
||||
<label for="form2" class="white-text">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix white-text"></i>
|
||||
<input type="password" id="form4" class="form-control">
|
||||
<label for="form4" class="white-text">Your password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-light-blue btn-rounded">Sign up</button>
|
||||
<hr class="hr-light mb-3 mt-4">
|
||||
|
||||
<div class="inline-ul text-center d-flex justify-content-center">
|
||||
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text"></i></a>
|
||||
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text"> </i></a>
|
||||
<a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram white-text"> </i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.Form -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</header>
|
||||
<!-- Main Navigation -->
|
||||
|
||||
|
||||
|
||||
<!--Main Layout-->
|
||||
<main>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!--Section: Features v.4-->
|
||||
<section class="section my-5wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h1 class="text-center my-5 h1">Why is it so great?</h1>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-flag-checkered indigo-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">International</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-flask blue-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Experimental</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-glass cyan-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Relaxing</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-2 text-center text-md-left flex-center">
|
||||
<img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="" class="z-depth-0">
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-heart deep-purple-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Beloved</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-flash purple-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Rapid</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-magic pink-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Magical</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--/Section: Features v.4-->
|
||||
|
||||
<hr class="mb-5">
|
||||
|
||||
<!--Section: Testimonials v.3-->
|
||||
<section class="section team-section text-center my-5 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h1 class="text-center my-5 h1">Testimonials</h1>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-center">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
|
||||
<div class="testimonial">
|
||||
<!--Avatar-->
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid">
|
||||
</div>
|
||||
|
||||
<!--Content-->
|
||||
<h4 class="font-weight-bold mt-4 mb-3">Anna Deynah</h4>
|
||||
<h6 class="mb-3 font-weight-bold grey-text">Web Designer</h6>
|
||||
<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.</p>
|
||||
|
||||
<!--Review-->
|
||||
<div class="orange-text">
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star-half-full"> </i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="testimonial">
|
||||
<!--Avatar-->
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle z-depth-1 img-fluid">
|
||||
</div>
|
||||
|
||||
<!--Content-->
|
||||
<h4 class="font-weight-bold mt-4 mb-3">John Doe</h4>
|
||||
<h6 class="mb-3 font-weight-bold grey-text">Web Developer</h6>
|
||||
<p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
|
||||
|
||||
<!--Review-->
|
||||
<div class="orange-text">
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="testimonial">
|
||||
<!--Avatar-->
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid">
|
||||
</div>
|
||||
<!--Content-->
|
||||
<h4 class="font-weight-bold mt-4 mb-3">Maria Kate</h4>
|
||||
<h6 class="mb-3 font-weight-bold grey-text">Photographer</h6>
|
||||
<p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
|
||||
|
||||
<!--Review-->
|
||||
<div class="orange-text">
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star-o"> </i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Testimonials v.3-->
|
||||
|
||||
<hr class="mb-5">
|
||||
|
||||
<!--Section: Pricing v.3-->
|
||||
<section class="section my-5 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h1 class="text-center my-5 h1">Our pricing plans</h1>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card hoverable">
|
||||
|
||||
<!--Content-->
|
||||
<div class="text-center">
|
||||
<div class="card-body">
|
||||
<h5>Basic plan</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="card-circle d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-home light-blue-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Price-->
|
||||
<h2 class="font-weight-bold my-3">59$</h2>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis
|
||||
accusamus deleniti cumque hic laborum.</p>
|
||||
<a class="btn btn-light-blue btn-rounded">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card purple-gradient hoverable">
|
||||
|
||||
<!--Content-->
|
||||
<div class="text-center white-text">
|
||||
<div class="card-body">
|
||||
<h5>Premium plan</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="card-circle d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-group white-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Price-->
|
||||
<h2 class="font-weight-bold my-3">79$</h2>
|
||||
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non
|
||||
distinctio cupiditate sequi atque.</p>
|
||||
<a class="btn btn-outline-white btn-rounded">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card hoverable">
|
||||
|
||||
<!--Content-->
|
||||
<div class="text-center">
|
||||
<div class="card-body">
|
||||
<h5>Advanced plan</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="card-circle d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-bar-chart light-blue-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Price-->
|
||||
<h2 class="font-weight-bold my-3">99$</h2>
|
||||
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium
|
||||
repellat eveniet quia vitae.</p>
|
||||
<a class="btn btn-light-blue btn-rounded">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Pricing v.3-->
|
||||
|
||||
<hr class="mb-5">
|
||||
|
||||
<!--Section: Contact v.2-->
|
||||
<section class="section my-5 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h2 class="text-center my-5 h1">Contact us</h2>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-8 col-xl-9">
|
||||
<form>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-name" class="form-control">
|
||||
<label for="contact-name" class="">Your name</label>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-email" class="form-control">
|
||||
<label for="contact-email" class="">Your email</label>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-Subject" class="form-control">
|
||||
<label for="contact-Subject" class="">Subject</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="md-form mb-0">
|
||||
<textarea type="text" id="contact-message" class="md-textarea form-control" rows="3"></textarea>
|
||||
<label for="contact-message">Your message</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</form>
|
||||
|
||||
<div class="text-center text-md-left my-4">
|
||||
<a class="btn btn-light-blue btn-rounded">Send</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 col-xl-3">
|
||||
<ul class="contact-icons list-unstyled text-center">
|
||||
<li><i class="fa fa-map-marker fa-2x"></i>
|
||||
<p>San Francisco, CA 94126, USA</p>
|
||||
</li>
|
||||
|
||||
<li><i class="fa fa-phone fa-2x"></i>
|
||||
<p>+ 01 234 567 89</p>
|
||||
</li>
|
||||
|
||||
<li><i class="fa fa-envelope fa-2x"></i>
|
||||
<p>contact@mdbootstrap.com</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Contact v.2-->
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!--Main Layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-4 mt-4 text-center text-md-left">
|
||||
|
||||
<!--Footer Links-->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-3">
|
||||
<h5 class="text-uppercase font-weight-bold">Footer Content </h5>
|
||||
<p>Here you can use rows and columns here to organize your footer content.</p>
|
||||
</div>
|
||||
<!--/.First column-->
|
||||
|
||||
<hr class="w-100 clearfix d-md-none">
|
||||
|
||||
<!--Second column-->
|
||||
<div class="col-md-2 ml-auto">
|
||||
<h5 class="text-uppercase font-weight-bold">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
<li><a href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.Second column-->
|
||||
|
||||
<hr class="w-100 clearfix d-md-none">
|
||||
|
||||
<!--Third column-->
|
||||
<div class="col-md-2 ml-auto">
|
||||
<h5 class="text-uppercase font-weight-bold">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
<li><a href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.Third column-->
|
||||
|
||||
<hr class="w-100 clearfix d-md-none">
|
||||
|
||||
<!--Fourth column-->
|
||||
<div class="col-md-2 ml-auto">
|
||||
<h5 class="text-uppercase font-weight-bold">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
<li><a href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.Fourth column-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="container">
|
||||
<!--Grid row-->
|
||||
<div class="row mb-3">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<ul class="list-unstyled d-flex justify-content-center mb-0 py-4 list-inline">
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg pin-ic"><i class="fa fa-pinterest white-text fa-lg"> </i></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!--/First column-->
|
||||
</div>
|
||||
<!--/Grid row-->
|
||||
</div>
|
||||
<!--/.Footer Links-->
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<script>
|
||||
new WOW().init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
711
html/html/pages/landing.html~HEAD
Normal file
711
html/html/pages/landing.html~HEAD
Normal file
@@ -0,0 +1,711 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link rel="stylesheet" href="../../css/mdb.min.css">
|
||||
|
||||
<style>
|
||||
.intro-2 {
|
||||
background: url("https://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.top-nav-collapse {
|
||||
background-color: #9da4b1 !important;
|
||||
}
|
||||
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: #9da4b1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rgba-gradient {
|
||||
background: -webkit-linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
|
||||
background: -webkit-gradient(linear, 45deg, from(rgba(29, 236, 197, 0.4)), to(rgba(96, 0, 136, 0.4)));
|
||||
background: linear-gradient(to 45deg, rgba(29, 236, 197, 0.4), rgba(96, 0, 136, 0.4) 100%);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(229, 228, 255, 0.2);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
h6 {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.view {
|
||||
height: 1040px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 800px) and (max-width: 850px) {
|
||||
html,
|
||||
body,
|
||||
header,
|
||||
.view {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
footer.page-footer {
|
||||
background-color: #9da4b1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Main Navigation -->
|
||||
<header>
|
||||
|
||||
<!--Navbar-->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#"><strong>MDB</strong></a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<div class="md-form my-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Intro Section -->
|
||||
<section class="view intro-2">
|
||||
<div class="mask rgba-gradient">
|
||||
<div class="container h-100 d-flex justify-content-center align-items-center">
|
||||
<div class="d-flex align-items-center content-height">
|
||||
<div class="row flex-center pt-5 mt-3">
|
||||
<div class="col-md-6 text-center text-md-left mb-5">
|
||||
<div class="white-text">
|
||||
<h1 class="h1-responsive font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
|
||||
<hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
|
||||
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga
|
||||
nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea
|
||||
dolor molestiae, quisquam iste, maiores. Nulla.</h6>
|
||||
<br>
|
||||
<a class="btn btn-outline-white btn-rounded wow fadeInLeft" data-wow-delay="0.3s">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-5 offset-xl-1">
|
||||
<!-- Form -->
|
||||
<div class="card wow fadeInRight" data-wow-delay="0.3s">
|
||||
<div class="card-body">
|
||||
<!-- Header -->
|
||||
<div class="text-center">
|
||||
<h3 class="white-text"><i class="fa fa-user white-text"></i> Register:</h3>
|
||||
<hr class="hr-light">
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix white-text"></i>
|
||||
<input type="text" id="form3" class="form-control">
|
||||
<label for="form3" class="white-text">Your name</label>
|
||||
</div>
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix white-text"></i>
|
||||
<input type="text" id="form2" class="form-control">
|
||||
<label for="form2" class="white-text">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix white-text"></i>
|
||||
<input type="password" id="form4" class="form-control">
|
||||
<label for="form4" class="white-text">Your password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-light-blue btn-rounded">Sign up</button>
|
||||
<hr class="hr-light mb-3 mt-4">
|
||||
|
||||
<div class="inline-ul text-center d-flex justify-content-center">
|
||||
<a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text"></i></a>
|
||||
<a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text"> </i></a>
|
||||
<a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram white-text"> </i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.Form -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</header>
|
||||
<!-- Main Navigation -->
|
||||
|
||||
|
||||
|
||||
<!--Main Layout-->
|
||||
<main>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!--Section: Features v.4-->
|
||||
<section class="section my-5wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h1 class="text-center my-5 h1">Why is it so great?</h1>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-flag-checkered indigo-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">International</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-flask blue-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Experimental</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-glass cyan-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Relaxing</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-2 text-center text-md-left flex-center">
|
||||
<img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="" class="z-depth-0">
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4">
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-heart deep-purple-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Beloved</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-flash purple-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Rapid</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row mb-2">
|
||||
<div class="col-2">
|
||||
<i class="fa fa-2x fa-magic pink-text"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<h5 class="font-weight-bold my-4">Magical</h5>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--/Section: Features v.4-->
|
||||
|
||||
<hr class="mb-5">
|
||||
|
||||
<!--Section: Testimonials v.3-->
|
||||
<section class="section team-section text-center my-5 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h1 class="text-center my-5 h1">Testimonials</h1>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row text-center">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
|
||||
<div class="testimonial">
|
||||
<!--Avatar-->
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid">
|
||||
</div>
|
||||
|
||||
<!--Content-->
|
||||
<h4 class="font-weight-bold mt-4 mb-3">Anna Deynah</h4>
|
||||
<h6 class="mb-3 font-weight-bold grey-text">Web Designer</h6>
|
||||
<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.</p>
|
||||
|
||||
<!--Review-->
|
||||
<div class="orange-text">
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star-half-full"> </i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="testimonial">
|
||||
<!--Avatar-->
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle z-depth-1 img-fluid">
|
||||
</div>
|
||||
|
||||
<!--Content-->
|
||||
<h4 class="font-weight-bold mt-4 mb-3">John Doe</h4>
|
||||
<h6 class="mb-3 font-weight-bold grey-text">Web Developer</h6>
|
||||
<p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
|
||||
|
||||
<!--Review-->
|
||||
<div class="orange-text">
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="testimonial">
|
||||
<!--Avatar-->
|
||||
<div class="avatar mx-auto">
|
||||
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid">
|
||||
</div>
|
||||
<!--Content-->
|
||||
<h4 class="font-weight-bold mt-4 mb-3">Maria Kate</h4>
|
||||
<h6 class="mb-3 font-weight-bold grey-text">Photographer</h6>
|
||||
<p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
|
||||
|
||||
<!--Review-->
|
||||
<div class="orange-text">
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star"> </i>
|
||||
<i class="fa fa-star-o"> </i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Testimonials v.3-->
|
||||
|
||||
<hr class="mb-5">
|
||||
|
||||
<!--Section: Pricing v.3-->
|
||||
<section class="section my-5 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h1 class="text-center my-5 h1">Our pricing plans</h1>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card hoverable">
|
||||
|
||||
<!--Content-->
|
||||
<div class="text-center">
|
||||
<div class="card-body">
|
||||
<h5>Basic plan</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="card-circle d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-home light-blue-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Price-->
|
||||
<h2 class="font-weight-bold my-3">59$</h2>
|
||||
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis
|
||||
accusamus deleniti cumque hic laborum.</p>
|
||||
<a class="btn btn-light-blue btn-rounded">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card purple-gradient hoverable">
|
||||
|
||||
<!--Content-->
|
||||
<div class="text-center white-text">
|
||||
<div class="card-body">
|
||||
<h5>Premium plan</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="card-circle d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-group white-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Price-->
|
||||
<h2 class="font-weight-bold my-3">79$</h2>
|
||||
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non
|
||||
distinctio cupiditate sequi atque.</p>
|
||||
<a class="btn btn-outline-white btn-rounded">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-4 col-md-12 mb-4">
|
||||
<!--Card-->
|
||||
<div class="card hoverable">
|
||||
|
||||
<!--Content-->
|
||||
<div class="text-center">
|
||||
<div class="card-body">
|
||||
<h5>Advanced plan</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="card-circle d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-bar-chart light-blue-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Price-->
|
||||
<h2 class="font-weight-bold my-3">99$</h2>
|
||||
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium
|
||||
repellat eveniet quia vitae.</p>
|
||||
<a class="btn btn-light-blue btn-rounded">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Card-->
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</section>
|
||||
<!--Section: Pricing v.3-->
|
||||
|
||||
<hr class="mb-5">
|
||||
|
||||
<!--Section: Contact v.2-->
|
||||
<section class="section my-5 wow fadeIn" data-wow-delay="0.3s">
|
||||
|
||||
<!--Section heading-->
|
||||
<h2 class="text-center my-5 h1">Contact us</h2>
|
||||
<!--Section description-->
|
||||
<p class="text-center mb-5 w-responsive mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-8 col-xl-9">
|
||||
<form>
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-name" class="form-control">
|
||||
<label for="contact-name" class="">Your name</label>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-6">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-email" class="form-control">
|
||||
<label for="contact-email" class="">Your email</label>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="md-form mb-0">
|
||||
<input type="text" id="contact-Subject" class="form-control">
|
||||
<label for="contact-Subject" class="">Subject</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
<!--Grid row-->
|
||||
<div class="row">
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="md-form mb-0">
|
||||
<textarea type="text" id="contact-message" class="md-textarea form-control" rows="3"></textarea>
|
||||
<label for="contact-message">Your message</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid row-->
|
||||
|
||||
</form>
|
||||
|
||||
<div class="text-center text-md-left my-4">
|
||||
<a class="btn btn-light-blue btn-rounded">Send</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
<!--Grid column-->
|
||||
<div class="col-md-4 col-xl-3">
|
||||
<ul class="contact-icons list-unstyled text-center">
|
||||
<li><i class="fa fa-map-marker fa-2x"></i>
|
||||
<p>San Francisco, CA 94126, USA</p>
|
||||
</li>
|
||||
|
||||
<li><i class="fa fa-phone fa-2x"></i>
|
||||
<p>+ 01 234 567 89</p>
|
||||
</li>
|
||||
|
||||
<li><i class="fa fa-envelope fa-2x"></i>
|
||||
<p>contact@mdbootstrap.com</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--Section: Contact v.2-->
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!--Main Layout-->
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer pt-4 mt-4 text-center text-md-left">
|
||||
|
||||
<!--Footer Links-->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-3">
|
||||
<h5 class="text-uppercase font-weight-bold">Footer Content </h5>
|
||||
<p>Here you can use rows and columns here to organize your footer content.</p>
|
||||
</div>
|
||||
<!--/.First column-->
|
||||
|
||||
<hr class="w-100 clearfix d-md-none">
|
||||
|
||||
<!--Second column-->
|
||||
<div class="col-md-2 ml-auto">
|
||||
<h5 class="text-uppercase font-weight-bold">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
<li><a href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.Second column-->
|
||||
|
||||
<hr class="w-100 clearfix d-md-none">
|
||||
|
||||
<!--Third column-->
|
||||
<div class="col-md-2 ml-auto">
|
||||
<h5 class="text-uppercase font-weight-bold">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
<li><a href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.Third column-->
|
||||
|
||||
<hr class="w-100 clearfix d-md-none">
|
||||
|
||||
<!--Fourth column-->
|
||||
<div class="col-md-2 ml-auto">
|
||||
<h5 class="text-uppercase font-weight-bold">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#!">Link 1</a></li>
|
||||
<li><a href="#!">Link 2</a></li>
|
||||
<li><a href="#!">Link 3</a></li>
|
||||
<li><a href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.Fourth column-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="container">
|
||||
<!--Grid row-->
|
||||
<div class="row mb-3">
|
||||
|
||||
<!--First column-->
|
||||
<div class="col-md-12">
|
||||
|
||||
<ul class="list-unstyled d-flex justify-content-center mb-0 py-4 list-inline">
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram white-text fa-lg"> </i></a></li>
|
||||
<li class="list-inline-item"><a class="p-2 m-2 fa-lg pin-ic"><i class="fa fa-pinterest white-text fa-lg"> </i></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!--/First column-->
|
||||
</div>
|
||||
<!--/Grid row-->
|
||||
</div>
|
||||
<!--/.Footer Links-->
|
||||
|
||||
<!--Copyright-->
|
||||
<div class="footer-copyright py-3 text-center">
|
||||
<div class="container-fluid">
|
||||
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Copyright-->
|
||||
|
||||
</footer>
|
||||
<!--/.Footer-->
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||||
<script>
|
||||
new WOW().init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user