1*ce2d4ae6Sstephan<!doctype html> 2*ce2d4ae6Sstephan<html lang="en-us"> 3*ce2d4ae6Sstephan <head> 4*ce2d4ae6Sstephan <meta charset="utf-8"> 5*ce2d4ae6Sstephan <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6*ce2d4ae6Sstephan <title>SQLite3 Fiddle</title> 7*ce2d4ae6Sstephan <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 8*ce2d4ae6Sstephan <!-- to add a togglable terminal-style view, uncomment the following 9*ce2d4ae6Sstephan two lines and ensure that these files are on the web server. --> 10*ce2d4ae6Sstephan <!--script src="jqterm/jqterm-bundle.min.js"></script> 11*ce2d4ae6Sstephan <link rel="stylesheet" href="jqterm/jquery.terminal.min.css"/--> 12*ce2d4ae6Sstephan <link rel="stylesheet" href="emscripten.css"/> 13*ce2d4ae6Sstephan <style> 14*ce2d4ae6Sstephan /* The following styles are for app-level use. */ 15*ce2d4ae6Sstephan :root { 16*ce2d4ae6Sstephan --sqlite-blue: #044a64; 17*ce2d4ae6Sstephan --textarea-color1: #044a64; 18*ce2d4ae6Sstephan --textarea-color2: white; 19*ce2d4ae6Sstephan } 20*ce2d4ae6Sstephan textarea { 21*ce2d4ae6Sstephan font-family: monospace; 22*ce2d4ae6Sstephan flex: 1 1 auto; 23*ce2d4ae6Sstephan background-color: var(--textarea-color1); 24*ce2d4ae6Sstephan color: var(--textarea-color2); 25*ce2d4ae6Sstephan } 26*ce2d4ae6Sstephan textarea#input { 27*ce2d4ae6Sstephan color: var(--textarea-color1); 28*ce2d4ae6Sstephan background-color: var(--textarea-color2); 29*ce2d4ae6Sstephan } 30*ce2d4ae6Sstephan header { 31*ce2d4ae6Sstephan display: flex; 32*ce2d4ae6Sstephan justify-content: space-between; 33*ce2d4ae6Sstephan align-items: center; 34*ce2d4ae6Sstephan background-color: var(--sqlite-blue); 35*ce2d4ae6Sstephan color: white; 36*ce2d4ae6Sstephan font-size: 120%; 37*ce2d4ae6Sstephan font-weight: bold; 38*ce2d4ae6Sstephan border-radius: 0.25em; 39*ce2d4ae6Sstephan padding: 0.2em 0.5em; 40*ce2d4ae6Sstephan } 41*ce2d4ae6Sstephan header > .powered-by { 42*ce2d4ae6Sstephan font-size: 80%; 43*ce2d4ae6Sstephan } 44*ce2d4ae6Sstephan header a, header a:visited, header a:hover { 45*ce2d4ae6Sstephan color: inherit; 46*ce2d4ae6Sstephan } 47*ce2d4ae6Sstephan #main-wrapper { 48*ce2d4ae6Sstephan display: flex; 49*ce2d4ae6Sstephan flex-direction: column-reverse; 50*ce2d4ae6Sstephan flex: 1 1 auto; 51*ce2d4ae6Sstephan margin: 0.5em 0; 52*ce2d4ae6Sstephan overflow: hidden; 53*ce2d4ae6Sstephan } 54*ce2d4ae6Sstephan #main-wrapper.side-by-side { 55*ce2d4ae6Sstephan flex-direction: row; 56*ce2d4ae6Sstephan } 57*ce2d4ae6Sstephan #main-wrapper.side-by-side > fieldset { 58*ce2d4ae6Sstephan margin-left: 0.25em; 59*ce2d4ae6Sstephan margin-right: 0.25em; 60*ce2d4ae6Sstephan } 61*ce2d4ae6Sstephan #main-wrapper:not(.side-by-side) > fieldset { 62*ce2d4ae6Sstephan margin-bottom: 0.25em; 63*ce2d4ae6Sstephan } 64*ce2d4ae6Sstephan #main-wrapper.swapio { 65*ce2d4ae6Sstephan flex-direction: column; 66*ce2d4ae6Sstephan } 67*ce2d4ae6Sstephan #main-wrapper.side-by-side.swapio { 68*ce2d4ae6Sstephan flex-direction: row-reverse; 69*ce2d4ae6Sstephan } 70*ce2d4ae6Sstephan .zone-wrapper{ 71*ce2d4ae6Sstephan display: flex; 72*ce2d4ae6Sstephan margin: 0; 73*ce2d4ae6Sstephan flex: 1 1 0%; 74*ce2d4ae6Sstephan border-radius: 0.5em; 75*ce2d4ae6Sstephan min-width: inherit/*important: resolves inability to scroll fieldset child element!*/; 76*ce2d4ae6Sstephan padding: 0.35em 0 0 0; 77*ce2d4ae6Sstephan } 78*ce2d4ae6Sstephan .zone-wrapper textarea { 79*ce2d4ae6Sstephan border-radius: 0.5em; 80*ce2d4ae6Sstephan flex: 1 1 auto; 81*ce2d4ae6Sstephan /*min/max width resolve an inexplicable margin on the RHS. The -1em 82*ce2d4ae6Sstephan is for the padding, else we overlap the parent boundaries.*/ 83*ce2d4ae6Sstephan /*min-width: calc(100% - 1em); 84*ce2d4ae6Sstephan max-width: calc(100% - 1em); 85*ce2d4ae6Sstephan padding: 0 0.5em;*/ 86*ce2d4ae6Sstephan } 87*ce2d4ae6Sstephan 88*ce2d4ae6Sstephan .zone-wrapper.input { flex: 10 1 auto; } 89*ce2d4ae6Sstephan .zone-wrapper.output { flex: 20 1 auto; } 90*ce2d4ae6Sstephan .zone-wrapper > div { 91*ce2d4ae6Sstephan display:flex; 92*ce2d4ae6Sstephan flex: 1 1 0%; 93*ce2d4ae6Sstephan } 94*ce2d4ae6Sstephan .zone-wrapper.output {} 95*ce2d4ae6Sstephan .button-bar { 96*ce2d4ae6Sstephan display: flex; 97*ce2d4ae6Sstephan flex-wrap: wrap; 98*ce2d4ae6Sstephan align-items: center; 99*ce2d4ae6Sstephan align-content: space-between; 100*ce2d4ae6Sstephan justify-content: flex-start; 101*ce2d4ae6Sstephan } 102*ce2d4ae6Sstephan .button-bar > * { 103*ce2d4ae6Sstephan margin: 0.05em 0.5em 0.05em 0; 104*ce2d4ae6Sstephan flex: 0 1 auto; 105*ce2d4ae6Sstephan align-self: auto; 106*ce2d4ae6Sstephan } 107*ce2d4ae6Sstephan label[for] { 108*ce2d4ae6Sstephan cursor: pointer; 109*ce2d4ae6Sstephan } 110*ce2d4ae6Sstephan .error { 111*ce2d4ae6Sstephan color: red; 112*ce2d4ae6Sstephan background-color: yellow; 113*ce2d4ae6Sstephan } 114*ce2d4ae6Sstephan .hidden, .initially-hidden { 115*ce2d4ae6Sstephan position: absolute !important; 116*ce2d4ae6Sstephan opacity: 0 !important; 117*ce2d4ae6Sstephan pointer-events: none !important; 118*ce2d4ae6Sstephan display: none !important; 119*ce2d4ae6Sstephan } 120*ce2d4ae6Sstephan fieldset { 121*ce2d4ae6Sstephan border-radius: 0.5em; 122*ce2d4ae6Sstephan border: 1px inset; 123*ce2d4ae6Sstephan padding: 0.25em; 124*ce2d4ae6Sstephan } 125*ce2d4ae6Sstephan fieldset.options { 126*ce2d4ae6Sstephan font-size: 80%; 127*ce2d4ae6Sstephan margin-top: 0.5em; 128*ce2d4ae6Sstephan } 129*ce2d4ae6Sstephan fieldset:not(.options) > legend { 130*ce2d4ae6Sstephan font-size: 80%; 131*ce2d4ae6Sstephan } 132*ce2d4ae6Sstephan fieldset.options > div { 133*ce2d4ae6Sstephan display: flex; 134*ce2d4ae6Sstephan flex-wrap: wrap; 135*ce2d4ae6Sstephan } 136*ce2d4ae6Sstephan fieldset button { 137*ce2d4ae6Sstephan font-size: inherit; 138*ce2d4ae6Sstephan } 139*ce2d4ae6Sstephan fieldset.collapsible > legend > .fieldset-toggle::after { 140*ce2d4ae6Sstephan content: " [hide]"; 141*ce2d4ae6Sstephan position: relative; 142*ce2d4ae6Sstephan } 143*ce2d4ae6Sstephan fieldset.collapsible.collapsed > legend > .fieldset-toggle::after { 144*ce2d4ae6Sstephan content: " [show]"; 145*ce2d4ae6Sstephan position: relative; 146*ce2d4ae6Sstephan } 147*ce2d4ae6Sstephan span.labeled-input { 148*ce2d4ae6Sstephan padding: 0.25em; 149*ce2d4ae6Sstephan margin: 0.05em 0.25em; 150*ce2d4ae6Sstephan border-radius: 0.25em; 151*ce2d4ae6Sstephan white-space: nowrap; 152*ce2d4ae6Sstephan background: #0002; 153*ce2d4ae6Sstephan display: flex; 154*ce2d4ae6Sstephan align-items: center; 155*ce2d4ae6Sstephan } 156*ce2d4ae6Sstephan span.labeled-input > *:nth-child(2) { 157*ce2d4ae6Sstephan margin-left: 0.3em; 158*ce2d4ae6Sstephan } 159*ce2d4ae6Sstephan .center { text-align: center; } 160*ce2d4ae6Sstephan body.terminal-mode { 161*ce2d4ae6Sstephan max-height: calc(100% - 2em); 162*ce2d4ae6Sstephan display: flex; 163*ce2d4ae6Sstephan flex-direction: column; 164*ce2d4ae6Sstephan align-items: stretch; 165*ce2d4ae6Sstephan } 166*ce2d4ae6Sstephan #view-terminal {} 167*ce2d4ae6Sstephan .app-view { 168*ce2d4ae6Sstephan flex: 20 1 auto; 169*ce2d4ae6Sstephan } 170*ce2d4ae6Sstephan #view-split { 171*ce2d4ae6Sstephan display: flex; 172*ce2d4ae6Sstephan flex-direction: column-reverse; 173*ce2d4ae6Sstephan } 174*ce2d4ae6Sstephan </style> 175*ce2d4ae6Sstephan </head> 176*ce2d4ae6Sstephan <body> 177*ce2d4ae6Sstephan <header id='titlebar'> 178*ce2d4ae6Sstephan <span>SQLite3 Fiddle</span> 179*ce2d4ae6Sstephan <span class='powered-by'>Powered by 180*ce2d4ae6Sstephan <a href='https://sqlite.org'>SQLite3</a></span> 181*ce2d4ae6Sstephan </header> 182*ce2d4ae6Sstephan <!-- emscripten bits --> 183*ce2d4ae6Sstephan <figure id="module-spinner"> 184*ce2d4ae6Sstephan <div class="spinner"></div> 185*ce2d4ae6Sstephan <div class='center'><strong>Initializing app...</strong></div> 186*ce2d4ae6Sstephan <div class='center'> 187*ce2d4ae6Sstephan On a slow internet connection this may take a moment. If this 188*ce2d4ae6Sstephan message displays for "a long time", intialization may have 189*ce2d4ae6Sstephan failed and the JavaScript console may contain clues as to why. 190*ce2d4ae6Sstephan </div> 191*ce2d4ae6Sstephan </figure> 192*ce2d4ae6Sstephan <div class="emscripten" id="module-status">Downloading...</div> 193*ce2d4ae6Sstephan <div class="emscripten"> 194*ce2d4ae6Sstephan <progress value="0" max="100" id="module-progress" hidden='1'></progress> 195*ce2d4ae6Sstephan </div><!-- /emscripten bits --> 196*ce2d4ae6Sstephan 197*ce2d4ae6Sstephan <div id='view-terminal' class='app-view hidden initially-hidden'> 198*ce2d4ae6Sstephan This is a placeholder for a terminal-like view which is not in 199*ce2d4ae6Sstephan the default build. 200*ce2d4ae6Sstephan </div> 201*ce2d4ae6Sstephan 202*ce2d4ae6Sstephan <div id='view-split' class='app-view initially-hidden'> 203*ce2d4ae6Sstephan <fieldset class='options collapsible'> 204*ce2d4ae6Sstephan <legend><button class='fieldset-toggle'>Options</button></legend> 205*ce2d4ae6Sstephan <div class=''> 206*ce2d4ae6Sstephan <span class='labeled-input'> 207*ce2d4ae6Sstephan <input type='checkbox' id='opt-cb-sbs' 208*ce2d4ae6Sstephan data-csstgt='#main-wrapper' 209*ce2d4ae6Sstephan data-cssclass='side-by-side' 210*ce2d4ae6Sstephan data-config='sideBySide'> 211*ce2d4ae6Sstephan <label for='opt-cb-sbs'>Side-by-side</label> 212*ce2d4ae6Sstephan </span> 213*ce2d4ae6Sstephan <span class='labeled-input'> 214*ce2d4ae6Sstephan <input type='checkbox' id='opt-cb-swapio' 215*ce2d4ae6Sstephan data-csstgt='#main-wrapper' 216*ce2d4ae6Sstephan data-cssclass='swapio' 217*ce2d4ae6Sstephan data-config='swapInOut'> 218*ce2d4ae6Sstephan <label for='opt-cb-swapio'>Swap in/out</label> 219*ce2d4ae6Sstephan </span> 220*ce2d4ae6Sstephan <span class='labeled-input'> 221*ce2d4ae6Sstephan <input type='checkbox' id='opt-cb-autoscroll' 222*ce2d4ae6Sstephan data-config='autoScrollOutput'> 223*ce2d4ae6Sstephan <label for='opt-cb-autoscroll'>Auto-scroll output</label> 224*ce2d4ae6Sstephan </span> 225*ce2d4ae6Sstephan <span class='labeled-input'> 226*ce2d4ae6Sstephan <input type='checkbox' id='opt-cb-autoclear' 227*ce2d4ae6Sstephan data-config='autoClearOutput'> 228*ce2d4ae6Sstephan <label for='opt-cb-autoclear'>Auto-clear output</label> 229*ce2d4ae6Sstephan </span> 230*ce2d4ae6Sstephan <span class='labeled-input'> 231*ce2d4ae6Sstephan <input type='file' id='load-db' class='hidden'/> 232*ce2d4ae6Sstephan <button id='btn-load-db'>Load DB...</button> 233*ce2d4ae6Sstephan </span> 234*ce2d4ae6Sstephan <span class='labeled-input'> 235*ce2d4ae6Sstephan <button id='btn-export'>Download DB</button> 236*ce2d4ae6Sstephan </span> 237*ce2d4ae6Sstephan <span class='labeled-input'> 238*ce2d4ae6Sstephan <button id='btn-reset'>Reset DB</button> 239*ce2d4ae6Sstephan </span> 240*ce2d4ae6Sstephan </div> 241*ce2d4ae6Sstephan </fieldset><!-- .options --> 242*ce2d4ae6Sstephan <div id='main-wrapper' class=''> 243*ce2d4ae6Sstephan <fieldset class='zone-wrapper input'> 244*ce2d4ae6Sstephan <legend><div class='button-bar'> 245*ce2d4ae6Sstephan <button id='btn-shell-exec'>Run</button> 246*ce2d4ae6Sstephan <button id='btn-clear'>Clear Input</button> 247*ce2d4ae6Sstephan <!--button data-cmd='.help'>Help</button--> 248*ce2d4ae6Sstephan <select id='select-examples'></select> 249*ce2d4ae6Sstephan </div></legend> 250*ce2d4ae6Sstephan <div><textarea id="input" 251*ce2d4ae6Sstephan placeholder="Shell input. Ctrl-enter/shift-enter runs it."> 252*ce2d4ae6Sstephan-- ================================================== 253*ce2d4ae6Sstephan-- Use ctrl-enter or shift-enter to execute sqlite3 254*ce2d4ae6Sstephan-- shell commands and SQL. 255*ce2d4ae6Sstephan-- If a subset of the text is currently selected, 256*ce2d4ae6Sstephan-- only that part is executed. 257*ce2d4ae6Sstephan-- ================================================== 258*ce2d4ae6Sstephan.nullvalue NULL 259*ce2d4ae6Sstephan.headers on 260*ce2d4ae6Sstephan</textarea></div> 261*ce2d4ae6Sstephan </fieldset> 262*ce2d4ae6Sstephan <fieldset class='zone-wrapper output'> 263*ce2d4ae6Sstephan <legend><div class='button-bar'> 264*ce2d4ae6Sstephan <button id='btn-clear-output'>Clear Output</button> 265*ce2d4ae6Sstephan <button id='btn-interrupt' class='hidden' disabled>Interrupt</button> 266*ce2d4ae6Sstephan <!-- interruption cannot work in the current configuration 267*ce2d4ae6Sstephan because we cannot send an interrupt message when work 268*ce2d4ae6Sstephan is currently underway. At that point the Worker is 269*ce2d4ae6Sstephan tied up and will not receive the message. --> 270*ce2d4ae6Sstephan </div></legend> 271*ce2d4ae6Sstephan <div><textarea id="output" readonly 272*ce2d4ae6Sstephan placeholder="Shell output."></textarea></div> 273*ce2d4ae6Sstephan </fieldset> 274*ce2d4ae6Sstephan </div> 275*ce2d4ae6Sstephan </div> <!-- #view-split --> 276*ce2d4ae6Sstephan <script src="fiddle.js"></script> 277*ce2d4ae6Sstephan </body> 278*ce2d4ae6Sstephan</html> 279