tarka
/
weather-station


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Weather Station</title>
	<style>
		div.graph-container {
			text-align: center;
		}

		h2, #last-update {
			text-align: center;
			font-family: sans, 'sans-serif';
		}

		#time-series-graphs canvas {
			max-width: 800px;
			max-height: 300px;
			display: inline-block !important;
		}


		#gauges {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;

			width: 100%;
		}


		#gauges > div {
			flex-grow: 1;
			flex-shrink: 1;
			flex-basis: 2cm;
			max-width: 5cm;
		}

		/* The unfilled part of a dial */
		#gauges .gauge > .dial {
			stroke-width: 3px;
		}

		/* The filled part of a dial */
		#gauges .gauge > .value {
			stroke-width: 7px;
		}

		@media only screen and (max-width: 500px) {
			#gauges > div.temperature {
				min-width: 80%;
				flex-grow: 2;
				flex-shrink: 0;
			}

			#gauges > div:not(.temperature) {
				min-width: 30%;
			}
		}
	</style>
</head>
<body>
	<div id="gauges"></div>
	<div id="last-update">
		<strong>Latest reading:</strong>
		<span id="last-update-value"></span>
	</div>
	<div id="time-series-graphs"></div>

	<div id="hour-selector">
		<label>
			Hours to show:
			<select id="hours-ago"></select>
		</label>
	</div>

	<!--suppress HtmlUnknownTarget -->
	<script src="js/main.js" async></script>
</body>
</html>