<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <h2>CBOR converter</h2>
    <div class="container">
      <div class="input">
        <h3>Input</h3>
        <div class="cmd">
          <select id="input-fmt">
            <option>JSON</option>
            <option>hex</option>
            <option>base64</option>
          </select>
          <span id="to">&rarr;&rarr;&rarr; to &rarr;&rarr;&rarr;</span>
        </div>
        <textarea id="input-text" rows="30" cols="50" autofocus>{
  "type": "here"
}</textarea>
      </div>
      <div class="output">
        <h3>Output</h3>
        <div class="cmd">
          <select id="output-fmt">
            <option>commented</option>
            <option>diagnostic</option>
            <option>hex</option>
            <option>base64</option>
            <option>js</option>
            <option>JSON</option>
          </select>
          <button id="copy">Copy to input</button>
        </div>
        <textarea id="output-text" rows="30" cols="50" readonly></textarea>
      </div>
    </div>
  <div class="power">
    Powered by <a href="https://github.com/hildjj/node-cbor/">node-cbor</a>.
    <a href="https://github.com/hildjj/node-cbor/tree/main/packages/webpack-demo">Source</a>
  </div>
</body>
</html>
