| <!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> |