hackaton2019

<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			body {
				background: black;
				color: white;
				font-family: Nimbus Sans, helvetica, sans-serif;
				margin: 0;
				font-size: 14pt;
			}
			.header {
				max-width: 1024px;
				margin: 0 auto;
				margin-top: 2em;
				border-bottom: 2px solid gray;
			}
			h1 {
				display: inline;
			}
			h1 > span {
				font-size: 20pt;
				font-weight: bolder;
				color: black;
				background: white;
				padding: 5pt 5pt 0 5pt;
			}
			nav {
				float: right;
				vertical-align: top;
			}
			nav > span {
				display: inline-block;
				font-weight: bold;
				font-size: 12pt;
				padding: 3pt 0 10pt 0;
				margin: 0 15pt 0 15pt;
				border-bottom: 2px solid transparent;
			}
			nav > span:not([disabled]) {
				cursor: pointer;
			}
			nav > span:not([disabled]):hover {
				border-bottom: 2px solid lime;
			}
			nav > span[active] {
				border-bottom: 2px solid #f8651b;
			}
			nav > span[disabled] {
				color: gray;
			}
			.container {
				max-width: 1024px;
				margin: 0 auto;
				margin-top: 2em;
			}
			.status {
				max-width: 300px;
				width: 270px;
				display: inline-block;
				float: left;
			}
			.status > div {
				margin: 0 10px 0 10px;
				margin-bottom: 10pt;
			}
			.status > div > .name {
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.status > div > .progress {
				height: 6px;
				background: #313131;
				margin-bottom: 2px;
			}
			.progress > div {
				width: 28%;		/*will be set by JS*/
				height: 100%;
				background: #f8651b;
			}
			.status > div > .percents {
				text-align: center;
			}
			.status > div > img {
				width: 20px;
				height: 20px;
				background: black;
			}
			.status > div > label {
				font-size: 16pt;
				font-weight: 200;
				color: gray;
				position: relative;
				top: 0;
				left: 0px;
			}
			.status > div > span {
				display: block;
				font-size: 16pt;
				font-weight: bold;
				position: relative;
				left: 25px;
			}
			.status > div > small {
				display: block;
				font-size: 10pt;
				position: relative;
				left: 25px;
			}
			.status > div > small[warming] {
				color: #f8651b;
			}
			.status > div > small[cooling] {
				color: RoyalBlue;
			}
			.content {
				display: inline-block;
				max-width: 724px;
				width: 100%;
				margin-bottom: 20pt;
			}
			.content:not([active]){
				display: none;
			}
			h2 {
				color: #f8651b;
				font-size: 14pt;
				border-bottom: 1px solid gray;
			}
			h2 > label {
				color: gray;
			}
			.filename {
				font-size: 18pt;
				font-weight: bold;
			}
			.content > .progress {
				height: 18px;
				background: #313131;
				margin: 10px 0 10px 0;
			}
			.content > .percents {
				text-align: center;
				font-size: 18pt;
				font-weight: bold;
			}
			.row.label {
				color: gray;
				padding-top: 20pt;
				clear: both;
			}
			.row.label > div,
			.row.values > div {
				width: 33%;
				float: left;
			}

		</style>
	</head>
	<body>
		<div class="header">
			<h1><span>PRUSA</span> <span>CONNECT</span></h1>
			<nav>
				<span target="status" active="active">Status</span>
				<span target="projects" disabled="disabled">Projects</span>
				<span target="control" disabled="disabled">Control</span>
				<span target="temperatures">Temperatures</span>
				<span target="camera" disabled="disabled">Camera</span>
				<span target="gcode" disabled="disabled">G-codel</span>
				<span target="acount" disabled="disabled">Acount</span>
			</nav>
			<div style="clear: both;"></div>
		</div>

		<div class=container>
			<div class="content" name="status" active="active">
				<h2>Boženka <label>printer status</label></h2>
				<div class="filename">Eiffel_Tower_0.2mm_PETG_MK3S_2h31m.gcode</div>
				<div class="progress"><div></div></div>
				<div class="percents">28%</div>

				<div class="row label">
					<div>remaining time</div>
					<div>estimated end</div>
					<div>printing time</div>
				</div>
				<div class="row values">
					<div>2h 30min</div>
					<div>15:58</div>
					<div>23 min</div>
				</div>

				<div class="row label">
					<div>layer</div>
					<div>required filament</div>
					<div>consumed filament</div>
				</div>
				<div class="row values">
					<div>3156/10560</div>
					<div>31.2m/86.5g</div>
					<div>14.2m/42.4g</div>
				</div>

			</div>

			<div class="content" name="projects">
				<h2>Not implemented yet.</h2>
				<p>Lorem control ipsum</p>
			</div>

			<div class="content" name="conrol">
				<h2>Not implemented yet.</h2>
				<p>Lorem control ipsum</p>
			</div>

			<div class="content" name="temperatures">
				<p>Lorem temperatures ipsum</p>
			</div>

			<div class="content" name="camera">
				<h2>Not implemented yet.</h2>
				<p>Lorem control ipsum</p>
			</div>

			<div class="content" name="gcode">
				<h2>Not implemented yet.</h2>
				<p>Lorem control ipsum</p>
			</div>

			<div class="content" name="acount">
				<p>Lorem active ipsum</p>
			</div>

			<div class="status">
				<div>
					<div class=name>Eiffel_Tower_0.2mm_PETG_MK3S_2h31m.gcode</div>
					<div class="progress"><div></div></div>
					<div class="percents">28%</div>
				</div>

				<div>
					<img>
					<label>Nozzle Temperature</label>
					<span>211/215°C</span>
					<small warming="warming">warning up ...</small>
				</div>

				<div>
					<img>
					<label>Heatbed</label>
					<span>62/60°C</span>
					<small cooling="cooling">cooling down ...</small>
				</div>

				<div>
					<img>
					<label>Printing Speed</label>
					<span>100%</span>
				</div>

				<div>
					<img>
					<label>Printing Flow</label>
					<span>100%</span>
				</div>

				<div>
					<img>
					<label>Z-Height</label>
					<span>23.15 mm</span>
				</div>

				<div>
					<img>
					<label>Material</label>
					<span>PLA</span>
				</div>
			</div>

		</div>

		<script type="text/javascript">
			function nav_click(event){
				document.querySelector(".content[active]").removeAttribute("active");
				document.querySelector("nav>span[active]").removeAttribute("active");

				let name = this.getAttribute("target");
				document.querySelector(".content[name="+name+"]")
						.setAttribute("active", "active");
				this.setAttribute("active", "active")
			}
			document.querySelectorAll("nav>span:not([disabled])").forEach(function(elm){
				elm.addEventListener("click", nav_click);
			});
		</script>
	</body>
</html>