-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
177 lines (156 loc) · 12.5 KB
/
Copy pathindex.html
File metadata and controls
177 lines (156 loc) · 12.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SQL Viewer | Online SQLite Editor & Database Browser</title>
<meta name="google-site-verification" content="HoJGOBE1AvNrOqRk96E15Mz3Ar3gNshfiG6MKFtQj6A" />
<!-- SEO Meta Tags -->
<meta name="description" content="SQL Viewer is a powerful, professional online tool to view, edit, and manage SQLite databases. High-performance WASM engine, mobile-optimized, and free to use.">
<meta name="keywords" content="SQL Viewer, SQLite editor, online database browser, database manager, sql tool, sqlite3 viewer, open source sql editor">
<meta name="author" content="SQL Viewer Labs">
<meta name="robots" content="index, follow">
<!-- Open Graph (Facebook / LinkedIn) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://sql-viewer-chi.vercel.app/">
<meta property="og:title" content="SQL Viewer | The Professional SQLite Interface">
<meta property="og:description" content="Professional-grade SQLite database management directly in your browser. Fast, secure, and mobile-ready.">
<meta property="og:image" content="https://sql-viewer-chi.vercel.app/sql_logo.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://sql-viewer-chi.vercel.app/">
<meta name="twitter:title" content="SQL Viewer | Online SQLite Editor">
<meta name="twitter:description" content="Manage your SQLite databases with a high-tech, minimalist interface. No install required.">
<meta name="twitter:image" content="https://sql-viewer-chi.vercel.app/sql_logo.png">
<!-- Canonical Tag -->
<link rel="canonical" href="https://sql-viewer-chi.vercel.app/">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="sql_logo.png">
</head>
<body class="bg-black text-white font-sans overflow-hidden h-screen flex flex-col">
<!-- Navbar -->
<nav class="border-b border-white/10 h-16 flex items-center justify-between px-6 shrink-0 bg-black/80 backdrop-blur-md z-50">
<div class="flex items-center gap-4">
<button id="mobile-sidebar-toggle" class="lg:hidden text-white/60 hover:text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
<div class="flex items-center gap-3">
<img src="sql_logo.png" alt="SQL Viewer v2.0 - Online SQLite Editor Logo" class="w-8 h-8 rounded shadow-lg shadow-white/5">
<h1 class="text-xs font-black uppercase tracking-[0.4em] pt-1 hidden sm:block">SQL Viewer <span class="text-white/20">v2.0</span></h1>
</div>
</div>
<div class="flex items-center gap-2 sm:gap-6">
<div class="hidden md:flex gap-4 text-[10px] uppercase font-bold tracking-widest text-white/40">
<a href="about.html" class="hover:text-white transition-colors">About</a>
<a href="help.html" class="hover:text-white transition-colors">Help</a>
</div>
<label class="cursor-pointer group flex items-center gap-2 bg-white text-black px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-zinc-200 transition-all active:scale-95 shadow-lg shadow-white/10">
<span>Mount DB</span>
<input type="file" id="db-upload" accept=".sqlite,.db,.sqlite3" class="hidden">
</label>
</div>
</nav>
<!-- Main Workspace -->
<main class="flex flex-1 overflow-hidden relative">
<!-- Sidebar: Table List -->
<aside id="sidebar" class="fixed inset-y-0 left-0 transform -translate-x-full lg:relative lg:translate-x-0 transition-transform duration-300 w-72 bg-black border-r border-white/5 z-40 flex flex-col overflow-hidden">
<div class="p-6 border-b border-white/5 flex justify-between items-center">
<h2 class="text-[10px] font-black uppercase tracking-[0.2em] text-white/30 italic underline decoration-white/10 underline-offset-8">Structure</h2>
<button id="close-sidebar-mobile" class="lg:hidden text-white/40 hover:text-white">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<div id="table-list" class="flex-1 overflow-y-auto custom-scrollbar py-4 px-2 space-y-1">
<div class="p-10 text-center opacity-10 italic text-xs uppercase tracking-widest">No Database Loaded</div>
</div>
<!-- Mobile Footer Links -->
<div class="lg:hidden p-6 border-t border-white/5 space-y-4">
<h3 class="text-[9px] font-black uppercase tracking-[0.2em] text-white/20 mb-2">Systems</h3>
<div class="grid grid-cols-2 gap-2">
<a href="about.html" class="flex items-center justify-center py-3 bg-white/5 rounded text-[10px] font-bold uppercase tracking-widest text-white/40 hover:text-white hover:bg-white/10 transition-all">About</a>
<a href="help.html" class="flex items-center justify-center py-3 bg-white/5 rounded text-[10px] font-bold uppercase tracking-widest text-white/40 hover:text-white hover:bg-white/10 transition-all">Help</a>
</div>
</div>
</aside>
<!-- Dynamic Content -->
<div id="content-area" class="flex-1 flex flex-col min-w-0 bg-zinc-950/20">
<!-- Global Data Header (Replacing Command Panel) -->
<section id="table-header" class="h-14 border-b border-white/5 flex items-center justify-between px-6 bg-black shrink-0">
<div class="flex items-center gap-4">
<span class="text-[10px] font-black uppercase tracking-[0.3em] text-white/20 italic">Active Workspace /</span>
<span class="text-xs font-black uppercase tracking-widest text-white" id="current-table-name">SELECT_STATE</span>
</div>
<div class="flex items-center gap-4">
<div id="status-ledger" class="hidden md:flex items-center gap-3 pr-4 border-r border-white/10">
<span class="text-[9px] font-bold text-white/20 uppercase tracking-widest">Dataset:</span>
<span id="rows-info" class="text-[10px] font-mono text-white/60">0 ROWS</span>
</div>
<!-- Scroll Controls -->
<div class="flex items-center bg-white/5 rounded-md p-1">
<button id="scroll-left" class="p-1.5 hover:bg-white/10 text-white/40 hover:text-white transition-colors" title="Scroll Left">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
</button>
<div class="w-[1px] h-4 bg-white/10 mx-1"></div>
<button id="scroll-right" class="p-1.5 hover:bg-white/10 text-white/40 hover:text-white transition-colors" title="Scroll Right">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<button id="refresh-view" class="text-[10px] font-black uppercase tracking-widest text-white/40 hover:text-white flex items-center gap-2">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
Refresh Kernel
</button>
</div>
</section>
<!-- Unified Results Section (Full Height) -->
<section id="results-pane" class="flex-1 flex flex-col min-h-0 bg-black relative">
<!-- Table Content -->
<div id="db-output" class="flex-1 overflow-auto relative custom-scrollbar">
<div class="h-full flex items-center justify-center text-white/10 uppercase tracking-[2em] font-black text-center text-[10px]">Ready For Mount</div>
</div>
</section>
</div>
<!-- Inspector Drawer (Right) -->
<aside id="inspector" class="fixed inset-y-0 right-0 w-full sm:w-96 bg-zinc-950 border-l border-white/10 transform translate-x-full transition-transform duration-300 z-[60] flex flex-col p-6 shadow-2xl">
<div class="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
<div>
<h3 class="text-[10px] font-black uppercase tracking-widest text-white/40 mb-1">Inspector</h3>
<p id="meta-column" class="text-xs font-mono text-white/80">NULL_PTR</p>
</div>
<button id="close-inspector" class="text-white/20 hover:text-white">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<div class="flex-1 space-y-6">
<div>
<label class="text-[9px] uppercase tracking-tighter text-white/20 mb-2 block">Source Table</label>
<div id="meta-table" class="bg-white/5 p-3 text-[11px] font-bold text-white/40 border border-white/5">Unknown</div>
</div>
<div class="flex-1">
<label class="text-[9px] uppercase tracking-tighter text-white/20 mb-2 block">Data Buffer</label>
<textarea id="cell-value-editor" class="w-full h-40 bg-black border border-white/10 p-4 text-xs font-mono text-white/90 focus:border-white/40 outline-none transition-all resize-none custom-scrollbar"></textarea>
</div>
<div class="grid grid-cols-2 gap-3 pt-6 border-t border-white/5">
<button id="copy-cell" class="bg-white/[0.05] hover:bg-white/[0.1] text-white/60 hover:text-white py-3 rounded text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-2 transition-all active:scale-95">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
Copy
</button>
<button id="delete-cell" class="bg-red-500/10 hover:bg-red-500/20 text-red-400 hover:text-red-300 py-3 rounded text-[10px] font-black uppercase tracking-widest transition-all active:scale-95">
Nullify
</button>
<button id="save-cell" class="col-span-2 bg-white text-black hover:bg-zinc-200 py-4 rounded text-[10px] font-black uppercase tracking-widest shadow-xl transition-all active:scale-95">
Commit Changes
</button>
</div>
</div>
<div class="text-[9px] text-white/10 uppercase tracking-widest text-center mt-4">Integrity Hash: <span id="integrity-hash">Verified</span></div>
</aside>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/sql-wasm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/sql/sql.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>