CanGrow/playground/html/material-gauge-gh-pages/index.html

99 lines
3.6 KiB
HTML

<!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>