-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathsql.html
More file actions
472 lines (440 loc) · 22.8 KB
/
Copy pathsql.html
File metadata and controls
472 lines (440 loc) · 22.8 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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
<!doctype html>
<html lang="de" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SQL-Labor | AP1 Tracker</title>
<link rel="canonical" href="https://ap1.cwillam.de/sql.html" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<!-- PWA Meta Tags -->
<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="favicon.svg" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#09090b" />
<!-- Preload Local Typography -->
<link rel="preload" href="assets/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="assets/fonts/Inter-SemiBold.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="assets/fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin />
<!-- Tailwind 3 Engine (Local, Zero-CDN) -->
<script src="assets/js/tailwind.js?v=3.0.0"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
fontFamily: {
sans: [
"Inter",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"sans-serif",
],
mono: [
"ui-monospace",
"SFMono-Regular",
"JetBrains Mono",
"Menlo",
"Monaco",
"Consolas",
"monospace",
],
},
colors: {
dark: {
bg: "#09090b", // Pure obsidian / Zinc 950
card: "#121215", // Dense workbench surface
"card-hover": "#18181d",
border: "#23232a", // Hairline border
"border-subtle": "#191920",
text: "#f4f4f5", // High-contrast Zinc 100
muted: "#a1a1aa", // Zinc 400
dim: "#71717a", // Zinc 500
accent: "#3b82f6", // Electric Cobalt
"accent-dim": "rgba(59, 130, 246, 0.12)",
success: "#10b981", // Crisp Emerald
warning: "#f59e0b", // Amber
danger: "#ef4444", // Crimson
},
},
},
},
};
</script>
<!-- Custom High-Craft CSS Tokens & Keycaps -->
<link href="assets/css/style.css?v=3.0.0" rel="stylesheet" />
<style>
.sql-next-pulse {
animation: sql-pulse 1.4s ease-in-out infinite;
border-color: rgba(16, 185, 129, 0.5) !important;
color: #ffffff !important;
background-color: #10b981 !important;
}
@keyframes sql-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.35);
transform: scale(1.03);
}
}
.sql-next-pulse:hover {
animation: none;
transform: scale(1.04);
box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.5);
}
</style>
</head>
<body class="flex flex-col min-h-screen bg-dark-bg text-dark-text antialiased selection:bg-blue-600 selection:text-white">
<!-- ============================================================
TOP COMMAND BAR (Sticky Hairline Header)
============================================================ -->
<header class="sticky top-0 z-40 w-full border-b border-dark-border bg-dark-bg/90 backdrop-blur-md">
<div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
<!-- Left: Back to Dashboard & Title -->
<a href="index.html" class="flex items-center gap-2.5 sm:gap-3 group focus:outline-none shrink-0">
<div class="w-8 h-8 rounded-lg border border-dark-border bg-dark-card group-hover:border-dark-strong flex items-center justify-center text-dark-muted group-hover:text-white transition-all">
<i data-lucide="arrow-left" class="w-4 h-4 transition-transform group-hover:-translate-x-0.5"></i>
</div>
<div class="flex items-center gap-2">
<span class="kbd-cap bg-blue-600/15 border-blue-500/40 text-blue-400 font-bold px-2 py-0.5 text-xs">AP1</span>
<div class="flex flex-col">
<span class="font-bold text-sm tracking-tight text-white group-hover:text-blue-400 transition-colors">
SQL-Labor
</span>
<span class="text-[10px] font-mono text-dark-dim leading-none hidden sm:block">Interaktiver Query-Trainer</span>
</div>
</div>
</a>
<!-- Right: Tools, Telemetry Badges & Discord -->
<div class="flex items-center gap-2 sm:gap-3">
<!-- Quick Tools Switcher -->
<div class="hidden lg:flex items-center gap-1.5 border-r border-dark-border pr-3 mr-1">
<a href="index.html" class="px-2.5 py-1.5 rounded-lg text-xs font-mono text-dark-muted hover:text-white hover:bg-dark-card transition-colors flex items-center gap-1.5" title="Dashboard">
<i data-lucide="layout-dashboard" class="w-3.5 h-3.5 text-blue-400"></i>
<span>Dashboard</span>
</a>
<a href="subnet.html" class="px-2.5 py-1.5 rounded-lg text-xs font-mono text-dark-muted hover:text-white hover:bg-dark-card transition-colors flex items-center gap-1.5" title="Subnetz-Trainer">
<i data-lucide="network" class="w-3.5 h-3.5 text-blue-400"></i>
<span>Subnetz</span>
</a>
<a href="pseudocode.html" class="px-2.5 py-1.5 rounded-lg text-xs font-mono text-dark-muted hover:text-white hover:bg-dark-card transition-colors flex items-center gap-1.5" title="Pseudocode-Labor">
<i data-lucide="code" class="w-3.5 h-3.5 text-purple-400"></i>
<span>Pseudocode</span>
</a>
<a href="glossar.html" class="px-2.5 py-1.5 rounded-lg text-xs font-mono text-dark-muted hover:text-white hover:bg-dark-card transition-colors flex items-center gap-1.5" title="Fach-Glossar">
<i data-lucide="book-open" class="w-3.5 h-3.5 text-amber-400"></i>
<span>Glossar</span>
</a>
<a href="help.html" class="px-2.5 py-1.5 rounded-lg text-xs font-mono text-dark-muted hover:text-white hover:bg-dark-card transition-colors flex items-center gap-1.5" title="Hilfe & FAQ">
<i data-lucide="help-circle" class="w-3.5 h-3.5 text-sky-400"></i>
<span>Hilfe</span>
</a>
</div>
<!-- Streak Badge -->
<div
id="streakBadge"
class="font-mono text-xs font-bold text-dark-muted flex items-center gap-1.5 px-2.5 py-1 rounded-md border border-dark-border bg-dark-card"
>
<i data-lucide="flame" class="w-3.5 h-3.5 text-dark-dim"></i> 0
</div>
<!-- XP Badge -->
<div
id="xpBadge"
class="hidden sm:flex font-mono text-xs font-bold text-emerald-400 items-center gap-1.5 px-2.5 py-1 rounded-md border border-dark-border bg-dark-card"
>
<i data-lucide="zap" class="w-3.5 h-3.5 text-emerald-400"></i> 0 XP
</div>
<!-- Support Button -->
<button
type="button"
onclick="openSupportModal()"
class="px-2.5 py-1.5 rounded-lg border border-dark-border hover:border-[#FFDD00]/40 bg-dark-card hover:bg-[#FFDD00]/10 text-dark-muted hover:text-[#FFDD00] transition-all text-xs flex items-center gap-1.5 shrink-0"
title="Support / Projekt unterstützen"
>
<i data-lucide="coffee" class="w-4 h-4 text-[#FFDD00]"></i>
<span class="hidden sm:inline font-mono text-[11px] font-medium">Support</span>
</button>
<!-- Discord -->
<a
href="https://discord.gg/5BM5YJadDs"
target="_blank"
rel="noopener"
class="px-2.5 py-1.5 rounded-lg border border-dark-border hover:border-[#5865F2]/50 bg-dark-card hover:bg-[#5865F2]/10 text-dark-muted hover:text-white transition-all text-xs flex items-center gap-1.5 shrink-0"
title="Discord: Lerngruppen & Fragen"
>
<i data-lucide="message-square" class="w-4 h-4 text-[#5865F2]"></i>
<span class="hidden sm:inline font-mono text-[11px]">Discord</span>
</a>
</div>
</div>
</header>
<!-- ============================================================
MAIN WORKSPACE CONTAINER
============================================================ -->
<main class="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 py-6 space-y-6">
<!-- Workbench Header -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-dark-border">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="kbd-cap text-[9px] text-blue-400 border-blue-900/40 bg-blue-950/20">INTERAKTIVES LABOR</span>
<span class="font-mono text-[11px] text-dark-dim uppercase tracking-wider">In-Memory Mock DB</span>
</div>
<h1 class="text-xl sm:text-2xl font-black text-white tracking-tight flex items-center gap-2.5">
<i data-lucide="database" class="w-5 h-5 text-emerald-400"></i>
<span>SQL-Labor & Abfrage-Trainer</span>
</h1>
</div>
<p class="text-xs text-dark-muted font-mono max-w-md leading-relaxed">
Tippe deine SQL-Query in den Editor und drücke <kbd class="kbd-cap text-[10px]">Strg+Enter</kbd> zum Ausführen.
</p>
</div>
<!-- 2-Column Workbench Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-5">
<!-- ============================================================
LEFT: Schema-Explorer (4 Columns)
============================================================ -->
<aside class="lg:col-span-4 space-y-4">
<!-- Schema Explorer Card -->
<div class="p-4 rounded-xl border border-dark-border bg-dark-card space-y-3 shadow-sm">
<div class="flex items-center justify-between border-b border-dark-border pb-2.5">
<h2 class="font-bold text-xs uppercase tracking-wider text-white font-mono flex items-center gap-2">
<i data-lucide="table-properties" class="w-4 h-4 text-blue-400"></i>
<span>Datenbank-Schema</span>
</h2>
<button
id="btnReset"
class="px-2 py-1 rounded text-[10px] font-mono text-dark-muted hover:text-white border border-dark-border bg-dark-bg hover:border-dark-strong transition-colors flex items-center gap-1"
title="Mock-Datenbank auf Originalzustand zurücksetzen"
>
<i data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset
</button>
</div>
<!-- Dynamic Schema Output -->
<div id="schemaExplorer" class="space-y-3 font-mono text-xs"></div>
</div>
<!-- Sandbox Guarantee Notice -->
<div class="p-4 rounded-xl border border-dark-border bg-dark-card text-xs text-dark-muted leading-relaxed space-y-2">
<h3 class="font-bold text-white text-xs font-mono flex items-center gap-1.5">
<i data-lucide="shield-check" class="w-4 h-4 text-emerald-400"></i>
<span>100% Lokale Sandbox</span>
</h3>
<p>
Alle Tabellen liegen als Javascript-Objekte im Browser-Speicher. Du kannst gefahrlos Abfragen testen, modifizieren oder zurücksetzen. Keine Serververbindung.
</p>
</div>
</aside>
<!-- ============================================================
RIGHT: Task, Editor & Live Results (8 Columns)
============================================================ -->
<section class="lg:col-span-8 space-y-4">
<!-- 01 Task Card -->
<div class="p-5 rounded-xl border border-dark-border bg-dark-card space-y-3 shadow-sm">
<div class="flex items-center justify-between flex-wrap gap-2 border-b border-dark-border pb-3">
<div class="flex items-center gap-2">
<span
id="taskLevel"
class="kbd-cap bg-blue-600/20 text-blue-400 border-blue-500/30 text-[10px]"
>
Stufe 1
</span>
<span id="taskCounter" class="text-dark-muted text-xs font-mono font-semibold">
1 / 10
</span>
</div>
<!-- Next / Prev Controls -->
<div class="flex items-center gap-1.5">
<button
id="btnPrev"
class="px-2.5 py-1.5 bg-dark-bg border border-dark-border hover:border-dark-strong rounded-lg text-dark-muted hover:text-white text-xs font-mono flex items-center gap-1 transition-colors"
>
<i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
<span>Zurück</span>
</button>
<button
id="btnNext"
class="px-3 py-1.5 bg-dark-bg border border-dark-border hover:border-dark-strong rounded-lg text-dark-muted hover:text-white text-xs font-mono font-semibold flex items-center gap-1 transition-colors"
>
<span>Weiter</span>
<i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
</button>
</div>
</div>
<!-- Task Title & Prompt -->
<div>
<h2 id="taskTitle" class="text-base sm:text-lg font-bold text-white tracking-tight"></h2>
<p id="taskPrompt" class="text-xs sm:text-sm text-dark-muted leading-relaxed mt-1"></p>
</div>
</div>
<!-- 02 SQL-Editor Card -->
<div class="p-4 rounded-xl border border-dark-border bg-dark-card space-y-2.5 shadow-sm">
<div class="flex items-center justify-between px-0.5">
<div class="flex items-center gap-2">
<span class="font-mono text-[10px] uppercase font-bold tracking-wider text-dark-dim">
// SQL-QUERY
</span>
<span class="text-[10px] font-mono text-dark-dim hidden sm:inline">
(Strg+Enter zum Ausführen)
</span>
</div>
<button
id="btnRun"
class="px-3.5 py-1.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-mono font-semibold text-xs transition-colors flex items-center gap-1.5 shadow-sm"
>
<i data-lucide="play" class="w-3.5 h-3.5 fill-white"></i>
<span>Ausführen</span>
</button>
</div>
<textarea
id="editor"
spellcheck="false"
class="w-full h-32 bg-dark-bg border border-dark-border rounded-lg p-3 font-mono text-xs sm:text-sm text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 resize-y leading-relaxed transition-colors selection:bg-blue-600 selection:text-white"
placeholder="SELECT * FROM Mitarbeiter;"
></textarea>
</div>
<!-- 03 Dynamic Feedback Banner -->
<div id="feedback"></div>
<!-- 04 Live Results Card -->
<div class="p-4 rounded-xl border border-dark-border bg-dark-card space-y-3 shadow-sm">
<div class="flex items-center justify-between border-b border-dark-border pb-2">
<h2 class="font-bold text-xs uppercase tracking-wider text-white font-mono flex items-center gap-2">
<i data-lucide="table-2" class="w-4 h-4 text-emerald-400"></i>
<span>Live-Ergebnis</span>
</h2>
</div>
<div id="resultTable" class="min-h-[60px]"></div>
</div>
</section>
</div>
</main>
<!-- ============================================================
FOOTER
============================================================ -->
<footer class="border-t border-dark-border mt-auto bg-dark-bg/60 text-xs text-dark-dim font-mono">
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<span>cwillam © 2026</span>
<span>·</span>
<span>Open Source & 100% Lokal</span>
</div>
<div class="flex items-center gap-4 flex-wrap justify-center text-dark-muted">
<button onclick="openSupportModal()" class="hover:text-[#FFDD00] transition-colors flex items-center gap-1 font-bold">
<i data-lucide="coffee" class="w-3.5 h-3.5 text-[#FFDD00]"></i> Support
</button>
<a href="index.html" class="hover:text-white transition-colors">Dashboard</a>
<a href="subnet.html" class="hover:text-white transition-colors">Subnetz-Trainer</a>
<a href="pseudocode.html" class="hover:text-white transition-colors">Pseudocode</a>
<a href="glossar.html" class="hover:text-white transition-colors">Glossar</a>
<a href="help.html" class="hover:text-white transition-colors">Hilfe & FAQ</a>
<a href="https://discord.gg/5BM5YJadDs" target="_blank" rel="noopener" class="hover:text-[#5865F2] transition-colors flex items-center gap-1">
<i data-lucide="message-square" class="w-3.5 h-3.5"></i> Discord
</a>
</div>
</div>
</footer>
<!-- Standardized Support Modal -->
<div
id="supportModal"
class="fixed inset-0 z-50 bg-black/85 backdrop-blur-sm hidden flex items-center justify-center p-4"
onclick="if(event.target === this) closeSupportModal()"
>
<div class="w-full max-w-md bg-dark-card border border-dark-border rounded-2xl p-6 shadow-2xl space-y-4 relative">
<div class="flex items-center justify-between pb-3 border-b border-dark-border">
<div class="flex items-center gap-2.5">
<div class="w-8 h-8 rounded-lg bg-[#FFDD00]/15 border border-[#FFDD00]/30 flex items-center justify-center text-[#FFDD00]">
<i data-lucide="coffee" class="w-4 h-4"></i>
</div>
<div>
<h3 class="font-bold text-base text-white leading-tight">Projekt unterstützen</h3>
<span class="text-[10px] font-mono text-dark-dim leading-none">Freiwillig & 100% werbefrei</span>
</div>
</div>
<button
onclick="closeSupportModal()"
class="w-8 h-8 rounded-lg border border-dark-border hover:border-dark-border/80 bg-dark-bg hover:bg-dark-border/40 text-dark-muted hover:text-white transition-all flex items-center justify-center"
title="Schließen"
aria-label="Modal schließen"
>
<i data-lucide="x" class="w-4 h-4"></i>
</button>
</div>
<p class="text-xs text-dark-muted leading-relaxed">
Die Tracker sind komplett kostenlos, werbefrei und quelloffen. Wenn dir das Tool bei der Prüfungsvorbereitung hilft, freue ich mich riesig über einen Kaffee!
</p>
<div class="flex flex-col gap-3 pt-1">
<!-- PayPal Button -->
<a
href="https://www.paypal.com/paypalme/parablepanorama"
target="_blank"
rel="noopener"
class="flex items-center justify-between p-3.5 rounded-xl bg-[#0070BA]/10 border border-[#0070BA]/30 hover:border-[#0070BA]/60 hover:bg-[#0070BA]/20 transition-all group"
>
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-lg bg-[#0070BA]/20 flex items-center justify-center text-[#0079C1] group-hover:scale-105 transition-transform">
<i data-lucide="wallet" class="w-4 h-4"></i>
</div>
<div class="flex flex-col text-left">
<span class="font-bold text-white text-xs">PayPal</span>
<span class="text-[10px] text-dark-muted font-mono">paypal.me/parablepanorama · Schnell & unkompliziert</span>
</div>
</div>
<i data-lucide="chevron-right" class="w-4 h-4 text-dark-muted group-hover:translate-x-0.5 transition-transform"></i>
</a>
<!-- Buy Me A Coffee Button -->
<a
href="https://buymeacoffee.com/cwillam"
target="_blank"
rel="noopener"
class="flex items-center justify-between p-3.5 rounded-xl bg-[#FFDD00]/10 border border-[#FFDD00]/30 hover:border-[#FFDD00]/60 hover:bg-[#FFDD00]/20 transition-all group"
>
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-lg bg-[#FFDD00]/20 flex items-center justify-center text-[#FFDD00] group-hover:scale-105 transition-transform">
<i data-lucide="coffee" class="w-4 h-4"></i>
</div>
<div class="flex flex-col text-left">
<span class="font-bold text-white text-xs">Buy Me a Coffee</span>
<span class="text-[10px] text-dark-muted font-mono">buymeacoffee.com/cwillam · Einmalig spenden</span>
</div>
</div>
<i data-lucide="chevron-right" class="w-4 h-4 text-dark-muted group-hover:translate-x-0.5 transition-transform"></i>
</a>
</div>
<div class="pt-2 border-t border-dark-border/60 flex items-center justify-center gap-1.5 text-[11px] font-mono text-dark-dim">
<i data-lucide="shield-check" class="w-3.5 h-3.5 text-emerald-400"></i>
<span>Sichere Weiterleitung · Keine Datenübertragung</span>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/lucide.min.js?v=3.0.0"></script>
<script src="assets/js/confetti.js?v=3.0.0"></script>
<script src="assets/js/sql.js?v=3.0.0"></script>
<script>
function openSupportModal() {
const modal = document.getElementById("supportModal");
if (modal) {
modal.classList.remove("hidden");
if (window.lucide) lucide.createIcons();
}
}
function closeSupportModal() {
const modal = document.getElementById("supportModal");
if (modal) modal.classList.add("hidden");
}
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") closeSupportModal();
});
if (window.lucide) lucide.createIcons();
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker.register("sw.js?v=3.0.0").catch(() => {});
});
}
</script>
</body>
</html>