<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Dribbble inspired #2</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- DRIBBBLE INSPIRED -->
<body>
<div class="container">
<div class="row" style="height:100%;">
<div class="col-xs-1 left-menu animated fadeInUp">
<div class="menu-item active animated fadeIn">
<div class="fa fa-tint"></div>
</div>
<div class="menu-item highlighted animated fadeIn">
<div class="fa fa-home"></div>
</div>
<div class="menu-item animated fadeIn">
<div class="fa fa-calendar"></div>
</div>
<div class="menu-item animated fadeIn">
<div class="fa fa-comment">
<div class="notification-circle"></div>
</div>
</div>
<div class="menu-item animated fadeIn">
<div class="fa fa-cog"></div>
</div>
</div>
<div class="col-xs-11 dashboard animated fadeInUp">
<div class="row" id="server-info-header">
<div class="col-xs-offset-1 col-xs-3 animated fadeIn header">
Server Activity
<div class="sub-header">May 11th - 16th</div>
</div>
<div class="col-xs-2 animated fadeInDown select">
<div class="wrapper-dropdown" tabindex="1" data-prefix="Type">
<span>Type:<b>Requests</b></span>
<ul class="dropdown">
<li><a href="#">Type 1</a></li>
<li><a href="#">Type 2</a></li>
</ul>
</div>
</div>
<div class="col-xs-2 animated fadeInDown select">
<div class="wrapper-dropdown" tabindex="1" data-prefix="Status">
<span>Status:<b>Active</b></span>
<ul class="dropdown">
<li><a href="#">Status 1</a></li>
<li><a href="#">Status 2</a></li>
</ul>
</div>
</div>
</div>
<div class="row" id="chart">
<div class="col-xs-12">
<canvas id="myChart" height="75"></canvas>
</div>
</div>
<div class="row animated fadeInUp" id="info">
<div class="col-xs-offset-1 col-xs-4">
<div class="row">
<div class="col-xs-4 progress-label">Total Users</div>
<div class="col-xs-6 custom-progress">
<div class="progress-bar" style="width:45%">
</div>
</div>
<div class="col-xs-2 progress-score">1,350</div>
</div>
<div class="row">
<div class="col-xs-4 progress-label">Requests</div>
<div class="col-xs-6 custom-progress">
<div class="progress-bar" style="width:60%">
</div>
</div>
<div class="col-xs-2 progress-score">2,399</div>
</div>
<div class="row">
<div class="col-xs-4 progress-label">Timeouts</div>
<div class="col-xs-6 custom-progress">
<div class="progress-bar" style="width:20%">
</div>
</div>
<div class="col-xs-2 progress-score">895</div>
</div>
<div class="row">
<div class="col-xs-4 progress-label">Latches</div>
<div class="col-xs-6 custom-progress">
<div class="progress-bar">
</div>
</div>
<div class="col-xs-2 progress-score">2,899</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<script src="js/app.js"></script>
</body>
<!-- partial -->
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://code.jquery.com/ui/jquery-ui-git.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js'></script><script src="./script.js"></script>
</body>
</html>
*,
*:after,
*:before {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #263238;
}
.container {
height: 800px;
width: 90%;
margin-top: 2.5%;
}
.left-menu {
height: 100%;
background-color: #27272B;
-webkit-box-shadow: 1px 0 10px -2px black;
box-shadow: 1px 0 10px -2px black;
z-index: 1;
maring: 0;
padding: 0;
}
.dashboard {
height: 100%;
background-color: #252529;
box-shadow: -1px 0 10px -2px black;
}
.menu-item {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
color: #666;
font-size: 30px;
-webkit-transition: all 100ms;
transition: all 100ms;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
.menu-item.highlighted {
opacity: 1;
color: white;
}
.menu-item:hover {
color: white;
cursor: pointer;
}
.menu-item > div {
width: 100%;
text-align: center;
}
.menu-item.active {
color: white;
background-color: #29BBF1;
font-size: 50px;
opacity: 1;
}
.notification-circle {
position: relative;
top: -27px;
left: 81px;
background-color: #E54E36;
border-radius: 100%;
height: 10px;
width: 10px;
}
#server-info-header > .header {
font-size: 60px;
color: white;
font-weight: 100;
margin-top: 5%;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}
#server-info-header > .header > .sub-header {
font-size: 15px;
color: #666;
font-weight: 100;
-webkit-animation-delay: 1200ms;
animation-delay: 1200ms;
}
#server-info-header .select {
margin-top: 7%;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}
.wrapper-dropdown {
/* Size and position */
position: relative;
/* Enable absolute positioning for children and pseudo elements */
width: 100%;
padding: 10px 15px;
margin: 0 auto;
/* Styles */
background: transparent;
border: 1px solid white;
border-radius: 10px;
color: #fff;
outline: none;
cursor: pointer;
/* Font settings */
font-weight: 100;
z-index: 100;
}
.wrapper-dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-style: solid;
border-color: transparent #fff;
}
.wrapper-dropdown .dropdown {
/* Size & position */
position: absolute;
width: 101%;
top: 100%;
left: -1px;
/* Size */
right: 0;
padding: 0;
/* Size */
/* Styles */
background: #fff;
font-weight: normal;
/* Overwrites previous font-weight: bold; */
/* Hiding */
opacity: 0;
pointer-events: none;
list-style: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index: 100;
}
.wrapper-dropdown .dropdown li a {
display: block;
text-decoration: none;
color: #666;
padding: 10px 10px;
}
/* Hover state */
.wrapper-dropdown .dropdown li:hover a {
background: #666;
color: #fff;
}
/* Active state */
.wrapper-dropdown.active .dropdown {
opacity: 1;
pointer-events: auto;
border: 1px solid white;
}
.wrapper-dropdown.active:after {
border-color: #666 transparent;
border-width: 6px 6px 0 6px;
margin-top: -3px;
}
.wrapper-dropdown.active {
background-color: #fff;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: #666;
}
#chart {
height: 10%;
}
#chart div {
height: 100%;
}
#info {
margin-top: 25%;
color: #fff;
font-weight: 100;
font-size: 20px;
-webkit-animation-delay: 1500ms;
animation-delay: 1500ms;
}
.progress-label {
float: left;
}
.progress-score {
float: right;
}
.custom-progress {
float: left;
height: 10px;
background-color: #666;
border-radius: 10px;
margin-top: 10px;
margin-left: 0;
margin-right: 0;
padding: 0;
}
.progress-bar {
width: 75%;
height: 100%;
background-color: rgba(75, 192, 192, 1);
border-radius: 10px;
z-index: 2;
}
$(function() {
$('.wrapper-dropdown').each(function(i, el) {
new DropDown($(this));
});
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown').removeClass('active');
});
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'line',
borderColor: '#fff',
data: {
datasets: [{
label: 'Server status',
borderColor: "rgba(75,192,192,0.8)",
data: [{
x: -10,
y: 0
}, {
x: -5,
y: 10
}, {
x: 0,
y: 5
}, {
x: 5,
y: 30
}, {
x: 10,
y: 45
}, {
x: 15,
y: 0
}, {
x: 20,
y: 5
}, {
x: 25,
y: -10
}, {
x: 30,
y: -15
}, {
x: 35,
y: 0
}, {
x: 40,
y: 10
}, {
x: 45,
y: 15
}, {
x: 50,
y: -5
}, {
x: 55,
y: 70
}, {
x: 60,
y: 65
}, {
x: 65,
y: 10
}, {
x: 70,
y: -75
}, {
x: 75,
y: -90
}, {
x: 80,
y: 10
}, {
x: 85,
y: 0
},
]
}]
},
options: {
scaleShowLabels: false,
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
display: false
}
}],
yAxes: [{
ticks: {
display: false
}
}],
}
}
});
});
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents: function() {
var obj = this;
obj.dd.on('click', function(event) {
$(this).toggleClass('active');
return false;
});
obj.opts.on('click', function() {
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.dd.data('prefix') + ':' + obj.val + '');
});
},
getValue: function() {
return this.val;
},
getIndex: function() {
return this.index;
}
}