-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
185 lines (175 loc) · 9.98 KB
/
index.html
File metadata and controls
185 lines (175 loc) · 9.98 KB
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#6c5ce7">
<meta name="description" content="純前端 SQLite 管理工具">
<title>SQLite Studio</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="app" class="app">
<!-- Header -->
<header class="header">
<div class="header-left">
<button id="toggleSidebar" class="icon-btn" title="切換側邊欄">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
<div class="logo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="var(--accent)" stroke-width="2"/><path d="M8 8h8v8H8z" fill="var(--accent)" opacity="0.3"/><path d="M10 10h4v4h-4z" fill="var(--accent)"/></svg>
<span>SQLite Studio</span>
</div>
</div>
<div class="header-center">
<div class="db-name" id="dbName">未開啟數據庫</div>
</div>
<div class="header-right">
<button id="btnOpen" class="btn btn-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
開啟
</button>
<button id="btnSave" class="btn btn-secondary" disabled>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17,21 17,13 7,13 7,21"/><polyline points="7,3 7,8 15,8"/></svg>
儲存
</button>
<button id="btnNewDB" class="btn btn-ghost">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
新建
</button>
<button id="btnMore" class="btn btn-ghost" title="更多功能" style="padding:6px 10px">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
</button>
<button id="btnTheme" class="icon-btn" title="切換主題">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
</button>
</div>
</header>
<div class="main">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<input type="text" id="tableSearch" class="search-input" placeholder="搜尋表...">
</div>
<div class="sidebar-content" id="tableList">
<div class="empty-state">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="1"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
<p>開啟或新建數據庫</p>
</div>
</div>
</aside>
<!-- Content -->
<main class="content" id="content">
<!-- Welcome Screen -->
<div class="welcome" id="welcomeScreen">
<div class="welcome-inner">
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M8 8h8v8H8z" opacity="0.3" fill="var(--accent)"/><path d="M10 10h4v4h-4z" fill="var(--accent)"/></svg>
<h1>SQLite Studio</h1>
<p>純前端 SQLite 管理工具，數據不離開您的瀏覽器</p>
<div class="welcome-actions">
<button id="btnOpenWelcome" class="btn btn-primary btn-lg">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
開啟數據庫
</button>
<button id="btnNewWelcome" class="btn btn-secondary btn-lg">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
新建數據庫
</button>
<button id="btnSampleWelcome" class="btn btn-ghost btn-lg">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14,2H6A2,2,0,0,0,4,4V20a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V8Z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10,9 9,9 8,9"/></svg>
建立範例資料庫
</button>
</div>
<div class="welcome-features">
<div class="feature"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg><span>數據完全本地</span></div>
<div class="feature"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg><span>支援 SQL 查詢</span></div>
<div class="feature"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg><span>匯入匯出</span></div>
<div class="feature"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg><span>RWD 響應式</span></div>
</div>
</div>
</div>
<!-- Tab Bar -->
<div class="tab-bar" id="tabBar" style="display:none">
<div class="tabs" id="tabs"></div>
<button id="btnNewTab" class="icon-btn" title="新查詢">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
</div>
<!-- Tab Panels -->
<div class="tab-panels" id="tabPanels" style="display:none"></div>
</main>
</div>
<!-- Status Bar -->
<footer class="statusbar" id="statusBar">
<div class="statusbar-left">
<span id="statusText">就緒</span>
<span id="statusInfo"></span>
</div>
<div class="statusbar-right">
<span class="statusbar-brand">SQLite Studio</span>
<span class="statusbar-version">v7</span>
<span class="statusbar-divider">|</span>
<a href="https://donmalab.com" target="_blank" rel="noopener noreferrer" class="statusbar-link">當麻實驗室</a>
</div>
</footer>
<!-- Modals -->
<div class="modal-overlay" id="modalOverlay" style="display:none">
<div class="modal" id="modal">
<div class="modal-header">
<h3 id="modalTitle"></h3>
<button class="icon-btn modal-close" id="modalClose">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="modal-body" id="modalBody"></div>
<div class="modal-footer" id="modalFooter"></div>
</div>
</div>
<!-- Context Menu -->
<div class="context-menu" id="contextMenu" style="display:none"></div>
<!-- Toast -->
<div class="toast-container" id="toastContainer"></div>
</div>
<script>
// Use WASM only on HTTP/HTTPS, asm.js for file://
if (window.location.protocol === 'https:' || window.location.protocol === 'http:') {
document.write('<script src="lib/sql-wasm.js"><\/script>');
} else {
document.write('<script src="lib/sql-asm.js"><\/script>');
}
</script>
<script src="lib/dagre.min.js"></script>
<script src="js/sql-utils.js"></script>
<script src="js/storage.js"></script>
<script src="js/db.js"></script>
<script src="js/ui.js"></script>
<script src="js/editor.js"></script>
<script src="js/autocomplete.js"></script>
<script src="js/table.js"></script>
<script src="js/erd.js"></script>
<script src="js/enhancements.js"></script>
<script src="js/enhancements2.js"></script>
<script src="js/sample-db.js"></script>
<script src="js/app.js"></script>
<script>
// PWA features only work on HTTP/HTTPS
if (window.location.protocol === 'https:' || window.location.protocol === 'http:') {
// Add manifest link
const link = document.createElement('link');
link.rel = 'manifest';
link.href = 'manifest.json';
document.head.appendChild(link);
// Register service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js')
.then(reg => console.log('Service Worker registered:', reg.scope))
.catch(err => console.log('Service Worker registration failed:', err));
});
}
}
</script>
</body>
</html>