Skip to content

Commit ef1e695

Browse files
hjk-makerhjk-maker
authored
Create index.html
1 parent cbd324f commit ef1e695

1 file changed

Lines changed: 274 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
<!DOCTYPE html>
2+
<html lang="en" data-theme="quantum-dark">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>VSQL Quantum Interface</title>
7+
<style>
8+
/* Quantum CSS - Minimal Version */
9+
:root {
10+
--q-primary: #6e48aa;
11+
--q-secondary: #9d50bb;
12+
--q-accent: #4776e6;
13+
--q-dark: #1a1a2e;
14+
--q-light: #f8f9fa;
15+
--q-success: #4caf50;
16+
--q-warning: #ff9800;
17+
--q-danger: #f44336;
18+
--q-info: #2196f3;
19+
}
20+
21+
/* Base Styles */
22+
* { margin: 0; padding: 0; box-sizing: border-box; }
23+
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f5f5f5; color: #333; line-height: 1.6; }
24+
25+
/* Layout */
26+
.app { display: flex; min-height: 100vh; }
27+
28+
/* Sidebar */
29+
.sidebar {
30+
width: 220px; background: var(--q-dark); color: white;
31+
display: flex; flex-direction: column;
32+
}
33+
.sidebar-header {
34+
padding: 1rem; display: flex; justify-content: space-between;
35+
align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1);
36+
}
37+
.logo { font-size: 1.3rem; font-weight: bold; }
38+
.accent { color: var(--q-accent); }
39+
.sidebar-nav { flex: 1; padding: 1rem 0; }
40+
.sidebar-nav ul { list-style: none; }
41+
.nav-item a {
42+
display: flex; align-items: center; padding: 0.7rem 1rem;
43+
color: rgba(255,255,255,0.7); text-decoration: none;
44+
}
45+
.nav-item a:hover { background: rgba(255,255,255,0.05); color: white; }
46+
.nav-item.active a { background: var(--q-primary); color: white; }
47+
.nav-icon { margin-right: 0.7rem; width: 20px; text-align: center; }
48+
49+
/* Main Content */
50+
.main { flex: 1; display: flex; flex-direction: column; }
51+
.topbar {
52+
padding: 0.7rem 1.5rem; background: white;
53+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
54+
display: flex; justify-content: space-between; align-items: center;
55+
}
56+
.page-title { font-size: 1.2rem; font-weight: 600; }
57+
.content { flex: 1; padding: 1.5rem; background: #f9f9f9; }
58+
59+
/* Grid & Cards */
60+
.grid { display: grid; gap: 1rem; }
61+
.grid-cols-1 { grid-template-columns: 1fr; }
62+
@media (min-width: 768px) {
63+
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
64+
}
65+
.col-span-2 { grid-column: span 2; }
66+
.card {
67+
background: white; border-radius: 6px;
68+
box-shadow: 0 2px 4px rgba(0,0,0,0.05); overflow: hidden;
69+
}
70+
.card-header {
71+
padding: 1rem; border-bottom: 1px solid #eee;
72+
display: flex; justify-content: space-between; align-items: center;
73+
}
74+
.card-body { padding: 1rem; }
75+
76+
/* Buttons */
77+
.btn {
78+
padding: 0.5rem 1rem; border-radius: 4px; border: none;
79+
font-weight: 500; cursor: pointer; display: inline-flex;
80+
align-items: center; gap: 0.5rem;
81+
}
82+
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
83+
.btn-primary { background: var(--q-primary); color: white; }
84+
.btn-secondary { background: var(--q-secondary); color: white; }
85+
86+
/* Table */
87+
.table { width: 100%; border-collapse: collapse; }
88+
.table th, .table td { padding: 0.7rem; text-align: left; border-bottom: 1px solid #eee; }
89+
.table th { background: #f5f5f5; font-weight: 600; }
90+
.table-striped tr:nth-child(even) { background: #f9f9f9; }
91+
92+
/* Code Editor */
93+
.code-editor {
94+
background: var(--q-dark); color: #f8f8f2; border-radius: 4px;
95+
padding: 1rem; font-family: monospace; min-height: 200px;
96+
}
97+
98+
/* Badges */
99+
.badge {
100+
display: inline-block; padding: 0.2rem 0.5rem;
101+
font-size: 0.75rem; font-weight: 600; border-radius: 4px;
102+
}
103+
.badge-success { background: var(--q-success); color: white; }
104+
105+
/* Utility Classes */
106+
.hidden { display: none; }
107+
.text-center { text-align: center; }
108+
.mt-2 { margin-top: 0.5rem; }
109+
</style>
110+
</head>
111+
<body>
112+
<div class="app">
113+
<!-- Sidebar -->
114+
<div class="sidebar">
115+
<div class="sidebar-header">
116+
<div class="logo">VSQL<span class="accent">Q</span></div>
117+
</div>
118+
<nav class="sidebar-nav">
119+
<ul>
120+
<li class="nav-item active">
121+
<a href="#dashboard">
122+
<span class="nav-icon">📊</span>
123+
<span>Dashboard</span>
124+
</a>
125+
</li>
126+
<li class="nav-item">
127+
<a href="#query">
128+
<span class="nav-icon">🔍</span>
129+
<span>Query Builder</span>
130+
</a>
131+
</li>
132+
<li class="nav-item">
133+
<a href="#visualize">
134+
<span class="nav-icon">📈</span>
135+
<span>Visualizer</span>
136+
</a>
137+
</li>
138+
<li class="nav-item">
139+
<a href="#schema">
140+
<span class="nav-icon">🗃️</span>
141+
<span>Schema</span>
142+
</a>
143+
</li>
144+
</ul>
145+
</nav>
146+
</div>
147+
148+
<!-- Main Content -->
149+
<main class="main">
150+
<header class="topbar">
151+
<h1 class="page-title">VSQL Query Interface</h1>
152+
<div>
153+
<button class="btn btn-primary btn-sm" id="execute-btn">
154+
<span>▶</span> Execute
155+
</button>
156+
</div>
157+
</header>
158+
159+
<div class="content">
160+
<div class="grid grid-cols-1 grid-cols-3">
161+
<!-- Query Editor -->
162+
<div class="card col-span-2">
163+
<div class="card-header">
164+
<h3>VSQL Query Editor</h3>
165+
</div>
166+
<div class="card-body">
167+
<div class="code-editor" id="query-editor">
168+
-- Sample VSQL Query
169+
SELECT * FROM virtual_data
170+
WHERE category = 'analytics'
171+
AND created_at > NOW() - INTERVAL '7 days'
172+
ORDER BY views DESC
173+
LIMIT 100;
174+
</div>
175+
</div>
176+
</div>
177+
178+
<!-- Results -->
179+
<div class="card">
180+
<div class="card-header">
181+
<h3>Query Results</h3>
182+
</div>
183+
<div class="card-body">
184+
<div class="table-responsive">
185+
<table class="table table-striped" id="results-table">
186+
<thead>
187+
<tr>
188+
<th>ID</th>
189+
<th>Name</th>
190+
<th>Value</th>
191+
<th>Status</th>
192+
</tr>
193+
</thead>
194+
<tbody>
195+
<tr>
196+
<td>1</td>
197+
<td>users</td>
198+
<td>1,024</td>
199+
<td><span class="badge badge-success">active</span></td>
200+
</tr>
201+
<tr>
202+
<td>2</td>
203+
<td>products</td>
204+
<td>542</td>
205+
<td><span class="badge badge-success">active</span></td>
206+
</tr>
207+
</tbody>
208+
</table>
209+
</div>
210+
</div>
211+
</div>
212+
213+
<!-- Visualization -->
214+
<div class="card col-span-3">
215+
<div class="card-header">
216+
<h3>Data Visualization</h3>
217+
</div>
218+
<div class="card-body">
219+
<div id="visualization">
220+
<canvas id="chart" width="100%" height="300"></canvas>
221+
</div>
222+
</div>
223+
</div>
224+
</div>
225+
</div>
226+
</main>
227+
</div>
228+
229+
<script>
230+
// Simple JavaScript for demo purposes
231+
document.addEventListener('DOMContentLoaded', function() {
232+
// Execute button click handler
233+
document.getElementById('execute-btn').addEventListener('click', function() {
234+
const btn = this;
235+
btn.innerHTML = '⏳ Executing...';
236+
237+
// Simulate query execution
238+
setTimeout(function() {
239+
btn.innerHTML = '▶ Execute';
240+
alert('Query executed successfully!');
241+
242+
// In a real app, you would update the results table here
243+
}, 1500);
244+
});
245+
246+
// Simple chart rendering
247+
const canvas = document.getElementById('chart');
248+
if (canvas.getContext) {
249+
const ctx = canvas.getContext('2d');
250+
251+
// Draw a simple bar chart
252+
ctx.fillStyle = '#6e48aa';
253+
ctx.fillRect(50, 250, 60, -150); // Bar 1
254+
ctx.fillStyle = '#9d50bb';
255+
ctx.fillRect(150, 250, 60, -100); // Bar 2
256+
ctx.fillStyle = '#4776e6';
257+
ctx.fillRect(250, 250, 60, -200); // Bar 3
258+
259+
// Add labels
260+
ctx.fillStyle = '#333';
261+
ctx.font = '12px sans-serif';
262+
ctx.fillText('Users', 60, 270);
263+
ctx.fillText('Products', 160, 270);
264+
ctx.fillText('Orders', 260, 270);
265+
266+
// Y-axis labels
267+
ctx.fillText('200', 20, 100);
268+
ctx.fillText('100', 20, 200);
269+
ctx.fillText('0', 20, 250);
270+
}
271+
});
272+
</script>
273+
</body>
274+
</html>

0 commit comments

Comments
 (0)