hackaton2019

<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="index.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="header">
			<h1><img src="connect_black.svg"></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>PRUSA MINI <label>printer status</label></h2>
				<div class="filename"></div>
				<div class="progress"><div></div></div>
				<div class="percents"></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 type="file">
					<div class="filename"></div>
					<div class="progress"><div></div></div>
					<div class="percents"></div>
				</div>

				<div type="nozzle">
					<img src="status_nozzle.svg">
					<label>Nozzle Temperature</label>
					<span>0/0°C</span>
					<div>
						<small warming="warming" style="visibility: hidden;">warning up ...</small>
						<small cooling="cooling" style="visibility: hidden;">cooling down ...</small>
					</div>
				</div>

				<div type="bed">
					<img src="status_heatbed.svg">
					<label>Heatbed</label>
					<span>0/0°C</span>
					<div>
						<small warming="warming" style="visibility: hidden;">warning up ...</small>
						<small cooling="cooling" style="visibility: hidden;">cooling down ...</small>
					</div>
				</div>

				<div>
					<img src="status_prnspeed.svg">
					<label>Printing Speed</label>
					<span>100%</span>
				</div>

				<div>
					<img src="status_prnflow.svg">
					<label>Printing Flow</label>
					<span>100%</span>
				</div>

				<div>
					<img src="status_z_axis.svg">
					<label>Z-Height</label>
					<span>23.15 mm</span>
				</div>

				<div>
					<img src="status_filament.svg">
					<label>Material</label>
					<span>PLA</span>
				</div>
			</div>

		</div>

	  <script src="index.js"></script>
	</body>
</html>