2022-05-18 20:14:24 +03:00
|
|
|
<!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>
|
2022-05-19 18:58:13 +03:00
|
|
|
<!-- script src="jqterm/jqterm-bundle.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="jqterm/jquery.terminal.min.css"/ -->
|
2022-05-18 20:14:24 +03:00
|
|
|
<style>
|
2022-05-19 13:24:50 +03:00
|
|
|
/* emcscript-related styling, used during the intialization phase... */
|
2022-05-18 20:14:24 +03:00
|
|
|
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
|
|
|
|
div.emscripten { text-align: center; }
|
|
|
|
|
div.emscripten_border { border: 1px solid black; }
|
2022-05-19 13:24:50 +03:00
|
|
|
#spinner { overflow: visible; }
|
|
|
|
|
#spinner > * {
|
|
|
|
|
margin-top: 1em;
|
|
|
|
|
}
|
2022-05-18 20:14:24 +03:00
|
|
|
.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);}
|
|
|
|
|
}
|
2022-05-19 13:24:50 +03:00
|
|
|
|
|
|
|
|
/* The following styles are for app-level use. */
|
|
|
|
|
|
|
|
|
|
textarea {
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
}
|
2022-05-19 04:12:23 +03:00
|
|
|
header {
|
2022-05-18 20:14:24 +03:00
|
|
|
font-size: 130%;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
#main-wrapper {
|
|
|
|
|
display: flex;
|
2022-05-19 18:58:13 +03:00
|
|
|
flex-direction: column-reverse;
|
|
|
|
|
flex: 20 1 auto;
|
2022-05-18 20:14:24 +03:00
|
|
|
}
|
|
|
|
|
#main-wrapper.side-by-side {
|
2022-05-19 18:58:13 +03:00
|
|
|
flex-direction: row-reverse;
|
2022-05-18 20:14:24 +03:00
|
|
|
}
|
2022-05-19 19:11:35 +03:00
|
|
|
#main-wrapper.swapio {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
#main-wrapper.side-by-side.swapio {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
2022-05-18 20:14:24 +03:00
|
|
|
.ta-wrapper{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: stretch;
|
2022-05-19 18:58:13 +03:00
|
|
|
margin: 0 0.25em;
|
2022-05-18 20:14:24 +03:00
|
|
|
flex: 1 1 auto;
|
|
|
|
|
}
|
2022-05-19 18:58:13 +03:00
|
|
|
.ta-wrapper.input { flex: 10 1 auto; }
|
|
|
|
|
.ta-wrapper.output { flex: 20 1 auto; }
|
2022-05-19 12:22:16 +03:00
|
|
|
.ta-wrapper textarea {
|
|
|
|
|
font-size: 110%;
|
|
|
|
|
filter: invert(100%);
|
2022-05-19 18:58:13 +03:00
|
|
|
flex: 10 1 auto;
|
2022-05-19 12:22:16 +03:00
|
|
|
}
|
2022-05-19 18:58:13 +03:00
|
|
|
/*#main-wrapper:not(.side-by-side) .ta-wrapper.input {
|
|
|
|
|
flex: 5 1 auto;
|
|
|
|
|
}*/
|
2022-05-18 20:14:24 +03:00
|
|
|
.button-bar {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
2022-05-19 18:58:13 +03:00
|
|
|
flex: 0 1 auto;
|
2022-05-18 20:14:24 +03:00
|
|
|
}
|
|
|
|
|
.button-bar button {
|
|
|
|
|
margin: 0.25em 1em;
|
|
|
|
|
}
|
2022-05-19 01:58:34 +03:00
|
|
|
label[for] {
|
2022-05-18 20:22:02 +03:00
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2022-05-19 01:58:34 +03:00
|
|
|
fieldset {
|
|
|
|
|
border-radius: 0.5em;
|
|
|
|
|
}
|
2022-05-19 00:18:21 +03:00
|
|
|
.error {
|
|
|
|
|
color: red;
|
|
|
|
|
background-color: yellow;
|
|
|
|
|
}
|
2022-05-19 01:58:34 +03:00
|
|
|
.hidden {
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
opacity: 0 !important;
|
|
|
|
|
pointer-events: none !important;
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
2022-05-19 13:24:50 +03:00
|
|
|
.initially-hidden {
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
opacity: 0 !important;
|
|
|
|
|
pointer-events: none !important;
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
2022-05-19 02:40:27 +03:00
|
|
|
fieldset.options {
|
2022-05-19 12:22:16 +03:00
|
|
|
font-size: 75%;
|
2022-05-19 02:40:27 +03:00
|
|
|
}
|
|
|
|
|
fieldset > legend {
|
|
|
|
|
padding: 0 0.5em;
|
|
|
|
|
}
|
|
|
|
|
span.labeled-input {
|
|
|
|
|
padding: 0.25em;
|
|
|
|
|
margin: 0.25em 0.5em;
|
|
|
|
|
border-radius: 0.25em;
|
2022-05-19 03:38:34 +03:00
|
|
|
white-space: nowrap;
|
2022-05-19 19:11:35 +03:00
|
|
|
background: #0002;
|
2022-05-19 02:40:27 +03:00
|
|
|
}
|
2022-05-19 04:12:23 +03:00
|
|
|
#notes-caveats {
|
|
|
|
|
border-top: 1px dotted;
|
|
|
|
|
padding-top: 0.25em;
|
|
|
|
|
margin-top: 0.5em;
|
|
|
|
|
}
|
2022-05-19 13:24:50 +03:00
|
|
|
.center { text-align: center; }
|
2022-05-19 18:58:13 +03:00
|
|
|
|
|
|
|
|
body.terminal-mode {
|
|
|
|
|
max-height: calc(100% - 2em);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
}
|
|
|
|
|
#jqterminal {
|
|
|
|
|
}
|
|
|
|
|
.app-view {
|
|
|
|
|
flex: 20 1 auto;
|
|
|
|
|
}
|
|
|
|
|
#titlebar {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
#view-split {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
2022-05-18 20:14:24 +03:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2022-05-19 18:58:13 +03:00
|
|
|
<header id='titlebar'><span>sqlite3 fiddle</span></header>
|
2022-05-19 13:24:50 +03:00
|
|
|
<figure id="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>
|
2022-05-18 20:14:24 +03:00
|
|
|
<div class="emscripten" id="status">Downloading...</div>
|
|
|
|
|
<div class="emscripten">
|
|
|
|
|
<progress value="0" max="100" id="progress" hidden='1'></progress>
|
|
|
|
|
</div>
|
2022-05-19 18:58:13 +03:00
|
|
|
|
|
|
|
|
<div id='jqterminal' class='app-view hidden initially-hidden'>
|
|
|
|
|
This is a placeholder for a terminal-like view.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id='view-split' class='app-view initially-hidden'>
|
|
|
|
|
<fieldset class='options'>
|
|
|
|
|
<legend>Options</legend>
|
|
|
|
|
<div class=''>
|
|
|
|
|
<span class='labeled-input'>
|
|
|
|
|
<input type='checkbox' id='opt-cb-sbs' checked>
|
|
|
|
|
<label for='opt-cb-sbs'>Side-by-side</label>
|
|
|
|
|
</span>
|
2022-05-19 19:11:35 +03:00
|
|
|
<span class='labeled-input'>
|
|
|
|
|
<input type='checkbox' id='opt-cb-swapio'>
|
|
|
|
|
<label for='opt-cb-swapio'>Swap in/out</label>
|
|
|
|
|
</span>
|
2022-05-19 18:58:13 +03:00
|
|
|
<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>
|
2022-05-19 19:11:35 +03:00
|
|
|
<div id='main-wrapper' class=''>
|
2022-05-19 18:58:13 +03:00
|
|
|
<div class='ta-wrapper input'>
|
|
|
|
|
<textarea id="input"
|
|
|
|
|
placeholder="Shell input. Ctrl-enter/shift-enter runs it.">
|
2022-05-19 03:38:34 +03:00
|
|
|
-- Use ctrl-enter or shift-enter to execute SQL
|
2022-05-18 20:22:02 +03:00
|
|
|
.nullvalue NULL
|
2022-05-18 20:14:24 +03:00
|
|
|
.mode box
|
2022-05-19 03:38:34 +03:00
|
|
|
CREATE TABLE t(a,b);
|
|
|
|
|
INSERT INTO t(a,b) VALUES('abc',123),('def',456),(NULL,789),('ghi',012);
|
|
|
|
|
SELECT * FROM t;</textarea>
|
2022-05-19 18:58:13 +03:00
|
|
|
<div class='button-bar'>
|
|
|
|
|
<button id='btn-run'>Run</button>
|
|
|
|
|
<button id='btn-clear'>Clear</button>
|
|
|
|
|
<button data-cmd='.help'>Help</button>
|
|
|
|
|
</div>
|
2022-05-18 20:14:24 +03:00
|
|
|
</div>
|
2022-05-19 18:58:13 +03:00
|
|
|
<div class='ta-wrapper output'>
|
|
|
|
|
<textarea id="output" readonly
|
|
|
|
|
placeholder="Shell output."></textarea>
|
|
|
|
|
<div class='button-bar'>
|
|
|
|
|
<button id='btn-clear-output'>Clear</button>
|
|
|
|
|
</div>
|
2022-05-18 20:14:24 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-05-19 18:58:13 +03:00
|
|
|
</div> <!-- .app-view -->
|
2022-05-19 12:55:14 +03:00
|
|
|
<!-- Maintenance notes:
|
2022-05-18 20:14:24 +03:00
|
|
|
|
2022-05-19 12:55:14 +03:00
|
|
|
- emscripten module init goes is in fiddle-pre.js and gets
|
|
|
|
|
prepended to the generated script code.
|
2022-05-19 00:18:21 +03:00
|
|
|
|
2022-05-19 12:55:14 +03:00
|
|
|
- App-specific code is in fiddle-post.js and gets appended to
|
|
|
|
|
the generated script code.
|
2022-05-19 12:22:16 +03:00
|
|
|
|
2022-05-19 12:55:14 +03:00
|
|
|
- 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.
|
2022-05-18 20:14:24 +03:00
|
|
|
|
2022-05-19 12:55:14 +03:00
|
|
|
-->
|
2022-05-18 20:14:24 +03:00
|
|
|
{{{ SCRIPT }}}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
