<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ESP8266 + FastLED</title> <link rel="stylesheet" href="css/styles.css"> <link rel="icon" href="images/atom196.png"> </head> <body> <header class="navbar navbar-default navbar-static-top" id="top" role="banner"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">ESP8266 + FastLED</a> </div> </div> </header> <div class="container"> <form class="form-horizontal"> <div class="form-group"> <div class="col-sm-1 col-sm-offset-2"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-refresh" id="btnRefresh"></span> </button> </div> <div class="col-sm-4"> <p id="status" class="form-control-static">Status</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Power</label> <div class="col-sm-6"> <div class="btn-group" role="group" aria-label="Power"> <button type="button" class="btn btn-default" id="btnPowerOn">On</button> <button type="button" class="btn btn-default" id="btnPowerOff">Off</button> </div> </div> </div> <div class="form-group"> <label for="inputBrightness" class="col-sm-2 control-label">Brightness</label> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon" id="spanBrightness">128</span> <input class="form-control" id="inputBrightness" type="range" step="1" min="0" max="255" /> </div> </div> </div> <div class="form-group"> <label for="inputPattern" class="col-sm-2 control-label">Pattern</label> <div class="col-sm-6"> <select class="form-control" id="inputPattern"> <option>Rainbow</option> <option>Sinelon</option> <option>Juggle</option> </select> </div> </div> <div class="form-group"> <label for="inputColor" class="col-sm-2 control-label">Color</label> <div class="col-sm-6"> <input id="inputColor" type="text" class="form-control"> </div> </div> <div class="form-group"> <div class="col-sm-6 col-sm-offset-2"> <div class="btn-group btn-group-justified" role="group"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #FF0000;" title="Red"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #FF8000;" title="Orange"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #FFFF00;" title="Yellow"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #80FF00;" title="Chartreuse"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #00FF00;" title="Green"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #00FF80;" title="Spring Green"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #00FFFF;" title="Cyan"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #0080FF;" title="Azure"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #0000FF;" title="Blue"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #8000FF;" title="Violet"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #FF00FF;" title="Magenta"> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-color" style="background: #FF0080;" title="Rose"> </button> </div> </div> </div> </div> </form> </div> <script src="js/scripts.js"></script> </body> </html>