Uptime Monitor

In this example below you will see how to do a Uptime Monitor with some HTML / CSS and Javascript

Using jQuery Sparklines

Thumbnail
This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrishutchinson ©

Technologies

  • 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,
});

Comments