forked from mwenge/dirtylittlesql.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (98 loc) · 5.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json">
<title>Dirty Little SQL Notebook</title>
<link rel="stylesheet" href="3rdparty/codemirror/codemirror.css">
<link rel="stylesheet" href="3rdparty/codemirror/show-hint.css">
<link rel="stylesheet" href="3rdparty/codemirror/3024-day.css">
<link rel="stylesheet" href="3rdparty/codemirror/3024-night.css">
<link rel="stylesheet" href="demo.css">
<link rel="icon" type="image/x-icon" href="favicon.png" id="icon">
<script src="3rdparty/codemirror/codemirror.js"></script>
<script src="3rdparty/codemirror/sql-hint.js"></script>
<script src="3rdparty/codemirror/show-hint.js"></script>
<script type="text/javascript" src="3rdparty/xlsx.full.min.js"></script>
<script type="text/javascript" src="3rdparty/localforage.min.js"></script>
<script src="3rdparty/hotkeys.min.js"></script>
<script src="3rdparty/chart.min.js"></script>
</head>
<body>
<div class="banner">
<div class="logo">
<div>DIRTY</div>
<div>LITTLE</div>
<div>SQL</div>
</div>
<div class="hints">
<table>
<tr>
<td><b>Ctrl-Enter:</b> Run query.<td>
<td><b>Ctrl-B:</b> Add cell below.<td>
<td><b>Ctrl-A:</b> Add cell above.<td>
<td><b>Ctrl-D:</b> Delete cell.<td>
<td><b>Tab:</b> Move to next cell.<td>
</tr>
<tr>
<td><b>Ctrl-Space:</b> Autocomplete.<td>
<td><b>Alt-Left:</b> Previous Query in History.<td>
<td><b>Alt-Right:</b> Next Query in History.<td>
<td><b>Shift-Tab:</b> Move to previous cell.<td>
<td><b>Ctrl-S:</b> Save results as CSV.<td>
</tr>
</table>
</div>
<input class="button" type='file' id='csvfile' style="display:none">
<div class="fileselect" style="float:right;" id="vsvbutton">
<input class="button" type='file'
accept=".csv,.txt,.json,.xls,.xlsx,.ods,.db,.sqlite"
id='vsvfile' style="display:none">
<div class="logo" style="float:left;">
<input class="button" type="button" value="+">
</div>
<div class="logo" style="float:left;">
<div>CSV TXT JSON</div>
<div>XLS ODS XLSX</div>
<div>DB SQLITE</div>
</div>
</div>
</div>
<div class="sidebar" id="sidebar">
<div class="intro" id="intro">
<b style="display: block; padding: 5px;color: black; background-color:orange;">Load very large text files, very quickly, so that you can run SQL queries on them straight away.</b>
<ul>
<li><b>Fast</b> A 10 million line CSV or delimiter-separated file will load in less than 10 seconds. Click <b style="padding: 3px;color: black; background-color:orange;">+</b> above to select a file to load.</a>
<li><b>Secure</b> All data stays on your computer, you're not uploading anything anywhere.</a>
<li><b>Flexible</b> Load as many files as you like and treat them all as tables in the same database. Field delimiters are automatically detected.
<li><b>Many File Formats</b> Works with Excel, OpenOffice files, JSON files, and even SQLite db files too! You can use <b>Ctrl-s</b> to save your query results as a CSV.</a>
<li><b>Convenient</b> Your queries and results are stored so you can use <b>Alt-Left</b> and <b>Alt-Right</b> to review and rerun them.</a>
<li><b>Fancy</b> You can get the results of your queries as charts. Just use <b>Alt-Enter</b> instead of <b>Ctrl-Enter</b> when running the query. The first column in your results is treated as the X-Axis, and all subsequent columns as values to be plotted on the Y axis.
<li><b>Notebook-Like</b> Use <b>Ctrl-a</b> and <b>Ctrl-b</b> and to add as many new query cells as you like, where you like, and create a notebook for saving results to a PDF.</a>
</ul>
<b style="display: block; padding: 5px;color: black; background-color:orange;">Under the hood.</b>
<ul>
<li><b><a href='https://github.com/sql-js/sql.js'>sql.js</a></b> The database is a web-assembly version of SQLite called sql.js that runs in your browser.</li>
<li><b><a href="http://www.dessus.com/files/vsv.c">VSV</a></b> It also uses a SQLite extension called vsv to load delimited text files quickly. </li>
<li><b><a href="https://codemirror.net">Codemirror</a></b> Syntax highlighting</li>
<li><b><a href="https://sheetjs.com">sheet.js</a></b> Excel and Openoffice support.</li>
<li><b><a href="https://chartjs.com">chart.js</a></b> Charts </li>
<li><b><a href="https://github.com/localForage/localForage">LocalForage</a></b> IndexedDB for efficient local storage.</li>
<li><b>Github</b> You can view the git repository for this project at the <a href='https://github.com/mwenge/dirtylittlesql.com'>author's github page.</a>.</li>
</ul>
</div>
</div>
<header class="status" id="status">
</header>
<main>
<div id="container"></div>
</main>
<script src="3rdparty/codemirror/sql.min.js"></script>
<footer>
</footer>
<script type="text/javascript" src="separators.js"></script>
<script type="text/javascript" src="tips.js"></script>
<script type="text/javascript" src="gui.js"></script>
</body>
</html>