Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
93 lines (87 loc) · 4.5 KB
/
Copy pathindex.html
File metadata and controls
93 lines (87 loc) · 4.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Web SQL Studio Pro</title>
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="top-nav">
<div class="nav-left">
<button class="mobile-menu-btn" onclick="toggleSidebar()">
<i class="ph ph-list"></i>
</button>
<div class="logo">
<i class="ph-fill ph-database"></i>
<span class="logo-text">Web SQL Studio Pro</span>
</div>
<button class="nav-btn" onclick="executeSQL()" title="Execute">
<i class="ph-fill ph-play" style="color: var(--success-color);"></i> <span class="btn-text">Execute</span>
</button>
<button class="nav-btn" onclick="clearEditor()" title="Clear">
<i class="ph ph-eraser"></i> <span class="btn-text">Clear</span>
</button>
<button class="nav-btn" onclick="resetDatabase()" title="Reset DB">
<i class="ph ph-arrow-counter-clockwise" style="color: var(--danger-color);"></i> <span class="btn-text">Reset Server</span>
</button>
</div>
<div class="nav-right">
<button class="theme-toggle" onclick="cycleTheme()" id="theme-btn" title="Toggle Theme">
<i class="ph ph-desktop"></i>
</button>
</div>
</header>
<main class="workspace">
<div class="sidebar-overlay" id="sidebar-overlay" onclick="toggleSidebar()"></div>
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<i class="ph ph-plugs-connected"></i> Object Explorer
<button class="close-sidebar-btn" onclick="toggleSidebar()">
<i class="ph ph-x"></i>
</button>
</div>
<div class="sidebar-content">
<ul class="tree-view" id="db-tree">
<li>
<details open>
<summary><i class="ph-fill ph-hard-drives"></i> Local Server</summary>
<ul>
<li>
<details open>
<summary><i class="ph-fill ph-folder"></i> Databases</summary>
<ul id="database-list"></ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</div>
</aside>
<section class="editor-area">
<div class="editor-container">
<div class="editor-tabs">
<div class="tab active">Query.sql</div>
</div>
<textarea id="sql-input" spellcheck="false" placeholder="-- Welcome to Web SQL Studio Pro -- Try creating a database and some tables: CREATE DATABASE ShopDB; USE ShopDB; CREATE TABLE Users (ID INT, Username VARCHAR, Email VARCHAR); INSERT INTO Users VALUES (1, 'Admin', 'admin@shop.com'); SELECT * FROM Users;"></textarea>
<ul id="autocomplete-list" class="autocomplete-items"></ul>
</div>
<div class="results-container">
<div class="results-tabs">
<div class="tab active" id="tab-messages" onclick="switchTab('messages')"><i class="ph ph-chat-text"></i> <span class="tab-text">Messages</span></div>
<div class="tab" id="tab-results" onclick="switchTab('results')"><i class="ph ph-table"></i> <span class="tab-text">Results</span></div>
<div class="tab" id="tab-diagram" onclick="switchTab('diagram')"><i class="ph ph-projector-screen-chart"></i> <span class="tab-text">Diagram</span></div>
</div>
<div class="results-content">
<pre id="output-console">Ready.</pre>
<div id="output-table-container" style="display: none;"></div>
<div id="diagram-container" style="display: none;"></div>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>