Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Google Font API
jQuery
v2.1.3
- 1 Downloads
- 41 Views
- Download Now View Demo
- HTML
- CSS
- JavaScript
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Uptime Monitor</title>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Muli:300,400'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="hero">Uptime Monitors<small>Using jQuery Sparklines - http://omnipotent.net/jquery.sparkline/</small></h1>
<div class="monitor good">
<div class="wrap">
<h1>Good</h1><span class="spark"></span>
</div>
<p>Server Uptime<span>97%</span></p>
</div>
<div class="monitor poor">
<div class="wrap">
<h1>Poor</h1><span class="spark"></span>
</div>
<p>API Uptime<span>43%</span></p>
</div>
<div class="monitor average">
<div class="wrap">
<h1>Average</h1><span class="spark"></span>
</div>
<p>Support Uptime<span>67%</span></p>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/chrishutchinson/uptime-monitor-AyjpK */
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 14px;
margin: 0;
padding: 30px;
background: #eaeaea;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
font-weight: 300;
}
h1.hero {
margin: 0 0 40px 0;
font-size: 4em;
}
h1.hero small {
text-transform: uppercase;
font-size: 0.3em;
color: #333;
display: block;
}
div.monitor {
opacity: 0.7;
width: 100%;
overflow: hidden;
float: left;
margin: 0 20px 20px 0;
}
div.monitor:hover {
opacity: 1;
}
div.monitor div.wrap {
padding: 20px 20px 30px;
}
div.monitor span.spark {
opacity: 0.6;
}
div.monitor h1 {
margin: 0 0 20px 0;
font-size: 3em;
}
div.monitor p {
display: block;
width: 100%;
padding: 5px 12px;
color: #FFF;
font-size: 0.9em;
opacity: 0.7;
}
div.monitor p span {
float: right;
}
div.monitor.good {
background: #b4e372;
}
div.monitor.good div.wrap {
border: 1px solid #7fbf26;
}
div.monitor.good h1 {
color: #699d1f;
}
div.monitor.good p {
background: #699d1f;
}
div.monitor.average {
background: #dc9c37;
}
div.monitor.average div.wrap {
border: 1px solid #8b5e18;
}
div.monitor.average h1 {
color: #684712;
}
div.monitor.average p {
background: #684712;
}
div.monitor.poor {
background: #b95c5c;
}
div.monitor.poor div.wrap {
border: 1px solid #733232;
}
div.monitor.poor h1 {
color: #572525;
}
div.monitor.poor p {
background: #572525;
}
/*Downloaded from https://www.codeseek.co/chrishutchinson/uptime-monitor-AyjpK */
$('div.good span.spark').sparkline([100,100,100,100,98,100,99,99,100,100,100,100,100,95,100,99,100,100,100,100,100,100,98,100,50,91,100,100,100,100,100,98,100,95,99,100], {
type: 'line',
lineColor: '#000000',
defaultPixelsPerValue: 5,
spotColor: false,
maxSpotColor: false,
minSpotColor: false,
fillColor: false,
});
$('div.average span.spark').sparkline([47,65,23,54,76,87,45,43,23,12,1,43,65,76,23,56,87,34,56,87,34,56,87,34,54,72,43,86,32,75,45,74], {
type: 'line',
lineColor: '#000000',
defaultPixelsPerValue: 5,
spotColor: false,
maxSpotColor: false,
minSpotColor: false,
fillColor: false,
});
$('div.poor span.spark').sparkline([5,4,31,34,52,12,23,54,5,4,31,34,32,12,23,54,5,4,31,34,32,12,45,3,5,4,31,2,12,12,23,2,5,4,13,0,5,14,31,24,12,13,47], {
type: 'line',
lineColor: '#000000',
defaultPixelsPerValue: 5,
spotColor: false,
maxSpotColor: false,
minSpotColor: false,
fillColor: false,
});
