-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathsubnet.html
More file actions
539 lines (506 loc) · 28.9 KB
/
Copy pathsubnet.html
File metadata and controls
539 lines (506 loc) · 28.9 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
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
<!doctype html>
<html lang="de" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Subnetz- & IP-Labor | AP1 Tracker</title>
<link rel="canonical" href="https://ap1.cwillam.de/subnet.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" />
</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-5xl 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">
Subnetz-Labor
</span>
<span class="text-[10px] font-mono text-dark-dim leading-none hidden sm:block">IPv4 CIDR & IPv6 Trainer</span>
</div>
</div>
</a>
<!-- Right: Tools Quick Switcher & Discord -->
<div class="flex items-center gap-2">
<div class="hidden md: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="sql.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="SQL-Labor">
<i data-lucide="database" class="w-3.5 h-3.5 text-emerald-400"></i>
<span>SQL</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>
<!-- 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>
<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
============================================================ -->
<main class="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6 py-8 space-y-6">
<!-- Workbench Header & Segmented Mode Switcher -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-2 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">IHK AP1 Standard</span>
</div>
<h1 class="text-xl sm:text-2xl font-black text-white tracking-tight">
Subnetz- & IP-Trainer
</h1>
</div>
<!-- Segmented Tab Switcher -->
<div class="p-1 rounded-xl border border-dark-border bg-dark-card inline-flex items-center gap-1 self-start sm:self-center">
<button
id="btn-ipv4"
onclick="switchTab('ipv4')"
class="px-4 py-2 rounded-lg text-xs font-mono font-semibold transition-colors bg-blue-600/15 border border-blue-500/40 text-blue-400"
>
IPv4 Subnetting
</button>
<button
id="btn-ipv6"
onclick="switchTab('ipv6')"
class="px-4 py-2 rounded-lg text-xs font-mono font-semibold transition-colors text-dark-muted hover:text-white border border-transparent"
>
IPv6 Kompression
</button>
</div>
</div>
<!-- ============================================================
TAB 1: IPv4 SUBNETTING WORKBENCH
============================================================ -->
<div id="tab-ipv4" class="space-y-6">
<div class="p-6 rounded-xl border border-dark-border bg-dark-card relative overflow-hidden space-y-6 shadow-sm">
<!-- Card Header & Streak -->
<div class="flex items-center justify-between border-b border-dark-border pb-3.5">
<div class="flex items-center gap-2">
<span class="font-mono text-[11px] font-bold text-dark-muted uppercase tracking-wider">// AUFGABE</span>
<span class="text-dark-dim text-xs font-mono">CIDR-Berechnung</span>
</div>
<div id="ipv4Streak" 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-bg">
<i data-lucide="flame" class="w-3.5 h-3.5 text-dark-dim"></i> 0er Streak
</div>
</div>
<!-- Target IP Hero -->
<div class="text-center py-4 px-6 rounded-xl border border-dark-border bg-dark-bg/60">
<span class="text-[10px] uppercase font-mono tracking-widest text-dark-dim block mb-1.5">
Gegebene Host-IP & Präfix:
</span>
<div id="ipv4Target" class="font-mono text-3xl sm:text-4xl font-black text-white tracking-tight select-all">
192.168.1.1/24
</div>
</div>
<!-- Input Fields Grid (2x2 Matrix) -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- 01 Subnet Mask -->
<div class="flex flex-col gap-1.5">
<label for="ansMask" class="text-[11px] uppercase font-mono font-semibold text-dark-muted tracking-wider flex items-center justify-between">
<span>Subnetzmaske (Dezimal)</span>
<span class="text-dark-dim text-[10px]">z.B. 255.255.255.0</span>
</label>
<div class="relative">
<input
type="text"
id="ansMask"
placeholder="255.255.255.0"
class="w-full bg-dark-bg border border-dark-border rounded-lg px-3.5 py-2.5 text-sm text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none font-mono transition-colors"
/>
<span id="feedbackMask" class="absolute right-3 top-2.5 text-sm font-bold"></span>
</div>
</div>
<!-- 02 Network ID -->
<div class="flex flex-col gap-1.5">
<label for="ansNet" class="text-[11px] uppercase font-mono font-semibold text-dark-muted tracking-wider flex items-center justify-between">
<span>Netz-ID / Netzadresse</span>
<span class="text-dark-dim text-[10px]">Erste Adresse</span>
</label>
<div class="relative">
<input
type="text"
id="ansNet"
placeholder="192.168.1.0"
class="w-full bg-dark-bg border border-dark-border rounded-lg px-3.5 py-2.5 text-sm text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none font-mono transition-colors"
/>
<span id="feedbackNet" class="absolute right-3 top-2.5 text-sm font-bold"></span>
</div>
</div>
<!-- 03 Broadcast -->
<div class="flex flex-col gap-1.5">
<label for="ansBcast" class="text-[11px] uppercase font-mono font-semibold text-dark-muted tracking-wider flex items-center justify-between">
<span>Broadcast-Adresse</span>
<span class="text-dark-dim text-[10px]">Letzte Adresse</span>
</label>
<div class="relative">
<input
type="text"
id="ansBcast"
placeholder="192.168.1.255"
class="w-full bg-dark-bg border border-dark-border rounded-lg px-3.5 py-2.5 text-sm text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none font-mono transition-colors"
/>
<span id="feedbackBcast" class="absolute right-3 top-2.5 text-sm font-bold"></span>
</div>
</div>
<!-- 04 Total Usable Hosts -->
<div class="flex flex-col gap-1.5">
<label for="ansHosts" class="text-[11px] uppercase font-mono font-semibold text-dark-muted tracking-wider flex items-center justify-between">
<span>Nutzbare Hosts (Anzahl)</span>
<span class="text-dark-dim text-[10px]">2^(32-n) - 2</span>
</label>
<div class="relative">
<input
type="text"
id="ansHosts"
placeholder="254"
class="w-full bg-dark-bg border border-dark-border rounded-lg px-3.5 py-2.5 text-sm text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none font-mono transition-colors"
/>
<span id="feedbackHosts" class="absolute right-3 top-2.5 text-sm font-bold"></span>
</div>
</div>
</div>
<!-- Actions Row -->
<div class="pt-4 border-t border-dark-border flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
<button
id="btnSolution"
onclick="showSolution()"
class="hidden px-4 py-2.5 rounded-lg border border-dark-border hover:border-dark-strong bg-dark-bg text-dark-muted hover:text-white font-mono text-xs font-semibold flex items-center justify-center gap-2 transition-colors"
>
<i data-lucide="book-open" class="w-4 h-4 text-amber-400"></i>
<span>Lösungsweg anzeigen</span>
</button>
<div class="flex items-center gap-2.5 sm:ml-auto">
<button
onclick="checkIPv4()"
class="flex-1 sm:flex-none px-5 py-2.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-mono text-xs font-semibold flex items-center justify-center gap-2 transition-colors shadow-sm"
>
<i data-lucide="check" class="w-4 h-4"></i>
<span>Prüfen</span>
</button>
<button
onclick="generateIPv4()"
class="flex-1 sm:flex-none px-4 py-2.5 rounded-lg border border-dark-border hover:border-dark-strong bg-dark-bg text-dark-muted hover:text-white font-mono text-xs font-semibold flex items-center justify-center gap-2 transition-colors"
>
<i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
<span>Nächste Aufgabe</span>
</button>
</div>
</div>
</div>
<!-- Step-by-Step Explanation Panel -->
<div id="solutionPanel" class="hidden p-5 rounded-xl border border-dark-border bg-dark-card space-y-4">
<div class="flex items-center gap-2 pb-3 border-b border-dark-border">
<i data-lucide="calculator" class="w-4 h-4 text-blue-400"></i>
<h3 class="font-bold text-sm text-white">Schritt-für-Schritt Rechenweg</h3>
</div>
<div id="solutionContent" class="space-y-4 text-xs text-dark-muted font-mono leading-relaxed"></div>
</div>
</div>
<!-- ============================================================
TAB 2: IPv6 COMPRESSION WORKBENCH
============================================================ -->
<div id="tab-ipv6" class="space-y-6 hidden">
<div class="p-6 rounded-xl border border-dark-border bg-dark-card relative overflow-hidden space-y-6 shadow-sm">
<!-- Card Header & Streak -->
<div class="flex items-center justify-between border-b border-dark-border pb-3.5">
<div class="flex items-center gap-2">
<span class="font-mono text-[11px] font-bold text-dark-muted uppercase tracking-wider">// AUFGABE</span>
<span class="text-dark-dim text-xs font-mono">IPv6 Adresskompression (RFC 5952)</span>
</div>
<div id="ipv6Streak" 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-bg">
<i data-lucide="flame" class="w-3.5 h-3.5 text-dark-dim"></i> 0er Streak
</div>
</div>
<!-- Target IPv6 Hero -->
<div class="text-center py-4 px-6 rounded-xl border border-dark-border bg-dark-bg/60">
<span class="text-[10px] uppercase font-mono tracking-widest text-dark-dim block mb-1.5">
Kürze diese ungekürzte IPv6 maximal:
</span>
<div id="ipv6Target" class="font-mono text-lg sm:text-2xl font-black text-white tracking-tight break-all select-all">
2001:0db8:0000:0000:0000:ff00:0042:8329
</div>
</div>
<!-- Input Field -->
<div class="flex flex-col gap-1.5">
<label for="ansIpv6" class="text-[11px] uppercase font-mono font-semibold text-dark-muted tracking-wider flex items-center justify-between">
<span>Deine komprimierte IPv6-Adresse</span>
<span class="text-dark-dim text-[10px]">z.B. 2001:db8::ff00:42:8329</span>
</label>
<div class="relative">
<input
type="text"
id="ansIpv6"
placeholder="2001:db8::ff00:42:8329"
class="w-full bg-dark-bg border border-dark-border rounded-lg px-3.5 py-2.5 text-sm text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none font-mono transition-colors"
/>
<span id="feedbackIpv6" class="absolute right-3 top-2.5 text-sm font-bold"></span>
</div>
</div>
<!-- Actions Row -->
<div class="pt-4 border-t border-dark-border flex items-center justify-end gap-2.5">
<button
onclick="checkIPv6()"
class="px-5 py-2.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-mono text-xs font-semibold flex items-center justify-center gap-2 transition-colors shadow-sm"
>
<i data-lucide="check" class="w-4 h-4"></i>
<span>Prüfen</span>
</button>
<button
onclick="generateIPv6()"
class="px-4 py-2.5 rounded-lg border border-dark-border hover:border-dark-strong bg-dark-bg text-dark-muted hover:text-white font-mono text-xs font-semibold flex items-center justify-center gap-2 transition-colors"
>
<i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
<span>Nächste Aufgabe</span>
</button>
</div>
</div>
<!-- IPv6 Solution & Rule Breakdown -->
<div id="solutionPanelIpv6" class="hidden p-5 rounded-xl border border-dark-border bg-dark-card space-y-4">
<div class="flex items-center gap-2 pb-3 border-b border-dark-border">
<i data-lucide="info" class="w-4 h-4 text-amber-400"></i>
<h3 class="font-bold text-sm text-white">IHK Kürzungsregeln nach RFC 5952</h3>
</div>
<div class="text-xs text-dark-muted space-y-2.5 leading-relaxed">
<p><strong class="text-white">1. Führende Nullen entfernen:</strong> Innerhalb jedes 16-Bit-Blocks dürfen führende Nullen weggelassen werden (z.B. wird <code class="text-blue-400 font-mono">0db8</code> zu <code class="text-white font-mono">db8</code> und <code class="text-blue-400 font-mono">0000</code> zu <code class="text-white font-mono">0</code>).</p>
<p><strong class="text-white">2. Null-Blöcke zusammenfassen (mind. 2 Blöcke):</strong> Mindestens zwei aufeinanderfolgende Gruppen reiner Nullen (z.B. <code class="text-blue-400 font-mono">:0000:0000:</code>) müssen durch einen einzigen Doppel-Doppelpunkt <code class="text-blue-400 font-mono">::</code> ersetzt werden.</p>
<p class="text-dark-dim"><strong class="text-amber-400">Achtung (RFC 5952 § 4.2.2):</strong> Ein einzelner 16-Bit-Nullblock darf <strong>nicht</strong> durch <code class="text-white font-mono">::</code> ersetzt werden (er bleibt als <code class="text-white font-mono">:0:</code> stehen, da <code class="text-white font-mono">::</code> hier keine Zeichenersparnis bringt)!</p>
<div class="p-3 rounded-lg border border-amber-500/30 bg-amber-500/10 text-amber-300 font-mono text-[11px] flex items-center gap-2">
<i data-lucide="alert-triangle" class="w-4 h-4 shrink-0"></i>
<span><strong>Wichtig:</strong> Die <code class="text-white">::</code>-Kompression darf <strong>nur ein einziges Mal</strong> angewendet werden. Bei Gleichstand wird die erste Sequenz gekürzt (RFC 5952 § 4.2.3).</span>
</div>
<div id="ipv6Hint" class="hidden p-3 rounded-lg border border-blue-500/30 bg-blue-500/10 text-blue-300 font-mono text-[11px]"></div>
<div class="p-3 rounded-lg border border-dark-border bg-dark-bg text-xs font-mono mt-3">
<span class="block text-[10px] text-dark-dim uppercase font-bold mb-1">Berechnete korrekte Antwort:</span>
<span id="ipv6SolutionText" class="text-emerald-400 font-bold font-mono"></span>
</div>
</div>
</div>
</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-5xl 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="sql.html" class="hover:text-white transition-colors">SQL-Labor</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/subnet.js?v=3.0.12"></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();
});
document.addEventListener('DOMContentLoaded', () => {
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>