<!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">&nbsp;</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-default btn-color" style="background: #FF8000;" title="Orange">&nbsp;</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-default btn-color" style="background: #FFFF00;" title="Yellow">&nbsp;</button>
            </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-color" style="background: #80FF00;" title="Chartreuse">&nbsp;</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-color" style="background: #00FF00;" title="Green">&nbsp;</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-color" style="background: #00FF80;" title="Spring Green">&nbsp;</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-color" style="background: #00FFFF;" title="Cyan">&nbsp;</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-color" style="background: #0080FF;" title="Azure">&nbsp;</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-color" style="background: #0000FF;" title="Blue">&nbsp;</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-color" style="background: #8000FF;" title="Violet">&nbsp;</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-color" style="background: #FF00FF;" title="Magenta">&nbsp;</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-color" style="background: #FF0080;" title="Rose">&nbsp;</button>
              </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <script src="js/scripts.js"></script>
</body>

</html>