krisdb2009/hub.html

## hub.html
<html>
	<head>
		<title>CPIT - Hub</title>
		<style>
			* {
				font-family:Arial;
				color:black;
			}
			#menubar {
				position:fixed;
				top:0px;
				left:0px;
				width:100%;
				height:50px;
				background-color:rgba(0,0,0,.7);
				text-align:center;
			}
			.mbutton {
				background-color:gray;
				height:34px;
				display:inline-block;
				padding:0px 20px 0px 20px;
				line-height:34px;
				font-size:18px;
				cursor:pointer;
				user-select:none;
				margin:0px 5px 0px 5px;
				border-radius:18px;
				margin-top:7px;
				box-shadow:0px 3px 4px rgba(0,0,0,.1);
				border:1px solid rgba(0,0,0,.05);
			}
			iframe {
				position:fixed;
				top:50px;
				left:0px;
				height:calc(100% - 50px);
				width:100%;
				border:0px;
			}
		</style>
		<script>
			var response = [];
			window.onload = function() {
				var iframe = document.getElementsByTagName('iframe')[0];
				var xhr = new XMLHttpRequest();
				xhr.open('GET', './menubar.json', true);
				xhr.responseType = 'json';
				xhr.addEventListener('load', function() {
					var menuBar = document.getElementById('menubar');
					response = xhr.response;
					response.forEach(function(menuItem) {
						menuBar.innerHTML += '<span iframe="'+menuItem[1]+'" class="mbutton">'+menuItem[0]+'</span>';
					});
					var buttons = document.getElementsByClassName('mbutton');
					for(var count = 0; count < buttons.length; count++) {
						buttons[count].onclick = function(e) {
							iframe.src = e.target.attributes.iframe.value;
						};
					}
					iframe.src = response[0][1];
				});
				xhr.send();
			};
		</script>
	</head>
	<body>
		<div id="menubar"></div>
		<iframe src="/"></iframe>
	</body>
</html>
	<html>
	<head>
	<title>CPIT - Hub</title>
	<style>
	* {
	font-family:Arial;
	color:black;
	}
	#menubar {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:50px;
	background-color:rgba(0,0,0,.7);
	text-align:center;
	}
	.mbutton {
	background-color:gray;
	height:34px;
	display:inline-block;
	padding:0px 20px 0px 20px;
	line-height:34px;
	font-size:18px;
	cursor:pointer;
	user-select:none;
	margin:0px 5px 0px 5px;
	border-radius:18px;
	margin-top:7px;
	box-shadow:0px 3px 4px rgba(0,0,0,.1);
	border:1px solid rgba(0,0,0,.05);
	}
	iframe {
	position:fixed;
	top:50px;
	left:0px;
	height:calc(100% - 50px);
	width:100%;
	border:0px;
	}
	</style>
	<script>
	var response = [];
	window.onload = function() {
	var iframe = document.getElementsByTagName('iframe')[0];
	var xhr = new XMLHttpRequest();
	xhr.open('GET', './menubar.json', true);
	xhr.responseType = 'json';
	xhr.addEventListener('load', function() {
	var menuBar = document.getElementById('menubar');
	response = xhr.response;
	response.forEach(function(menuItem) {
	menuBar.innerHTML += '<span iframe="'+menuItem[1]+'" class="mbutton">'+menuItem[0]+'</span>';
	});
	var buttons = document.getElementsByClassName('mbutton');
	for(var count = 0; count < buttons.length; count++) {
	buttons[count].onclick = function(e) {
	iframe.src = e.target.attributes.iframe.value;
	};
	}
	iframe.src = response[0][1];
	});
	xhr.send();
	};
	</script>
	</head>
	<body>
	<div id="menubar"></div>
	<iframe src="/"></iframe>
	</body>
	</html>