<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web I2C Flasher</title>
    <style>
      html {
        background-color: #f0f0f0;
      }
      body {
        padding: 0;
        margin: 0;
      }
      header {
        padding: 1rem;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      }
      #document {
        margin: 40px auto;
        max-width: 750px;
      }
      button {
        display: inline-block;
        border: 0;
        background-color: #f8f8f8;
        color: #333;
        border: 1px solid #dedede;
        padding: 0.2rem 0.8rem 0.2rem 0.8rem;
        font-family: Verdana, Sans-Serif;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        outline: 0;
      }
      button + button {
        margin-left: 0.5rem;
      }
      button:hover {
        background-color: #fefefe;
      }
      button:active {
        background-color: #f0f0f0;
      }
      button:disabled {
        color: #888;
      }
      button:disabled:hover {
        background-color: #f8f8f8;
        border: 1px solid #dedede;
      }
      button.btn-red {
        padding: 0.4rem 1rem 0.4rem 1rem;
        background-color: #ff4949;
        color: #fff;
        border: 1px solid #8a1c05;
      }
      button.btn-red:hover {
        background-color: #ff5959;
        border: 1px solid #8a1c05;
      }
      button.btn-red:active {
        background-color: #ff3939;
        border: 1px solid #8a1c05;
      }
      h1,h2,h3 {
        font-family: Helvetica, Sans-Serif;
        margin: 0;
        color: #111;
      }
      h1 {
        font-size: 1.5rem;
        color: #333;
      }
      h2 {
        margin-bottom: 0.3rem;
        font-size: 1.2rem;
      }
      h3 {
        font-size: 0.8rem;
        margin: 0.3rem;
      }
      #programmers {
      }
      .programmer {
        width: 100%;
        margin-top: 1rem;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      }
      .programmerName {
        font-family: Verdana, sans-serif;
        font-size: 0.9rem;
        padding: 1rem;
        border-bottom: 1px solid #ddd;
        background-color: #fff;
      }
      .programmerOptions {
        float: right;
      }
      .devices {
        padding: 2rem;
      }
      .device {
        clear: both;
        background-color: #fafafa;
        padding: 1rem;
        border: 1px solid #eee;
      }
      .device + .device {
        margin-top: 1rem;
      }
      .deviceName {
        font-family: Verdana, sans-serif;
      }
      .deviceOptions {
        float: right;
      }
      .deviceDump {
        color: #fff;
        background-color: #1c1c1c;
        display: block;
        clear: both;
        padding: 1rem;
        font-family: monospace;
        margin-top: 1rem;
        border-radius: 0.3rem;
      }
    </style>
  </head>
<body>
  <header>
    <h1>Web I2C Flash</h1>
  </header>
  <div id="document">
    <button id="connect" class="btn-red">Add...</button>
    <div id="programmers">
    </div>
  </div>
  <script src="main.js" type="module"></script>
</body>
</html>