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