<div class="header"> <h1>LED configuration</h1> </div> <div class="content"> <div class="pure-g"><div class="pure-u-1 pure-u-md-1-2"> <div class="card"> <h1>Control</h1> <button id="btn_on" type="button">Turn on</button> <button id="btn_blink" type="button">Start blinking</button> <button id="btn_off" type="button">Turn off</button> <p id="text"/> </div> <div class="card"> <h1>Frequency and pattern</h1> <form> <b>Pattern:</b><br/> <input type="radio" name="pattern" value="25_75">25% on 75% off</input><br/> <input type="radio" name="pattern" value="50_50">50% on 50% off</input><br/> <input type="radio" name="pattern" value="75_25">75% on 25% off</input><br/> <b>Frequency:</b><br/> <input type="range" name="frequency" min="1" max="25"><br/> <input type="submit"> </form> </div></div> <div class="pure-u-1 pure-u-md-1-2"> <div class="card" style="min-height: 400px"> <h1>Logs</h1> <ul id="led_history"/> </div> </div></div> </div> </body></html>