265 lines
8.5 KiB
HTML
265 lines
8.5 KiB
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>
|
|
<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. */
|
|
textarea {
|
|
font-family: monospace;
|
|
flex: 1 1 auto;
|
|
}
|
|
header {
|
|
font-size: 130%;
|
|
font-weight: bold;
|
|
}
|
|
#main-wrapper {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
flex: 20 1 auto;
|
|
}
|
|
#main-wrapper.side-by-side {
|
|
flex-direction: row-reverse;
|
|
}
|
|
#main-wrapper.swapio {
|
|
flex-direction: column;
|
|
}
|
|
#main-wrapper.side-by-side.swapio {
|
|
flex-direction: row;
|
|
}
|
|
.ta-wrapper{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
margin: 0 0.25em;
|
|
flex: 1 1 auto;
|
|
}
|
|
.ta-wrapper.input { flex: 10 1 auto; }
|
|
.ta-wrapper.output { flex: 20 1 auto; }
|
|
.ta-wrapper textarea {
|
|
font-size: 110%;
|
|
filter: invert(100%);
|
|
flex: 10 1 auto;
|
|
}
|
|
.button-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex: 0 1 auto;
|
|
flex-wrap: wrap;
|
|
}
|
|
.button-bar button {
|
|
margin: 0.25em 1em;
|
|
}
|
|
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;
|
|
}
|
|
/* Safari supports neither styling of nor event handling on a
|
|
fieldset legend, so we emulate a fieldset-like widget. */
|
|
.fieldset {
|
|
border-radius: 0.5em;
|
|
border: 1px inset;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.fieldset > .legend {
|
|
position: relative;
|
|
top: -1.5ex;
|
|
padding: 0 0.5em;
|
|
font-size: 85%;
|
|
margin-left: 0.5em;
|
|
flex: 0 1 auto;
|
|
align-self: self-start;
|
|
cursor: pointer;
|
|
}
|
|
.fieldset.options > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 70%;
|
|
margin: 0 0.5em 0.5em 0.5em;
|
|
}
|
|
.fieldset > .legend > span {
|
|
position: relative;
|
|
}
|
|
.fieldset > .legend::before {
|
|
/* Hide the parent element's top border where this
|
|
element intersects it. */
|
|
content: ' ';
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: white
|
|
/* REALLY want to 'inherit' the color from the fieldset's
|
|
parent, but inherit leads to a transparent bg, which is
|
|
exactly what we're trying to avoid here. */;
|
|
opacity: 1;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.fieldset > .legend::after {
|
|
content: " [hide]";
|
|
position: relative;
|
|
}
|
|
.fieldset.collapsed > .legend::after {
|
|
content: " [show]";
|
|
position: relative;
|
|
}
|
|
span.labeled-input {
|
|
padding: 0.25em;
|
|
margin: 0.25em 0.5em;
|
|
border-radius: 0.25em;
|
|
white-space: nowrap;
|
|
background: #0002;
|
|
}
|
|
#notes-caveats {
|
|
border-top: 1px dotted;
|
|
padding-top: 0.25em;
|
|
margin-top: 0.5em;
|
|
}
|
|
.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;
|
|
}
|
|
#titlebar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
#view-split {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
#view-split > .fieldset.options {
|
|
margin-top: 0.5em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header id='titlebar'><span>sqlite3 fiddle</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.
|
|
</div>
|
|
|
|
<div id='view-split' class='app-view initially-hidden'>
|
|
<div class='fieldset options collapsible'>
|
|
<span class='legend'><span>Options</span></span>
|
|
<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'/>
|
|
<label>Load DB</label>
|
|
</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>
|
|
<span class='labeled-input'>
|
|
<select id='select-examples'></select>
|
|
</span>
|
|
</div>
|
|
</div><!-- .fieldset -->
|
|
<div id='main-wrapper' class=''>
|
|
<div class='ta-wrapper input'>
|
|
<textarea id="input"
|
|
placeholder="Shell input. Ctrl-enter/shift-enter runs it.">
|
|
-- Use ctrl-enter or shift-enter to execute SQL. If only a subset
|
|
-- is currently selected, only that part is executed.
|
|
.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-shell-exec'>Run</button>
|
|
<button id='btn-clear'>Clear Input</button>
|
|
<button data-cmd='.help'>Help</button>
|
|
</div>
|
|
</div>
|
|
<div class='ta-wrapper output'>
|
|
<textarea id="output" readonly
|
|
placeholder="Shell output."></textarea>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div> <!-- #view-split -->
|
|
<!-- Maintenance notes:
|
|
|
|
... TODO... currently being refactored...
|
|
|
|
-->
|
|
<script src="fiddle.js"></script>
|
|
</body>
|
|
</html>
|