Added API keys for the monitors

2026-06-06 00:57:01 +00:00 · 2021-06-28 09:25:52 +02:00
commit 38941368c9
7 changed files with 1056 additions and 0 deletions
--- a/1
+++ b/1
@@ -0,0 +1 @@
+status.mixflix.org
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Roger Stringer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/index.html
+++ b/index.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="description" content="Service status">
+	<meta name="robots" content="index, follow">
+	<meta http-equiv="refresh" content="300">
+	<title>Mix-Flix Status</title>
+	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+	 crossorigin="anonymous">
+	<link id="stylesheet" rel="stylesheet" href="style-dark.css?v=20180304">
+</head>
+
+<body>
+<div class="container">
+	<header>
+		<h1>Mix-Flix Status Page</h1>
+	</header>
+	<div class="panel" id="panel">
+		<div class="panel-heading">
+			<h3 class="panel-title" id="paneltitle"></h3>
+		</div>
+	</div>
+	<h4 class="page-header">Systems Status</h4>
+	<div class="list-group" id="services"></div>
+	<h4 class="page-header">Upcoming Maintenance</h4>
+	<div class="list-group" id="maintenance"></div>
+	<h4 class="page-header">Incidents</h4>
+	<div class="timeline-centered" id="incidents"></div>
+	<h4 class="page-header">Statistics</h4>
+	<div class="table-responsive" id="statistics">
+		<table class="table">
+			<thead>
+				<tr>
+					<th>Name</th>
+					<th>1 Day</th>
+					<th>7 Days</th>
+					<th>14 Days</th>
+					<th>30 Days</th>
+				</tr>
+			</thead>
+			<tbody></tbody>
+		</table>
+	</div>
+<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+ crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ="
+ crossorigin="anonymous"></script>
+<script src="script.js?v=20180304"></script>
+</body>
+
+</html>
--- a/mixflix.png
+++ b/mixflix.png
--- a/script.js
+++ b/script.js
@@ -0,0 +1,319 @@
+$(document).ready(function () {
+	var config = {
+		uptimerobot: {
+			api_keys: [
+				'm787344843-b903f0a1d83bc376026621ae',
+				'm788108560-14377b6524f265c4a8dd6a29',
+				'm787316996-7f6b8732055cb6a442d6fb8e',
+				'm788544421-0a378de942958d5027da9621',
+				'm788544427-9d4c51793e903361e96533c9',
+				'm788544432-1e0a06061c611a6b2f1c76b0'
+			],
+			logs: 1,
+			response_times: 1,
+			all_time_uptime_ratio: 1,
+			custom_uptime_ratios: "1-7-14-30",
+			response_times_average: 30,
+			response_times_warning: 1500,
+		},
+		github: {
+			org: 'SrIzan10',
+			repo: 'my-network-status'
+		},
+		theme: 'dark'
+	};
+
+	function setStyleSheet(url){
+		 var stylesheet = document.getElementById("stylesheet");
+		 stylesheet.setAttribute('href', url);
+	}
+
+	if (config.theme == 'light') {
+		setStyleSheet('style-light.css');
+	}
+
+	const status_text = {
+		'operational': 'operational',
+		'investigating': 'investigating',
+		'major outage': 'outage',
+		'degraded performance': 'degraded',
+	};
+
+	const monitors = config.uptimerobot.api_keys;
+	for (let i in monitors) {
+		var api_key = monitors[i];
+		$.post('https://api.uptimerobot.com/v2/getMonitors', {
+			"api_key": api_key,
+			"format": "json",
+			"logs": config.uptimerobot.logs,
+			"response_times": config.uptimerobot.response_times,
+			"all_time_uptime_ratio": config.uptimerobot.all_time_uptime_ratio,
+			"custom_uptime_ratios": config.uptimerobot.custom_uptime_ratios,
+			"response_times_average": config.uptimerobot.response_times_average
+		}, UptimeRobot, 'json');
+	}
+
+	function _uptimeRobotSetStatus(check) {
+			check.class = check.status === 2 ? 'label-success' : 'label-danger';
+			check.text = check.status === 2 ? 'operational' : 'major outage';
+			if (check.status !== 2 && !check.lasterrortime) {
+				check.lasterrortime = Date.now();
+			}
+			if (check.status === 2 && Date.now() - (check.lasterrortime * 1000) <= 86400000) {
+			check.class = 'label-danger';
+			check.text = 'major outage';
+		}
+		if (check.status === 2 && Math.round(check.average_response_time) >= config.uptimerobot.response_times_warning) {
+				check.class = 'label-warning';
+				check.text = 'degraded performance';
+			}
+			return check;
+	}
+
+	function _uptimeRobotSetData(monitor) {
+		const clean_name = monitor.friendly_name.replace(/[^0-9a-zA-Z ]/g, '').replace(/ /g, '');
+		const uptime_ratio = monitor.custom_uptime_ratio.split('-');
+		const uptimeForever = monitor.all_time_uptime_ratio;
+
+			$('#services').append('<div class="list-group-item">' +
+			'<span class="badge ' + monitor.class + '">' + monitor.text + '</span>' +
+			'<a href="#" class="list-group-item-heading" onclick="\$\(\'\#' + monitor.clean_name + '\').toggleClass(\'collapse\');">' + monitor.friendly_name + '</a>' +
+			'<div id="' + monitor.clean_name + '" class="graph collapse">' +
+			'<canvas id="' + monitor.clean_name + '_cvs" width="400" height="150"></canvas>' +
+				'</div>' +
+				'</div>');
+	}
+
+	function _uptimeRobotSetGraph(monitor) {
+			$('#statistics tbody').append('<tr>' +
+			'<td>' + monitor.friendly_name + '</td>' +
+			'<td>' + monitor.uptime_ratio[0] + '%</td>' +
+			'<td>' + monitor.uptime_ratio[1] + '%</td>' +
+			'<td>' + monitor.uptime_ratio[2] + '%</td>' +
+			'<td>' + monitor.uptime_ratio[3] + '%</td>' +
+			'</tr>');
+
+		const gph_data = {
+			type: 'line',
+			data: {
+				labels: [],
+				datasets: [{
+					label: 'Response Time (ms)',
+				backgroundColor: "rgba(255,255,255,0.5)",
+					data: [],
+				}]
+			},
+			options: {
+				legend: {
+					labels: {
+						fontColor: '#ddd'
+					}
+				},
+				scales: {
+					yAxes: [{
+						ticks: {
+							fontColor: '#ddd'
+						}
+					}],
+					xAxes: [{
+						display: false,
+						ticks: {
+							display: false,
+							scaleFontSize: 0
+						}
+					}]
+				}
+			}
+		};
+
+		if (config.theme == 'light') {
+			gph_data.options.scales.yAxes[0].ticks.fontColor = '';
+			gph_data.options.legend.labels.fontColor = '';
+			gph_data.data.datasets[0].backgroundColor = 'rgba(0,0,0,0.5)';
+		}
+
+		monitor.response_times.forEach(function (datapoint) {
+				gph_data.data.labels.push(formatDate(new Date(datapoint.datetime * 1000), 'D d M Y H:i:s (T)'));
+				gph_data.data.datasets[0].data.push(datapoint.value);
+			});
+
+			gph_data.data.labels = gph_data.data.labels.reverse();
+			gph_data.data.datasets[0].data = gph_data.data.datasets[0].data.reverse();
+
+		const gph_ctx = $('#' + monitor.clean_name + '_cvs');
+		const gph = new Chart(gph_ctx, gph_data);
+	}
+
+	function UptimeRobot(data) {
+		data.monitors = data.monitors.map(_uptimeRobotSetStatus);
+
+		var status = data.monitors.reduce(function (status, check) {
+			return check.status !== 2 ? 'danger' : 'operational';
+		}, 'operational');
+
+		if (!$('#panel').data('incident')) {
+			$('#panel').attr('class', (status === 'operational' ? 'panel-success' : 'panel-warning') );
+			$('#paneltitle').html(status === 'operational' ? 'All systems are operational.' : 'One or more systems inoperative');
+		}
+
+		data.monitors.forEach(function (item) {
+			item.clean_name = item.friendly_name.replace(/[^0-9a-zA-Z ]/g, '').replace(/ /g, '');
+			item.uptime_ratio = item.custom_uptime_ratio.split('-');
+			item.uptime_ratio.push(item.all_time_uptime_ratio);
+			_uptimeRobotSetData(item);
+			_uptimeRobotSetGraph(item);
+		});
+	};
+
+	var get_today = new Date();
+	get_today.setDate(get_today.getDate() - 14);
+	var scope_date = get_today.toISOString();
+
+	$.getJSON('https://api.github.com/repos/' + config.github.org + '/' + config.github.repo + '/issues?state=all&since=' + scope_date).done(GitHubEntry);
+
+	var maintainIssues = [];
+	var incidentIssues = [];
+
+	function GitHubEntry(issues) {
+		issues.forEach(function (issue) {
+			if (issue.labels.length > 0) {
+				issue.labels.forEach(function (label) {
+					if (label.name == 'maintenance' && issue.state == 'open') maintainIssues.push(issue);
+					else incidentIssues.push(issue);
+				});
+			}
+		});
+		_gitHubIncidents(incidentIssues);
+		_gitHubMaintainance();
+	}
+
+	function _gitHubMaintainance() {
+		if (maintainIssues.length > 0) {
+			maintainIssues.forEach(function (issue) {
+				$('#maintenance').append('<div class="list-group-item">' +
+					'<h2 class="list-group-item-heading">' + issue.title + '</h2>' +
+					'<p class="list-group-item-text">' + issue.body + '</p>' +
+					'</div>');
+			});
+		}
+		else {
+			$('#maintenance').append('<div class="list-group-item">' +
+				'<h4 class="list-group-item-heading"></h4>' +
+				'<p class="list-group-item-text">There is currently no planned maintenance</p>' +
+				'</div>');
+		}
+	}
+
+	function _gitHubIncidents(issues) {
+		issues.forEach(function (issue) {
+				var status = issue.labels.reduce(function (status, label) {
+					if (/^status:/.test(label.name)) {
+						return label.name.replace('status:', '');
+					} else {
+						return status;
+					}
+				}, 'operational');
+
+				var systems = issue.labels.filter(function (label) {
+					return /^system:/.test(label.name);
+				}).map(function (label) {
+					return label.name.replace('system:', '')
+				});
+
+				if (issue.state === 'open') {
+					$('#panel').data('incident', 'true');
+					$('#panel').attr('class', (status !== 'operational' ? 'panel-danger' : 'panel-warning') );
+					$('#paneltitle').html('<a href="#incidents">' + issue.title + '</a>');
+				}
+
+				var html = '<article class="timeline-entry">\n';
+				html += '<div class="timeline-entry-inner">\n';
+
+				if (issue.state === 'closed') {
+					html += '<div class="timeline-icon bg-success"><i class="entypo-feather"></i></div>';
+				} else if (issue.state === 'open' && status === 'operational'){
+					html += '<div class="timeline-icon bg-warn"><i class="entypo-feather"></i></div>';
+				} else {
+					html += '<div class="timeline-icon bg-secondary"><i class="entypo-feather"></i></div>';
+				}
+
+				html += '<div class="timeline-label">\n';
+			html += '<span class="date">' + formatDate(new Date(issue.created_at), 'D d M Y H:i:s (T)') + '</span>\n';
+
+				if (issue.state === 'closed') {
+					html += '<span class="badge label-success pull-right">closed</span>';
+				} else {
+					html += '<span class="badge ' + (status !== 'operational' ? 'label-danger' : 'label-warning') + ' pull-right">open</span>\n';
+				}
+
+				for (var i = 0; i < systems.length; i++) {
+					html += '<span class="badge system pull-right">' + systems[i] + '</span>';
+				}
+
+				html += '<h2>' + issue.title + '</h2>\n';
+				html += '<hr>\n';
+				html += '<p>' + issue.body + '</p>\n';
+
+				if (issue.state === 'open' && issue.created_at !== issue.updated_at) {
+					html += '<p><em>Last update ' + formatDate(new Date(issue.updated_at), 'D d M Y H:i:s (T)') + '</p>'
+				}
+
+				if (issue.state === 'closed') {
+					html += '<p><em>Updated ' + formatDate(new Date(issue.closed_at), 'D d M Y H:i:s (T)') + '<br/>';
+					html += 'The system is back in normal operation.</p>';
+				}
+				html += '</div>';
+				html += '</div>';
+				html += '</article>';
+				$('#incidents').append(html);
+		});
+	};
+
+	function formatDate(x, y) {
+		var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+		var fullMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+		var days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+		var fullDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+		var suffix = ['st', 'nd', 'rd', 'th'];
+		var z = {
+			a: (x.getHours() >= 12) ? 'pm' : 'am',
+			A: (x.getHours() >= 12) ? 'PM' : 'AM',
+			B: Math.floor((((x.getUTCHours() + 1) % 24) + x.getUTCMinutes() / 60 + x.getUTCSeconds() / 3600) * 1000 / 24),
+			c: x.toISOString(),
+			m: (x.getHours().toString().length == 2) ? x.getMonth() + 1 : '0' + x.getMonth() + 1,
+			M: months[x.getMonth()],
+			n: x.getMonth() + 1,
+			L: parseInt(((x.getFullYear() % 4 == 0) && (x.getFullYear() % 100 != 0)) || (x.getFullYear() % 400 == 0)),
+			F: fullMonths[x.getMonth()],
+			d: (x.getDate().toString().length == 2) ? x.getDate() : '0' + x.getDate(),
+			j: x.getDate(),
+			D: days[x.getDay()],
+			l: fullDays[x.getDay()],
+			N: x.getDay() + 1,
+			w: x.getDay(),
+			h: (x.getHours().toString().length == 2) ? ((x.getHours() + 11) % 12 + 1) : '0' + ((x.getHours() + 11) % 12 + 1),
+			H: (x.getHours().toString().length == 2) ? x.getHours() : '0' + x.getHours(),
+			G: x.getHours(),
+			g: ((x.getHours() + 11) % 12 + 1),
+			O: x.toString().match(/([-\+][0-9]+)\s/)[1],
+			i: (x.getMinutes().toString().length == 2) ? x.getMinutes() : '0' + x.getMinutes(),
+			s: (x.getSeconds().toString().length == 2) ? x.getSeconds() : '0' + x.getSeconds(),
+			T: x.toString().replace(/.*[(](.*)[)].*/, '$1'),
+			e: x.toString().replace(/.*[(](.*)[)].*/, '$1'),
+			Y: x.getFullYear(),
+			y: x.getYear(),
+			u: 000000,
+			v: 000000,
+			z: Math.round((new Date().setHours(23) - new Date(x.getYear() + 1900, 0, 1, 0, 0, 0)) / 1000 / 60 / 60 / 24) - 1,
+			U: Math.round(x.getTime() / 1000),
+		};
+		y = y.replace(/(a+|A+|B+|c+|m+|M+|n+|L+|F+|d+|D+|j+|l+|n+|N+|w+|g+|G+|O+|e+|u+|v+|z+|U+|h+|H+|i+|s+|T+|Y+|y+)/g, function (v) {
+			var t = eval('z.' + v.slice(-1));
+			return t;
+		});
+
+		return y.replace(/(y+)/g, function (v) {
+			return x.getFullYear().toString().slice(-v.length)
+		});
+	};
+});
--- a/style-dark.css
+++ b/style-dark.css
@@ -0,0 +1,331 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
+
+.timeline-centered .timeline-entry .timeline-entry-inner:after,
+.timeline-centered .timeline-entry:after,
+.timeline-centered:after {
+    clear: both
+}
+
+img {
+    vertical-align: middle
+}
+
+.img-responsive {
+    display: block;
+    height: auto;
+    max-width: 100%
+}
+
+.img-rounded {
+    border-radius: 3px
+}
+
+.img-thumbnail {
+    background-color: #fff;
+    border: 1px solid #ededf0;
+    border-radius: 3px;
+    display: inline-block;
+    height: auto;
+    line-height: 1.428571429;
+    max-width: 100%;
+    moz-transition: all .2s ease-in-out;
+    o-transition: all .2s ease-in-out;
+    padding: 2px;
+    transition: all .2s ease-in-out;
+    webkit-transition: all .2s ease-in-out
+}
+
+.img-circle {
+    border-radius: 50%
+}
+
+.timeline-centered {
+    position: relative;
+    margin-bottom: 30px
+}
+
+.timeline-centered:after,
+.timeline-centered:before {
+    content: " ";
+    display: table;
+}
+
+.timeline-centered:before {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 4px;
+    background: #67696c;
+    top: 20px;
+    bottom: 20px;
+    margin-left: 30px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner:after,
+.timeline-centered .timeline-entry .timeline-entry-inner:before,
+.timeline-centered .timeline-entry:after,
+.timeline-centered .timeline-entry:before {
+    content: " ";
+    display: table
+}
+
+.timeline-centered .timeline-entry {
+    position: relative;
+    margin-top: 5px;
+    margin-left: 30px;
+    margin-bottom: 10px;
+    clear: both
+}
+
+.timeline-centered .timeline-entry.begin {
+    margin-bottom: 0
+}
+
+.timeline-centered .timeline-entry.left-aligned {
+    float: left
+}
+
+.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner {
+    margin-left: 0;
+    margin-right: -18px
+}
+
+.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time {
+    left: auto;
+    right: -100px;
+    text-align: left
+}
+
+.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon {
+    float: right
+}
+
+.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label {
+    margin-left: 0;
+    margin-right: 70px
+}
+
+.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after {
+    left: auto;
+    right: 0;
+    margin-left: 0;
+    margin-right: -9px;
+    -moz-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg)
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner {
+    position: relative;
+    margin-left: -20px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time {
+    position: absolute;
+    left: -100px;
+    text-align: right;
+    padding: 10px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span {
+    display: block
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span:first-child {
+    font-size: 15px;
+    font-weight: 700
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span:last-child {
+    font-size: 12px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
+    background: #f0a724;
+    color: #ddd;
+    display: block;
+    width: 40px;
+    height: 40px;
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+    -webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    border-radius: 20px;
+    text-align: center;
+    -moz-box-shadow: 0 0 0 5px #67696c;
+    -webkit-box-shadow: 0 0 0 5px #67696c;
+    box-shadow: 0 0 0 5px #67696c;
+    line-height: 40px;
+    font-size: 15px;
+    float: left
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary {
+    background-color: #303641;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-secondary {
+    background-color: #ee4749;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success {
+    background-color: #00a651;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info {
+    background-color: #21a9e1;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning {
+    background-color: #fad839;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger {
+    background-color: #cc2424;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
+    position: relative;
+    background: #4a4c51;
+    padding: 1em;
+    margin-left: 60px;
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 9px 9px 9px 0;
+    border-color: transparent #4a4c51 transparent transparent;
+    left: 0;
+    top: 10px;
+    margin-left: -9px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2,
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p {
+    color: #ddd;
+    font-family: "Noto Sans", sans-serif;
+    font-size: 12px;
+    margin: 0;
+    line-height: 1.428571429
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p+p {
+    margin-top: 15px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 {
+    font-size: 16px;
+    margin-bottom: 10px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a {
+    color: #303641
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 span {
+    -webkit-opacity: .6;
+    -moz-opacity: .6;
+    opacity: .6;
+    -ms-filter: alpha(opacity=60);
+    filter: alpha(opacity=60)
+}
+
+body {
+  font-size 15px;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #ffffff;
+  background-color: #36393e
+}
+
+.panel-heading {
+  border:unset
+}
+
+.panel-success>.panel-heading {
+  color: #ffffff;
+  background-color: #43ac6a;
+  border-color: unset;
+  border-radius: .5rem
+}
+
+.panel-warning>.panel-heading {
+  color: #fff;
+  background-color: #f0a724;
+  border: unset;
+  border-radius: .5rem
+}
+/* ALT Option ffe335 - more vibrant yellow, background color font */
+
+.panel-danger>.panel-heading {
+  color: #ffffff;
+  background-color: #f04124;
+  border-color: unset;
+  border-radius: .5rem
+}
+
+.badge {
+  font-weight: 300;
+  margin: 2px
+}
+
+.badge.label-success {
+  background-color: #43ac6a
+}
+.badge.label-warning {
+  background-color:#f0a724
+}
+.badge.label-danger {
+  background-color:#f04124
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  font-weight: 300
+}
+
+.list-group-item {
+  background-color: #4a4c51;
+  border: 1px solid #ddd;
+  padding: 8px 15px
+}
+
+a {
+  color: #fff
+}
+
+a:hover {
+  color: #ddd
+}
+
+.table {
+  margin-bottom: unset;
+}
+
+.table-responsive {
+  background-color: #4a4c51;
+  border: 1px solid #ddd;
+  border-radius: .5rem;
+  margin-bottom: 20px
+}
--- a/style-light.css
+++ b/style-light.css
@@ -0,0 +1,329 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
+
+.timeline-centered .timeline-entry .timeline-entry-inner:after,
+.timeline-centered .timeline-entry:after,
+.timeline-centered:after {
+    clear: both
+}
+
+img {
+    vertical-align: middle
+}
+
+.img-responsive {
+    display: block;
+    height: auto;
+    max-width: 100%
+}
+
+.img-rounded {
+    border-radius: 3px
+}
+
+.img-thumbnail {
+    background-color: #fff;
+    border: 1px solid #ededf0;
+    border-radius: 3px;
+    display: inline-block;
+    height: auto;
+    line-height: 1.428571429;
+    max-width: 100%;
+    moz-transition: all .2s ease-in-out;
+    o-transition: all .2s ease-in-out;
+    padding: 2px;
+    transition: all .2s ease-in-out;
+    webkit-transition: all .2s ease-in-out
+}
+
+.img-circle {
+    border-radius: 50%
+}
+
+.timeline-centered {
+    position: relative;
+    margin-bottom: 30px
+}
+
+.timeline-centered:after,
+.timeline-centered:before {
+    content: " ";
+    display: table
+}
+
+.timeline-centered:before {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 4px;
+    background: #f5f5f6;
+    top: 20px;
+    bottom: 20px;
+    margin-left: 30px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner:after,
+.timeline-centered .timeline-entry .timeline-entry-inner:before,
+.timeline-centered .timeline-entry:after,
+.timeline-centered .timeline-entry:before {
+    content: " ";
+    display: table
+}
+
+.timeline-centered .timeline-entry {
+    position: relative;
+    margin-top: 5px;
+    margin-left: 30px;
+    margin-bottom: 10px;
+    clear: both
+}
+
+.timeline-centered .timeline-entry.begin {
+    margin-bottom: 0
+}
+
+.timeline-centered .timeline-entry.left-aligned {
+    float: left
+}
+
+.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner {
+    margin-left: 0;
+    margin-right: -18px
+}
+
+.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time {
+    left: auto;
+    right: -100px;
+    text-align: left
+}
+
+.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon {
+    float: right
+}
+
+.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label {
+    margin-left: 0;
+    margin-right: 70px
+}
+
+.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after {
+    left: auto;
+    right: 0;
+    margin-left: 0;
+    margin-right: -9px;
+    -moz-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg)
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner {
+    position: relative;
+    margin-left: -20px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time {
+    position: absolute;
+    left: -100px;
+    text-align: right;
+    padding: 10px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span {
+    display: block
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span:first-child {
+    font-size: 15px;
+    font-weight: 700
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span:last-child {
+    font-size: 12px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
+    background: #fff;
+    color: #737881;
+    display: block;
+    width: 40px;
+    height: 40px;
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+    -webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    border-radius: 20px;
+    text-align: center;
+    -moz-box-shadow: 0 0 0 5px #f5f5f6;
+    -webkit-box-shadow: 0 0 0 5px #f5f5f6;
+    box-shadow: 0 0 0 5px #f5f5f6;
+    line-height: 40px;
+    font-size: 15px;
+    float: left
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary {
+    background-color: #303641;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-secondary {
+    background-color: #ee4749;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success {
+    background-color: #00a651;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info {
+    background-color: #21a9e1;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning {
+    background-color: #fad839;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger {
+    background-color: #cc2424;
+    color: #fff
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
+    position: relative;
+    background: #f5f5f6;
+    padding: 1em;
+    margin-left: 60px;
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 9px 9px 9px 0;
+    border-color: transparent #f5f5f6 transparent transparent;
+    left: 0;
+    top: 10px;
+    margin-left: -9px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2,
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p {
+    color: #737881;
+    font-family: "Noto Sans", sans-serif;
+    font-size: 12px;
+    margin: 0;
+    line-height: 1.428571429
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p+p {
+    margin-top: 15px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 {
+    font-size: 16px;
+    margin-bottom: 10px
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a {
+    color: #303641
+}
+
+.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 span {
+    -webkit-opacity: .6;
+    -moz-opacity: .6;
+    opacity: .6;
+    -ms-filter: alpha(opacity=60);
+    filter: alpha(opacity=60)
+}
+
+body {
+  font-size 15px;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.panel-heading {
+  border:unset
+}
+
+.panel-success>.panel-heading {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: unset;
+  border-radius: .5rem
+}
+
+.panel-warning>.panel-heading {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border: unset;
+  border-radius: .5rem
+}
+
+.panel-danger>.panel-heading {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: unset;
+  border-radius: .5rem
+}
+
+.badge {
+  font-weight: 300;
+  margin: 2px
+}
+
+.badge.label-success {
+  color: #3c763d;
+  background-color: #dff0d8
+}
+.badge.label-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3
+}
+.badge.label-danger {
+  color: #a94442;
+  background-color: #f2dede
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  font-weight: 300
+}
+
+.list-group-item {
+  border: 1px solid #ddd;
+  padding: 8px 15px
+}
+
+a {
+  color: #000
+}
+
+a:hover {
+  color: #222
+}
+
+.table {
+  margin-bottom: unset;
+}
+
+.table-responsive {
+  border: 1px solid #ddd;
+  border-radius: .5rem;
+  margin-bottom: 20px
+}