sqlite/ext/fiddle/fiddle.in.html

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>sqlite3 fiddle</title>
    <style>
      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
      textarea {
          font-family: monospace;
          flex: 1 1 auto;
      }
      div.emscripten { text-align: center; }
      div.emscripten_border { border: 1px solid black; }
      .spinner {
        height: 50px;
        width: 50px;
        margin: 0px auto;
        animation: rotation 0.8s linear infinite;
        border-left: 10px solid rgb(0,150,240);
        border-right: 10px solid rgb(0,150,240);
        border-bottom: 10px solid rgb(0,150,240);
        border-top: 10px solid rgb(100,0,200);
        border-radius: 100%;
        background-color: rgb(200,100,250);
      }
      @keyframes rotation {
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
      }
      header {
          font-size: 130%;
          font-weight: bold;
      }
      
      #main-wrapper {
          display: flex;
          flex-direction: column;
      }
      #main-wrapper.side-by-side {
          flex-direction: row;
      }
      .ta-wrapper{
          display: flex;
          flex-direction: column;
          align-items: stretch;
          flex: 1 1 auto;
          margin: 0.25em;
      }
      .ta-wrapper textarea {
          font-size: 110%;
          filter: invert(100%);
      }
      .button-bar {
          display: flex;
          justify-content: center;
      }
      .button-bar button {
          margin: 0.25em 1em;
      }
      label[for] {
          cursor: pointer;
      }
      fieldset {
          border-radius: 0.5em;
      }
      .error {
          color: red;
          background-color: yellow;
      }
      .hidden {
          position: absolute !important;
          opacity: 0 !important;
          pointer-events: none !important;
          display: none !important;
      }
      fieldset.options {
          font-size: 75%;
      }
      fieldset > legend {
          padding: 0 0.5em;
      }
      span.labeled-input {
          padding: 0.25em;
          margin: 0.25em 0.5em;
          border: 1px inset;
          border-radius: 0.25em;
          white-space: nowrap;
      }
      #notes-caveats {
          border-top: 1px dotted;
          padding-top: 0.25em;
          margin-top: 0.5em;
      }
    </style>
  </head>
  <body>
    <header>sqlite3 fiddle</header>
    <figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure>
    <div class="emscripten" id="status">Downloading...</div>
    <div class="emscripten">
      <progress value="0" max="100" id="progress" hidden='1'></progress>  
    </div>
    <fieldset class='options'>
      <legend>Options</legend>
      <div class=''>
        <span class='labeled-input'>
          <input type='checkbox' id='opt-cb-sbs'>
          <label for='opt-cb-sbs'>Side-by-side</label>
        </span>
        <span class='labeled-input'>
          <input type='checkbox' id='opt-cb-autoscroll'
                 data-config='autoScrollOutput'>
          <label for='opt-cb-autoscroll'>Auto-scroll output</label>
        </span>
        <span class='labeled-input'>
          <input type='checkbox' id='opt-cb-autoclear'
                 data-config='autoClearOutput'>
          <label for='opt-cb-autoclear'>Auto-clear output</label>
        </span>
      </div>
    </fieldset>
    <div id='main-wrapper'>
      <div class='ta-wrapper'>
        <textarea id="input" rows="8"
                  placeholder="Shell input. Ctrl-enter/shift-enter runs it.">
-- Use ctrl-enter or shift-enter to execute SQL
.nullvalue NULL
.mode box
CREATE TABLE t(a,b);
INSERT INTO t(a,b) VALUES('abc',123),('def',456),(NULL,789),('ghi',012);
SELECT * FROM t;</textarea>        
        <div class='button-bar'>
          <button id='btn-run' disabled>Run</button>
          <button id='btn-clear' disabled>Clear</button>
          <button data-cmd='.help' disabled>Help</button>
        </div>
      </div>
      <div class='ta-wrapper'>
        <textarea id="output" rows="18" readonly
                  placeholder="Shell output."></textarea>
        <div class='button-bar'>
          <button id='btn-clear-output' disabled>Clear</button>
        </div>
      </div>
    </div>
    <div id='notes-caveats'>
      <header>
        Notes and Caveats
        <button id='btn-notes-caveats'>Remove</button>
      </header>
      <p>
        This JavaScript application runs a C application which has been
        compiled into WASM (Web Assembly). As such, it has certain
        limitations. Those include, but are not limited to:
      </p>
      <ul>
        <li>It <strong>cannot recover after a call to
            <code>exit()</code></strong>. If the native code triggers
          an exit, reloading the page is the only way to restart
          the application. (Making the app restartable without reloading
          the page would require significant surgery in the C code.)
        </li>
        <li>It <strong>cannot perform any file I/O</strong>, and running
          any command which attempts to do so might trigger an
          <code>exit()</code>.
        </li>
        <li>A number of dot-commands available in the CLI shell are
            explicitly removed from this version of the shell.
        </li>
      </ul>
    </div><!-- #notes-caveats -->
    <!-- Maintenance notes:

        - emscripten module init goes is in fiddle-pre.js and gets
          prepended to the generated script code.

        - App-specific code is in fiddle-post.js and gets appended to
          the generated script code.

        - The following placeholder (if you're reading this in the
          input template file) gets replaced by a generated
          amalgamation of: module-pre.js, emcc-generated bootstrapping
          code, and module-post.js.

    -->
    {{{ SCRIPT }}}
  </body>
</html>