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

99 lines
3.5 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;">
<div class="gauge gauge--liveupdate" id="gauge" style="float:left;">
<span >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 >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 >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>