various fixes and improvements

.dockerignore

@@ -0,0 +1,10 @@
+# Exclude Git files
+.git
+.gitignore
+
+# Exclude sample databases
+examples
+
+# Exclude development files and documentation
+README.md
+LICENSE

.gitignore

@@ -1 +1,8 @@
-.idea/*
+.idea/
+.DS_Store
+*.swp
+*.swo
+*~
+node_modules/
+*.map
+/sqlite-wasm-3530100/

README.md

@@ -1,24 +1,62 @@
-[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-SQLite%20Viewer-brightgreen.svg?style=flat)](http://android-arsenal.com/details/1/2497)
-
 SQLite Viewer
-============
-
-*View SQLite file online. Uses [sql.js](https://github.com/sql-js/sql.js) for parsing sqlite files.*
-
-You can also load remote files (using JS ajax, remote server must send `Access-Control-Allow-Origin:*`):
-`http://inloop.github.io/sqlite-viewer/?url=http://example.com/data.sqlite`
-
-![](/img/preview.png?raw=true "Example sqlite")
-
-### License
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
+=============
+
+*View SQLite file online directly in your browser.*
+
+The database will be loaded into your memory and changes will not affect the file you loaded it from. You can
+however export the database after making changes.
+
+You can also load remote files (using JS ajax, remote server must send `Access-Control-Allow-Origin:*`) 
+and prefill a SQL query using hash parameters:
+
+- To load a remote SQLite file upon page load, append<br>
+  `#url=examples/Chinook_Sqlite.zip` to the URL. Both absolute and relative URLs work. So do zipped files.
+- To prefill a SQL query, append<br>
+  `#sql=SELECT%20*%20FROM%20table` to the URL.
+- To load a remote file *and* prefill a query at the same time: Append both like this:<br>
+  `#url=examples/Chinook_Sqlite.zip&sql=SELECT%20*%20FROM%20table`
+
+![](/img/preview.png?raw=true "Screenshot")
+
+Try [this live example](https://neuhaus.github.io/sqlite-viewer/#url=examples%2FChinook_Sqlite.zip&sql=SELECT+%0A++++Album.AlbumId%2C%0A++++Album.Title+AS+AlbumTitle%2C%0A++++Track.TrackId%2C%0A++++Track.Name+AS+TrackName%0AFROM+Album%0AJOIN+Track+ON+Album.AlbumId+%3D+Track.AlbumId%0AORDER+BY+Album.AlbumId%2C+TrackId%0ALIMIT+0%2C40%3B+)!
+
+## Docker
+
+You can run and configure the SQLite Viewer inside a lightweight production container using Docker.
+
+### 1. Build the Docker Image
+Execute the following build command in your workspace directory:
+```bash
+docker build -t sqlite-viewer -f docker/Dockerfile .
+```
+
+### 2. Auto-load a Database via Volume Mount
+To mount your local database file or ZIP archive and have the application **automatically fetch and load it** on page load:
+```bash
+docker run --rm -p 8080:80 \
+  -v "${PWD}/examples/Chinook_Sqlite.zip:/var/www/data.zip" \
+  sqlite-viewer
+```
+*Note: Navigate to `http://localhost:8080` in your browser. The database tables will load instantly with zero user interaction.*
+
+### 3. Configure Default SQL Query & Database URL
+You can specify a custom database URL and auto-execute a default SQL query on startup using environment variables:
+```bash
+docker run --rm -p 8080:80 \
+  -e DEFAULT_URL="examples/Chinook_Sqlite.zip" \
+  -e DEFAULT_SQL="SELECT name, type FROM sqlite_master WHERE type='table' ORDER BY name;" \
+  sqlite-viewer
+```
+* **`DEFAULT_URL`**: The database at this URL/path (relative path or absolute URL) will be fetched and opened on page load. Both raw databases and `.zip` archives are supported.
+* **`DEFAULT_SQL`**: The code editor will be pre-populated and this query will execute automatically on startup.
+
+## Libraries
+
+- Using the official [sqlite3-wasm](https://sqlite.org/wasm/doc/trunk/index.md) for parsing sqlite files.
+- Can handle SQLite files in ZIP files, thanks to [jszip](https://stuk.github.io/jszip/).
+- Enjoy query editing with SQL syntax highlighting thanks to [CodeJar](https://medv.io/codejar/) and [PrismJS](https://prismjs.com/).
+- Using [jQuery](https://jquery.com/) 4.0 slim, [Bootstrap](https://getbootstrap.com/) 5.3.8, [select2](https://select2.org/) and [FileSaver.js](https://github.com/eligrey/FileSaver.js/).
+
+## License
+
+Licensed under the Apache License, Version 2.0 — see [LICENSE](LICENSE) for details.

css/main.css

@@ -1,31 +1,94 @@
-body {
-    background: #f5f5f5;
-}
+@media (prefers-color-scheme: light) {
+    body {
+        background: #f5f5f5;
+    }
+
+    .drag {
+        background-color: lightblue;
+    }
+
+    #header {
+        background: #A0CFFF;
+        color: #3474A8;
+    }
+
+    .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+        background-color: #F5F5E7;
+    }
 
-.drag {
-    background-color: lightblue;
+    /* Prism Light Mode Token Colors */
+    .token.keyword { color: #0033cc; font-weight: bold; }
+    .token.string { color: #036a3e; }
+    .token.number { color: #a626a4; }
+    .token.punctuation { color: #383a42; }
+    .token.operator { color: #0184a6; }
+    .token.comment { color: #a0a1a7; }
 }
 
-#header {
-    background: #A0CFFF;
-    color: #3474A8;
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #000;
+    }
+
+    .drag {
+        background-color: #1e3a5f;
+    }
+
+    #header {
+        background: #0d3b66;
+        color: #7ab5e6;
+    }
+
+    .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+        background-color: #2c2c1e;
+    }
+
+    /* Prism Dark Mode Token Colors */
+    .token.keyword { color: #c5a3ff !important; font-weight: bold; }
+    .token.string { color: #a8df8e !important; }
+    .token.number { color: #7ec8e3 !important; }
+    .token.punctuation { color: #ccc; }
+    .token.operator { color: #ff7b72; }
+    .token.comment { color: #8b949e; }
+
+    .select2-container--bootstrap-5 .select2-selection {
+        background-color: #212529 !important;
+        border-color: #495057 !important;
+        color: #fff !important;
+    }
+
+    .select2-container--bootstrap-5 .select2-dropdown {
+        background-color: #212529 !important;
+        border-color: #495057 !important;
+    }
+
+    .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
+        background-color: #0d6efd !important;
+    }
+
+    .select2-container--bootstrap-5 .select2-search__field {
+        background-color: #212529 !important;
+        color: #fff !important;
+    }
 }
 
 #dropzone {
     height: 450px;
     cursor: pointer;
+    transition: height 0.5s ease;
 }
 
 #output-box {
     display: none;
-}
-
-.ace_hidden-cursors {
     opacity: 0;
+    transition: opacity 0.5s ease;
 }
 
-.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
-    background-color: #F5F5E7;
+#sql-editor {
+    height: 120px;
+    font-family: var(--bs-font-monospace), monospace;
+    font-size: 16px;
+    overflow-y: auto;
 }
 
 #data {
@@ -42,3 +105,37 @@ body {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+/* Query History Sidebar Custom Styling */
+.query-card {
+    border-radius: 6px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.query-card:hover {
+    transform: translateY(-1px);
+}
+
+.query-card pre {
+    max-height: 90px;
+    font-family: var(--bs-font-monospace), monospace;
+    font-size: 13px;
+    border-radius: 4px;
+    border: 1px solid var(--bs-border-color);
+    background-color: var(--bs-tertiary-bg) !important;
+    color: var(--bs-body-color) !important;
+    cursor: pointer;
+    transition: filter 0.15s ease, background-color 0.15s ease;
+}
+
+.query-card pre:hover {
+    filter: brightness(0.95);
+    background-color: var(--bs-secondary-bg) !important;
+}
+
+/* Make sure dark mode handles brightness correctly */
+@media (prefers-color-scheme: dark) {
+    .query-card pre:hover {
+        filter: brightness(1.15);
+    }
+}

docker/Dockerfile

@@ -0,0 +1,25 @@
+FROM nginx:alpine
+
+# 1. Copy all static viewer assets to the default Nginx root
+COPY . /usr/share/nginx/html
+
+# Remove Docker subdirectory and Git configurations from the public web root for security
+RUN rm -rf /usr/share/nginx/html/docker \
+           /usr/share/nginx/html/.dockerignore \
+           /usr/share/nginx/html/.gitignore
+
+# 2. Copy the customized Nginx configuration
+COPY docker/nginx.conf /etc/nginx/nginx.conf
+
+# 3. Setup the entrypoint script
+COPY docker/entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+# 4. Create directory for volume mounts
+RUN mkdir -p /var/www
+
+# Expose standard HTTP port
+EXPOSE 80
+
+# Run entrypoint script on boot
+ENTRYPOINT ["/entrypoint.sh"]

docker/entrypoint.sh

@@ -0,0 +1,41 @@
+#!/bin/sh
+set -e
+
+echo "=== SQLite Viewer Container Booting ==="
+
+# 1. Check if database volume is mounted at the standard locations
+if [ -f "/var/www/data.zip" ]; then
+    echo "-> Detected mounted SQLite database ZIP at /var/www/data.zip"
+    if [ -z "$DEFAULT_URL" ]; then
+        # Default URL to the mapped Nginx route
+        DEFAULT_URL="data.zip"
+        echo "-> Automatically setting DEFAULT_URL to: data.zip"
+    fi
+elif [ -f "/var/www/data.sqlite" ]; then
+    echo "-> Detected mounted SQLite database at /var/www/data.sqlite"
+    if [ -z "$DEFAULT_URL" ]; then
+        # Default URL to the mapped Nginx route
+        DEFAULT_URL="data.sqlite"
+        echo "-> Automatically setting DEFAULT_URL to: data.sqlite"
+    fi
+fi
+
+# 2. Escape backslashes and single quotes in SQL to prevent breaking JS syntax
+ESCAPED_SQL=$(echo "$DEFAULT_SQL" | sed 's/\\/\\\\/g' | sed "s/'/\\\\\\'/g")
+
+echo "-> Generating client-side configuration..."
+echo "   DEFAULT_URL: ${DEFAULT_URL:-none}"
+echo "   DEFAULT_SQL: ${DEFAULT_SQL:-none}"
+
+# 3. Write dynamic config to the webserver directory
+cat << EOF > /usr/share/nginx/html/js/config.js
+// Client-side application configuration
+// Generated dynamically at container boot.
+window.APP_CONFIG = {
+    defaultUrl: "${DEFAULT_URL}",
+    defaultSql: '${ESCAPED_SQL}'
+};
+EOF
+
+echo "=== Starting Nginx Web Server ==="
+exec nginx -g 'daemon off;'

docker/nginx.conf

@@ -0,0 +1,44 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    server {
+        listen       80;
+        server_name  localhost;
+
+        location / {
+            root   /usr/share/nginx/html;
+            index  index.html index.htm;
+
+            # WASM compatibility and cross-origin isolation headers
+            add_header Cross-Origin-Opener-Policy "same-origin" always;
+            add_header Cross-Origin-Embedder-Policy "require-corp" always;
+        }
+
+        # Expose the mounted SQLite database file under the same origin
+        location /data.sqlite {
+            alias /var/www/data.sqlite;
+
+            # Enable basic headers and COOP/COEP
+            add_header Access-Control-Allow-Origin "*" always;
+            add_header Cross-Origin-Opener-Policy "same-origin" always;
+            add_header Cross-Origin-Embedder-Policy "require-corp" always;
+            default_type application/x-sqlite3;
+        }
+
+        # Expose the mounted SQLite database ZIP archive under the same origin
+        location /data.zip {
+            alias /var/www/data.zip;
+
+            # Enable basic headers and COOP/COEP
+            add_header Access-Control-Allow-Origin "*" always;
+            add_header Cross-Origin-Opener-Policy "same-origin" always;
+            add_header Cross-Origin-Embedder-Policy "require-corp" always;
+            default_type application/zip;
+        }
+    }
+}