summaryrefslogtreecommitdiffstats
path: root/ext/wasm/fiddle/index.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-05 17:28:19 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-05 17:28:19 +0000
commit18657a960e125336f704ea058e25c27bd3900dcb (patch)
tree17b438b680ed45a996d7b59951e6aa34023783f2 /ext/wasm/fiddle/index.html
parentInitial commit. (diff)
downloadsqlite3-upstream.tar.xz
sqlite3-upstream.zip
Adding upstream version 3.40.1.upstream/3.40.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r--ext/wasm/fiddle/index.html278
1 files changed, 278 insertions, 0 deletions
diff --git a/ext/wasm/fiddle/index.html b/ext/wasm/fiddle/index.html
new file mode 100644
index 0000000..272f1ac
--- /dev/null
+++ b/ext/wasm/fiddle/index.html
@@ -0,0 +1,278 @@
+<!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>
+ <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
+ <!-- to add a togglable terminal-style view, uncomment the following
+ two lines and ensure that these files are on the web server. -->
+ <!--script src="jqterm/jqterm-bundle.min.js"></script>
+ <link rel="stylesheet" href="jqterm/jquery.terminal.min.css"/-->
+ <link rel="stylesheet" href="emscripten.css"/>
+ <style>
+ /* The following styles are for app-level use. */
+ :root {
+ --sqlite-blue: #044a64;
+ --textarea-color1: #044a64;
+ --textarea-color2: white;
+ }
+ textarea {
+ font-family: monospace;
+ flex: 1 1 auto;
+ background-color: var(--textarea-color1);
+ color: var(--textarea-color2);
+ }
+ textarea#input {
+ color: var(--textarea-color1);
+ background-color: var(--textarea-color2);
+ }
+ header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: var(--sqlite-blue);
+ color: white;
+ font-size: 120%;
+ font-weight: bold;
+ border-radius: 0.25em;
+ padding: 0.2em 0.5em;
+ }
+ header > .powered-by {
+ font-size: 80%;
+ }
+ header a, header a:visited, header a:hover {
+ color: inherit;
+ }
+ #main-wrapper {
+ display: flex;
+ flex-direction: column-reverse;
+ flex: 1 1 auto;
+ margin: 0.5em 0;
+ overflow: hidden;
+ }
+ #main-wrapper.side-by-side {
+ flex-direction: row;
+ }
+ #main-wrapper.side-by-side > fieldset {
+ margin-left: 0.25em;
+ margin-right: 0.25em;
+ }
+ #main-wrapper:not(.side-by-side) > fieldset {
+ margin-bottom: 0.25em;
+ }
+ #main-wrapper.swapio {
+ flex-direction: column;
+ }
+ #main-wrapper.side-by-side.swapio {
+ flex-direction: row-reverse;
+ }
+ .zone-wrapper{
+ display: flex;
+ margin: 0;
+ flex: 1 1 0%;
+ border-radius: 0.5em;
+ min-width: inherit/*important: resolves inability to scroll fieldset child element!*/;
+ padding: 0.35em 0 0 0;
+ }
+ .zone-wrapper textarea {
+ border-radius: 0.5em;
+ flex: 1 1 auto;
+ /*min/max width resolve an inexplicable margin on the RHS. The -1em
+ is for the padding, else we overlap the parent boundaries.*/
+ /*min-width: calc(100% - 1em);
+ max-width: calc(100% - 1em);
+ padding: 0 0.5em;*/
+ }
+
+ .zone-wrapper.input { flex: 10 1 auto; }
+ .zone-wrapper.output { flex: 20 1 auto; }
+ .zone-wrapper > div {
+ display:flex;
+ flex: 1 1 0%;
+ }
+ .zone-wrapper.output {}
+ .button-bar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ align-content: space-between;
+ justify-content: flex-start;
+ }
+ .button-bar > * {
+ margin: 0.05em 0.5em 0.05em 0;
+ flex: 0 1 auto;
+ align-self: auto;
+ }
+ label[for] {
+ cursor: pointer;
+ }
+ .error {
+ color: red;
+ background-color: yellow;
+ }
+ .hidden, .initially-hidden {
+ position: absolute !important;
+ opacity: 0 !important;
+ pointer-events: none !important;
+ display: none !important;
+ }
+ fieldset {
+ border-radius: 0.5em;
+ border: 1px inset;
+ padding: 0.25em;
+ }
+ fieldset.options {
+ font-size: 80%;
+ margin-top: 0.5em;
+ }
+ fieldset:not(.options) > legend {
+ font-size: 80%;
+ }
+ fieldset.options > div {
+ display: flex;
+ flex-wrap: wrap;
+ }
+ fieldset button {
+ font-size: inherit;
+ }
+ fieldset.collapsible > legend > .fieldset-toggle::after {
+ content: " [hide]";
+ position: relative;
+ }
+ fieldset.collapsible.collapsed > legend > .fieldset-toggle::after {
+ content: " [show]";
+ position: relative;
+ }
+ span.labeled-input {
+ padding: 0.25em;
+ margin: 0.05em 0.25em;
+ border-radius: 0.25em;
+ white-space: nowrap;
+ background: #0002;
+ display: flex;
+ align-items: center;
+ }
+ span.labeled-input > *:nth-child(2) {
+ margin-left: 0.3em;
+ }
+ .center { text-align: center; }
+ body.terminal-mode {
+ max-height: calc(100% - 2em);
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ }
+ #view-terminal {}
+ .app-view {
+ flex: 20 1 auto;
+ }
+ #view-split {
+ display: flex;
+ flex-direction: column-reverse;
+ }
+ </style>
+ </head>
+ <body>
+ <header id='titlebar'>
+ <span>SQLite3 Fiddle</span>
+ <span class='powered-by'>Powered by
+ <a href='https://sqlite.org'>SQLite3</a></span>
+ </header>
+ <!-- emscripten bits -->
+ <figure id="module-spinner">
+ <div class="spinner"></div>
+ <div class='center'><strong>Initializing app...</strong></div>
+ <div class='center'>
+ On a slow internet connection this may take a moment. If this
+ message displays for "a long time", intialization may have
+ failed and the JavaScript console may contain clues as to why.
+ </div>
+ </figure>
+ <div class="emscripten" id="module-status">Downloading...</div>
+ <div class="emscripten">
+ <progress value="0" max="100" id="module-progress" hidden='1'></progress>
+ </div><!-- /emscripten bits -->
+
+ <div id='view-terminal' class='app-view hidden initially-hidden'>
+ This is a placeholder for a terminal-like view which is not in
+ the default build.
+ </div>
+
+ <div id='view-split' class='app-view initially-hidden'>
+ <fieldset class='options collapsible'>
+ <legend><button class='fieldset-toggle'>Options</button></legend>
+ <div class=''>
+ <span class='labeled-input'>
+ <input type='checkbox' id='opt-cb-sbs'
+ data-csstgt='#main-wrapper'
+ data-cssclass='side-by-side'
+ data-config='sideBySide'>
+ <label for='opt-cb-sbs'>Side-by-side</label>
+ </span>
+ <span class='labeled-input'>
+ <input type='checkbox' id='opt-cb-swapio'
+ data-csstgt='#main-wrapper'
+ data-cssclass='swapio'
+ data-config='swapInOut'>
+ <label for='opt-cb-swapio'>Swap in/out</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>
+ <span class='labeled-input'>
+ <input type='file' id='load-db' class='hidden'/>
+ <button id='btn-load-db'>Load DB...</button>
+ </span>
+ <span class='labeled-input'>
+ <button id='btn-export'>Download DB</button>
+ </span>
+ <span class='labeled-input'>
+ <button id='btn-reset'>Reset DB</button>
+ </span>
+ </div>
+ </fieldset><!-- .options -->
+ <div id='main-wrapper' class=''>
+ <fieldset class='zone-wrapper input'>
+ <legend><div class='button-bar'>
+ <button id='btn-shell-exec'>Run</button>
+ <button id='btn-clear'>Clear Input</button>
+ <!--button data-cmd='.help'>Help</button-->
+ <select id='select-examples'></select>
+ </div></legend>
+ <div><textarea id="input"
+ placeholder="Shell input. Ctrl-enter/shift-enter runs it.">
+-- ==================================================
+-- Use ctrl-enter or shift-enter to execute sqlite3
+-- shell commands and SQL.
+-- If a subset of the text is currently selected,
+-- only that part is executed.
+-- ==================================================
+.nullvalue NULL
+.headers on
+</textarea></div>
+ </fieldset>
+ <fieldset class='zone-wrapper output'>
+ <legend><div class='button-bar'>
+ <button id='btn-clear-output'>Clear Output</button>
+ <button id='btn-interrupt' class='hidden' disabled>Interrupt</button>
+ <!-- interruption cannot work in the current configuration
+ because we cannot send an interrupt message when work
+ is currently underway. At that point the Worker is
+ tied up and will not receive the message. -->
+ </div></legend>
+ <div><textarea id="output" readonly
+ placeholder="Shell output."></textarea></div>
+ </fieldset>
+ </div>
+ </div> <!-- #view-split -->
+ <script src="fiddle.js"></script>
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-29 02:38:07 +0000