sandbox/index.html

<!doctype html>
<html lang="en_US">
  <head>
    <meta charset="UTF-8" />
    <title>Diesel JSON Editor</title>
    <link rel="icon" href="./favicon.ico" />
    <%= htmlWebpackPlugin.tags.headTags %>
  </head>
  <body>
    <div id="sandbox">
      <div class="banner">
        <h1>JSON Editor</h1>
        <div>
          <label for="debounceMs">Debounce (ms) </label>
          <input type="text" id="debounceMs" value="500" style="width: 50px" />
        </div>
        <div>
          <input type="checkbox" id="syncPanes" checked />
          <label for="syncPanes"> Sync text and form </label>
        </div>
        <div>
          <input type="checkbox" id="strictMode" />
          <label for="strictMode"> Strict mode </label>
        </div>
        <div id="about"></div>
      </div>
      <div class="main">
        <div class="sub schema">
          <div class="sub-head">
            <h3>Schema</h3>
            <div class="schema-select">
              <label for="sampleSchemaSelect"> Sample Schema </label>
              <select id="sampleSchemaSelect"></select>
            </div>
          </div>
          <div class="editor-wrapper">
            <div id="editor1"></div>
          </div>
        </div>
        <div class="spacer"></div>
        <div class="sub value">
          <div class="sub-head">
            <h3>JSON</h3>
          </div>
          <div class="editor-wrapper">
            <div id="editor2"></div>
          </div>
        </div>
        <div class="spacer"></div>
        <div class="sub form">
          <div class="sub-head">
            <h3>FORM</h3>
          </div>
          <div id="json-form"></div>
        </div>
      </div>
      <footer class="sandbox">
        <div class="spacer"></div>
        <div class="powered-by">Powered by</div>
        <a class="gas-station" href="https://github.com/IBM/diesel">
          <svg
            id="icon"
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 32 32"
          >
            <defs>
              <style>
                .cls-1 {
                  fill: #ffffff;
                }

                .cls-2 {
                  fill: none;
                }
              </style>
            </defs>
            <title>gas-station</title>
            <rect class="cls-1" x="8" y="10" width="7" height="2" />
            <path
              class="cls-1"
              d="M28.4142,8l-5-5L22,4.4141l3,3V12a2.0023,2.0023,0,0,0,2,2V24.5a1.5,1.5,0,0,1-3,0V16a1,1,0,0,0-1-1H19V5a1,1,0,0,0-1-1H5A1,1,0,0,0,4,5V26H2v2H21V26H19V17h3v7.4a3.5644,3.5644,0,0,0,2.7654,3.5251A3.5062,3.5062,0,0,0,29,24.5V9.4144A2,2,0,0,0,28.4142,8ZM17,26H6V6H17Z"
            />
            <rect
              id="_Transparent_Rectangle_"
              data-name="&lt;Transparent Rectangle&gt;"
              class="cls-2"
              width="32"
              height="32"
            />
          </svg>
          Diesel
        </a>
      </footer>
    </div>
    <%= htmlWebpackPlugin.tags.bodyTags %>
  </body>
</html>