2278 lines
120 KiB
HTML
2278 lines
120 KiB
HTML
<!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 & 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 (MODERN & SLIM) -->
|
||
<header class="portal-header-bar">
|
||
<div class="portal-nav-container">
|
||
<a href="dashboard.html" class="portal-brand" title="IT-Praxisportal Dashboard">
|
||
<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- & Weiterbildung</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Slim 3-to-4-item Primary Navigation -->
|
||
<nav class="portal-nav-links">
|
||
<a href="#katalog" class="portal-nav-link" id="nav-katalog-link">📚 Kurse</a>
|
||
<a href="workspace.html?course=python" class="portal-nav-link">💻 Web-IDE</a>
|
||
<a href="diagram_editor.html" class="portal-nav-link" title="Interaktives Diagramm-Studio (ER-Modell, Struktogramm nach DIN 66261, UML 2.5)">📐 Studio</a>
|
||
<a href="#ihk-section" class="portal-nav-link" id="nav-ihk-link" style="display: none;" title="IHK Prüfungsvorbereitung (AP1 & AP2)">🎓 IHK-Prüfung</a>
|
||
</nav>
|
||
|
||
<!-- Right: User Avatar Dropdown & Mobile Menu Button -->
|
||
<div style="display: flex; align-items: center; gap: 10px;">
|
||
<!-- Modern User Avatar Dropdown -->
|
||
<div class="portal-user-dropdown" id="portal-user-dropdown">
|
||
<button type="button" class="portal-user-btn" id="portal-user-btn" aria-haspopup="true" aria-expanded="false" onclick="toggleUserDropdown(event)" title="Benutzerprofil und Einstellungen">
|
||
<span class="portal-user-avatar" id="portal-user-avatar">IT</span>
|
||
<span class="portal-user-name" id="portal-user-name">Benutzer</span>
|
||
<span class="portal-user-caret">▼</span>
|
||
</button>
|
||
<div class="portal-dropdown-menu" id="portal-dropdown-menu">
|
||
<div class="portal-dropdown-header">
|
||
<div class="portal-dropdown-name" id="portal-dropdown-user-fullname">Lädt...</div>
|
||
<div class="portal-dropdown-meta" id="portal-dropdown-user-email">user@portal.local</div>
|
||
<div class="portal-dropdown-badge" id="portal-dropdown-user-badge">Teilnehmer</div>
|
||
</div>
|
||
<a href="#katalog" class="portal-dropdown-item" onclick="toggleUserDropdown(event)">
|
||
<span>📚</span> <span>Kurskatalog & Module</span>
|
||
</a>
|
||
<a href="#zertifikate-section" class="portal-dropdown-item" onclick="toggleUserDropdown(event)">
|
||
<span>🏆</span> <span>Meine Zertifikate & Nachweise</span>
|
||
</a>
|
||
<button type="button" class="portal-dropdown-item" onclick="toggleUserDropdown(event); openProfessionSettings();">
|
||
<span>⚙️</span> <span>Ausbildungsberuf & Modus</span>
|
||
</button>
|
||
<div class="portal-dropdown-divider" id="dropdown-teacher-divider" style="display: none;"></div>
|
||
<div class="portal-dropdown-section-title" id="dropdown-mgmt-title" style="display: none;">Verwaltung</div>
|
||
<a href="teacher.html" class="portal-dropdown-item" id="dropdown-link-teacher" style="display: none;">
|
||
<span>👨🏫</span> <span>Dozenten-Portal</span>
|
||
</a>
|
||
<a href="admin.html" class="portal-dropdown-item" id="dropdown-link-admin" style="display: none; color: #f87171;">
|
||
<span>🛡️</span> <span>Administration</span>
|
||
</a>
|
||
<div class="portal-dropdown-divider"></div>
|
||
<a href="index.html?view=landing" class="portal-dropdown-item">
|
||
<span>🌐</span> <span>Startseite (Landing Page)</span>
|
||
</a>
|
||
<a href="impressum.html" class="portal-dropdown-item">
|
||
<span>📄</span> <span>Impressum & Datenschutz</span>
|
||
</a>
|
||
<div class="portal-dropdown-divider"></div>
|
||
<button type="button" class="portal-dropdown-item danger" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
|
||
<span>🚪</span> <span>Abmelden</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legacy elements kept for backward compatibility if scripts query them -->
|
||
<span id="nav-auth-user" style="display: none;"></span>
|
||
<span id="nav-auth-role" style="display: none;"></span>
|
||
<span id="nav-auth-profession" style="display: none;"></span>
|
||
<button type="button" id="nav-btn-logout" style="display: none;"></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 (Structured & Grouped) -->
|
||
<div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
|
||
<!-- Mobile User Header -->
|
||
<div class="mobile-drawer-user" id="mobile-drawer-user-info" style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #1e293b; border-radius: 8px; margin-bottom: 8px;">
|
||
<span class="portal-user-avatar" id="mobile-drawer-avatar">IT</span>
|
||
<div style="overflow: hidden;">
|
||
<div style="font-weight: 700; color: #ffffff; font-size: 0.9rem;" id="mobile-drawer-username">Benutzer</div>
|
||
<div style="font-size: 0.74rem; color: #94a3b8;" id="mobile-drawer-role">Teilnehmer</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mobile-drawer-section-title">Lernbereiche</div>
|
||
<a href="#katalog" class="mobile-drawer-link" onclick="toggleMobileMenu()">📚 Kurse & Katalog</a>
|
||
<a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">💻 Web-IDE (Monaco)</a>
|
||
<a href="diagram_editor.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📐 Diagramm-Studio (ER, SG, UML)</a>
|
||
<a href="#ihk-section" class="mobile-drawer-link" id="mobile-drawer-ihk-link" style="display: none;" onclick="toggleMobileMenu()">🎓 IHK-Prüfungsvorbereitung</a>
|
||
|
||
<div class="mobile-drawer-divider"></div>
|
||
<div class="mobile-drawer-section-title">Mein Fortschritt</div>
|
||
<a href="#zertifikate-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">🏆 Zertifikate & Nachweise</a>
|
||
<button type="button" class="mobile-drawer-link" style="width: 100%; border: none; background: transparent; cursor: pointer; text-align: left;" onclick="toggleMobileMenu(); openProfessionSettings();">⚙️ Ausbildungsberuf / Modus</button>
|
||
|
||
<div class="mobile-drawer-divider" id="mobile-drawer-mgmt-divider" style="display: none;"></div>
|
||
<div class="mobile-drawer-section-title" id="mobile-drawer-mgmt-title" style="display: none;">Verwaltung</div>
|
||
<a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;" onclick="toggleMobileMenu()">👨🏫 Dozenten-Portal</a>
|
||
<a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171;" onclick="toggleMobileMenu()">🛡️ Administration</a>
|
||
|
||
<div class="mobile-drawer-divider"></div>
|
||
<a href="index.html?view=landing" class="mobile-drawer-link" onclick="toggleMobileMenu()">🌐 Startseite (Landing Page)</a>
|
||
<a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📄 Impressum & Datenschutz</a>
|
||
|
||
<div class="mobile-drawer-divider"></div>
|
||
<button type="button" class="mobile-drawer-link danger-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: 4px; font-weight: 600; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 0.88rem;" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
|
||
<span>🚪</span> <span>Abmelden</span>
|
||
</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- & 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 →</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 & 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 →</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 & 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 & Infrastruktur</button>
|
||
<button type="button" class="portal-tab-pill" id="tab-pill-coding" onclick="filterCourses('coding', this)">Softwaretechnik & Systems</button>
|
||
<button type="button" class="portal-tab-pill" id="tab-pill-data" onclick="filterCourses('data', this)">Datenbanken & Web</button>
|
||
</div>
|
||
|
||
<!-- AUSBILDUNGSPLAN & KMK-LERNFELDER BEREICH (DUAL-MODE: AZUBI VS PROFESSIONAL) -->
|
||
<div class="apprenticeship-panel" id="azubi-panel">
|
||
<!-- 1. Nicht-Azubi / Professional Modus (Standard wenn kein IHK-Beruf) -->
|
||
<div id="non-azubi-mode-banner" style="display: none; padding: 6px 4px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
|
||
<div style="display: flex; align-items: center; gap: 14px;">
|
||
<div style="width: 44px; height: 44px; border-radius: 10px; background: #eff6ff; color: #0284c7; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; border: 1px solid #bfdbfe; flex-shrink: 0;">
|
||
💼
|
||
</div>
|
||
<div>
|
||
<div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
|
||
<h3 style="margin: 0; font-size: 1.08rem; font-weight: 800; color: #0f172a;">Professional- & Weiterbildungs-Modus aktiv</h3>
|
||
<span style="font-size: 0.72rem; font-weight: 700; background: #e0f2fe; color: #0369a1; padding: 2px 8px; border-radius: 99px;">14 Praxis-Kurse</span>
|
||
</div>
|
||
<p style="margin: 3px 0 0 0; font-size: 0.86rem; color: #475569; max-width: 780px;">
|
||
Du lernst im praxisorientierten Entwickler-Modus (Python, Linux, Go, Rust, C#, SQL, Git, AD, DNS uvm.) ohne schulische IHK-Prüfungsmodule.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 10px;">
|
||
<button type="button" class="btn" onclick="openProfessionSettings()" style="background: #0f172a; color: #ffffff; border: 1px solid #334155; padding: 8px 16px; font-size: 0.84rem; font-weight: 600; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;" title="IHK Ausbildungsberuf auswählen und Prüfungsmodule freischalten">
|
||
<span>🎓</span> <span>IHK-Ausbildungsmodus aktivieren</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. IHK-Azubi Modus (Aktiv wenn ein IHK-Beruf gewählt ist) -->
|
||
<div id="azubi-mode-active" style="display: none;">
|
||
<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>
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<h3 style="margin: 0; font-size: 1.12rem; font-weight: 700; color: #0f172a;">Ausbildungsrahmenplan & KMK-Lernfelder (2020)</h3>
|
||
<span style="font-size: 0.72rem; font-weight: 700; background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 99px;">IHK-Modus</span>
|
||
</div>
|
||
<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 / Professional-Modus --</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- & 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 →
|
||
</button>
|
||
</div>
|
||
</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 & 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 & 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>→</span>
|
||
</a>
|
||
<a href="courses/ihk_ap1/01_lf1_unternehmen_und_arbeitsplatz/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & 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 & 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>→</span>
|
||
</a>
|
||
<a href="courses/ihk_ap2_fisi/01_lf9_netzwerkinfrastruktur_und_routing/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & SOLID, REST/GraphQL, Testing & 80h-Projektarbeit.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">LF 9–12 FIAE</span>
|
||
<span class="portal-card-tag">GoF & Clean Architecture</span>
|
||
<span class="portal-card-tag">UML 2.5 & 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>→</span>
|
||
</a>
|
||
<a href="courses/ihk_ap2_fiae/01_software_architektur_und_design_patterns/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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- & 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 & 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 & ETL/DWH</span>
|
||
<span class="portal-card-tag">Statistik & 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>→</span>
|
||
</a>
|
||
<a href="courses/ihk_ap2_fidp/01_prozessanalyse_und_prozessoptimierung/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & 40h-Projektarbeit.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">LF 9–12 FIDV</span>
|
||
<span class="portal-card-tag">CPS & 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>→</span>
|
||
</a>
|
||
<a href="courses/ihk_ap2_fidv/01_industrie40_und_cyber_physische_systeme/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & OTDR-Messung, EMV-Zonen, Brandschottung & 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 & DGUV V3</span>
|
||
<span class="portal-card-tag">USV & 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>→</span>
|
||
</a>
|
||
<a href="courses/ihk_ap2_itse/01_elektrotechnik_und_schutzmassnahmen_vde0100/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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- & Rückwärts-Handelskalkulation, TCO/ROI, EVB-IT Verträge, SLAs, ITIL Service Desk & 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 & 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>→</span>
|
||
</a>
|
||
<a href="courses/ihk_ap2_itsm/01_it_marktanalyse_wettbewerb_und_swot/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Netzwerkeffekte, BPMN 2.0, GoBD-konforme DMS, XRechnung/ZUGFeRD, DSFA, EU AI Act & 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 & 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>→</span>
|
||
</a>
|
||
<a href="courses/ihk_ap2_kdm/01_digitale_geschaeftsmodelle_und_bmc/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & 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 & GUI (07–16) und Data Engineering (17–22).</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">OOP & 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>→</span>
|
||
</a>
|
||
<a href="lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Cloud</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Linux Bash, Shell Scripting & 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 & 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>→</span>
|
||
</a>
|
||
<a href="courses/bash/01_navigation_dateien_und_globbing/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Cloud</span>
|
||
</div>
|
||
<h3 class="portal-card-title">PowerShell 7+ Core: Enterprise Automation</h3>
|
||
<p class="portal-card-desc">Modernes Microsoft & Multi-Platform Scripting: Die Objekt-Pipeline, Custom PSCustomObjects, REST-APIs, moderne Parallelisierung mit <code>ForEach-Object -Parallel</code> & 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>→</span>
|
||
</a>
|
||
<a href="courses/powershell/01_powershell_konsole_und_cmdlet_architektur/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Enterprise</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Active Directory & Windows Server</h3>
|
||
<p class="portal-card-desc">Enterprise Identity Management: AD DS Gesamtstruktur, 5 FSMO-Rollen, OU-Design, Sites & Replikation, AGDLP-Berechtigungen, Gruppenrichtlinien (GPOs) & PowerShell-Automation.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">AD DS & FSMO</span>
|
||
<span class="portal-card-tag">AGDLP-Prinzip</span>
|
||
<span class="portal-card-tag">GPO & 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>→</span>
|
||
</a>
|
||
<a href="courses/active_directory/01_ad_architektur_und_wald_baum_domaene/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Version Control</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Git Versionskontrolle & DevOps Workflows</h3>
|
||
<p class="portal-card-desc">Industriestandard für Entwickler & Sysadmins: 3-Bereiche-Modell, atomare Commits, Diff-Analyse, Fast-Forward vs. 3-Way-Merge, Konfliktlösung, Interaktives Rebase & Pre-Commit Hooks.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">3-Bereiche-Modell</span>
|
||
<span class="portal-card-tag">Branching & 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>→</span>
|
||
</a>
|
||
<a href="courses/git/01_git_init_und_repo_basics/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Security</span>
|
||
</div>
|
||
<h3 class="portal-card-title">DNS-Records & 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 & 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 & 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>→</span>
|
||
</a>
|
||
<a href="courses/dns_records/01_dns_hierarchie_und_root_server/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Web</span>
|
||
</div>
|
||
<h3 class="portal-card-title">SQL & 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 & ACID Transaktionen.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">1NF–3NF Normalisierung</span>
|
||
<span class="portal-card-tag">JOINs & 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>→</span>
|
||
</a>
|
||
<a href="courses/sql/01_tabellen_und_select/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">JavaScript & Modernes TypeScript</h3>
|
||
<p class="portal-card-desc">Moderne Web-Entwicklung: ES6+ Syntax, Klassen & OOP, Async/Await & 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+ & 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>→</span>
|
||
</a>
|
||
<a href="courses/javascript/01_erste_schritte_variablen/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Java 21+ Enterprise & IHK Standard</h3>
|
||
<p class="portal-card-desc">Enterprise-Architektur: Strikte Typisierung, Records, Vererbung & Interfaces, Generics, Collections Framework, Streams API, Virtual Threads & automatisierte JUnit 5 Tests.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Java 21</span>
|
||
<span class="portal-card-tag">Records & 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>→</span>
|
||
</a>
|
||
<a href="courses/java/01_java_syntax_und_primitive_typen/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Rust Modern Systems & Safety</h3>
|
||
<p class="portal-card-desc">Zero-Cost Abstractions: Ownership & Borrowing, Lifetimes, Enums mit Option/Result, Traits, Smart Pointer (Box, Arc, Mutex), Fearless Concurrency & 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<Mutex></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>→</span>
|
||
</a>
|
||
<a href="courses/rust/01_variablen_mutabilitaet_und_typen/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Go Cloud Microservices & Concurrency</h3>
|
||
<p class="portal-card-desc">Entwickle hochskalierbare Cloud-Services mit Google Go: Goroutines, Channel-Pipelines, Mutex Synchronisation, Standard-HTTP-Server, Middleware & REST Microservice Master.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Goroutines</span>
|
||
<span class="portal-card-tag">Channels & 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>→</span>
|
||
</a>
|
||
<a href="courses/go/01_syntax_variablen_und_typen/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">C# 12 & 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 & 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>→</span>
|
||
</a>
|
||
<a href="courses/csharp/01_syntax_datentypen_und_top_level_statements/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">C & Modernes C++20 Systems Engineering</h3>
|
||
<p class="portal-card-desc">Das Fundament der Systemprogrammierung: Pointer & dynamischer Speicher, RAII, Klassen & Rule of Five, Templates, Smart Pointer (unique_ptr, shared_ptr), STL & GoogleTest.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Pointer & 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>→</span>
|
||
</a>
|
||
<a href="courses/cpp/01_c_syntax_datentypen_und_io/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & Web</span>
|
||
</div>
|
||
<h3 class="portal-card-title">HTML5, Modern CSS3 & 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 & Dark Mode.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Semantik & A11y</span>
|
||
<span class="portal-card-tag">Flexbox & 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>→</span>
|
||
</a>
|
||
<a href="courses/html_css/01_semantisches_html_und_struktur/index.html" class="btn-view-theory">
|
||
<span>Lehrplan & 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 & 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 →</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) & 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 →</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 & 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 & Netzplan.</p>
|
||
<a href="workspace.html?course=ihk_ap1&chapter=01_lf1_unternehmen_und_arbeitsplatz" class="btn-start-ide">
|
||
<span>AP1 Module öffnen →</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 & Routing, VRT-Symbole, Active Directory, RAID 0-10, Backup 3-2-1-1-0, Enterprise SQL & 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 →</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 & SOLID, REST/GraphQL & 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 →</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- & 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 & 40h-Projektleitfaden.</p>
|
||
<a href="workspace.html?course=ihk_ap2_fidp&chapter=01_prozessanalyse_und_prozessoptimierung" class="btn-start-ide">
|
||
<span>AP2 FIDP öffnen →</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 & 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 →</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 & OTDR, EMV, Brandschottung & 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 →</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 & 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 →</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 & 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 →</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 & 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 →</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 →
|
||
</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 & 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 & 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 & 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 & 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 & 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 & 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 & DevOps Master</h4>
|
||
<p style="font-size: 0.82rem; color: #64748b; margin: 0 0 14px 0;">16 Module: 3 Bereiche, Branching, Rebase Squash, Hooks & 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 & 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 & 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 & 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 • 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 & OOP</a></li>
|
||
<li><a href="#katalog" class="portal-footer-link">⚡ JavaScript & Web</a></li>
|
||
<li><a href="#katalog" class="portal-footer-link">🐧 Linux Bash & 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 & 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 & Security</a></li>
|
||
<li><a href="#katalog" class="portal-footer-link">🗄️ SQL & Datenbanken</a></li>
|
||
<li><a href="#katalog" class="portal-footer-link">🌐 Modernes HTML5 & CSS3</a></li>
|
||
<li><a href="#katalog" class="portal-footer-link">🦀 Rust, Go, C# & 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 & 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>
|
||
© 2026 IT-Praxisportal • 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 ↑</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 statProf = document.getElementById('stat-user-prof-name');
|
||
const statProfLabel = document.querySelector('.portal-stat-card:nth-child(2) .portal-stat-label');
|
||
const statProfDesc = document.getElementById('stat-user-prof-desc');
|
||
const statYearName = document.getElementById('stat-user-year-name');
|
||
const statYearLabel = document.querySelector('.portal-stat-card:nth-child(3) .portal-stat-label');
|
||
const statYearDesc = document.getElementById('stat-user-level-desc');
|
||
|
||
const nonAzubiBanner = document.getElementById('non-azubi-mode-banner');
|
||
const azubiActive = document.getElementById('azubi-mode-active');
|
||
const ihkSection = document.getElementById('ihk-section');
|
||
const navIhk = document.getElementById('nav-ihk-link');
|
||
const mobIhk = document.getElementById('mobile-drawer-ihk-link');
|
||
const pillIhk = document.getElementById('tab-pill-ihk');
|
||
|
||
const isAzubiOrAdmin = (currentProfession && currentProfession !== '');
|
||
|
||
if (!isAzubiOrAdmin) {
|
||
// --- NICHT-AZUBI / PROFESSIONAL MODUS ---
|
||
if (nonAzubiBanner) nonAzubiBanner.style.display = 'block';
|
||
if (azubiActive) azubiActive.style.display = 'none';
|
||
if (ihkSection) ihkSection.style.display = 'none';
|
||
if (navIhk) navIhk.style.display = 'none';
|
||
if (mobIhk) mobIhk.style.display = 'none';
|
||
if (pillIhk) pillIhk.style.display = 'none';
|
||
|
||
if (statProf) statProf.innerText = 'Software & DevOps';
|
||
if (statProfLabel) statProfLabel.innerText = 'Lernschwerpunkt';
|
||
if (statProfDesc) statProfDesc.innerText = '14 Fachkurse aktiv';
|
||
if (statYearName) statYearName.innerText = 'Praxisnah';
|
||
if (statYearLabel) statYearLabel.innerText = 'Lehrmethode';
|
||
if (statYearDesc) statYearDesc.innerText = 'Monaco IDE & Unittests';
|
||
} else {
|
||
// --- AZUBI / ADMIN MODUS ---
|
||
if (nonAzubiBanner) nonAzubiBanner.style.display = 'none';
|
||
if (azubiActive) azubiActive.style.display = 'block';
|
||
if (ihkSection) ihkSection.style.display = 'block';
|
||
if (navIhk) navIhk.style.display = 'inline-flex';
|
||
if (mobIhk) mobIhk.style.display = 'flex';
|
||
if (pillIhk) pillIhk.style.display = 'inline-flex';
|
||
|
||
if (statProf) {
|
||
statProf.innerText = (currentProfession === 'ALL') ? 'Alle IT-Berufe (Admin)' : (PROFESSION_NAMES[currentProfession] || currentProfession);
|
||
}
|
||
if (statProfLabel) statProfLabel.innerText = 'Ausbildungsberuf';
|
||
if (statProfDesc) statProfDesc.innerText = 'Gemäß IHK Rahmenlehrplan';
|
||
if (statYearLabel) statYearLabel.innerText = 'Ausbildungsstand';
|
||
if (statYearDesc) statYearDesc.innerText = 'IHK AP1 & AP2 Fokus';
|
||
}
|
||
|
||
if (badgeEl && msgEl) {
|
||
if (!currentProfession) {
|
||
badgeEl.style.background = '#eff6ff';
|
||
badgeEl.style.borderColor = '#bfdbfe';
|
||
badgeEl.style.color = '#1d4ed8';
|
||
msgEl.innerHTML = '<strong>Professional-Modus aktiv:</strong> 14 moderne Fachkurse sichtbar. Keine IHK-Schulmodule.';
|
||
} else if (currentProfession === 'ALL') {
|
||
badgeEl.style.background = '#f8fafc';
|
||
badgeEl.style.borderColor = '#cbd5e1';
|
||
badgeEl.style.color = '#1e293b';
|
||
msgEl.innerHTML = '<strong>Dozenten- & 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>.`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Helper: Öffnet die Berufs-Einstellungen
|
||
function openProfessionSettings() {
|
||
const nonAzubiBanner = document.getElementById('non-azubi-mode-banner');
|
||
const azubiActive = document.getElementById('azubi-mode-active');
|
||
if (nonAzubiBanner) nonAzubiBanner.style.display = 'none';
|
||
if (azubiActive) azubiActive.style.display = 'block';
|
||
|
||
const select = document.getElementById('azubi-prof-select');
|
||
if (select) {
|
||
select.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
select.focus();
|
||
select.style.boxShadow = '0 0 0 4px rgba(56, 189, 248, 0.4)';
|
||
setTimeout(() => { select.style.boxShadow = ''; }, 2500);
|
||
}
|
||
}
|
||
|
||
// 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- & Azubi-Prüfung:
|
||
// STRIKTE TRENNUNG: Für Nicht-Azubis (kein Ausbildungsberuf gewählt / Quereinsteiger)
|
||
// werden KEINE IHK-Kurse (weder AP1 noch AP2) angezeigt!
|
||
const requiredProf = AP2_PROFESSION_MAP[cardId];
|
||
const isIhkCourse = cardId.startsWith('ihk_') || cardCat === 'ihk';
|
||
|
||
let matchesProfession = true;
|
||
if (!currentProfession || currentProfession === '') {
|
||
// Nicht-Azubi: Alle 8 IHK-Kurse strikt ausblenden!
|
||
if (isIhkCourse) {
|
||
matchesProfession = false;
|
||
}
|
||
} else if (currentProfession === 'ALL') {
|
||
// Dozenten / Admin Vollansicht: Alle Kurse sichtbar
|
||
matchesProfession = true;
|
||
} else {
|
||
// Azubi mit spezifischem Beruf (z.B. FISI, FIAE):
|
||
// Sieht das gemeinsame AP1 (ihk_ap1) und seinen spezifischen AP2-Kurs
|
||
if (cardId === 'ihk_ap1') {
|
||
matchesProfession = true;
|
||
} else if (cardId.startsWith('ihk_ap2_')) {
|
||
matchesProfession = (requiredProf === currentProfession);
|
||
} else {
|
||
matchesProfession = true; // Alle 14 Fachkurse
|
||
}
|
||
}
|
||
|
||
// 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 && isIhkCourse) {
|
||
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 (!currentProfession || currentProfession === '') {
|
||
card.style.display = 'none';
|
||
} else 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 (!currentProfession || currentProfession === '') {
|
||
if (pillIhk) pillIhk.style.display = 'none';
|
||
if (currentCategory === 'ihk') {
|
||
currentCategory = 'all';
|
||
document.querySelectorAll('.portal-tab-pill').forEach(btn => btn.classList.remove('active'));
|
||
if (pillAll) pillAll.classList.add('active');
|
||
}
|
||
} else {
|
||
if (pillIhk) {
|
||
pillIhk.style.display = 'inline-flex';
|
||
pillIhk.innerText = `IHK Prüfungsvorbereitung (${counts.ihk})`;
|
||
}
|
||
}
|
||
|
||
if (pillAll) pillAll.innerText = `Alle Fachbereiche (${counts.all})`;
|
||
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 && currentProfession) {
|
||
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 && currentProfession) {
|
||
statYear.innerText = 'Zugewiesen';
|
||
}
|
||
renderLernfelder(currentProfession, 'assigned');
|
||
applyAllFilters();
|
||
}
|
||
|
||
// 3d. Profession Changed Event
|
||
function onProfessionChanged() {
|
||
const select = document.getElementById('azubi-prof-select');
|
||
currentProfession = select ? select.value : '';
|
||
updateProfessionStatusBadge();
|
||
if (currentProfession) {
|
||
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 →
|
||
</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 in Dropdown & Drawer
|
||
const hasAdmin = (user.role === 'admin');
|
||
const hasTeacher = (user.role === 'teacher' || user.role === 'admin');
|
||
|
||
const ddAdmin = document.getElementById('dropdown-link-admin');
|
||
if (ddAdmin) ddAdmin.style.display = hasAdmin ? 'flex' : 'none';
|
||
const ddTeacher = document.getElementById('dropdown-link-teacher');
|
||
if (ddTeacher) ddTeacher.style.display = hasTeacher ? 'flex' : 'none';
|
||
const ddMgmt = document.getElementById('dropdown-mgmt-title');
|
||
if (ddMgmt) ddMgmt.style.display = hasTeacher ? 'block' : 'none';
|
||
const ddDiv = document.getElementById('dropdown-teacher-divider');
|
||
if (ddDiv) ddDiv.style.display = hasTeacher ? 'block' : 'none';
|
||
|
||
const mAl = document.getElementById('mobile-drawer-admin-link');
|
||
if (mAl) mAl.style.display = hasAdmin ? 'flex' : 'none';
|
||
const mTl = document.getElementById('mobile-drawer-teacher-link');
|
||
if (mTl) mTl.style.display = hasTeacher ? 'flex' : 'none';
|
||
const mMgmt = document.getElementById('mobile-drawer-mgmt-title');
|
||
if (mMgmt) mMgmt.style.display = hasTeacher ? 'block' : 'none';
|
||
const mDiv = document.getElementById('mobile-drawer-mgmt-divider');
|
||
if (mDiv) mDiv.style.display = hasTeacher ? 'block' : 'none';
|
||
} 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 = (!currentProfession || currentProfession === '') ? 224 : (currentProfession === 'ALL' ? 264 : 248);
|
||
const totalPercent = Math.min(100, 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>
|