2018-07-01 11:57:22 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>TP-Link Bulb Web</title>
|
|
|
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
2018-07-03 17:09:18 +00:00
|
|
|
<link rel="stylesheet" href="assets/css/main.css">
|
2018-07-01 11:57:22 +00:00
|
|
|
<script src="assets/js/jquery.min.js"></script>
|
|
|
|
|
<script src="assets/js/bootstrap.min.js"></script>
|
|
|
|
|
<script src="assets/js/main.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body class="text-center col-md-12">
|
|
|
|
|
<h2>TP-Link Bulb Web</h2>
|
|
|
|
|
<div class="col-md-8 col-md-offset-2 container">
|
2018-07-03 17:09:18 +00:00
|
|
|
<div>
|
|
|
|
|
<img class="bulb img-responsive center-block" src="assets/images/lb130-off.jpg">
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
2018-07-01 11:57:22 +00:00
|
|
|
<button class="on btn btn-success">ON</button>
|
|
|
|
|
<button class="off btn btn-warning">OFF</button>
|
2018-07-03 17:09:18 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2018-07-01 11:57:22 +00:00
|
|
|
<span class="text-primary">Brightness:
|
|
|
|
|
<span class="brightness"></span>
|
|
|
|
|
</span>
|
|
|
|
|
<br>
|
|
|
|
|
<span class="text-success">Hue:
|
|
|
|
|
<span class="hue"></span>
|
|
|
|
|
</span>
|
|
|
|
|
<br>
|
|
|
|
|
<span class="text-warning">Saturation:
|
|
|
|
|
<span class="saturation"></span>
|
|
|
|
|
</span>
|
|
|
|
|
<br>
|
|
|
|
|
<span class="text-info">Color Temp:
|
|
|
|
|
<span class="colortemp"></span>
|
|
|
|
|
</span>
|
2018-07-03 17:09:18 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<form class="form-horizontal" id="chsb">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label class="control-label col-md-2 col-md-offset-4" for="brightness">Brightness (0-100)</label>
|
|
|
|
|
<div class="col-md-1">
|
|
|
|
|
<input class="form-control" id="brightness" type="number" min="0" max="100">
|
|
|
|
|
</div>
|
2018-07-01 11:57:22 +00:00
|
|
|
</div>
|
2018-07-03 17:09:18 +00:00
|
|
|
<div class="form-group">
|
|
|
|
|
<label class="control-label col-md-2 col-md-offset-4" for="hue">Hue (0-360)</label>
|
|
|
|
|
<div class="col-md-1">
|
|
|
|
|
<input class="form-control" id="hue" type="number" min="0" max="360">
|
|
|
|
|
</div>
|
2018-07-01 11:57:22 +00:00
|
|
|
</div>
|
2018-07-03 17:09:18 +00:00
|
|
|
<div class="form-group">
|
|
|
|
|
<label class="control-label col-md-2 col-md-offset-4" for="saturation">Saturation (0-100)</label>
|
|
|
|
|
<div class="col-md-1">
|
|
|
|
|
<input class="form-control" id="saturation" type="number" min="0" max="100">
|
|
|
|
|
</div>
|
2018-07-01 11:57:22 +00:00
|
|
|
</div>
|
2018-07-03 17:09:18 +00:00
|
|
|
<div class="form-group">
|
|
|
|
|
<label class="control-label col-md-2 col-md-offset-4" for="colortemp">Color Temp (0-7000)</label>
|
|
|
|
|
<div class="col-md-1">
|
|
|
|
|
<input class="form-control" id="colortemp" type="number" min="0" max="7000">
|
|
|
|
|
</div>
|
2018-07-01 11:57:22 +00:00
|
|
|
</div>
|
2018-07-03 17:09:18 +00:00
|
|
|
<button class="btn btn-primary">Set</button>
|
|
|
|
|
</form>
|
|
|
|
|
<form class="form-horizontal" id="colorform">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label class="control-label col-md-2 col-md-offset-4" for="color">Color Hex</label>
|
|
|
|
|
<div class="col-md-1">
|
|
|
|
|
<input class="form-control" id="color" type="color" value="#FFFFFF">
|
|
|
|
|
</div>
|
2018-07-01 11:57:22 +00:00
|
|
|
</div>
|
2018-07-03 17:09:18 +00:00
|
|
|
<button class="btn btn-success">Set Color</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2018-07-01 11:57:22 +00:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
