it-praxisportal/dashboard.html

2115 lines
110 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IT-Praxisportal | Lernbereich &amp; Kurs-Dashboard</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<meta name="description" content="Dein persönlicher IT-Lernbereich: 16 Fachdisziplinen, 264 Module, Monaco Web-IDE, KMK-Lernfelder und IHK-Prüfungsvorbereitung.">
<link rel="stylesheet" href="assets/style.css?v=2.2.1">
<style>
.portal-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
.badge-ihk {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
.badge-devops {
background: #f0fdf4;
color: #15803d;
border: 1px solid #bbf7d0;
}
.badge-code {
background: #faf5ff;
color: #7e22ce;
border: 1px solid #e9d5ff;
}
.badge-data {
background: #fff7ed;
color: #c2410c;
border: 1px solid #fed7aa;
}
/* Azubi Curriculum & Year Filter Pills */
.apprenticeship-panel {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 22px 24px;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.year-pill {
background: #ffffff;
color: #475569;
border: 1px solid #cbd5e1;
padding: 6px 14px;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.year-pill:hover {
background: #f8fafc;
color: #0f172a;
border-color: #94a3b8;
}
.year-pill.active {
background: #0f172a;
color: #ffffff;
border-color: #0f172a;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.year-pill.assigned-only-btn {
border-color: #cbd5e1;
color: #475569;
background: #ffffff;
}
.year-pill.assigned-only-btn:hover {
background: #f8fafc;
color: #0f172a;
border-color: #94a3b8;
}
.year-pill.assigned-only-btn.active {
background: #0f172a;
color: #ffffff;
border-color: #0f172a;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.lf-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 260px;
box-shadow: var(--shadow-sm);
transition: all 0.15s ease;
}
.lf-card:hover {
border-color: #cbd5e1;
box-shadow: var(--shadow-md);
}
.lf-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.lf-tag {
font-size: 0.72rem;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
}
.lf-tag-ap1 {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
.lf-tag-ap2 {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}
.lf-tag-wiso {
background: #fffbeb;
color: #b45309;
border: 1px solid #fde68a;
}
/* Course Progress Elements */
.course-progress-wrap {
margin: 12px 0 14px 0;
background: #f1f5f9;
border-radius: 4px;
height: 6px;
overflow: hidden;
position: relative;
}
.course-progress-bar {
height: 100%;
background: #1d4ed8;
width: 0%;
border-radius: 4px;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.course-progress-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.76rem;
color: #64748b;
font-weight: 500;
}
/* Dashboard Action Buttons */
.btn-start-ide {
background: #0f172a;
color: white;
border: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-start-ide:hover {
background: #1d4ed8;
}
.btn-view-theory {
background: #ffffff;
color: #475569;
border: 1px solid #cbd5e1;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-view-theory:hover {
background: #f8fafc;
color: #0f172a;
border-color: #94a3b8;
}
/* Resume Card */
.resume-card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 12px;
padding: 20px 24px;
color: #f8fafc;
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Certificates Grid */
.cert-preview-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.15s ease;
box-shadow: var(--shadow-sm);
}
.cert-preview-card:hover {
border-color: #cbd5e1;
box-shadow: var(--shadow-md);
}
</style>
</head>
<body style="background: #f8fafc; color: #0f172a; font-family: var(--font-sans); margin: 0; padding: 0;">
<!-- 1. STICKY DASHBOARD TOPBAR -->
<header class="portal-header-bar">
<div class="portal-nav-container">
<a href="dashboard.html" class="portal-brand">
<div class="portal-brand-logo">
<img src="assets/favicon.svg" alt="IT-Praxisportal Logo" style="width: 22px; height: 22px;">
</div>
<div>
<span class="portal-brand-title">IT-Praxisportal</span>
<span class="portal-brand-badge">Aus- &amp; Weiterbildung</span>
</div>
</a>
<nav class="portal-nav-links">
<a href="#overview" class="portal-nav-link active">Übersicht</a>
<a href="#katalog" class="portal-nav-link">Kurse</a>
<a href="#ihk-section" class="portal-nav-link">IHK-Prüfung</a>
<a href="diagram_editor.html" class="portal-nav-link" title="Interaktives Diagramm-Studio (ER, Struktogramm, UML)">📐 Diagramme</a>
<a href="workspace.html?course=python" class="portal-nav-link">Web-IDE</a>
<a href="#zertifikate-section" class="portal-nav-link">Zertifikate</a>
<a href="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">Dozentenbereich</a>
<a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171;">Administration</a>
</nav>
<!-- User Profile & Logout -->
<div style="display: flex; align-items: center; gap: 10px;">
<div id="nav-profile-pill" style="display: flex; align-items: center; gap: 8px; background: #1e293b; padding: 4px 12px; border-radius: 6px; border: 1px solid #334155;">
<span id="nav-auth-user" style="font-size: 0.82rem; font-weight: 600; color: #f8fafc;">Lädt...</span>
<span id="nav-auth-role" style="font-size: 0.68rem; font-weight: 600; background: #334155; color: #cbd5e1; padding: 2px 6px; border-radius: 4px; text-transform: uppercase;"></span>
<span id="nav-auth-profession" style="display: none; font-size: 0.68rem; font-weight: 600; background: rgba(29, 78, 216, 0.2); color: #93c5fd; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; border: 1px solid rgba(29, 78, 216, 0.4);" title="Aktiver IT-Ausbildungsberuf"></span>
</div>
<button type="button" class="btn" id="nav-btn-logout" style="padding: 6px 12px; font-size: 0.82rem; background: transparent; color: #94a3b8; border: 1px solid #334155; border-radius: 6px; font-weight: 500; cursor: pointer;">
<span class="btn-text-desktop">Abmelden</span>
<span class="btn-text-mobile">Abmelden</span>
</button>
<button type="button" id="portal-mobile-menu-btn" class="mobile-menu-toggle" aria-label="Menü umschalten" onclick="toggleMobileMenu()">
<span>☰</span>
</button>
</div>
</div>
</header>
<!-- Mobile Navigation Drawer -->
<div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
<a href="#overview" class="mobile-drawer-link" onclick="toggleMobileMenu()">Übersicht</a>
<a href="#katalog" class="mobile-drawer-link" onclick="toggleMobileMenu()">Kurse</a>
<a href="#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">IHK-Prüfungsvorbereitung</a>
<a href="diagram_editor.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📐 Diagramm-Studio (ER, SG, UML)</a>
<a href="#zertifikate-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">Zertifikate</a>
<a href="index.html?view=landing" class="mobile-drawer-link" onclick="toggleMobileMenu()">Startseite</a>
<a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Impressum</a>
<a href="datenschutz.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Datenschutzerklärung</a>
<a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">Dozenten-Portal</a>
<a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171;">Administration</a>
<button type="button" class="mobile-drawer-link" style="color: #f87171; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; margin-top: 6px; font-weight: 600; width: 100%; display: flex; align-items: center; font-size: 0.88rem;" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
Abmelden
</button>
</div>
<!-- 2. DASHBOARD WELCOME & LIVE METRICS -->
<section class="portal-hero" id="overview" style="padding-top: 36px; padding-bottom: 36px;">
<div class="portal-container">
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px;">
<div>
<div class="portal-hero-pill" style="margin-bottom: 12px;">
<span>IHK Ausbildungs- &amp; Prüfungsvorbereitung</span>
<span style="opacity: 0.5;">•</span>
<span id="pill-current-date">Heute</span>
</div>
<h1>Willkommen, <span id="dash-greeting-name">Teilnehmer</span></h1>
<p style="margin: 0; font-size: 0.98rem; color: #cbd5e1; max-width: 720px; line-height: 1.6;">
Zentrales Ausbildungs- und Lernportal für IT-Fachinformatiker. Praxisnahe Fachmodule, interaktive Monaco Web-IDE und bundeseinheitliche Prüfungsvorbereitung nach IHK AO 2020.
</p>
</div>
<div style="display: flex; gap: 10px; align-items: center;">
<a href="workspace.html?course=python" class="portal-btn-primary" style="padding: 9px 16px; font-size: 0.88rem;">
<span>Web-IDE öffnen &rarr;</span>
</a>
<a href="index.html?view=landing" class="portal-btn-secondary" style="padding: 9px 16px; font-size: 0.88rem;" title="Zur öffentlichen Plattform-Startseite">
<span>Startseite</span>
</a>
</div>
</div>
<!-- 4 Professional KPI Metric Cards -->
<div class="portal-stats-bar" style="margin-top: 26px;">
<div class="portal-stat-card">
<div class="portal-stat-num" id="stat-user-solved">0 / 264</div>
<div class="portal-stat-label">Absolvierte Module</div>
<div class="portal-stat-desc" id="stat-user-percent">0% Ausbildungsfortschritt</div>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num" id="stat-user-prof-name" style="font-size: 1.12rem; line-height: 1.3;">Nicht festgelegt</div>
<div class="portal-stat-label">Ausbildungsberuf</div>
<div class="portal-stat-desc" id="stat-user-prof-desc">Gemäß IHK Rahmenlehrplan</div>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num" id="stat-user-year-name" style="font-size: 1.12rem; line-height: 1.3;">Alle Lehrjahre</div>
<div class="portal-stat-label">Ausbildungsstand</div>
<div class="portal-stat-desc" id="stat-user-level-desc">IHK AP1 &amp; AP2 Fokus</div>
<span id="stat-user-level" style="display: none;">1</span>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num" id="stat-user-streak">1 Tag</div>
<div class="portal-stat-label">Lernkontinuität</div>
<div class="portal-stat-desc">Laufende Qualifikation</div>
<span id="stat-user-xp" style="display: none;">0</span>
</div>
</div>
<!-- Quick Resume Card -->
<div class="resume-card" id="resume-banner">
<div style="display: flex; align-items: center; gap: 16px;">
<div style="width: 44px; height: 44px; border-radius: 8px; background: #334155; border: 1px solid #475569; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;" id="resume-icon">
💻
</div>
<div>
<div style="font-size: 0.74rem; font-weight: 600; color: #cbd5e1; text-transform: uppercase; letter-spacing: 0.6px;">Zuletzt bearbeitet</div>
<h3 style="margin: 2px 0 4px 0; font-size: 1.15rem; color: #ffffff;" id="resume-course-title">Python 3: Vom Einsteiger zum Entwickler</h3>
<p style="margin: 0; font-size: 0.86rem; color: #cbd5e1;" id="resume-course-desc">Setze deine letzte praktische Übung direkt an der gleichen Stelle in der Web-IDE fort.</p>
</div>
</div>
<div>
<a href="workspace.html?course=python" id="resume-action-btn" class="portal-btn-primary" style="padding: 9px 18px;">
<span>Modul fortsetzen &rarr;</span>
</a>
</div>
</div>
</div>
</section>
<!-- 3. KURS-HUB & KURS-KATALOG (VOLLER ZUGRIFF) -->
<main class="portal-container" id="katalog" style="padding-top: 40px; padding-bottom: 64px;">
<div class="portal-filter-bar">
<div>
<h2 style="font-size: 1.6rem; font-weight: 800; margin: 0 0 4px 0; color: #0f172a;">Fachkurse &amp; Ausbildungsmodule</h2>
<p style="color: #64748b; margin: 0; font-size: 0.92rem;">Praxisorientierte Fachmodule nach Ausbildungsberuf und Lehrjahr oder freie Themenwahl.</p>
</div>
<!-- Search Box -->
<div class="portal-search-box">
<input type="text" id="course-filter-input" placeholder="Kurs, Thema oder Modul suchen...">
</div>
</div>
<!-- Category Filter Tabs -->
<div class="portal-filter-tabs" style="margin-bottom: 20px;">
<button type="button" class="portal-tab-pill active" id="tab-pill-all" onclick="filterCourses('all', this)">Alle Fachbereiche</button>
<button type="button" class="portal-tab-pill" id="tab-pill-ihk" onclick="filterCourses('ihk', this)">IHK Prüfungsvorbereitung</button>
<button type="button" class="portal-tab-pill" id="tab-pill-devops" onclick="filterCourses('devops', this)">DevOps &amp; Infrastruktur</button>
<button type="button" class="portal-tab-pill" id="tab-pill-coding" onclick="filterCourses('coding', this)">Softwaretechnik &amp; Systems</button>
<button type="button" class="portal-tab-pill" id="tab-pill-data" onclick="filterCourses('data', this)">Datenbanken &amp; Web</button>
</div>
<!-- AUSBILDUNGSPLAN & KMK-LERNFELDER BEREICH -->
<div class="apprenticeship-panel" id="azubi-panel">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 12px;">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 38px; height: 38px; border-radius: 8px; background: #0f172a; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: white;">
📋
</div>
<div>
<h3 style="margin: 0; font-size: 1.12rem; font-weight: 700; color: #0f172a;">Ausbildungsrahmenplan &amp; KMK-Lernfelder (2020)</h3>
<p style="margin: 2px 0 0 0; font-size: 0.85rem; color: #64748b;">Lehrplan-Zuordnung nach IT-Ausbildungsberuf und Ausbildungsjahr (1.–3. Lehrjahr mit AP1/AP2 Relevanz).</p>
</div>
</div>
<!-- Profession Dropdown & Save Button -->
<div style="display: flex; flex-direction: column; align-items: flex-end; gap: 6px;">
<div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
<label for="azubi-prof-select" style="font-size: 0.85rem; font-weight: 600; color: #475569;">Ausbildungsberuf:</label>
<select id="azubi-prof-select" onchange="onProfessionChanged()" style="padding: 7px 12px; font-size: 0.86rem; font-weight: 500; border-radius: 6px; border: 1px solid #cbd5e1; background: #ffffff; color: #0f172a; cursor: pointer;">
<option value="">-- Kein Ausbildungsberuf festgelegt --</option>
<option value="FISI">Fachinformatiker/in für Systemintegration (FISI)</option>
<option value="FIAE">Fachinformatiker/in für Anwendungsentwicklung (FIAE)</option>
<option value="FIDP">Fachinformatiker/in für Daten- und Prozessanalyse (FIDP)</option>
<option value="FIDV">Fachinformatiker/in für Digitale Vernetzung (FIDV)</option>
<option value="ITSE">IT-System-Elektroniker/in (ITSE)</option>
<option value="ITSM">Kaufleute für IT-System-Management (ITSM)</option>
<option value="KDM">Kaufleute für Digitalisierungsmanagement (KDM)</option>
<option value="ALL">Alle 7 IT-Berufe (Dozenten- &amp; Admin-Vollansicht)</option>
</select>
<button type="button" class="btn" id="btn-save-apprenticeship" onclick="saveApprenticeshipChoice()" style="background: #1d4ed8; color: white; padding: 7px 14px; font-size: 0.82rem; font-weight: 600; border-radius: 6px; border: none; cursor: pointer;" title="Beruf in deinem Account speichern">
Im Account speichern
</button>
</div>
<!-- Account Status Info Badge -->
<div id="azubi-prof-account-badge" style="font-size: 0.78rem; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569;">
<span id="azubi-prof-account-msg">Lade Berufsstatus...</span>
</div>
</div>
</div>
<!-- Year Filter Tabs & Assigned Filter -->
<div style="display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid #f1f5f9; padding-top: 14px;" id="azubi-year-tabs">
<button type="button" class="year-pill active" id="pill-year-all" onclick="filterByYear('all', this)">Alle Lehrjahre</button>
<button type="button" class="year-pill" id="pill-year-1" onclick="filterByYear(1, this)">1. Lehrjahr (LF 1–5)</button>
<button type="button" class="year-pill" id="pill-year-2" onclick="filterByYear(2, this)">2. Lehrjahr (LF 6–9 · AP1)</button>
<button type="button" class="year-pill" id="pill-year-3" onclick="filterByYear(3, this)">3. Lehrjahr (LF 10–12 · AP2)</button>
<button type="button" class="year-pill assigned-only-btn" id="btn-filter-assigned" onclick="filterByAssigned(this)">Zugewiesene Module</button>
</div>
<!-- Dynamic Lernfeld Drawer / Infobox -->
<div id="lernfeld-info-container" style="margin-top: 16px; padding: 14px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; display: none;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px;">
<h4 style="margin: 0; font-size: 0.95rem; font-weight: 800; color: #1e293b;" id="lf-info-title">Lernfelder für dieses Lehrjahr</h4>
<span style="font-size: 0.76rem; font-weight: 700; color: #0284c7; background: #e0f2fe; padding: 2px 8px; border-radius: 99px;" id="lf-info-badge">KMK Rahmenlehrplan</span>
</div>
<div id="lf-badges-list" style="display: flex; flex-wrap: wrap; gap: 10px;">
<!-- Dynamically populated LF chips -->
</div>
</div>
<!-- Assigned Courses Banner for Azubi -->
<div id="assigned-courses-alert" style="margin-top: 14px; padding: 10px 14px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; font-size: 0.84rem; color: #065f46; display: none; align-items: center; justify-content: space-between;">
<div>
<span style="font-weight: 800;">👨‍🏫 Dozenten-Zuweisung aktiv:</span> <span id="assigned-courses-count-text">Dir wurden gezielt Kurse zugeteilt.</span>
</div>
<button type="button" onclick="filterByAssigned(document.getElementById('btn-filter-assigned'))" style="background: #10b981; color: white; border: none; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; cursor: pointer;">
Anzeigen &rarr;
</button>
</div>
</div>
<!-- GRID OF ALL 13 COURSES -->
<div class="portal-courses-grid" id="courses-grid-container">
<!-- 1. IHK AP1 -->
<div class="portal-card" data-category="ihk" data-course-id="ihk_ap1" data-title="ihk ap1 lernfelder 1-8 it-arbeitsplatz subnetting trace tabellen simulation">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">📘</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP1: IT-Arbeitsplatz &amp; Basissysteme</h3>
<p class="portal-card-desc">Lückenlose Vorbereitung auf die Abschlussprüfung Teil 1. Alle Lernfelder (LF 1–8), Subnetting-Drill, Trace-Tabellen, SQL-Labor &amp; 90-Minuten Probeprüfung.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">LF 1–8 Kernqualifikation</span>
<span class="portal-card-tag">Subnetting Drill</span>
<span class="portal-card-tag">Trace-Tabellen</span>
<span class="portal-card-tag">90-Min Simulation</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-ihk_ap1"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-ihk_ap1">0 / 12 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=ihk_ap1&chapter=01_lf1_unternehmen_und_arbeitsplatz" class="btn-start-ide" onclick="trackLastCourse('ihk_ap1', 'IHK AP1: IT-Arbeitsplatz', '📘')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/ihk_ap1/01_lf1_unternehmen_und_arbeitsplatz/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 2. IHK AP2 FISI -->
<div class="portal-card" data-category="ihk" data-course-id="ihk_ap2_fisi" data-title="ihk ap2 fisi fachinformatiker systemintegration wiso vlan routing storage cloud 40h-projekt">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">📕</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP2: Fachinformatiker Systemintegration</h3>
<p class="portal-card-desc">Fachrichtung Systemintegration: LF 9 (Netzwerke/VLAN), LF 10 (Server/AD), LF 11 (Storage/RAID), LF 12 (Cloud/Docker), WiSo &amp; offizieller Leitfaden zur 40h-Projektarbeit.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">LF 9–12 FISI</span>
<span class="portal-card-tag">Active Directory &amp; GPO</span>
<span class="portal-card-tag">WiSo Prüfungsfragen</span>
<span class="portal-card-tag">40h-Projektarbeit</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-ihk_ap2_fisi"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-ihk_ap2_fisi">0 / 12 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=ihk_ap2_fisi&chapter=01_lf9_netzwerkinfrastruktur_und_routing" class="btn-start-ide" onclick="trackLastCourse('ihk_ap2_fisi', 'IHK AP2 Systemintegration', '📕')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/ihk_ap2_fisi/01_lf9_netzwerkinfrastruktur_und_routing/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 3. IHK AP2 FIAE -->
<div class="portal-card" data-category="ihk" data-course-id="ihk_ap2_fiae" data-title="ihk ap2 fiae fachinformatiker anwendungsentwicklung software clean architecture uml gof solid testing 80h-projekt wiso">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">💻</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP2: Fachinformatiker Anwendungsentwicklung</h3>
<p class="portal-card-desc">Fachrichtung Anwendungsentwicklung: Software-Architektur (Clean/Hexagonal), GoF-Entwurfsmuster, UML 2.5, Algorithmen (O-Notation), OOP &amp; SOLID, REST/GraphQL, Testing &amp; 80h-Projektarbeit.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">LF 9–12 FIAE</span>
<span class="portal-card-tag">GoF &amp; Clean Architecture</span>
<span class="portal-card-tag">UML 2.5 &amp; SOLID</span>
<span class="portal-card-tag">80h-Projektarbeit</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-ihk_ap2_fiae"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-ihk_ap2_fiae">0 / 12 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=ihk_ap2_fiae&chapter=01_software_architektur_und_design_patterns" class="btn-start-ide" onclick="trackLastCourse('ihk_ap2_fiae', 'IHK AP2 Anwendungsentwicklung', '💻')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/ihk_ap2_fiae/01_software_architektur_und_design_patterns/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 4. IHK AP2 FIDP -->
<div class="portal-card" data-category="ihk" data-course-id="ihk_ap2_fidp" data-title="ihk ap2 fidp fachinformatiker daten prozessanalyse bpmn etl dwh statistik machine learning dashboard 40h-projekt wiso">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">📊</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP2: Fachinformatiker Daten- &amp; Prozessanalyse</h3>
<p class="portal-card-desc">Fachrichtung Daten- und Prozessanalyse: Prozessoptimierung, BPMN 2.0, ISO 25012 Datenqualität, ETL/CDC, Star-/Snowflake-Schema, Big Data Streaming, Statistik, ML-Evaluation &amp; 40h-Projektarbeit.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">LF 9–12 FIDP</span>
<span class="portal-card-tag">BPMN 2.0 &amp; ETL/DWH</span>
<span class="portal-card-tag">Statistik &amp; ML-Evaluation</span>
<span class="portal-card-tag">40h-Projektarbeit</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-ihk_ap2_fidp"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-ihk_ap2_fidp">0 / 12 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=ihk_ap2_fidp&chapter=01_prozessanalyse_und_prozessoptimierung" class="btn-start-ide" onclick="trackLastCourse('ihk_ap2_fidp', 'IHK AP2 Datenanalyse', '📊')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/ihk_ap2_fidp/01_prozessanalyse_und_prozessoptimierung/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 5. IHK AP2 FIDV -->
<div class="portal-card" data-category="ihk" data-course-id="ihk_ap2_fidv" data-title="ihk ap2 fidv fachinformatiker digitale vernetzung cps rami io-link profinet opc ua 5g iec 62443 purdue 40h-projekt wiso">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🏭</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP2: Fachinformatiker Digitale Vernetzung</h3>
<p class="portal-card-desc">Fachrichtung Digitale Vernetzung: Cyber-Physische Systeme, RAMI 4.0, IO-Link, Edge Computing, Profinet IO, TSN, OPC UA/MQTT, 5G-Campusnetze, IEC 62443, Purdue-Modell &amp; 40h-Projektarbeit.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">LF 9–12 FIDV</span>
<span class="portal-card-tag">CPS &amp; RAMI 4.0</span>
<span class="portal-card-tag">IEC 62443 OT-Security</span>
<span class="portal-card-tag">40h-Projektarbeit</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-ihk_ap2_fidv"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-ihk_ap2_fidv">0 / 12 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=ihk_ap2_fidv&chapter=01_industrie40_und_cyber_physische_systeme" class="btn-start-ide" onclick="trackLastCourse('ihk_ap2_fidv', 'IHK AP2 Digitale Vernetzung', '🏭')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/ihk_ap2_fidv/01_industrie40_und_cyber_physische_systeme/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 6. IHK AP2 ITSE -->
<div class="portal-card" data-category="ihk" data-course-id="ihk_ap2_itse" data-title="ihk ap2 itse it-system-elektroniker elektrotechnik vde 0100 dguv vorschrift 3 usv lwl otdr schutzklassen emv 40h-projekt wiso">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">⚡</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP2: IT-System-Elektroniker</h3>
<p class="portal-card-desc">Fachrichtung IT-System-Elektronik: DIN VDE 0100/0701, DGUV V3, USV-Klassifizierung (VFI-SS-111), LWL-Spleißdämpfung &amp; OTDR-Messung, EMV-Zonen, Brandschottung &amp; 40h-Projektarbeit.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">LF 9–12 ITSE</span>
<span class="portal-card-tag">VDE 0100 &amp; DGUV V3</span>
<span class="portal-card-tag">USV &amp; LWL/OTDR</span>
<span class="portal-card-tag">40h-Projektarbeit</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-ihk_ap2_itse"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-ihk_ap2_itse">0 / 12 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=ihk_ap2_itse&chapter=01_elektrotechnik_und_schutzmassnahmen_vde0100" class="btn-start-ide" onclick="trackLastCourse('ihk_ap2_itse', 'IHK AP2 IT-System-Elektroniker', '⚡')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/ihk_ap2_itse/01_elektrotechnik_und_schutzmassnahmen_vde0100/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 7. IHK AP2 ITSM -->
<div class="portal-card" data-category="ihk" data-course-id="ihk_ap2_itsm" data-title="ihk ap2 itsm kaufleute it-system-management marketing 7p handelskalkulation lep bvp sla tco roi buying center evb-it 40h-projekt wiso">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">💼</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP2: IT-System-Management</h3>
<p class="portal-card-desc">Kaufleute für IT-System-Management: IT-Marktanalyse, B2B-Buying-Center, Vorwärts- &amp; Rückwärts-Handelskalkulation, TCO/ROI, EVB-IT Verträge, SLAs, ITIL Service Desk &amp; 40h-Projektarbeit.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">LF 9–12 ITSM</span>
<span class="portal-card-tag">Handelskalkulation</span>
<span class="portal-card-tag">EVB-IT &amp; SLA Design</span>
<span class="portal-card-tag">40h-Projektarbeit</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-ihk_ap2_itsm"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-ihk_ap2_itsm">0 / 12 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=ihk_ap2_itsm&chapter=01_it_marktanalyse_wettbewerb_und_swot" class="btn-start-ide" onclick="trackLastCourse('ihk_ap2_itsm', 'IHK AP2 IT-System-Management', '💼')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/ihk_ap2_itsm/01_it_marktanalyse_wettbewerb_und_swot/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 8. IHK AP2 KDM -->
<div class="portal-card" data-category="ihk" data-course-id="ihk_ap2_kdm" data-title="ihk ap2 kdm kaufleute digitalisierungsmanagement business model canvas plattformoekonomie bpmn dms gobd xrechnung dsfa ai act 40h-projekt wiso">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">📈</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP2: Digitalisierungsmanagement</h3>
<p class="portal-card-desc">Kaufleute für Digitalisierungsmanagement: Business Model Canvas, Plattformökonomie &amp; Netzwerkeffekte, BPMN 2.0, GoBD-konforme DMS, XRechnung/ZUGFeRD, DSFA, EU AI Act &amp; 40h-Projektarbeit.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">LF 9–12 KDM</span>
<span class="portal-card-tag">Business Model Canvas</span>
<span class="portal-card-tag">GoBD &amp; XRechnung</span>
<span class="portal-card-tag">40h-Projektarbeit</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-ihk_ap2_kdm"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-ihk_ap2_kdm">0 / 12 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=ihk_ap2_kdm&chapter=01_digitale_geschaeftsmodelle_und_bmc" class="btn-start-ide" onclick="trackLastCourse('ihk_ap2_kdm', 'IHK AP2 Digitalisierungsmanagement', '📈')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/ihk_ap2_kdm/01_digitale_geschaeftsmodelle_und_bmc/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 3. PYTHON 3 -->
<div class="portal-card" data-category="coding" data-course-id="python" data-title="python software entwicklung oop grundlagen tkinter data engineering">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐍</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">Python 3: Vom Einsteiger zum Entwickler</h3>
<p class="portal-card-desc">Das umfassende Flaggschiff-Curriculum: Grundlagen (G01–G10), Objektorientierung (00–06), Fortgeschrittenes OOP &amp; GUI (07–16) und Data Engineering (17–22).</p>
<div class="portal-card-tags">
<span class="portal-card-tag">OOP &amp; Klassen</span>
<span class="portal-card-tag">Pyodide WASM</span>
<span class="portal-card-tag">Tkinter GUI</span>
<span class="portal-card-tag">Unit Testing</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-python"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-python">0 / 35 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=python&chapter=01_erste_schritte_taschenrechner" class="btn-start-ide" onclick="trackLastCourse('python', 'Python 3 Professional', '🐍')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 4. LINUX BASH & CLOUD DEVOPS -->
<div class="portal-card" data-category="devops" data-course-id="bash" data-title="linux bash shell scripting terminal devops jq sed awk docker bats ci/cd">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐧</div>
<span class="portal-card-badge badge-devops">DevOps &amp; Cloud</span>
</div>
<h3 class="portal-card-title">Linux Bash, Shell Scripting &amp; Cloud DevOps</h3>
<p class="portal-card-desc">Terminal-Mastery für Sysadmins: I/O Streams, Pipes, Text-Mining mit <code>jq</code>, <code>sed</code> und <code>awk</code>, Parallelisierung (xargs/parallel), Docker-Scripting &amp; BATS Unittests.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">I/O Redirection</span>
<span class="portal-card-tag">jq JSON Mining</span>
<span class="portal-card-tag">xargs Multithreading</span>
<span class="portal-card-tag">BATS Testsuite</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-bash"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-bash">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=bash&chapter=01_navigation_dateien_und_globbing" class="btn-start-ide" onclick="trackLastCourse('bash', 'Linux Bash & Cloud DevOps', '🐧')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/bash/01_navigation_dateien_und_globbing/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 5. POWERSHELL 7+ CORE -->
<div class="portal-card" data-category="devops" data-course-id="powershell" data-title="powershell ps7 cmdlets pipeline .net rest api pester active directory">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🛡️</div>
<span class="portal-card-badge badge-devops">DevOps &amp; Cloud</span>
</div>
<h3 class="portal-card-title">PowerShell 7+ Core: Enterprise Automation</h3>
<p class="portal-card-desc">Modernes Microsoft &amp; Multi-Platform Scripting: Die Objekt-Pipeline, Custom PSCustomObjects, REST-APIs, moderne Parallelisierung mit <code>ForEach-Object -Parallel</code> &amp; Pester Unit Tests.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Objekt-Pipeline</span>
<span class="portal-card-tag">PSCustomObject</span>
<span class="portal-card-tag">Parallel-Jobs</span>
<span class="portal-card-tag">Pester Tests</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-powershell"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-powershell">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=powershell&chapter=01_powershell_konsole_und_cmdlet_architektur" class="btn-start-ide" onclick="trackLastCourse('powershell', 'PowerShell 7+ Core', '🛡️')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/powershell/01_powershell_konsole_und_cmdlet_architektur/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 5b. ACTIVE DIRECTORY & WINDOWS SERVER -->
<div class="portal-card" data-category="devops" data-course-id="active_directory" data-title="active directory windows server fsmo agdlp gpo powershell ldap ou dns fisi">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🏛️</div>
<span class="portal-card-badge badge-devops">SysAdmin &amp; Enterprise</span>
</div>
<h3 class="portal-card-title">Active Directory &amp; Windows Server</h3>
<p class="portal-card-desc">Enterprise Identity Management: AD DS Gesamtstruktur, 5 FSMO-Rollen, OU-Design, Sites &amp; Replikation, AGDLP-Berechtigungen, Gruppenrichtlinien (GPOs) &amp; PowerShell-Automation.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">AD DS &amp; FSMO</span>
<span class="portal-card-tag">AGDLP-Prinzip</span>
<span class="portal-card-tag">GPO &amp; WMI</span>
<span class="portal-card-tag">AD PowerShell</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-active_directory"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-active_directory">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=active_directory&chapter=01_ad_architektur_und_wald_baum_domaene" class="btn-start-ide" onclick="trackLastCourse('active_directory', 'Active Directory', '🏛️')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/active_directory/01_ad_architektur_und_wald_baum_domaene/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 5c. GIT VERSIONSKONTROLLE -->
<div class="portal-card" data-category="devops" data-course-id="git" data-title="git versionskontrolle branching merging rebase devops github gitlab ci/cd hooks fiae fisi">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🔀</div>
<span class="portal-card-badge badge-devops">DevOps &amp; Version Control</span>
</div>
<h3 class="portal-card-title">Git Versionskontrolle &amp; DevOps Workflows</h3>
<p class="portal-card-desc">Industriestandard für Entwickler &amp; Sysadmins: 3-Bereiche-Modell, atomare Commits, Diff-Analyse, Fast-Forward vs. 3-Way-Merge, Konfliktlösung, Interaktives Rebase &amp; Pre-Commit Hooks.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">3-Bereiche-Modell</span>
<span class="portal-card-tag">Branching &amp; Merge</span>
<span class="portal-card-tag">Rebase Squash</span>
<span class="portal-card-tag">Pre-Commit Hooks</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-git"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-git">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=git&chapter=01_git_init_und_repo_basics" class="btn-start-ide" onclick="trackLastCourse('git', 'Git Versionskontrolle', '🔀')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/git/01_git_init_und_repo_basics/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 5d. DNS-RECORDS & DOMAIN SYSTEM -->
<div class="portal-card" data-category="devops" data-course-id="dns_records" data-title="dns domain name system records a aaaa cname mx txt spf dkim dmarc srv dnssec netzwerk fisi fidv">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🌐</div>
<span class="portal-card-badge badge-devops">Netzwerk &amp; Security</span>
</div>
<h3 class="portal-card-title">DNS-Records &amp; Domain Name System</h3>
<p class="portal-card-desc">Fundament des Internets: DNS-Hierarchie, Port 53 UDP/TCP, TTL-Propagation, A/AAAA, CNAME, SOA, PTR, E-Mail-Sicherheit mit SPF/DKIM/DMARC, Active Directory SRV-Records &amp; dig-Auditing.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">A / AAAA / CNAME</span>
<span class="portal-card-tag">SPF / DKIM / DMARC</span>
<span class="portal-card-tag">AD SRV Records</span>
<span class="portal-card-tag">dig &amp; DNSSEC</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-dns_records"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-dns_records">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=dns_records&chapter=01_dns_hierarchie_und_root_server" class="btn-start-ide" onclick="trackLastCourse('dns_records', 'DNS-Records & Domain Security', '🌐')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/dns_records/01_dns_hierarchie_und_root_server/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 6. SQL & DATENBANKEN -->
<div class="portal-card" data-category="data" data-course-id="sql" data-title="sql datenbanken postgresql sqlite normalisierung joins cte window-functions acid">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐬</div>
<span class="portal-card-badge badge-data">Daten &amp; Web</span>
</div>
<h3 class="portal-card-title">SQL &amp; Relationale Datenbank-Architektur</h3>
<p class="portal-card-desc">Vollständiges relationales Datenmanagement: Strikte Normalisierung (1NF–3NF), komplexe Multi-Table JOINs, Subqueries, Common Table Expressions (CTEs), Window Functions &amp; ACID Transaktionen.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">1NF–3NF Normalisierung</span>
<span class="portal-card-tag">JOINs &amp; CTEs</span>
<span class="portal-card-tag">Window Functions</span>
<span class="portal-card-tag">Query Plans</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-sql"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-sql">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=sql&chapter=01_tabellen_und_select" class="btn-start-ide" onclick="trackLastCourse('sql', 'SQL Datenbank-Architektur', '🐬')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/sql/01_tabellen_und_select/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 7. JAVASCRIPT & TYPESCRIPT -->
<div class="portal-card" data-category="coding" data-course-id="javascript" data-title="javascript typescript frontend dom async await es6 web-apps">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🌐</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">JavaScript &amp; Modernes TypeScript</h3>
<p class="portal-card-desc">Moderne Web-Entwicklung: ES6+ Syntax, Klassen &amp; OOP, Async/Await &amp; Promises, DOM-Manipulation, Web Storage, ES-Module und statische Typisierung mit TypeScript Generics.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">ES6+ &amp; OOP</span>
<span class="portal-card-tag">Async/Await</span>
<span class="portal-card-tag">DOM Events</span>
<span class="portal-card-tag">TypeScript Generics</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-javascript"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-javascript">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=javascript&chapter=01_erste_schritte_variablen" class="btn-start-ide" onclick="trackLastCourse('javascript', 'JavaScript & TypeScript', '🌐')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/javascript/01_erste_schritte_variablen/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 8. JAVA 21 ENTERPRISE -->
<div class="portal-card" data-category="coding" data-course-id="java" data-title="java 21 enterprise oop virtual threads streams junit5 records">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">☕</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">Java 21+ Enterprise &amp; IHK Standard</h3>
<p class="portal-card-desc">Enterprise-Architektur: Strikte Typisierung, Records, Vererbung &amp; Interfaces, Generics, Collections Framework, Streams API, Virtual Threads &amp; automatisierte JUnit 5 Tests.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Java 21</span>
<span class="portal-card-tag">Records &amp; OOP</span>
<span class="portal-card-tag">Streams API</span>
<span class="portal-card-tag">Virtual Threads</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-java"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-java">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=java&chapter=01_java_syntax_und_primitive_typen" class="btn-start-ide" onclick="trackLastCourse('java', 'Java 21+ Enterprise', '☕')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/java/01_java_syntax_und_primitive_typen/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 9. RUST SYSTEMS -->
<div class="portal-card" data-category="coding" data-course-id="rust" data-title="rust systems ownership borrowing concurrency lifetimes cargo">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🦀</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">Rust Modern Systems &amp; Safety</h3>
<p class="portal-card-desc">Zero-Cost Abstractions: Ownership &amp; Borrowing, Lifetimes, Enums mit Option/Result, Traits, Smart Pointer (Box, Arc, Mutex), Fearless Concurrency &amp; LRU-Cache Masterprojekt.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Ownership System</span>
<span class="portal-card-tag">Lifetimes</span>
<span class="portal-card-tag">Arc&lt;Mutex&gt;</span>
<span class="portal-card-tag">Cargo Tests</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-rust"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-rust">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=rust&chapter=01_variablen_mutabilitaet_und_typen" class="btn-start-ide" onclick="trackLastCourse('rust', 'Rust Systems & Safety', '🦀')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/rust/01_variablen_mutabilitaet_und_typen/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 10. GO CLOUD MICROSERVICES -->
<div class="portal-card" data-category="coding" data-course-id="go" data-title="go golang microservices concurrency goroutines channels rest apis">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐹</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">Go Cloud Microservices &amp; Concurrency</h3>
<p class="portal-card-desc">Entwickle hochskalierbare Cloud-Services mit Google Go: Goroutines, Channel-Pipelines, Mutex Synchronisation, Standard-HTTP-Server, Middleware &amp; REST Microservice Master.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Goroutines</span>
<span class="portal-card-tag">Channels &amp; Select</span>
<span class="portal-card-tag">net/http Server</span>
<span class="portal-card-tag">Table Tests</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-go"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-go">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=go&chapter=01_syntax_variablen_und_typen" class="btn-start-ide" onclick="trackLastCourse('go', 'Go Microservices & Concurrency', '🐹')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/go/01_syntax_variablen_und_typen/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 11. C# 12 & .NET 8 -->
<div class="portal-card" data-category="coding" data-course-id="csharp" data-title="csharp dotnet c# 12 linq async tasks xunit clean architecture">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🔷</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">C# 12 &amp; Modernes .NET 8 Enterprise</h3>
<p class="portal-card-desc">Moderne Unternehmenssoftware: Top-Level Statements, Pattern Matching, Records, LINQ funktionale Datenabfragen, Asynchrones Task/await, xUnit Tests &amp; Enterprise Order Engine.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">C# 12 Primary Ctors</span>
<span class="portal-card-tag">LINQ Queries</span>
<span class="portal-card-tag">Async / Await</span>
<span class="portal-card-tag">xUnit Testsuite</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-csharp"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-csharp">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=csharp&chapter=01_syntax_datentypen_und_top_level_statements" class="btn-start-ide" onclick="trackLastCourse('csharp', 'C# 12 & .NET 8', '🔷')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/csharp/01_syntax_datentypen_und_top_level_statements/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 12. C & C++20 SYSTEMS -->
<div class="portal-card" data-category="coding" data-course-id="cpp" data-title="cpp c c++ c++20 pointer speicher raii stl templates googletest">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">⚙️</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">C &amp; Modernes C++20 Systems Engineering</h3>
<p class="portal-card-desc">Das Fundament der Systemprogrammierung: Pointer &amp; dynamischer Speicher, RAII, Klassen &amp; Rule of Five, Templates, Smart Pointer (unique_ptr, shared_ptr), STL &amp; GoogleTest.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Pointer &amp; Heap</span>
<span class="portal-card-tag">RAII Resource Guard</span>
<span class="portal-card-tag">Smart Pointer</span>
<span class="portal-card-tag">GoogleTest Suite</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-cpp"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-cpp">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=cpp&chapter=01_c_syntax_datentypen_und_io" class="btn-start-ide" onclick="trackLastCourse('cpp', 'C & C++20 Systems Engineering', '⚙️')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/cpp/01_c_syntax_datentypen_und_io/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
<!-- 13. HTML5 & CSS3 -->
<div class="portal-card" data-category="data" data-course-id="html_css" data-title="html css frontend flexbox grid webdesign responsive ui a11y">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🎨</div>
<span class="portal-card-badge badge-data">Daten &amp; Web</span>
</div>
<h3 class="portal-card-title">HTML5, Modern CSS3 &amp; Responsive UI</h3>
<p class="portal-card-desc">Modernes UI-Handwerk: Semantische Tags, Barrierefreiheit (ARIA/A11y), CSS Custom Properties, 1D-Layouts mit Flexbox, 2D-Layouts mit CSS Grid, Media Queries &amp; Dark Mode.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Semantik &amp; A11y</span>
<span class="portal-card-tag">Flexbox &amp; CSS Grid</span>
<span class="portal-card-tag">Dark Mode Themes</span>
<span class="portal-card-tag">Responsive Design</span>
</div>
<div class="course-progress-wrap">
<div class="course-progress-bar" id="prog-bar-html_css"></div>
</div>
<div class="course-progress-meta">
<span>Fortschritt</span>
<span id="prog-text-html_css">0 / 16 Module (0%)</span>
</div>
</div>
<div class="portal-card-footer" style="margin-top: 14px;">
<a href="workspace.html?course=html_css&chapter=01_semantisches_html_und_struktur" class="btn-start-ide" onclick="trackLastCourse('html_css', 'HTML5 & Modern CSS3', '🎨')">
<span>Kurs öffnen</span> <span>&rarr;</span>
</a>
<a href="courses/html_css/01_semantisches_html_und_struktur/index.html" class="btn-view-theory">
<span>Lehrplan &amp; Theorie</span>
</a>
</div>
</div>
</div>
<!-- 4. IHK PRÜFUNGSVORBEREITUNG (DIREKTE NUTZUNG) -->
<section class="card" id="ihk-section" style="margin-top: 48px; border: 1px solid #cbd5e1; background: #ffffff; border-radius: 12px; padding: 28px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 24px;">
<div>
<span class="portal-card-badge" style="background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; font-size: 0.78rem; font-weight: 600;">Offizieller Prüfungsstandard</span>
<h3 style="margin: 8px 0 6px 0; font-size: 1.45rem; color: #0f172a; font-weight: 800;">IHK Prüfungsvorbereitung AP1 &amp; AP2</h3>
<p style="margin: 0; color: #475569; font-size: 0.92rem; max-width: 780px;">Prüfungssimulation nach bundeseinheitlicher Ausbildungsordnung (AO 2020) für Fachinformatiker aller Fachrichtungen mit Zeitbegrenzung, Notenschlüssel und detaillierten Lösungserklärungen.</p>
</div>
<a href="courses/ihk_ap1/12_ap1_probepruefung_simulation/index.html" class="portal-btn-primary" style="padding: 10px 18px; font-size: 0.88rem;">
<span>AP1 Probeprüfung starten &rarr;</span>
</a>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 16px;">
<div class="ihk-quick-card" data-ihk-profession="common" style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border: 1px solid #38bdf8; border-radius: 10px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: #f8fafc; grid-column: 1 / -1;">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;">
<div>
<span class="portal-card-badge" style="background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); font-size: 0.72rem; font-weight: 700;">NEU • IHK ENTWURFSSTUDIO</span>
<h4 style="margin: 6px 0 4px 0; color: #ffffff; font-size: 1.15rem; font-weight: 800;">📐 IHK Diagramm-Studio: ER-Modell, Struktogramm (DIN 66261) &amp; UML 2.5</h4>
<p style="font-size: 0.88rem; color: #cbd5e1; margin: 0; line-height: 1.55; max-width: 840px;">
Visuelle Entwurfswerkzeuge für Prüfungsaufgaben: Relationale Datenbankschemata mit ANSI SQL DDL-Generierung, Nassi-Shneiderman Struktogramme mit Python-Transpiler sowie UML Klassendiagramme, Sequenzen und Use-Cases.
</p>
</div>
<a href="diagram_editor.html" class="portal-btn-primary" style="padding: 10px 20px; font-size: 0.88rem; background: #0284c7; border-color: #0284c7; text-decoration: none;">
<span>Diagramm-Studio öffnen &rarr;</span>
</a>
</div>
</div>
<div class="ihk-quick-card" data-ihk-profession="common" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1rem; font-weight: 700;">AP1: IT-Arbeitsplatz &amp; Basissysteme (LF 1–8)</h4>
<p style="font-size: 0.85rem; color: #64748b; margin: 0 0 14px 0; line-height: 1.5;">Gemeinsame Kernqualifikationen für alle IT-Berufe: Verträge, Ergonomie, Subnetting, BSI, BPMN 2.0, Belege &amp; Netzplan.</p>
<a href="workspace.html?course=ihk_ap1&chapter=01_lf1_unternehmen_und_arbeitsplatz" class="btn-start-ide">
<span>AP1 Module öffnen &rarr;</span>
</a>
</div>
<div class="ihk-quick-card" data-ihk-profession="FISI" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1rem; font-weight: 700;">AP2: Systemintegration (FISI)</h4>
<p style="font-size: 0.85rem; color: #64748b; margin: 0 0 14px 0; line-height: 1.5;">VLAN &amp; Routing, VRT-Symbole, Active Directory, RAID 0-10, Backup 3-2-1-1-0, Enterprise SQL &amp; 40h-Projektleitfaden.</p>
<a href="workspace.html?course=ihk_ap2_fisi&chapter=01_lf9_netzwerkinfrastruktur_und_routing" class="btn-start-ide">
<span>AP2 FISI öffnen &rarr;</span>
</a>
</div>
<div class="ihk-quick-card" data-ihk-profession="FIAE" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1rem; font-weight: 700;">AP2: Anwendungsentwicklung (FIAE)</h4>
<p style="font-size: 0.85rem; color: #64748b; margin: 0 0 14px 0; line-height: 1.5;">Clean Architecture, GoF-Entwurfsmuster, UML 2.5, Algorithmen (O-Notation), OOP &amp; SOLID, REST/GraphQL &amp; 80h-Projektleitfaden.</p>
<a href="workspace.html?course=ihk_ap2_fiae&chapter=01_software_architektur_und_design_patterns" class="btn-start-ide">
<span>AP2 FIAE öffnen &rarr;</span>
</a>
</div>
<div class="ihk-quick-card" data-ihk-profession="FIDP" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1rem; font-weight: 700;">AP2: Daten- &amp; Prozessanalyse (FIDP)</h4>
<p style="font-size: 0.85rem; color: #64748b; margin: 0 0 14px 0; line-height: 1.5;">Prozessoptimierung, BPMN 2.0, ISO 25012 Datenqualität, ETL/CDC, Star-Schema, Statistik, ML-Evaluation &amp; 40h-Projektleitfaden.</p>
<a href="workspace.html?course=ihk_ap2_fidp&chapter=01_prozessanalyse_und_prozessoptimierung" class="btn-start-ide">
<span>AP2 FIDP öffnen &rarr;</span>
</a>
</div>
<div class="ihk-quick-card" data-ihk-profession="FIDV" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1rem; font-weight: 700;">AP2: Digitale Vernetzung (FIDV)</h4>
<p style="font-size: 0.85rem; color: #64748b; margin: 0 0 14px 0; line-height: 1.5;">Cyber-Physische Systeme, RAMI 4.0, IO-Link, Profinet IO, TSN, OPC UA/MQTT, 5G-Campus, IEC 62443, Purdue &amp; 40h-Projekt.</p>
<a href="workspace.html?course=ihk_ap2_fidv&chapter=01_industrie40_und_cyber_physische_systeme" class="btn-start-ide">
<span>AP2 FIDV öffnen &rarr;</span>
</a>
</div>
<div class="ihk-quick-card" data-ihk-profession="ITSE" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1rem; font-weight: 700;">AP2: IT-System-Elektroniker (ITSE)</h4>
<p style="font-size: 0.85rem; color: #64748b; margin: 0 0 14px 0; line-height: 1.5;">VDE 0100/0701, DGUV V3, USV (VFI), LWL-Spleißen &amp; OTDR, EMV, Brandschottung &amp; 40h-Projektleitfaden.</p>
<a href="workspace.html?course=ihk_ap2_itse&chapter=01_elektrotechnik_und_schutzmassnahmen_vde0100" class="btn-start-ide">
<span>AP2 ITSE öffnen &rarr;</span>
</a>
</div>
<div class="ihk-quick-card" data-ihk-profession="ITSM" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1rem; font-weight: 700;">AP2: IT-System-Management (ITSM)</h4>
<p style="font-size: 0.85rem; color: #64748b; margin: 0 0 14px 0; line-height: 1.5;">7P-Marketing, Handelskalkulation, TCO/ROI, EVB-IT Verträge, SLAs, ITIL &amp; 40h-Projektleitfaden.</p>
<a href="workspace.html?course=ihk_ap2_itsm&chapter=01_it_marktanalyse_wettbewerb_und_swot" class="btn-start-ide">
<span>AP2 ITSM öffnen &rarr;</span>
</a>
</div>
<div class="ihk-quick-card" data-ihk-profession="KDM" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1rem; font-weight: 700;">AP2: Digitalisierungsmanagement (KDM)</h4>
<p style="font-size: 0.85rem; color: #64748b; margin: 0 0 14px 0; line-height: 1.5;">Business Model Canvas, Plattformökonomie, BPMN 2.0, GoBD/DMS, XRechnung, DSFA &amp; 40h-Projektleitfaden.</p>
<a href="workspace.html?course=ihk_ap2_kdm&chapter=01_digitale_geschaeftsmodelle_und_bmc" class="btn-start-ide">
<span>AP2 KDM öffnen &rarr;</span>
</a>
</div>
<div class="ihk-quick-card" data-ihk-profession="common" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1rem; font-weight: 700;">Subnetting-Drill Master</h4>
<p style="font-size: 0.85rem; color: #64748b; margin: 0 0 14px 0; line-height: 1.5;">Interaktiver Rechentrainer: Netz-ID, Broadcast-Adresse, Hostbereich &amp; Präfixlängen im Sekundentakt trainieren.</p>
<a href="courses/ihk_ap1/11_subnetting_drill_master/index.html" class="btn-start-ide">
<span>Subnetting-Drill starten &rarr;</span>
</a>
</div>
<!-- Hinweisfeld wenn kein Ausbildungsberuf im Account gewählt ist -->
<div id="ihk-no-prof-hint" style="display: none; grid-column: 1 / -1; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 24px; text-align: center;">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1rem; font-weight: 700;">Berufsspezifischer Prüfungskurs (AP2)</h4>
<p style="font-size: 0.88rem; color: #64748b; margin: 0 0 14px 0; max-width: 580px; margin-inline: auto; line-height: 1.5;">
Auf deinem Dashboard werden die Kurse für deinen im Account hinterlegten Ausbildungsberuf angezeigt. Wähle oben im Ausbildungsrahmenplan deinen IT-Beruf aus und klicke auf Speichern, um deinen passenden AP2-Trainer freizuschalten.
</p>
<button type="button" onclick="document.getElementById('azubi-panel').scrollIntoView({behavior:'smooth'})" class="portal-btn-primary" style="padding: 8px 16px; font-size: 0.84rem;">
Ausbildungsberuf festlegen &rarr;
</button>
</div>
</div>
</section>
<!-- 5. ZERTIFIKATS-HUB -->
<section class="card" id="zertifikate-section" style="margin-top: 48px; border-radius: 16px; padding: 32px; background: #ffffff; border: 1px solid #e2e8f0;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 24px;">
<div>
<span class="portal-card-badge" style="background: #fef3c7; color: #b45309; border: 1px solid #fde68a;">Nachweisbare Qualifikation</span>
<h3 style="margin: 8px 0 6px 0; font-size: 1.5rem; color: #0f172a; font-weight: 900;">🏆 Offizielle Leistungs-Zertifikate</h3>
<p style="margin: 0; color: #64748b; font-size: 0.92rem; max-width: 720px;">
Sobald du die Module eines Lehrpfads absolvierst, kannst du hier dein persönliches, verifizierbares PDF-Zertifikat für deine Bewerbungsunterlagen generieren und ausdrucken.
</p>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px;">
<div class="cert-preview-card">
<div>
<div style="font-size: 1.6rem; margin-bottom: 8px;">🐍</div>
<h4 style="margin: 0 0 6px 0; font-size: 1.02rem; color: #0f172a;">Python Grundlagen (LP 1)</h4>
<p style="font-size: 0.82rem; color: #64748b; margin: 0 0 14px 0;">10 Module: Variablen, Datentypen, Kontrollfluss, Listen, Dicts &amp; Funktionen.</p>
</div>
<button type="button" class="btn" style="background: #0284c7; color: white; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; border: none; border-radius: 6px; cursor: pointer;" onclick="zeigeZertifikat(1)">
🎓 Zertifikat ansehen
</button>
</div>
<div class="cert-preview-card">
<div>
<div style="font-size: 1.6rem; margin-bottom: 8px;">🏗️</div>
<h4 style="margin: 0 0 6px 0; font-size: 1.02rem; color: #0f172a;">Python OOP &amp; Git (LP 2)</h4>
<p style="font-size: 0.82rem; color: #64748b; margin: 0 0 14px 0;">9 Module: Klassen, Konstruktoren, self, Methoden, UML, VS Code &amp; Git-Workflows.</p>
</div>
<button type="button" class="btn" style="background: #0284c7; color: white; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; border: none; border-radius: 6px; cursor: pointer;" onclick="zeigeZertifikat(2)">
🎓 Zertifikat ansehen
</button>
</div>
<div class="cert-preview-card">
<div>
<div style="font-size: 1.6rem; margin-bottom: 8px;">🐧</div>
<h4 style="margin: 0 0 6px 0; font-size: 1.02rem; color: #0f172a;">Linux Bash Shell Scripting</h4>
<p style="font-size: 0.82rem; color: #64748b; margin: 0 0 14px 0;">Terminal-Mastery, Streams, jq Text-Mining, Parallelisierung &amp; BATS Testsuites.</p>
</div>
<button type="button" class="btn" style="background: #0284c7; color: white; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; border: none; border-radius: 6px; cursor: pointer;" onclick="zeigeZertifikat('bash_scripting')">
🎓 Zertifikat ansehen
</button>
</div>
<div class="cert-preview-card">
<div>
<div style="font-size: 1.6rem; margin-bottom: 8px;">🐬</div>
<h4 style="margin: 0 0 6px 0; font-size: 1.02rem; color: #0f172a;">SQL &amp; Daten-Architektur</h4>
<p style="font-size: 0.82rem; color: #64748b; margin: 0 0 14px 0;">1NF–3NF Normalisierung, Multi-Table JOINs, CTEs, Window Functions &amp; Transaktionen.</p>
</div>
<button type="button" class="btn" style="background: #0284c7; color: white; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; border: none; border-radius: 6px; cursor: pointer;" onclick="zeigeZertifikat('sql_relational')">
🎓 Zertifikat ansehen
</button>
</div>
<div class="cert-preview-card">
<div>
<div style="font-size: 1.6rem; margin-bottom: 8px;">🔀</div>
<h4 style="margin: 0 0 6px 0; font-size: 1.02rem; color: #0f172a;">Git &amp; DevOps Master</h4>
<p style="font-size: 0.82rem; color: #64748b; margin: 0 0 14px 0;">16 Module: 3 Bereiche, Branching, Rebase Squash, Hooks &amp; Git-Flow.</p>
</div>
<button type="button" class="btn" style="background: #0284c7; color: white; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; border: none; border-radius: 6px; cursor: pointer;" onclick="zeigeZertifikat('git_master')">
🎓 Zertifikat ansehen
</button>
</div>
<div class="cert-preview-card">
<div>
<div style="font-size: 1.6rem; margin-bottom: 8px;">🏛️</div>
<h4 style="margin: 0 0 6px 0; font-size: 1.02rem; color: #0f172a;">Active Directory Admin</h4>
<p style="font-size: 0.82rem; color: #64748b; margin: 0 0 14px 0;">16 Module: AD DS, FSMO-Rollen, AGDLP-Prinzip, GPOs &amp; PowerShell AD.</p>
</div>
<button type="button" class="btn" style="background: #0284c7; color: white; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; border: none; border-radius: 6px; cursor: pointer;" onclick="zeigeZertifikat('ad_master')">
🎓 Zertifikat ansehen
</button>
</div>
<div class="cert-preview-card">
<div>
<div style="font-size: 1.6rem; margin-bottom: 8px;">🌐</div>
<h4 style="margin: 0 0 6px 0; font-size: 1.02rem; color: #0f172a;">DNS &amp; Domain Security</h4>
<p style="font-size: 0.82rem; color: #64748b; margin: 0 0 14px 0;">16 Module: Records (A/CNAME/MX), SPF, DKIM, DMARC, SRV &amp; dig-Audit.</p>
</div>
<button type="button" class="btn" style="background: #0284c7; color: white; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; border: none; border-radius: 6px; cursor: pointer;" onclick="zeigeZertifikat('dns_master')">
🎓 Zertifikat ansehen
</button>
</div>
</div>
</section>
</main>
<!-- 6. MODERN MULTI-COLUMN FOOTER -->
<footer id="site-footer" class="portal-footer">
<div class="portal-footer-grid">
<!-- Brand Column -->
<div class="portal-footer-brand">
<a href="dashboard.html" class="portal-footer-logo-row">
<div class="portal-brand-logo" style="width: 36px; height: 36px;">
<img src="assets/favicon.svg" alt="IT-Praxisportal Logo" style="width: 22px; height: 22px;">
</div>
<span class="portal-footer-logo-text">IT-Praxisportal</span>
</a>
<p class="portal-footer-desc">
Dein persönlicher Lernbereich für echte IT-Praxis. Lerne systematisch, meistere Programmiersprachen und bereite dich optimal auf die IHK-Abschlussprüfung vor.
</p>
<div class="portal-footer-badge">
<span>🟢 Angemeldet &bull; Cloud-Sync aktiv</span>
</div>
</div>
<!-- Lehrpfade -->
<div class="portal-footer-col">
<h4>📚 Lehrpfade</h4>
<ul class="portal-footer-links">
<li><a href="#katalog" class="portal-footer-link">🐍 Python &amp; OOP</a></li>
<li><a href="#katalog" class="portal-footer-link">⚡ JavaScript &amp; Web</a></li>
<li><a href="#katalog" class="portal-footer-link">🐧 Linux Bash &amp; DevOps</a></li>
<li><a href="#katalog" class="portal-footer-link">🔷 PowerShell Core</a></li>
<li><a href="#katalog" class="portal-footer-link">🏛️ Active Directory &amp; Windows</a></li>
<li><a href="#katalog" class="portal-footer-link">🔀 Git Versionskontrolle</a></li>
<li><a href="#katalog" class="portal-footer-link">🌐 DNS-Records &amp; Security</a></li>
<li><a href="#katalog" class="portal-footer-link">🗄️ SQL &amp; Datenbanken</a></li>
<li><a href="#katalog" class="portal-footer-link">🌐 Modernes HTML5 &amp; CSS3</a></li>
<li><a href="#katalog" class="portal-footer-link">🦀 Rust, Go, C# &amp; C++</a></li>
</ul>
</div>
<!-- Features & Tools -->
<div class="portal-footer-col">
<h4>💻 Navigation</h4>
<ul class="portal-footer-links">
<li><a href="#overview" class="portal-footer-link">🚀 Dashboard-Übersicht</a></li>
<li><a href="#katalog" class="portal-footer-link">📚 Kurs-Katalog</a></li>
<li><a href="#ihk-section" class="portal-footer-link">🎓 IHK Prüfungstrainer</a></li>
<li><a href="workspace.html?course=python" class="portal-footer-link">💻 Web-IDE starten</a></li>
<li><a href="#zertifikate-section" class="portal-footer-link">🏆 Meine Zertifikate</a></li>
<li><a href="index.html?view=landing" class="portal-footer-link">🌐 Zur Plattform-Startseite</a></li>
<li class="teacher-only" style="display: none;"><a href="teacher.html" class="portal-footer-link" id="footer-teacher-link">👨‍🏫 Dozenten-Portal</a></li>
<li class="admin-only" style="display: none;"><a href="admin.html" class="portal-footer-link" id="footer-admin-link">🛡️ Administration</a></li>
</ul>
</div>
<!-- Rechtliches & Kontakt -->
<div class="portal-footer-col">
<h4>⚖️ Rechtliches &amp; Schutz</h4>
<ul class="portal-footer-links">
<li><a href="impressum.html" class="portal-footer-link">⚖️ Impressum (§ 5 DDG)</a></li>
<li><a href="datenschutz.html" class="portal-footer-link">🔒 Datenschutzerklärung (DSGVO)</a></li>
<li><a href="mailto:kontakt@it-praxisportal.de" class="portal-footer-link">✉️ Support kontaktieren</a></li>
<li><span class="portal-footer-link" style="color: #10b981; cursor: default;">🛡️ Zero Tracking Cookies</span></li>
<li><span class="portal-footer-link" style="color: #64748b; cursor: default;">🇩🇪 Deutsches Hosting</span></li>
</ul>
</div>
</div>
<!-- Bottom Bar -->
<div class="portal-footer-bottom">
<div>
&copy; 2026 IT-Praxisportal &bull; Alexander Müller. Alle Rechte vorbehalten.
</div>
<div class="portal-footer-bottom-links">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
<a href="#overview">Nach oben &uarr;</a>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="assets/app_auth.js?v=2.2.1"></script>
<script src="assets/it_ausbildungen_manifest.js?v=2.1.0"></script>
<script src="assets/courses_manifest.js?v=2.1.0"></script>
<script src="assets/certificate.js?v=2.1.0"></script>
<script>
function toggleMobileMenu() {
const drawer = document.getElementById('portal-mobile-drawer');
const btn = document.getElementById('portal-mobile-menu-btn');
if (!drawer) return;
const isHidden = drawer.style.display === 'none' || !drawer.style.display;
drawer.style.display = isHidden ? 'flex' : 'none';
if (btn) btn.innerHTML = isHidden ? '✕' : '☰';
}
if (window.location.hash === '#menu') {
document.addEventListener('DOMContentLoaded', () => toggleMobileMenu());
}
// 1. Authentifizierung erzwingen
(function checkDashboardAuth() {
if (window.AUTH && typeof window.AUTH.requireAuth === 'function') {
const authed = window.AUTH.requireAuth({
allowClose: false,
title: '🔒 Lernbereich geschützt',
message: 'Bitte melde dich an oder erstelle einen kostenlosen Account, um deine Kurse, Module und Lernfortschritte zu laden.',
onSuccess: () => {
window.location.reload();
}
});
if (!authed) return;
}
})();
// 2. Track Zuletzt Gelernt
function trackLastCourse(courseId, title, icon) {
try {
localStorage.setItem('itp_last_course', JSON.stringify({
id: courseId,
title: title,
icon: icon,
timestamp: Date.now()
}));
} catch (e) {}
}
// Profession-Mapping: Welche AP2-Kurse gehören zu welchem Ausbildungsberuf?
const AP2_PROFESSION_MAP = {
'ihk_ap2_fisi': 'FISI',
'ihk_ap2_fiae': 'FIAE',
'ihk_ap2_fidp': 'FIDP',
'ihk_ap2_fidv': 'FIDV',
'ihk_ap2_itse': 'ITSE',
'ihk_ap2_itsm': 'ITSM',
'ihk_ap2_kdm': 'KDM'
};
const PROFESSION_NAMES = {
'FISI': 'Fachinformatiker Systemintegration (FISI)',
'FIAE': 'Fachinformatiker Anwendungsentwicklung (FIAE)',
'FIDP': 'Fachinformatiker Daten- & Prozessanalyse (FIDP)',
'FIDV': 'Fachinformatiker Digitale Vernetzung (FIDV)',
'ITSE': 'IT-System-Elektroniker/in (ITSE)',
'ITSM': 'Kaufleute für IT-System-Management (ITSM)',
'KDM': 'Kaufleute für Digitalisierungsmanagement (KDM)',
'ALL': 'Alle 7 IT-Berufe (Dozent / Admin)'
};
// Filter State
let currentCategory = 'all';
let currentYear = 'all'; // 'all', 1, 2, 3, or 'assigned'
let accountProfession = ''; // Im DB-Account hinterlegter Beruf
let currentProfession = ''; // Aktuelle Dropdown-Auswahl im Dashboard
let userAssignedCourses = [];
// Helper: Berufs-Status-Badge im Azubi-Panel aktualisieren
function updateProfessionStatusBadge() {
const msgEl = document.getElementById('azubi-prof-account-msg');
const badgeEl = document.getElementById('azubi-prof-account-badge');
const navProf = document.getElementById('nav-auth-profession');
const statProf = document.getElementById('stat-user-prof-name');
if (!msgEl || !badgeEl) return;
if (navProf) {
if (currentProfession && currentProfession !== 'ALL') {
navProf.innerText = currentProfession;
navProf.style.display = 'inline-block';
} else if (currentProfession === 'ALL') {
navProf.innerText = 'ALLE BERUFE';
navProf.style.display = 'inline-block';
} else {
navProf.style.display = 'none';
}
}
if (statProf) {
if (!currentProfession) {
statProf.innerText = 'Nicht festgelegt';
} else if (currentProfession === 'ALL') {
statProf.innerText = 'Alle IT-Berufe (Admin)';
} else {
statProf.innerText = PROFESSION_NAMES[currentProfession] || currentProfession;
}
}
if (!currentProfession) {
badgeEl.style.background = '#fef2f2';
badgeEl.style.borderColor = '#fecaca';
badgeEl.style.color = '#991b1b';
msgEl.innerHTML = '<strong>Kein Ausbildungsberuf hinterlegt:</strong> Berufsbezogene AP2-Kurse sind ausgeblendet. Wähle oben deinen Beruf und klicke auf Speichern.';
} else if (currentProfession === 'ALL') {
badgeEl.style.background = '#f8fafc';
badgeEl.style.borderColor = '#cbd5e1';
badgeEl.style.color = '#1e293b';
msgEl.innerHTML = '<strong>Dozenten- &amp; Admin-Vollansicht:</strong> Alle IT-Ausbildungsberufe sind auf dem Dashboard freigeschaltet.';
} else if (currentProfession === accountProfession) {
badgeEl.style.background = '#f0fdf4';
badgeEl.style.borderColor = '#bbf7d0';
badgeEl.style.color = '#166534';
msgEl.innerHTML = `<strong>Im Account hinterlegt:</strong> ${PROFESSION_NAMES[currentProfession] || currentProfession}. Es wird exklusiv dein passender AP2-Prüfungskurs angezeigt.`;
} else {
badgeEl.style.background = '#fffbeb';
badgeEl.style.borderColor = '#fde68a';
badgeEl.style.color = '#92400e';
msgEl.innerHTML = `<strong>Vorschau:</strong> ${PROFESSION_NAMES[currentProfession] || currentProfession} (noch nicht im Account gespeichert). Klicke auf <strong>Im Account speichern</strong>.`;
}
}
// Unified Card Filtering
function applyAllFilters() {
const cards = document.querySelectorAll('.portal-card');
const query = (document.getElementById('course-filter-input').value || '').toLowerCase().trim();
const manifestProf = (window.IT_AUSBILDUNGEN && window.IT_AUSBILDUNGEN.getProfession && currentProfession && currentProfession !== 'ALL')
? window.IT_AUSBILDUNGEN.getProfession(currentProfession)
: null;
let yearAllowedCourses = null;
if (typeof currentYear === 'number' && manifestProf && manifestProf.years && manifestProf.years[currentYear]) {
yearAllowedCourses = manifestProf.years[currentYear].recommendedCourses || [];
}
let visibleCount = 0;
let counts = { all: 0, ihk: 0, devops: 0, coding: 0, data: 0 };
cards.forEach(card => {
const cardCat = card.getAttribute('data-category');
const cardId = card.getAttribute('data-course-id');
const cardTitle = (card.getAttribute('data-title') || '').toLowerCase();
// 1. Ausbildungsberuf-Prüfung:
// AP2 Kurse für Ausbildungsberufe sieht man NUR, wenn dieser Beruf im Account / Filter gewählt ist!
const requiredProf = AP2_PROFESSION_MAP[cardId];
let matchesProfession = true;
if (requiredProf) {
if (currentProfession === 'ALL') {
matchesProfession = true;
} else if (currentProfession && currentProfession === requiredProf) {
matchesProfession = true;
} else {
matchesProfession = false;
}
}
// 2. Category check
const matchesCategory = (currentCategory === 'all' || cardCat === currentCategory);
// 3. Search query check
const matchesQuery = (!query || cardTitle.includes(query) || card.innerText.toLowerCase().includes(query));
// 4. Year / Assigned check
let matchesYearOrAssigned = true;
if (currentYear === 'assigned') {
matchesYearOrAssigned = userAssignedCourses.includes(cardId);
} else if (yearAllowedCourses !== null) {
matchesYearOrAssigned = yearAllowedCourses.includes(cardId);
}
// Zähler für Fachbereichs-Pills nur bei erlaubtem Beruf mitzählen
if (matchesProfession) {
counts.all++;
if (cardCat && counts[cardCat] !== undefined) {
counts[cardCat]++;
}
}
if (matchesProfession && matchesCategory && matchesQuery && matchesYearOrAssigned) {
card.style.display = 'flex';
visibleCount++;
} else {
card.style.display = 'none';
}
});
// Filter auch auf den IHK AP1 & AP2 Schnellwahl-Bereich anwenden
const ihkCards = document.querySelectorAll('.ihk-quick-card');
ihkCards.forEach(card => {
const prof = card.getAttribute('data-ihk-profession');
if (!prof || prof === 'common') {
card.style.display = 'block';
} else if (currentProfession === 'ALL') {
card.style.display = 'block';
} else if (currentProfession && currentProfession === prof) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
const noProfHint = document.getElementById('ihk-no-prof-hint');
if (noProfHint) {
noProfHint.style.display = (!currentProfession || currentProfession === '') ? 'block' : 'none';
}
// Tab Pills Zähler dynamisch aktualisieren
const pillAll = document.getElementById('tab-pill-all');
const pillIhk = document.getElementById('tab-pill-ihk');
const pillDevops = document.getElementById('tab-pill-devops');
const pillCoding = document.getElementById('tab-pill-coding');
const pillData = document.getElementById('tab-pill-data');
if (pillAll) pillAll.innerText = `Alle Fachbereiche (${counts.all})`;
if (pillIhk) pillIhk.innerText = `IHK Prüfungsvorbereitung (${counts.ihk})`;
if (pillDevops) pillDevops.innerText = `DevOps & Infrastruktur (${counts.devops})`;
if (pillCoding) pillCoding.innerText = `Softwaretechnik & Systems (${counts.coding})`;
if (pillData) pillData.innerText = `Datenbanken & Web (${counts.data})`;
}
// 3. Live Category Filter
function filterCourses(category, element) {
document.querySelectorAll('.portal-tab-pill').forEach(btn => btn.classList.remove('active'));
if (element) element.classList.add('active');
currentCategory = category;
applyAllFilters();
}
// 3b. Year Filter for Azubis
function filterByYear(year, element) {
document.querySelectorAll('.year-pill').forEach(btn => btn.classList.remove('active'));
if (element) element.classList.add('active');
currentYear = year;
const statYear = document.getElementById('stat-user-year-name');
if (statYear) {
statYear.innerText = (year === 'all') ? 'Alle Lehrjahre' : `${year}. Ausbildungsjahr`;
}
renderLernfelder(currentProfession, year);
applyAllFilters();
}
// 3c. Filter by Assigned Courses
function filterByAssigned(element) {
document.querySelectorAll('.year-pill').forEach(btn => btn.classList.remove('active'));
if (element) element.classList.add('active');
currentYear = 'assigned';
const statYear = document.getElementById('stat-user-year-name');
if (statYear) {
statYear.innerText = 'Dozenten-Zuweisung';
}
renderLernfelder(currentProfession, 'assigned');
applyAllFilters();
}
// 3d. On Profession Changed
function onProfessionChanged() {
const select = document.getElementById('azubi-prof-select');
if (select) {
currentProfession = select.value;
updateProfessionStatusBadge();
renderLernfelder(currentProfession, currentYear);
applyAllFilters();
}
}
// 3e. Save Apprenticeship Choice to Backend
async function saveApprenticeshipChoice() {
const select = document.getElementById('azubi-prof-select');
const prof = select ? select.value : '';
const yr = (typeof currentYear === 'number') ? currentYear : 1;
const btn = document.getElementById('btn-save-apprenticeship');
if (btn) btn.innerText = 'Speichere...';
const token = window.AUTH ? window.AUTH.getToken() : null;
if (token) {
try {
const res = await fetch('/api/user/apprenticeship', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({ profession: prof, training_year: yr })
});
if (res.ok) {
accountProfession = prof;
currentProfession = prof;
updateProfessionStatusBadge();
if (btn) {
btn.innerText = 'Gespeichert!';
btn.style.background = '#10b981';
setTimeout(() => {
btn.innerText = 'Im Account speichern';
btn.style.background = '#0284c7';
}, 2000);
}
const user = window.AUTH.getUser();
if (user) {
user.profession = prof;
user.training_year = yr;
localStorage.setItem('auth_user', JSON.stringify(user));
}
applyAllFilters();
} else {
if (btn) btn.innerText = 'Fehler beim Speichern';
}
} catch (e) {
if (btn) btn.innerText = 'Fehler beim Speichern';
}
} else {
accountProfession = prof;
currentProfession = prof;
updateProfessionStatusBadge();
if (btn) btn.innerText = 'Lokal übernommen';
setTimeout(() => { if (btn) btn.innerText = 'Im Account speichern'; }, 2000);
applyAllFilters();
}
}
// 3f. Render Dynamic Lernfelder Drawer
function renderLernfelder(profId, year) {
const container = document.getElementById('lernfeld-info-container');
const badgesList = document.getElementById('lf-badges-list');
const titleEl = document.getElementById('lf-info-title');
const badgeEl = document.getElementById('lf-info-badge');
if (!container || !badgesList) return;
if (!window.IT_AUSBILDUNGEN) {
container.style.display = 'none';
return;
}
if (year === 'all') {
container.style.display = 'none';
return;
}
if (year === 'assigned') {
container.style.display = 'block';
if (titleEl) titleEl.innerText = `Zugeteilte Kurse (${userAssignedCourses.length} Kurse aktiv)`;
if (badgeEl) badgeEl.innerText = 'Dozenten-Zuweisung';
if (userAssignedCourses.length === 0) {
badgesList.innerHTML = `
<div style="font-size: 0.86rem; color: #64748b; padding: 6px 0;">
Dir wurden bisher keine Kurse von einem Dozenten zugewiesen. Wähle oben ein Lehrjahr (1.–3. Lehrjahr), um den offiziellen IHK-Lernfeldplan zu durchlaufen.
</div>`;
} else {
const manifest = window.COURSES_MANIFEST || {};
badgesList.innerHTML = userAssignedCourses.map(cid => {
const c = manifest[cid] || { title: cid, icon: '📘' };
return `
<div class="lf-card" style="border-left: 4px solid #10b981;">
<div class="lf-card-header">
<span style="font-size: 0.88rem; font-weight: 800; color: #0f172a;">${c.icon || '📘'} ${c.title}</span>
<span class="lf-tag" style="background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0;">Zugewiesen</span>
</div>
<div style="margin-top: 6px;">
<a href="workspace.html?course=${cid}" class="btn-start-ide" style="font-size: 0.78rem; padding: 5px 10px;">
In Web-IDE üben &rarr;
</a>
</div>
</div>`;
}).join('');
}
return;
}
// Year 1, 2, or 3
const lfs = window.IT_AUSBILDUNGEN.getLernfelderForYear(profId, year);
const prof = window.IT_AUSBILDUNGEN.getProfession(profId);
container.style.display = 'block';
if (titleEl) {
titleEl.innerText = `Lernfelder im ${year}. Ausbildungsjahr (${prof.shortName})`;
}
if (badgeEl) {
badgeEl.innerText = year === 2 ? 'IHK AP1 Prüfungsrelevant' : (year === 3 ? 'IHK AP2 Fachvertiefung' : 'Kernqualifikationen');
}
badgesList.innerHTML = lfs.map(lf => {
const tagClass = lf.examRelevance.includes('AP1') ? 'lf-tag-ap1' : (lf.examRelevance.includes('AP2') ? 'lf-tag-ap2' : 'lf-tag-wiso');
const courses = lf.relatedCourses || [];
const coursePills = courses.map(cid => {
const manifest = window.COURSES_MANIFEST || {};
const c = manifest[cid] || { title: cid, icon: '📘' };
return `<span style="font-size: 0.75rem; background: #f1f5f9; color: #334155; padding: 2px 7px; border-radius: 99px; font-weight: 700; border: 1px solid #cbd5e1;">${c.icon || '📘'} ${c.title.split(':')[0]}</span>`;
}).join(' ');
return `
<div class="lf-card">
<div class="lf-card-header">
<span style="font-size: 0.84rem; font-weight: 800; color: #0f172a;">LF ${lf.number}: ${lf.shortTitle || lf.title}</span>
<span class="lf-tag ${tagClass}">${lf.examRelevance}</span>
</div>
<div style="font-size: 0.8rem; color: #64748b; line-height: 1.35;">
${lf.description}
</div>
${coursePills ? `<div style="display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;">${coursePills}</div>` : ''}
</div>
`;
}).join('');
}
const searchInput = document.getElementById('course-filter-input');
if (searchInput) {
searchInput.addEventListener('input', () => {
applyAllFilters();
});
}
// 4. Zertifikats-Aufruf
function zeigeZertifikat(key) {
if (typeof window.zeigeZertifikatModal === 'function') {
window.zeigeZertifikatModal(key);
} else {
alert('Zertifikats-Modul lädt noch...');
}
}
// 5. Dashboard Data Loader & Progress Synchronizer
document.addEventListener('DOMContentLoaded', async () => {
// Datum formatieren
const dateEl = document.getElementById('pill-current-date');
if (dateEl) {
dateEl.innerText = new Date().toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'short' });
}
// Logout Button konfigurieren
const logoutBtn = document.getElementById('nav-btn-logout');
if (logoutBtn) {
logoutBtn.onclick = () => {
if (confirm('Möchtest du dich wirklich abmelden?')) {
window.AUTH.logout();
}
};
}
// Nutzerdaten anzeigen
const user = window.AUTH ? window.AUTH.getUser() : null;
if (user) {
const nameStr = user.name || user.email.split('@')[0];
document.getElementById('nav-auth-user').innerText = nameStr;
document.getElementById('dash-greeting-name').innerText = nameStr;
const roleEl = document.getElementById('nav-auth-role');
if (roleEl) {
roleEl.innerText = user.role === 'admin' ? 'Admin' : (user.role === 'teacher' ? 'Dozent' : 'Schüler');
}
accountProfession = user.profession || '';
currentProfession = accountProfession || ((user.role === 'admin' || user.role === 'teacher') ? 'ALL' : '');
const profSel = document.getElementById('azubi-prof-select');
if (profSel) profSel.value = currentProfession;
updateProfessionStatusBadge();
if (user.training_year) {
const yrPill = document.getElementById(`pill-year-${user.training_year}`);
if (yrPill) {
filterByYear(user.training_year, yrPill);
}
}
if (Array.isArray(user.assigned_courses)) {
userAssignedCourses = user.assigned_courses;
}
// Dozenten / Admin Nav Links
if (user.role === 'admin') {
const al = document.getElementById('nav-admin-link');
if (al) al.style.display = 'inline-flex';
const tl = document.getElementById('nav-teacher-link');
if (tl) tl.style.display = 'inline-flex';
const mAl = document.getElementById('mobile-drawer-admin-link');
if (mAl) mAl.style.display = 'flex';
const mTl = document.getElementById('mobile-drawer-teacher-link');
if (mTl) mTl.style.display = 'flex';
} else if (user.role === 'teacher') {
const tl = document.getElementById('nav-teacher-link');
if (tl) tl.style.display = 'inline-flex';
const mTl = document.getElementById('mobile-drawer-teacher-link');
if (mTl) mTl.style.display = 'flex';
}
} else {
accountProfession = '';
currentProfession = '';
const profSel = document.getElementById('azubi-prof-select');
if (profSel) profSel.value = '';
updateProfessionStatusBadge();
}
// Gelöste Kapitel sammeln (localStorage + API)
const solvedSet = new Set();
try {
['python_gamification_state', 'python_gamification_progress'].forEach(k => {
const str = localStorage.getItem(k);
if (str) {
const parsed = JSON.parse(str);
if (Array.isArray(parsed.geloeste_kapitel)) {
parsed.geloeste_kapitel.forEach(id => solvedSet.add(id));
}
}
});
} catch (e) {}
// Server-Sync falls Token vorhanden
if (window.AUTH && window.AUTH.getToken()) {
try {
const [resProg, resMe] = await Promise.all([
fetch('/api/progress/get', {
headers: { 'Authorization': `Bearer ${window.AUTH.getToken()}` }
}),
fetch('/api/auth/me', {
headers: { 'Authorization': `Bearer ${window.AUTH.getToken()}` }
})
]);
if (resProg.ok) {
const pData = await resProg.json();
if (pData.all_progress && Array.isArray(pData.all_progress)) {
pData.all_progress.forEach(p => {
if (p.is_solved) solvedSet.add(p.chapter_id);
});
}
if (pData.progress && Array.isArray(pData.progress.geloeste_kapitel)) {
pData.progress.geloeste_kapitel.forEach(id => solvedSet.add(id));
}
if (user && user.xp !== undefined) {
const xp = user.xp || (solvedSet.size * 25);
const level = user.level || Math.max(1, Math.floor(xp / 100) + 1);
const streak = user.streak_days || 1;
document.getElementById('stat-user-xp').innerText = xp;
document.getElementById('stat-user-level').innerText = level;
document.getElementById('stat-user-streak').innerText = `${streak} Tag(e)`;
}
}
if (resMe.ok) {
const meData = await resMe.json();
if (meData.user) {
if (meData.user.profession !== undefined) {
accountProfession = meData.user.profession || '';
currentProfession = accountProfession || ((user && (user.role === 'admin' || user.role === 'teacher')) ? 'ALL' : '');
const profSel = document.getElementById('azubi-prof-select');
if (profSel) profSel.value = currentProfession;
updateProfessionStatusBadge();
}
if (meData.user.training_year && currentYear === 'all') {
const yrPill = document.getElementById(`pill-year-${meData.user.training_year}`);
if (yrPill) {
filterByYear(meData.user.training_year, yrPill);
}
}
if (Array.isArray(meData.user.assigned_courses)) {
userAssignedCourses = meData.user.assigned_courses;
if (userAssignedCourses.length > 0) {
const alertBox = document.getElementById('assigned-courses-alert');
const countTxt = document.getElementById('assigned-courses-count-text');
if (alertBox) alertBox.style.display = 'flex';
if (countTxt) countTxt.innerText = `Dir wurden ${userAssignedCourses.length} Kurse von deinem Ausbilder zugeteilt.`;
}
}
applyAllFilters();
}
}
} catch (e) {
console.warn('Backend API unreachable:', e);
}
}
// Gesamt-Stats aktualisieren falls nicht vom Server überschrieben
const totalSolved = solvedSet.size;
const totalModules = 264;
const totalPercent = Math.round((totalSolved / totalModules) * 100);
document.getElementById('stat-user-solved').innerText = `${totalSolved} / ${totalModules}`;
document.getElementById('stat-user-percent').innerText = `${totalPercent}% Gesamtfortschritt`;
if (document.getElementById('stat-user-xp').innerText === '0') {
const computedXp = totalSolved * 25;
const computedLevel = Math.max(1, Math.floor(computedXp / 100) + 1);
document.getElementById('stat-user-xp').innerText = computedXp;
document.getElementById('stat-user-level').innerText = computedLevel;
}
// Berechnung des Fortschritts für alle Kurse aus COURSES_MANIFEST
const manifest = window.COURSES_MANIFEST || {};
const courseKeys = ['active_directory', 'bash', 'cpp', 'csharp', 'dns_records', 'git', 'go', 'html_css', 'ihk_ap1', 'ihk_ap2_fisi', 'ihk_ap2_fiae', 'ihk_ap2_fidp', 'ihk_ap2_fidv', 'ihk_ap2_itse', 'ihk_ap2_itsm', 'ihk_ap2_kdm', 'java', 'javascript', 'powershell', 'python', 'rust', 'sql'];
courseKeys.forEach(cid => {
const c = manifest[cid];
if (!c) return;
let cTotal = 0;
let cSolved = 0;
(c.tracks || []).forEach(tr => {
(tr.chapters || []).forEach(ch => {
cTotal++;
const isDone = solvedSet.has(ch.folder) ||
solvedSet.has(`${cid}/${ch.folder}`) ||
solvedSet.has(`${tr.id}/${ch.folder}`);
if (isDone) cSolved++;
});
});
const percent = cTotal > 0 ? Math.round((cSolved / cTotal) * 100) : 0;
const bar = document.getElementById(`prog-bar-${cid}`);
const txt = document.getElementById(`prog-text-${cid}`);
if (bar) bar.style.width = `${percent}%`;
if (txt) txt.innerText = `${cSolved} / ${cTotal} Module (${percent}%)`;
});
// Zuletzt gelernt konfigurieren
try {
const lastStr = localStorage.getItem('itp_last_course');
if (lastStr) {
const last = JSON.parse(lastStr);
if (last && last.id && manifest[last.id]) {
const c = manifest[last.id];
document.getElementById('resume-icon').innerText = last.icon || c.icon || '💻';
document.getElementById('resume-course-title').innerText = last.title || c.title;
document.getElementById('resume-course-desc').innerText = `Klicke hier, um sofort in ${last.title || c.title} weiterzumachen.`;
document.getElementById('resume-action-btn').href = `workspace.html?course=${last.id}`;
}
}
} catch (e) {}
// Initial filter apply
applyAllFilters();
});
</script>
</body>
</html>