<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='x-ua-compatible' content='ie=edge'>
        <title>Material Design Gauge</title>
        <meta name='description'
              content='Simple Material Design gauge control implemented in pure CSS/HTML'>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel='stylesheet' type='text/css' href='material-gauge.css'>
		<style>

			body {
        background-color: #1d211e;
				color: #cae0d0;
				font-family: Roboto, Helvetica, Arial, sans-serif;
				font-size: 24px;
				font-weight: normal;
				height: 32px;
				letter-spacing: normal;
				line-height: 32px;
				padding-top: 100px;
			}
      .center {
        width: 60%; min-width: 420px; 
        margin: auto;
      } 

		</style>
    </head>
    <body>
      <div class='center'>
        <div style='overflow: hidden; display: flex; justify-content: center;'>
          <div class='gauge gauge--liveupdate' id='gauge' style='float:left;'>
              <span class='gaugeLabel'>Humidity</span>
              <div class='gauge__container'>
                
                <!-- <div class='gauge__marker'></div> -->
                <div class='gauge__background'></div>
                <div class='gauge__center'></div>
                <div class='gauge__data'></div>
                <!-- <div class='gauge__needle'></div> -->
              </div>
              <div class='gauge__labels mdl-typography__headline'>
                  <span class='gauge__label--low'></span>
                  <span class='gauge__label--spacer'></span>
                  <span class='gauge__label--high'></span>
              </div>
          </div>
          
          <div class='gauge gauge--liveupdate' id='gauge2' style='float:left;'>
              <span class='gaugeLabel'>Moisture</span>
              <div class='gauge__container'>
                <!-- <div class='gauge__marker'></div> -->
                <div class='gauge__background'></div>
                <div class='gauge__center'></div>
                <div class='gauge__data'></div>
                <div class='gauge__needle'></div>
              </div>
              <div class='gauge__labels mdl-typography__headline'>
                  <span class='gauge__label--low'></span>
                  <span class='gauge__label--spacer'></span>
                  <span class='gauge__label--high'></span>
              </div>
          </div>
          
          <div class='gauge gauge--liveupdate' id='gauge3' style='float:left;'>
              <span class='gaugeLabel'>Temperature</span>
              <div class='gauge__container'>
                <!-- <div class='gauge__marker'></div> -->
                <div class='gauge__background'></div>
                <div class='gauge__center'></div>
                <div class='gauge__data'></div>
                <div class='gauge__needle'></div>
              </div>
              <div class='gauge__labels mdl-typography__headline'>
                  <span class='gauge__label--low'></span>
                  <span class='gauge__label--spacer'></span></span>
                  <span class='gauge__label--high'></span>
              </div>
          </div>
        </div>
      </div>
        <script src='material-gauge.js'></script>
		<script>

			var gauge = new Gauge(document.getElementById('gauge'));
      var gauge2 = new Gauge(document.getElementById('gauge2'));
      var gauge3 = new Gauge(document.getElementById('gauge3'));
      
			//gauge.value(75);
      //gauge2.value(50);
      gauge.value(25);
      gauge2.value(50);
      gauge3.value(33, 42, '°C');
      
		</script>
	</body>
</html>