-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathhelp.html
More file actions
1078 lines (1004 loc) · 57.7 KB
/
Copy pathhelp.html
File metadata and controls
1078 lines (1004 loc) · 57.7 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
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="de" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hilfe, FAQ & Handbuch | AP2 FIAE Tracker</title>
<meta
name="description"
content="Umfassendes Handbuch, FAQ, Tastaturkürzel und Anleitungen für den AP2 FIAE Prüfungs-Tracker (Fachinformatiker Anwendungsentwicklung Abschlussprüfung Teil 2)."
/>
<link rel="canonical" href="https://ap2.cwillam.de/help.html" />
<!-- 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" />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<!-- Local Font Preload -->
<link rel="preload" href="assets/fonts/Inter-Regular.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",
card: "#121215",
"card-hover": "#18181d",
border: "#23232a",
"border-subtle": "#191920",
strong: "#383842",
text: "#f4f4f5",
muted: "#a1a1aa",
dim: "#71717a",
accent: "#8b5cf6",
"accent-hover": "#7c3aed",
"accent-dim": "rgba(139, 92, 246, 0.12)",
success: "#10b981",
warning: "#f59e0b",
danger: "#ef4444",
},
},
},
},
};
</script>
<!-- Custom High-Craft CSS Tokens & Keycaps -->
<link href="assets/css/style.css?v=3.0.0" rel="stylesheet" />
<style>
.custom-scroll::-webkit-scrollbar {
height: 6px;
width: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #09090b;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #23232a;
border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: #3f3f46;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
button, a {
-webkit-tap-highlight-color: transparent;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
</style>
</head>
<body class="flex flex-col min-h-screen bg-dark-bg text-dark-text antialiased selection:bg-purple-600 selection:text-white font-sans">
<!-- Header -->
<header class="sticky top-0 z-50 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-border/80 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-purple-600/15 border-purple-500/40 text-purple-400 font-bold px-2 py-0.5 text-xs">AP2</span>
<div class="flex flex-col">
<span class="font-bold text-sm tracking-tight text-white group-hover:text-purple-400 transition-colors">
Hilfe & FAQ
</span>
<span class="text-[10px] font-mono text-dark-dim leading-none hidden sm:block">FIAE Handbuch & Wissensdatenbank</span>
</div>
</div>
</a>
<!-- Right: Tools Switcher & Community Links -->
<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-purple-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="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-marked" class="w-3.5 h-3.5 text-amber-400"></i>
<span>Glossar</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>
<!-- Discord Community -->
<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 Content Area -->
<main class="max-w-5xl mx-auto px-4 sm:px-6 py-6 flex-1 w-full space-y-6">
<!-- Hero & Live Search Workbench -->
<section class="bg-dark-card border border-dark-border rounded-xl p-5 sm:p-6 space-y-5">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div>
<div class="flex items-center gap-2 text-purple-400 text-xs font-mono mb-2 uppercase tracking-wider">
<span class="kbd-cap bg-purple-600/15 border-purple-500/30 text-purple-400 px-2 py-0.5 text-[10px]">DOKUMENTATION & FAQ</span>
<span class="text-dark-dim">·</span>
<span class="text-dark-muted">AP2 FIAE IHK 2026</span>
</div>
<h1 class="text-xl sm:text-2xl font-bold tracking-tight text-white flex items-center gap-2.5">
<span>Hilfe, Systemhandbuch & FAQ</span>
</h1>
<p class="text-xs sm:text-sm text-dark-muted mt-1 leading-relaxed max-w-2xl">
Alles Wichtige zur Funktionsweise des AP2 FIAE Trackers, dem Spaced-Repetition-Lernkartensystem, Tastatur-Shortcuts für maximale Lerngeschwindigkeit und Antworten auf häufig gestellte Fragen.
</p>
</div>
<div class="flex items-center gap-2 shrink-0">
<span class="font-mono text-xs text-dark-muted px-2.5 py-1 rounded border border-dark-border bg-dark-bg/60">
v3.0.0 · 100% Offline
</span>
</div>
</div>
<!-- Live Instant Search Field -->
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-dark-dim">
<i data-lucide="search" class="w-4 h-4"></i>
</div>
<input
id="faqSearchInput"
type="text"
autocomplete="off"
spellcheck="false"
placeholder="Hilfe durchsuchen (z. B. SQL, OOP, Pseudocode, Glossar, Backup, Shortcuts)..."
class="w-full pl-10 pr-24 py-2.5 bg-dark-bg border border-dark-border rounded-lg text-sm text-white placeholder-dark-dim focus:outline-none focus:border-dark-accent focus:ring-1 focus:ring-dark-accent transition-colors font-mono"
oninput="handleFaqSearch(this.value)"
/>
<div class="absolute inset-y-0 right-0 pr-3 flex items-center gap-1 pointer-events-none">
<span class="kbd-cap text-[10px] text-dark-dim bg-dark-card border-dark-border px-1.5 py-0.5">/</span>
</div>
</div>
<!-- Quick Jump Filter Chips -->
<div class="flex items-center gap-2 flex-wrap text-xs font-mono text-dark-muted pt-1">
<span class="text-dark-dim text-[11px] uppercase mr-1">Schnellzugriff:</span>
<a href="#section-basics" class="px-2.5 py-1 rounded-md bg-dark-bg border border-dark-border hover:border-purple-500/50 hover:text-white transition-colors flex items-center gap-1.5">
<i data-lucide="book-open" class="w-3 h-3 text-purple-400"></i>
<span>01 Grundlagen</span>
</a>
<a href="#section-cards" class="px-2.5 py-1 rounded-md bg-dark-bg border border-dark-border hover:border-purple-500/50 hover:text-white transition-colors flex items-center gap-1.5">
<i data-lucide="layers" class="w-3 h-3 text-purple-400"></i>
<span>02 Lernkarten</span>
</a>
<a href="#section-tools" class="px-2.5 py-1 rounded-md bg-dark-bg border border-dark-border hover:border-purple-500/50 hover:text-white transition-colors flex items-center gap-1.5">
<i data-lucide="wrench" class="w-3 h-3 text-purple-400"></i>
<span>03 Labore & Tools</span>
</a>
<a href="#section-app" class="px-2.5 py-1 rounded-md bg-dark-bg border border-dark-border hover:border-purple-500/50 hover:text-white transition-colors flex items-center gap-1.5">
<i data-lucide="smartphone" class="w-3 h-3 text-purple-400"></i>
<span>04 App & Offline</span>
</a>
<a href="#section-backup" class="px-2.5 py-1 rounded-md bg-dark-bg border border-dark-border hover:border-purple-500/50 hover:text-white transition-colors flex items-center gap-1.5">
<i data-lucide="hard-drive" class="w-3 h-3 text-amber-400"></i>
<span>05 Backup</span>
</a>
<a href="#section-cache" class="px-2.5 py-1 rounded-md bg-dark-bg border border-dark-border hover:border-purple-500/50 hover:text-white transition-colors flex items-center gap-1.5">
<i data-lucide="refresh-cw" class="w-3 h-3 text-purple-400"></i>
<span>06 Cache</span>
</a>
<a href="#section-community" class="px-2.5 py-1 rounded-md bg-dark-bg border border-dark-border hover:border-purple-500/50 hover:text-white transition-colors flex items-center gap-1.5">
<i data-lucide="github" class="w-3 h-3 text-purple-400"></i>
<span>07 Feedback</span>
</a>
</div>
</section>
<!-- Search No Results State -->
<div id="noResultsState" class="hidden p-8 text-center bg-dark-card border border-dark-border rounded-xl space-y-3">
<i data-lucide="search-x" class="w-8 h-8 text-dark-dim mx-auto"></i>
<h3 class="text-sm font-bold text-white">Keine passenden Hilfethemen gefunden</h3>
<p class="text-xs text-dark-muted max-w-sm mx-auto">
Prüfe deine Eingabe oder setze die Suche zurück, um alle Kapitel anzuzeigen.
</p>
<button
type="button"
onclick="clearFaqSearch()"
class="px-3 py-1.5 bg-dark-accent hover:bg-dark-accent-hover text-white text-xs font-mono rounded-lg transition-colors"
>
Suche leeren
</button>
</div>
<!-- FAQ Articles Container -->
<div class="space-y-6">
<!-- 01 GRUNDLAGEN -->
<article id="section-basics" class="faq-item bg-dark-card border border-dark-border rounded-xl p-5 sm:p-6 space-y-4">
<div class="flex items-center justify-between border-b border-dark-border pb-3">
<div class="flex items-center gap-3">
<span class="font-mono text-xs font-bold text-purple-400 bg-purple-600/10 border border-purple-500/30 px-2 py-0.5 rounded">01</span>
<h2 class="font-bold text-base sm:text-lg text-white flex items-center gap-2">
<i data-lucide="book-open" class="w-4 h-4 text-purple-400"></i>
<span>Wie funktioniert der AP2 FIAE Tracker?</span>
</h2>
</div>
<span class="kbd-cap text-[10px] text-dark-dim">GRUNDLAGEN</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs text-dark-muted leading-relaxed">
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1.5">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="check-circle-2" class="w-3.5 h-3.5 text-purple-400"></i>
<span>Strukturierte Lernbereiche</span>
</div>
<p>
Der Tracker bildet exakt den amtlichen Rahmenlehrplan für die <strong class="text-white">Abschlussprüfung Teil 2 (AP2 - FIAE)</strong> ab. Jedes Modul fasst zusammenhängende Prüfungsbereiche strukturiert zusammen (Software-Architektur, Datenbanken, Algorithmen, Clean Code, Web & Security, WiSo).
</p>
</div>
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1.5">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="bar-chart-3" class="w-3.5 h-3.5 text-emerald-400"></i>
<span>Fortschritt & Gewichtung</span>
</div>
<p>
Themen sind nach IHK-Prüfungsrelevanz gewichtet (<em class="text-white">Kritisch, Sehr Hoch, Hoch, Mittel</em>). Beim Abhaken von Unteraufgaben oder Themen berechnet der Tracker deinen Gesamt- und Modulfortschritt präzise in Prozent.
</p>
</div>
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1.5">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="timer" class="w-3.5 h-3.5 text-amber-400"></i>
<span>Pomodoro Fokus-Timer</span>
</div>
<p>
Nutze den integrierten Timer für konzentrierte Deep-Work-Intervalle (25 Min. Fokus, 5 Min. Pause). Tägliche Sitzungen und kumulierte Lernminuten fließen direkt in deinen Aktivitäts- und Heatmap-Graphen ein.
</p>
</div>
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1.5">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="rotate-ccw" class="w-3.5 h-3.5 text-rose-400"></i>
<span>Modul zurücksetzen</span>
</div>
<p>
Du möchtest einen Themenblock vor der Prüfung noch einmal auf null setzen und frisch durchgehen? Über das Reset-Symbol im jeweiligen Modulkopf kannst du den Lernstand dieses einzelnen Moduls gezielt zurücksetzen.
</p>
</div>
</div>
</article>
<!-- 02 LERNKARTEN & SPACED REPETITION -->
<article id="section-cards" class="faq-item bg-dark-card border border-dark-border rounded-xl p-5 sm:p-6 space-y-4">
<div class="flex items-center justify-between border-b border-dark-border pb-3">
<div class="flex items-center gap-3">
<span class="font-mono text-xs font-bold text-purple-400 bg-purple-600/10 border border-purple-500/30 px-2 py-0.5 rounded">02</span>
<h2 class="font-bold text-base sm:text-lg text-white flex items-center gap-2">
<i data-lucide="layers" class="w-4 h-4 text-purple-400"></i>
<span>Das Lernkarten-System (Spaced Repetition & Shortcuts)</span>
</h2>
</div>
<span class="kbd-cap text-[10px] text-dark-dim">MEMORISIERUNG</span>
</div>
<div class="space-y-4 text-xs text-dark-muted leading-relaxed">
<p>
Zu allen FIAE-Themenbereichen sind interaktive Lernkarten hinterlegt. Klicke bei einem Thema auf <strong class="text-white font-mono bg-dark-bg border border-dark-border px-1.5 py-0.5 rounded">Lernkarten</strong>, um das Trainings-Modal zu starten.
</p>
<div class="grid grid-cols-1 md:grid-cols-4 gap-3">
<div class="p-3.5 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1">
<div class="flex items-center justify-between">
<span class="font-bold text-white font-mono text-xs">Freies Training</span>
<span class="kbd-cap text-[10px]">Taste 1</span>
</div>
<p class="text-[11px] text-dark-muted">
Alle Karten des Moduls in Serie durchgehen – ohne zeitliche Beschränkung oder feste Algorithmen.
</p>
</div>
<div class="p-3.5 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1">
<div class="flex items-center justify-between">
<span class="font-bold text-purple-400 font-mono text-xs">Strategie-Modus</span>
<span class="kbd-cap text-[10px]">Taste 2</span>
</div>
<p class="text-[11px] text-dark-muted">
Echtes Spaced Repetition: Gewusste Karten wandern in größere Zeitintervalle; unsichere oder falsche Karten werden kurzfristig erneut vorgelegt.
</p>
</div>
<div class="p-3.5 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1">
<div class="flex items-center justify-between">
<span class="font-bold text-amber-400 font-mono text-xs">Prüfungs-Modus</span>
<span class="kbd-cap text-[10px]">Taste 3</span>
</div>
<p class="text-[11px] text-dark-muted">
Halbierte Wiederholungsintervalle für den intensiven Endspurt in den letzten Wochen vor der Prüfung.
</p>
</div>
<div class="p-3.5 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1">
<div class="flex items-center justify-between">
<span class="font-bold text-rose-400 font-mono text-xs">Schwachstellen</span>
<span class="kbd-cap text-[10px]">Taste 4</span>
</div>
<p class="text-[11px] text-dark-muted">
Filtert gezielt Karten, die du zuvor nicht gewusst oder nur geraten hast.
</p>
</div>
</div>
<!-- Keyboard Shortcuts Table -->
<div class="p-4 rounded-lg bg-dark-bg border border-dark-border space-y-3">
<div class="flex items-center justify-between">
<span class="font-bold text-white font-mono text-xs uppercase tracking-wider flex items-center gap-1.5">
<i data-lucide="keyboard" class="w-3.5 h-3.5 text-purple-400"></i>
<span>Desktop Tastatur-Shortcuts</span>
</span>
<span class="text-[10px] text-dark-dim font-mono">Kein Mausklick nötig</span>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2.5 pt-1">
<div class="p-2.5 rounded bg-dark-card border border-dark-border flex flex-col justify-between gap-1.5">
<div class="flex items-center gap-1">
<span class="kbd-cap bg-emerald-500/15 border-emerald-500/40 text-emerald-400 text-xs">1</span>
<span class="text-dark-dim text-xs">/</span>
<span class="kbd-cap bg-emerald-500/15 border-emerald-500/40 text-emerald-400 text-xs">←</span>
</div>
<div>
<strong class="text-white text-xs block">Sofort gewusst</strong>
<span class="text-[10px] text-dark-dim">+2 Stufen im Intervall</span>
</div>
</div>
<div class="p-2.5 rounded bg-dark-card border border-dark-border flex flex-col justify-between gap-1.5">
<div class="flex items-center gap-1">
<span class="kbd-cap bg-purple-500/15 border-purple-500/40 text-purple-400 text-xs">2</span>
<span class="text-dark-dim text-xs">/</span>
<span class="kbd-cap bg-purple-500/15 border-purple-500/40 text-purple-400 text-xs">↑</span>
</div>
<div>
<strong class="text-white text-xs block">Nachgedacht</strong>
<span class="text-[10px] text-dark-dim">+1 Stufe im Intervall</span>
</div>
</div>
<div class="p-2.5 rounded bg-dark-card border border-dark-border flex flex-col justify-between gap-1.5">
<div class="flex items-center gap-1">
<span class="kbd-cap bg-amber-500/15 border-amber-500/40 text-amber-400 text-xs">3</span>
<span class="text-dark-dim text-xs">/</span>
<span class="kbd-cap bg-amber-500/15 border-amber-500/40 text-amber-400 text-xs">↓</span>
</div>
<div>
<strong class="text-white text-xs block">Geraten</strong>
<span class="text-[10px] text-dark-dim">-1 Stufe (Wiederholung)</span>
</div>
</div>
<div class="p-2.5 rounded bg-dark-card border border-dark-border flex flex-col justify-between gap-1.5">
<div class="flex items-center gap-1">
<span class="kbd-cap bg-rose-500/15 border-rose-500/40 text-rose-400 text-xs">4</span>
<span class="text-dark-dim text-xs">/</span>
<span class="kbd-cap bg-rose-500/15 border-rose-500/40 text-rose-400 text-xs">→</span>
</div>
<div>
<strong class="text-white text-xs block">Nicht gewusst</strong>
<span class="text-[10px] text-dark-dim">Reset auf Stufe 0</span>
</div>
</div>
</div>
<div class="pt-2 border-t border-dark-border/60 flex flex-wrap items-center gap-4 text-[11px] text-dark-dim">
<span class="flex items-center gap-1.5">
<span class="kbd-cap text-[10px]">Leertaste</span>
<span>Karte umdrehen</span>
</span>
<span class="flex items-center gap-1.5">
<span class="kbd-cap text-[10px]">Esc</span>
<span>Lernkarten schließen</span>
</span>
</div>
</div>
</div>
</article>
<!-- 03 PRÜFUNGS-WERKZEUGE & LABORE -->
<article id="section-tools" class="faq-item bg-dark-card border border-dark-border rounded-xl p-5 sm:p-6 space-y-4">
<div class="flex items-center justify-between border-b border-dark-border pb-3">
<div class="flex items-center gap-3">
<span class="font-mono text-xs font-bold text-purple-400 bg-purple-600/10 border border-purple-500/30 px-2 py-0.5 rounded">03</span>
<h2 class="font-bold text-base sm:text-lg text-white flex items-center gap-2">
<i data-lucide="wrench" class="w-4 h-4 text-purple-400"></i>
<span>Prüfungs-Werkzeuge & Interaktive Labore</span>
</h2>
</div>
<span class="kbd-cap text-[10px] text-dark-dim">PRAXIS-MODULE</span>
</div>
<div class="space-y-4 text-xs text-dark-muted leading-relaxed">
<p>
Neben dem Leitfaden und den Lernkarten enthält der AP2 FIAE Tracker vier spezialisierte Praxis-Werkzeuge, um typische Entwickler-Prüfungsaufgaben interaktiv im Browser zu trainieren:
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- 01 Pseudocode-Labor -->
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-2.5 flex flex-col justify-between">
<div class="space-y-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="code" class="w-4 h-4 text-purple-400"></i>
<span>Pseudocode-Labor & Visualizer</span>
</div>
<span class="kbd-cap text-[10px] text-purple-400 bg-purple-950/20 border-purple-900/40 font-mono">pseudocode.html</span>
</div>
<p class="text-[11px] leading-relaxed">
Strukturierte Algorithmen im IHK-Pseudocode-Standard verstehen: Mit Syntax-Spickzettel für Schleifen und Verzweigungen, interaktivem Trace-Visualizer zur Schritt-für-Schritt-Ausführung mit Live-Variablenbelegung sowie Schreibtischtest-Puzzles zur Klausurvorbereitung.
</p>
</div>
<div class="pt-2 border-t border-dark-border/60">
<a href="pseudocode.html" class="inline-flex items-center gap-1.5 text-xs text-purple-400 hover:text-purple-300 font-mono font-medium">
<span>Zum Pseudocode-Labor</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a>
</div>
</div>
<!-- 02 SQL-Labor -->
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-2.5 flex flex-col justify-between">
<div class="space-y-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="database" class="w-4 h-4 text-emerald-400"></i>
<span>SQL-Labor (In-Memory Engine)</span>
</div>
<span class="kbd-cap text-[10px] text-emerald-400 bg-emerald-950/20 border-emerald-900/40 font-mono">sql.html</span>
</div>
<p class="text-[11px] leading-relaxed">
Echte relationale Datenbankabfragen direkt im Browser ausführen: Trainiere komplexe JOINs, Subqueries, HAVING, Aggregationen und Normalisierungen auf praxisnahen IHK-Tabellen mit didaktischen Hinweisen ohne vorzeitige Spoiler.
</p>
</div>
<div class="pt-2 border-t border-dark-border/60">
<a href="sql.html" class="inline-flex items-center gap-1.5 text-xs text-emerald-400 hover:text-emerald-300 font-mono font-medium">
<span>Zum SQL-Labor</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a>
</div>
</div>
<!-- 03 Fach-Glossar -->
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-2.5 flex flex-col justify-between">
<div class="space-y-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="book-marked" class="w-4 h-4 text-amber-400"></i>
<span>Fach-Glossar & Eselsbrücken</span>
</div>
<span class="kbd-cap text-[10px] text-amber-400 bg-amber-950/20 border-amber-900/40 font-mono">glossar.html</span>
</div>
<p class="text-[11px] leading-relaxed">
100 FIAE-Fachbegriffe, Entwurfsmuster, OOP-Konzepte und Architekturprinzipien: Inklusive praxiserprobter Eselsbrücken, Merkzettel und A-Z-Filter.
</p>
</div>
<div class="pt-2 border-t border-dark-border/60">
<a href="glossar.html" class="inline-flex items-center gap-1.5 text-xs text-amber-400 hover:text-amber-300 font-mono font-medium">
<span>Zum Fach-Glossar</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a>
</div>
</div>
<!-- 04 Subnetz-Trainer -->
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-2.5 flex flex-col justify-between">
<div class="space-y-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="network" class="w-4 h-4 text-blue-400"></i>
<span>Subnetz-Trainer (IPv4 & IPv6)</span>
</div>
<span class="kbd-cap text-[10px] text-blue-400 bg-blue-950/20 border-blue-900/40 font-mono">subnet.html</span>
</div>
<p class="text-[11px] leading-relaxed">
Klassische IHK-Netzwerk- und Subnetz-Berechnungen unter Zeitdruck meistern: Netzadresse, Broadcast, Hostbereiche und CIDR-Präfixe. Sofortige Fehleranalyse.
</p>
</div>
<div class="pt-2 border-t border-dark-border/60">
<a href="subnet.html" class="inline-flex items-center gap-1.5 text-xs text-blue-400 hover:text-blue-300 font-mono font-medium">
<span>Zum Subnetz-Trainer</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a>
</div>
</div>
</div>
</div>
</article>
<!-- 04 APP & OFFLINE-MODUS -->
<article id="section-app" class="faq-item bg-dark-card border border-dark-border rounded-xl p-5 sm:p-6 space-y-4">
<div class="flex items-center justify-between border-b border-dark-border pb-3">
<div class="flex items-center gap-3">
<span class="font-mono text-xs font-bold text-purple-400 bg-purple-600/10 border border-purple-500/30 px-2 py-0.5 rounded">04</span>
<h2 class="font-bold text-base sm:text-lg text-white flex items-center gap-2">
<i data-lucide="smartphone" class="w-4 h-4 text-purple-400"></i>
<span>Google Play Store & Offline-Nutzung</span>
</h2>
</div>
<span class="kbd-cap text-[10px] text-dark-dim">INSTALLATION</span>
</div>
<div class="space-y-4 text-xs text-dark-muted leading-relaxed">
<p>
Der AP2 FIAE Tracker ist als native App im <strong class="text-white">Google Play Store</strong> verfügbar und funktioniert gleichzeitig auf jedem Gerät als installierbare Web-App (PWA).
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<!-- Android Play Store -->
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-2 flex flex-col justify-between">
<div class="space-y-2">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="play" class="w-4 h-4 text-emerald-400"></i>
<span>Android (Google Play)</span>
</div>
<p class="text-[11px]">
Installiere den Tracker direkt als vollwertige App aus dem Google Play Store für automatische Updates und native Integration.
</p>
</div>
<div class="pt-2">
<a
href="https://play.google.com/store/apps/details?id=de.cwillam.ap2.tracker"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-1 text-[11px] text-emerald-400 hover:text-emerald-300 font-mono font-medium"
>
<span>Im Play Store ansehen</span>
<i data-lucide="external-link" class="w-3 h-3"></i>
</a>
</div>
</div>
<!-- iOS / Safari -->
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-2">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="apple" class="w-4 h-4 text-dark-text"></i>
<span>iOS / iPhone (Safari)</span>
</div>
<ol class="list-decimal pl-4 space-y-1 text-[11px]">
<li>Öffne <code class="text-white font-mono">ap2.cwillam.de</code> in Safari.</li>
<li>Tippe unten auf das <strong class="text-white">Teilen-Symbol (↑)</strong>.</li>
<li>Wähle <strong class="text-white">"Zum Home-Bildschirm"</strong>.</li>
</ol>
</div>
<!-- Desktop -->
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-2">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="monitor" class="w-4 h-4 text-purple-400"></i>
<span>PC / Mac (Desktop PWA)</span>
</div>
<ol class="list-decimal pl-4 space-y-1 text-[11px]">
<li>Öffne Chrome, Edge oder Brave.</li>
<li>Klicke rechts in der Adressleiste auf das <strong class="text-white">Install-Icon</strong>.</li>
<li>Alternativ im Browsermenü "App installieren" wählen.</li>
</ol>
</div>
</div>
<div class="p-3.5 rounded-lg bg-dark-bg border border-dark-border flex items-start gap-3">
<i data-lucide="wifi-off" class="w-4 h-4 text-emerald-400 shrink-0 mt-0.5"></i>
<div>
<strong class="text-white text-xs block">Garantierter 100% Offline-Betrieb</strong>
<p class="text-[11px] text-dark-muted mt-0.5">
Sobald der Tracker einmal geöffnet wurde, speichert der Service Worker alle Assets, Skripte und Datenbanken lokal. Du kannst im Flugmodus, im Zug oder in der Berufsschule ohne aktive Internetverbindung weiterlernen.
</p>
</div>
</div>
</div>
</article>
<!-- 05 BACKUP & DATENSICHERUNG -->
<article id="section-backup" class="faq-item bg-dark-card border border-dark-border rounded-xl p-5 sm:p-6 space-y-4">
<div class="flex items-center justify-between border-b border-dark-border pb-3">
<div class="flex items-center gap-3">
<span class="font-mono text-xs font-bold text-amber-400 bg-amber-500/10 border border-amber-500/30 px-2 py-0.5 rounded">05</span>
<h2 class="font-bold text-base sm:text-lg text-white flex items-center gap-2">
<i data-lucide="hard-drive" class="w-4 h-4 text-amber-400"></i>
<span>Backup & Datensicherung (Essentiell)</span>
</h2>
</div>
<span class="kbd-cap text-[10px] text-dark-dim">DATENSCHUTZ & STORAGE</span>
</div>
<div class="space-y-4 text-xs text-dark-muted leading-relaxed">
<div class="p-3.5 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-200 flex items-start gap-3">
<i data-lucide="alert-triangle" class="w-4 h-4 text-amber-400 shrink-0 mt-0.5"></i>
<div class="text-[11px] leading-relaxed">
<strong class="text-white block font-bold mb-0.5">100% Datenkontrolle ohne Cloud-Tracking:</strong>
Aus Datenschutzgründen (DSGVO) werden alle Lernstände, Häkchen und Wiederholungsdaten ausschließlich in deinem Browser (<code class="text-white font-mono bg-dark-bg/60 px-1 py-0.5 rounded">localStorage</code>) gespeichert. <strong class="text-white">Achtung:</strong> Das Löschen des Browserverlaufs oder aggressive Reinigungs-Tools (z. B. CCleaner) löschen diese Daten!
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-2">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="download" class="w-4 h-4 text-purple-400"></i>
<span>Fortschritt exportieren (Backup speichern)</span>
</div>
<p class="text-[11px]">
Klicke im Dashboard auf <strong class="text-white">Backup exportieren</strong>. Der Browser lädt sofort eine komprimierte <code class="text-white font-mono">ap2_tracker_backup_*.json</code> Datei herunter.
</p>
<div class="pt-1">
<a href="index.html" class="inline-flex items-center gap-1 text-[11px] text-purple-400 hover:text-purple-300 font-mono">
<span>Zum Dashboard für Export</span>
<i data-lucide="arrow-right" class="w-3 h-3"></i>
</a>
</div>
</div>
<div class="p-4 rounded-lg bg-dark-bg/60 border border-dark-border space-y-2">
<div class="flex items-center gap-2 text-white font-semibold">
<i data-lucide="upload" class="w-4 h-4 text-emerald-400"></i>
<span>Fortschritt importieren (Backup laden)</span>
</div>
<p class="text-[11px]">
Klicke auf <strong class="text-white">Backup laden</strong> und wähle deine gesicherte JSON-Datei. Dein kompletter Stand wird sofort eins zu eins wiederhergestellt – ideal beim Gerätewechsel zwischen PC und Smartphone.
</p>
</div>
</div>
</div>
</article>
<!-- 06 CACHE & UPDATES -->
<article id="section-cache" class="faq-item bg-dark-card border border-dark-border rounded-xl p-5 sm:p-6 space-y-4">
<div class="flex items-center justify-between border-b border-dark-border pb-3">
<div class="flex items-center gap-3">
<span class="font-mono text-xs font-bold text-purple-400 bg-purple-600/10 border border-purple-500/30 px-2 py-0.5 rounded">06</span>
<h2 class="font-bold text-base sm:text-lg text-white flex items-center gap-2">
<i data-lucide="refresh-cw" class="w-4 h-4 text-purple-400"></i>
<span>Cache-Probleme & Anzeigefehler beheben</span>
</h2>
</div>
<span class="kbd-cap text-[10px] text-dark-dim">HARD REFRESH</span>
</div>
<div class="space-y-4 text-xs text-dark-muted leading-relaxed">
<p>
Wenn ein neues Update veröffentlicht wird, hält der Browser manchmal noch veraltete CSS- oder JS-Dateien im Zwischenspeicher. Dadurch können Layouts verschoben sein oder Schaltflächen nicht reagieren.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
<div class="p-3 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1">
<strong class="text-white text-xs block">Windows / Linux</strong>
<span class="text-[10px] text-dark-dim">Chrome, Firefox, Edge</span>
<div class="pt-1">
<span class="kbd-cap text-[11px] font-mono">Strg</span> + <span class="kbd-cap text-[11px] font-mono">F5</span>
</div>
</div>
<div class="p-3 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1">
<strong class="text-white text-xs block">macOS Chrome / FF</strong>
<span class="text-[10px] text-dark-dim">Google Chrome, Firefox</span>
<div class="pt-1">
<span class="kbd-cap text-[11px] font-mono">Cmd ⌘</span> + <span class="kbd-cap text-[11px] font-mono">Shift ⇧</span> + <span class="kbd-cap text-[11px] font-mono">R</span>
</div>
</div>
<div class="p-3 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1">
<strong class="text-white text-xs block">macOS Safari</strong>
<span class="text-[10px] text-dark-dim">Apple Safari</span>
<div class="pt-1">
<span class="kbd-cap text-[11px] font-mono">Option ⌥</span> + <span class="kbd-cap text-[11px] font-mono">Cmd ⌘</span> + <span class="kbd-cap text-[11px] font-mono">E</span>
</div>
</div>
<div class="p-3 rounded-lg bg-dark-bg/60 border border-dark-border space-y-1">
<strong class="text-white text-xs block">Mobile Geräte</strong>
<span class="text-[10px] text-dark-dim">iOS / Android</span>
<div class="pt-1">
<span class="text-[11px] text-purple-400 font-mono">Tab schließen & neu laden</span>
</div>
</div>
</div>
</div>
</article>
<!-- 07 COMMUNITY, OPEN SOURCE & SPENDEN -->
<article id="section-community" class="faq-item bg-dark-card border border-dark-border rounded-xl p-5 sm:p-6 space-y-4">
<div class="flex items-center justify-between border-b border-dark-border pb-3">
<div class="flex items-center gap-3">
<span class="font-mono text-xs font-bold text-purple-400 bg-purple-600/10 border border-purple-500/30 px-2 py-0.5 rounded">07</span>
<h2 class="font-bold text-base sm:text-lg text-white flex items-center gap-2">
<i data-lucide="github" class="w-4 h-4 text-purple-400"></i>
<span>Open Source, Bug melden & Community</span>
</h2>
</div>
<span class="kbd-cap text-[10px] text-dark-dim">COMMUNITY</span>
</div>
<div class="space-y-4 text-xs text-dark-muted leading-relaxed">
<p>
Die Prüfungstracker sind 100% kostenlose Open-Source-Software für alle Auszubildenden im IT-Bereich. Wenn du inhaltliche Tippfehler oder technische Bugs findest, erstelle bitte ein GitHub-Issue im passenden Repository:
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<a
href="https://github.com/cwillam/ap2-tracker/issues/new?template=bug.yml"
target="_blank"
rel="noopener"
class="p-3 rounded-lg bg-dark-bg/60 border border-purple-500/30 hover:border-purple-500 hover:bg-dark-card transition-all flex items-center justify-between group"
>
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400">
<i data-lucide="code-2" class="w-4 h-4"></i>
</div>
<div>
<strong class="text-white text-xs block group-hover:text-purple-400 transition-colors">AP2 FIAE Tracker</strong>
<span class="text-[10px] text-dark-dim">Anwendungsentwicklung</span>
</div>
</div>
<i data-lucide="external-link" class="w-3.5 h-3.5 text-dark-dim group-hover:text-white transition-colors"></i>
</a>
<a
href="https://github.com/cwillam/ap1-tracker/issues/new?template=bug.yml"
target="_blank"
rel="noopener"
class="p-3 rounded-lg bg-dark-bg/60 border border-dark-border hover:border-blue-500 hover:bg-dark-card transition-all flex items-center justify-between group"
>
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-400">
<i data-lucide="graduation-cap" class="w-4 h-4"></i>
</div>
<div>
<strong class="text-white text-xs block group-hover:text-blue-400 transition-colors">AP1 Tracker</strong>
<span class="text-[10px] text-dark-dim">Alle Fachrichtungen</span>
</div>
</div>
<i data-lucide="external-link" class="w-3.5 h-3.5 text-dark-dim group-hover:text-white transition-colors"></i>
</a>
<a
href="https://github.com/cwillam/ap2-fisi-tracker/issues/new?template=bug.yml"
target="_blank"
rel="noopener"
class="p-3 rounded-lg bg-dark-bg/60 border border-dark-border hover:border-emerald-500 hover:bg-dark-card transition-all flex items-center justify-between group"
>
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400">
<i data-lucide="server" class="w-4 h-4"></i>
</div>
<div>
<strong class="text-white text-xs block group-hover:text-emerald-400 transition-colors">AP2 FISI Tracker</strong>
<span class="text-[10px] text-dark-dim">Systemintegration</span>
</div>
</div>
<i data-lucide="external-link" class="w-3.5 h-3.5 text-dark-dim group-hover:text-white transition-colors"></i>
</a>
</div>
</div>
</article>
</div>
<!-- Support Callout Card -->
<section class="bg-gradient-to-r from-purple-950/20 via-dark-card to-dark-card border border-purple-500/20 rounded-xl p-5 sm:p-6 flex flex-col sm:flex-row items-center justify-between gap-5">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl bg-[#FFDD00]/10 border border-[#FFDD00]/30 flex items-center justify-center shrink-0">
<i data-lucide="coffee" class="w-6 h-6 text-[#FFDD00]"></i>
</div>
<div>
<h3 class="text-sm sm:text-base font-bold text-white">Hat dir der AP2 Tracker bei der Prüfung geholfen?</h3>
<p class="text-xs text-dark-muted mt-0.5">
Der Tracker bleibt für immer werbefrei und kostenlos. Über eine Kaffeespende freue ich mich riesig!
</p>
</div>
</div>
<div class="flex items-center gap-3 shrink-0 w-full sm:w-auto">
<button
type="button"
onclick="openSupportModal()"
class="w-full sm:w-auto px-4 py-2 rounded-lg bg-[#FFDD00] hover:bg-[#ffe633] text-black font-semibold text-xs transition-colors flex items-center justify-center gap-2 shadow-sm"
>
<i data-lucide="coffee" class="w-3.5 h-3.5"></i>
<span>Kaffee spendieren</span>
</button>
</div>
</section>
</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="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="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>
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");
}
function handleFaqSearch(query) {
const q = (query || "").trim().toLowerCase();
const items = document.querySelectorAll(".faq-item");
const noResults = document.getElementById("noResultsState");
let visibleCount = 0;
items.forEach((item) => {
if (!q) {
item.classList.remove("hidden");
visibleCount++;
return;
}
const text = item.textContent.toLowerCase();