Skip to content

Instantly share code, notes, and snippets.

@abonzer

abonzer/Material Dashboard Template

Created May 8, 2020 18:17
Show Gist options
  • Save abonzer/118fdfecbe320fdfb7ad5fb83dd47fed to your computer and use it in GitHub Desktop.
Save abonzer/118fdfecbe320fdfb7ad5fb83dd47fed to your computer and use it in GitHub Desktop.
Download ZIP
Material WebPage Template for webapp Dashboard
Raw
Material Dashboard Template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CheckPad Editor</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
.body-style {
margin: 0;
letter-spacing: .5px;
background: #efefef;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.57142857;
color: #464646;
}
.site-head {
position: fixed;
left: 0;
right: 0;
z-index: 1030;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
background: #3f51b5;
-webkit-transition: 0.25s ease-in;
-o-transition: 0.25s ease-in;
transition: 0.25s ease-in;
padding: 7px 0px;
}
.header-list-elems {
display: table;
height: 100%;
float: left;
padding-left: 0;
list-style: none;
padding: 0;
margin: 0;
}
.header-list-elems > li {
display: table-cell;
vertical-align: middle;
}
.Setmargin {
width: 65px;
-webkit-transition: 0.25s ease-in;
-o-transition: 0.25s ease-in;
transition: 0.25s ease-in;
}
.Setmargin.expandNavMargin {
width: 220px;
}
.header-nav-trigger {
margin-left: 20px;
cursor: pointer;
padding: 5px 15px;
font-size: 20px;
color: #fff;
}
.header-nav-search {
position: relative;
width: 240px;
margin-left: 20px;
}
.header-nav-search-input {
font-family: inherit;
position: relative;
overflow: hidden;
display: block;
width: 100%;
height: 36px;
padding: 6px 15px;
padding-left: 28px;
font-size: 14px;
line-height: 1.57142857;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #e0e0e0;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.header-nav-search-ico {
cursor: pointer;
border: none;
position: absolute;
top: 2px;
left: 3px;
color: #26316ba8;
background: transparent;
line-height: 1.57142857;
display: inline-block;
text-transform: none;
text-rendering: auto;
}
@media (max-width: 767px) {
.site-head {
position: fixed;
}
.Setmargin {
width: 220px;
}
.Setmargin.expandNavMargin {
width: 220px;
}
}
@media (max-width: 642px) {
.header-nav-search {
display: none;
}
}
/* Left Side nav */
.nav-wrap {
width: 65px;
position: fixed;
overflow-y: auto;
top: 0;
bottom: 0;
background: #ffffff;
}
@media (min-width: 768px) {
.nav-wrap {
overflow: hidden;
}
}
@media (max-width: 767px) {
.site-head ul.left-elems > li > .site-logo {
position: absolute;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.site-head ul.left-elems > li > .site-logo > a {
font-weight: 900;
color: #fff;
}
}
.nav-wrap:hover {
width: 220px;
}
.nav-wrap:hover .nav-head {
width: 200px;
}
.site-head.nav-expand {
width: calc(100% - 220px);
margin-left: 220px;
}
.nav-wrap.nav-expand {
width: 220px;
}
.nav-wrap.nav-expand .nav-head {
width: 200px;
}
.nav-wrap {
background: #ffffff;
z-index: 1040;
-webkit-transition: 0.25s ease-in;
-o-transition: 0.25s ease-in;
transition: 0.25s ease-in;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.nav-wrap .nav-head {
height: 55px;
display: table;
overflow: hidden;
width: 45px;
position: fixed;
-webkit-transition: 0.25s ease-in;
-o-transition: 0.25s ease-in;
transition: 0.25s ease-in;
padding-left: 22px;
z-index: 1000;
background: #303f9f;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.nav-wrap .nav-head .site-logo {
color: #fff;
font-weight: bolder;
display: table-cell;
vertical-align: middle;
font-size: 22px;
position: relative;
}
.nav-wrap .nav-head .site-logo > span.text {
position: absolute;
top: 12.33333333px;
margin-left: 22px;
}
@media (max-width: 767px) {
.site-head {
width: 100%;
margin-left: 0;
z-index: 1040;
}
.nav-wrap {
width: 220px;
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.nav-wrap.nav-expand {
width: 220px;
-webkit-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
-o-transform: translate(0%, 0);
transform: translate(0%, 0);
}
.nav-wrap .nav-head {
width: 220px;
}
.nav-wrap.nav-expand .nav-head {
width: 220px;
}
.Setmargin {
width: 0px;
}
.content-container.marginLeft {
padding-left: 0!important;
width: 100%!important;
}
}
/* Right Side nav */
.sidebar-wrap {
overflow: hidden;
z-index: 1020;
background: #fff;
position: fixed;
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.4);
top: 54.5px;
bottom: 0;
right: 0;
width: 250px;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
border-left: 1px solid #eeeeee;
min-width: 250px;
max-width: calc(100% - 300px)
}
.sidebar-wrap .tab-content {
border: none;
box-shadow: none;
}
.sidebar-wrap .nav-tabs {
background: #333333;
}
.sidebar-wrap .nav-tabs > li.active a {
color: #464646;
}
.sidebar-wrap .nav-tabs > li a {
border: none;
box-shadow: none;
border-radius: 0;
color: #fff;
}
.sidebar-wrap .info-tab .title {
border-bottom: 1px solid #eeeeee;
text-transform: uppercase;
font-weight: bold;
padding: 10px 0px;
}
.sidebar-wrap.OpenAsideR {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav-tabs-bar {
border-bottom: none;
background: #333333;
}
.ActiveTab.nav-tabs {
background: #fff;
color: #333333;
cursor: inherit;
}
.nav-tabs {
width: calc(50% - 23px);
background: #333333;
color: #fff;
display: inline-block;
text-align: center;
text-transform: uppercase;
font-weight: 800;
font-size: 12px;
padding: 12px 8px;
cursor: pointer;
-webkit-transition: 0.25s ease-in;
-o-transition: 0.25s ease-in;
transition: 0.25s ease-in;
}
#dragbar-sidebar-wrap {
background-color: #33333317;
height: 100%;
float: left;
width: 7px;
cursor: col-resize;
}
@media (max-width: 768px) {
.nav-tabs {
width: auto;
display: block;
}
.nav-tabs-bar {
padding-bottom: 3px;
}
#dragbar-sidebar-wrap {
background-color: #ecececed;
}
}
.nav-opt-list {
padding-left: 0;
list-style: none;
margin-bottom: 15px;
}
.nav-opt-list > li {
position: relative;
}
.nav-opt-list> li a {
color: #464646;
padding: 7px 15px;
padding-left: 12px;
display: table;
width: 100%;
white-space: nowrap;
text-decoration: none;
}
.nav-opt-list > li a:hover {
color: #455a64;
background: #f7f7f7;
}
.nav-opt-list > li a:hover i.Gicon {
color: #455a64;
}
.nav-opt-list li.active a {
background: #f7f7f7;
color: #616161;
}
.nav-opt-list li.active a .text {
color: #303f9f;
}
.nav-opt-list li.active a i.Gicon {
color: #303f9f;
}
.nav-opt-list li.active a:hover {
color: #464646;
}
.nav-opt-list > li > a > .text {
margin-left: 15px;
margin-top: 9px;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.nav-opt-list > li a i.Gicon {
display: inline-block;
vertical-align: middle;
color: #767676;
font-size: 20px;
padding: 5px 0;
width: 40px;
text-align: center;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
.nav-opt-list li .nav-SubOpt-list {
display: none;
font-size: 13px;
background: #fff;
padding-left: 0;
list-style: none;
width: 100% -webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
.nav-opt-list li .nav-SubOpt-list li {
display: none;
}
.nav-opt-list li.active .nav-SubOpt-list {
display: block;
background: #fff;
width: 100%;
}
.nav-wrap.nav-expand .nav-opt-list li.active .nav-SubOpt-list li {
display: block;
}
.nav-wrap:hover .nav-opt-list li.active .nav-SubOpt-list li {
display: block;
}
.nav-opt-list > li.active a > .arrow {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.nav-opt-list li .nav-SubOpt-list a {
padding: 10px 0;
padding-left: 55px;
position: relative;
-webkit-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.nav-opt-list li .nav-SubOpt-list {
display: none;
position: absolute;
left: 0;
margin-top: 1px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.nav-opt-list li .nav-SubOpt-list a {
background: #e8e8e83d!important;
}
.nav-SubOpt-list li.active {
background: #efefef!important;
color: #3f51b5!important;
}
.nav-SubOpt-list li.active a {
color: #3f51b5!important;
}
.content-container {
margin: auto;
padding-top: 26px;
margin-top: 55px;
position: absolute;
width: 100%;
-webkit-animation: 0.3s scaleUp ease-in;
-o-animation: 0.3s scaleUp ease-in;
animation: 0.3s scaleUp ease-in;
}
.content-container.marginLeft {
padding-left: 65px;
width: calc(100% - 65px);
}
.content-container.content-shrink {
padding-left: 222px;
width: calc(100% - 220px);
}
.card-box {
width: 90%;
border: solid 1px rgb(228, 228, 228);
margin-bottom: 20px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
transition: box-shadow 0.2s ease-in 0s;
background-color: rgb(255, 255, 255);
margin: auto;
border-radius: 2px;
position: relative;
min-height: 1px;
padding: 6px 10px;
}
.card-box-heading {
margin: 0px 8px;
padding: 10px 4px 12px 4px;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
border-bottom: 1px solid #e4e4e4;
color: rgb(83, 83, 83);
}
.card-box-body {
padding: 22px;
}
@media (min-width: 768px) {
@keyframes scaleUp {
0% {
opacity: 0;
padding-top: 54px;
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
}
100% {
opacity: 1;
padding-top: 26px;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes scaleUp {
0% {
opacity: 0;
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
}
</style>
</head>
<body class="body-style">
<header class="site-head">
<ul class="header-list-elems">
<li id="Lnavspace" class="Setmargin"></li>
<!-- nav trigger/collapse -->
<li>
<div class="header-nav-trigger" onclick="LeftNavPanelExpand();">
<i class="material-icons" style="vertical-align: middle;">notes</i>
</div>
</li>
<li>
<div class="header-nav-search">
<div id="site-search" action="#na" class="ng-pristine ng-valid">
<input type="search" class="header-nav-search-input" placeholder="Type here for search...">
<div class="header-nav-search-ico material-icons" style="vertical-align: middle;">search</div>
</div>
</div>
</li>
</ul>
<ul class="header-list-elems" style="float: right!important;">
<!-- nav trigger/collapse -->
<li>
<div class="header-nav-trigger" onclick="RightNavPanelExpand();">
<i class="material-icons" style="vertical-align: middle;">format_align_justify</i>
</div>
</li>
</ul>
</header>
<!-- Sider Left -->
<nav id="asideL" class="nav-wrap NavPanelExpand">
<div id="asideLHead" class="nav-head ng-scope">
<!-- site logo -->
<a href="#/dashboard" class="site-logo text-uppercase">
<i class="material-icons" style="vertical-align: middle;">donut_small</i>
<span class="text">CheckPad</span>
</a>
</div>
<div style="height: 52px;"></div>
<!-- Nav Options -->
<ul class="nav-opt-list">
<li class="active">
<a href="#/AddLinkTestbookJS" onclick="ChangeOpt(this);">
<i class="material-icons Gicon">memory</i>
<span class="text">Add Link</span>
</a>
</li>
<li class="">
<a href="#/dashboardB" onclick="ChangeOpt(this);">
<i class="material-icons Gicon">watch</i>
<span class="text">Watch</span>
</a>
</li>
<li class="">
<a href="#/dashboardA" onclick="ChangeOpt(this);">
<i class="material-icons Gicon">weekend</i>
<span class="text">Week End</span>
</a>
</li>
<li class="nested ">
<a href="#A" onclick="ChangeOpt(this);">
<i class="material-icons Gicon">tune</i>
<i class="material-icons Gicon arrow" style="margin-left: 122px; color: #767676b8; position: absolute;">chevron_right</i>
<span class="text">Download</span>
</a>
<ul class="nav-SubOpt-list">
<li><a href="https://solutionportal.net/themes/materia/angular/#/dashboard" target="_blank" onclick="ChangeOpt(this);">Live Preview</a></li>
<li><a href="https://solutionportal.net/themes/materia/angular/styles/main.min.css" target="_blank" onclick="ChangeOpt(this);">CSS</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Sider Right -->
<nav id="asideR" class="sidebar-wrap">
<div id="dragbar-sidebar-wrap"></div>
<div>
<div class="nav-tabs-bar nav-justified">
<div id="TabPanelFirst" class="nav-tabs" onclick="ActiveTabPanelFirst();">Notes</div>
<div id="TabPanelSecond" class="nav-tabs" onclick="ActiveTabPanelSecond();">Events</div>
</div>
<div class="tab-content">
</div>
</div>
</nav>
<div id="MainContainer" class="content-container marginLeft">
<div id="CardContainer" style="">
<div id="cards" class="card-box">
<div class="card-box-heading">Card title</div>
<div class="card-box-body">Some quick example test to build on the card title and make up the bulk of the card's content.</div>
</div>
</div>
</div>
</body>
<script>
// <!-- nav trigger/collapse -->
var LeftNavPanelExpandStatus = "NoExpand";
var RightNavPanelExpandStatus = "NoExpand";
ActiveTabPanelFirst();
function LeftNavPanelExpand() {
if (LeftNavPanelExpandStatus == "NoExpand") {
document.getElementById('asideL').classList.add("nav-expand");
document.getElementById('Lnavspace').classList.add("expandNavMargin");
document.getElementById('MainContainer').classList.add("content-shrink");
LeftNavPanelExpandStatus = "Expand";
} else if (LeftNavPanelExpandStatus == "Expand") {
document.getElementById('asideL').classList.remove("nav-expand");
document.getElementById('Lnavspace').classList.remove("expandNavMargin");
document.getElementById('MainContainer').classList.remove("content-shrink");
LeftNavPanelExpandStatus = "NoExpand";
}
}
function RightNavPanelExpand() {
if (RightNavPanelExpandStatus == "NoExpand") {
document.getElementById('asideR').classList.add("OpenAsideR");
RightNavPanelExpandStatus = "Expand";
} else if (RightNavPanelExpandStatus == "Expand") {
document.getElementById('asideR').classList.remove("OpenAsideR");
RightNavPanelExpandStatus = "NoExpand";
}
}
function ChangeOpt(SelectedOpt) {
var optLI = SelectedOpt.parentNode;
var navOptList = optLI.parentNode;
for (var i = 0; i < navOptList.childNodes.length; i++) {
if (navOptList.childNodes[i].className == "active") {
navOptList.childNodes[i].classList.remove("active");
} else if (navOptList.childNodes[i].className == "nested active") {
navOptList.childNodes[i].classList.remove("active");
for (var j = 0; j < navOptList.childNodes[i].childNodes.length; j++) {
if (navOptList.childNodes[i].childNodes[j].className == "nav-SubOpt-list") {
var subOptList = navOptList.childNodes[i].childNodes[j];
for (var k = 0; k < subOptList.childNodes.length; k++) {
if (subOptList.childNodes[k].className == "active") {
subOptList.childNodes[k].classList.remove("active");
}
}
}
}
}
}
optLI.classList.add("active");
}
function ActiveTabPanelFirst() {
document.getElementById('TabPanelFirst').classList.add("ActiveTab");
document.getElementById('TabPanelSecond').classList.remove("ActiveTab");
}
function ActiveTabPanelSecond() {
document.getElementById('TabPanelSecond').classList.add("ActiveTab");
document.getElementById('TabPanelFirst').classList.remove("ActiveTab");
}
// One Side Drag Resize Right Slider Div
//-------------------------------------------------------------------------------------------
var OneSideDragResizeDiv = document.getElementById('asideR');
var resizer = document.getElementById('dragbar-sidebar-wrap');
var widthSet = 0,
pos1 = 0,
pos2 = 0;
resizer.addEventListener('mousedown', initResize, false);
function initResize(e) {
window.addEventListener('mousemove', Resize, false);
window.addEventListener('mouseup', stopResize, false);
pos2 = e.clientX;
widthSet = OneSideDragResizeDiv.clientWidth;
}
function Resize(e) {
pos1 = pos2 - e.clientX;
OneSideDragResizeDiv.style.width = (pos1 + widthSet) + 'px';
}
function stopResize(e) {
window.removeEventListener('mousemove', Resize, false);
window.removeEventListener('mouseup', stopResize, false);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment