<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SQLite Studio ยท v0.1.0</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA4ElEQVR4nO2VUQ6DMAxDm9yf+8/dZF/CqAp0TZPQrR8g8fNS2zh1YpJkFw/faJt8B/j8K1gqkIBlAiwTYJkAywRYJsAyAZYJsEyAZQIsE2C5BIv4C2D6B9c1gKSUUpJKqZQSa62UklJKpZQk5zytlda6lFJKKaWUcs7T5vGPc86UUs45l1LKOfe9nHMeY9BaKaWMMUYpZYwRpdRaa62UUmutlFJKKaWUUkopda21UkoppZRSSiml1FrrWmutlFJKKaWUUuqtqLXWWmutlFJKKaWUUuqtqLXWWmutlFJK/Vb0LwJLEf0FdCvwAiwTYJkAywRYJsD6CbD8A/0DY9+x/ooDAAAAAElFTkSuQmCC">
<base data-trunk-public-url />
<link data-trunk rel="copy-dir" href="static"/>
<link data-trunk rel="rust" data-wasm-opt="z" />
<link rel="stylesheet" href="static/sqlite-wasm/css//studio.css"/>
</head>
<body>
<div class="app">
<header class="header">
<div class="logo">
<div class="logo-icon"><i class="fas fa-database"></i></div>
<h1>SQLite Studio</h1>
<span class="badge">v0.1.0</span>
</div>
<div class="header-actions">
<button class="btn-icon" id="themeToggle" title="Toggle theme"><i class="fas fa-moon"></i></button>
<a href="https://docs.rs/sqlite-wasm" target="_blank" class="btn-icon" title="Documentation">
<i class="fas fa-book"></i>
</a>
<a href="https://github.com/adorno-dev/sqlite-wasm" target="_blank" class="btn-icon" title="GitHub">
<i class="fab fa-github"></i>
</a>
</div>
</header>
<div class="main">
<aside class="sidebar">
<div class="sidebar-header">
<span><i class="fas fa-folder-open"></i> EXPLORER</span>
<div style="display: flex; gap: 0.3rem;">
<button class="btn-small" id="newDbBtn" title="New Database">
<i class="fas fa-plus"></i>
</button>
<button class="btn-small" id="refreshBtn" title="Refresh">
<i class="fas fa-sync-alt"></i>
</button>
<button class="btn-small" id="deleteDbBtn" title="Delete Database">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<div class="db-selector">
<div class="db-name" id="selectedDb">
<i class="fas fa-database"></i>
<span>[choose a database]</span>
<i class="fas fa-chevron-down"></i>
</div>
<div class="db-dropdown" id="dbDropdown">
<div class="db-option new-database" id="newDbBtn">
<i class="fas fa-plus-circle"></i> New Database...
</div>
</div>
</div>
<div class="tree">
<div class="tree-section">
<div class="tree-item"><i class="fas fa-table"></i><span>Tables</span></div>
<div class="tree-children" id="treeTables"></div>
</div>
<div class="tree-section">
<div class="tree-item"><i class="fas fa-eye"></i><span>Views</span></div>
<div class="tree-children" id="treeViews"></div>
</div>
<div class="tree-section">
<div class="tree-item"><i class="fas fa-bolt"></i><span>Triggers</span></div>
<div class="tree-children" id="treeTriggers"></div>
</div>
</div>
</aside>
<main class="workspace">
<div class="editor-section">
<div class="editor-header">
<span><i class="fas fa-code"></i> SQL Editor</span>
<div class="editor-actions">
<button class="btn-small" id="formatBtn" title="Format SQL"><i
class="fas fa-magic"></i></button>
<button class="btn-small" id="clearBtn" title="Clear"><i
class="fas fa-trash-alt"></i></button>
</div>
</div>
<textarea class="sql-editor" id="sqlEditor" placeholder="Enter SQL query..."
oninput="window.updateRunButtonState && window.updateRunButtonState()"></textarea>
<div class="editor-footer">
<button class="btn-primary" id="runBtn" disabled>
<i class="fas fa-play"></i> Run
</button>
<span class="shortcut-hint"><i class="fas fa-keyboard"></i> Ctrl + Enter</span>
</div>
</div>
<div class="results-section">
<div class="results-header">
<span><i class="fas fa-table"></i> Results</span>
<div class="results-actions">
<button class="btn-small" title="Export CSV"><i class="fas fa-download"></i></button>
<button class="btn-small" title="Copy as JSON"><i class="fas fa-copy"></i></button>
</div>
</div>
<div class="table-wrapper" id="tableWrapper"></div>
<div class="pagination">
<div class="pagination-info"><span>0 rows</span></div>
<div class="pagination-controls">
<button class="btn-small" id="prevPage" disabled><i
class="fas fa-chevron-left"></i></button>
<div class="page-numbers" id="pageNumbers"></div>
<button class="btn-small" id="nextPage" disabled><i
class="fas fa-chevron-right"></i></button>
</div>
<div class="pagination-limit">
<select class="page-size" id="pageSize">
<option>10</option>
<option selected>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
</div>
</div>
</main>
</div>
</div>
<script type="module" src="static/sqlite-wasm/js/state.js"></script>
<script type="module" src="static/sqlite-wasm/js/database.js"></script>
<script type="module" src="static/sqlite-wasm/js/ui.js"></script>
<script type="module" src="static/sqlite-wasm/js/studio.js"></script>
</body>
</html>