it-praxisportal/index.html
Alex Mueller bd74e0565a feat(ui): Trennung von Marketing-Landingpage & geschuetztem Lernbereich-Dashboard
- index.html: Reine Marketing- & Curriculum-Uebersicht aller 13 Fachdisziplinen und 216 Module mit Conversion-CTAs und Willkommens-Banner fuer angemeldete Nutzer
- dashboard.html: Geschuetzter Lernbereich (Kurs-Hub) fuer angemeldete Nutzer mit Live-Gamification, Kursfortschrittsbalken, Web-IDE-Start, IHK-Pruefungstrainer und Zertifikats-Hub
- app_auth.js & course_sidebar.js: Nahtloser Login- und Navigations-Flow direkt ins Dashboard
2026-09-12 15:14:23 +02:00

902 lines
49 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IT-Praxisportal | Die interaktive Lern- &amp; Prüfungsvorbereitungs-Plattform für IT-Berufe</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<meta name="description" content="IT-Praxisportal: Die interaktive Lernplattform für Fachinformatiker &amp; IT-Entwickler. 216+ Module in 13 Schlüssel-Technologien, Monaco Web-IDE und IHK AP1 &amp; AP2 Prüfungsvorbereitung im Browser.">
<meta property="og:title" content="IT-Praxisportal | Praxisnahe IT-Kompetenz im Browser">
<meta property="og:description" content="216+ Module für Linux Bash, SQL, Python, Java, Go, Rust, C#, C++, PowerShell, Web &amp; IHK AP1/AP2 Prüfungssimulation mit integrierter Web-IDE.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://alpha.it-praxisportal.de/">
<link rel="stylesheet" href="assets/style.css">
<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;
}
/* Curriculum Cards Style */
.curriculum-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
}
.curriculum-card:hover {
border-color: #38bdf8;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.curriculum-topics {
list-style: none;
padding: 0;
margin: 14px 0 18px 0;
font-size: 0.86rem;
color: #475569;
display: flex;
flex-direction: column;
gap: 6px;
}
.curriculum-topics li {
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.4;
}
.curriculum-topics li::before {
content: "•";
color: #0284c7;
font-weight: bold;
font-size: 1.1rem;
line-height: 1;
}
.curriculum-cta-btn {
width: 100%;
background: #0284c7;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-size: 0.86rem;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
text-decoration: none;
transition: all 0.15s ease;
}
.curriculum-cta-btn:hover {
background: #0369a1;
transform: translateY(-1px);
}
/* Logged In Welcome Banner */
.logged-in-banner {
background: linear-gradient(90deg, #0284c7, #10b981);
color: white;
padding: 10px 18px;
font-size: 0.88rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
</style>
</head>
<body style="background: #f8fafc; color: #0f172a; font-family: var(--font-sans); margin: 0; padding: 0;">
<!-- Logged-in Welcome Notification (wird per JS eingeblendet wenn User bereits angemeldet ist) -->
<div id="landing-logged-in-banner" class="logged-in-banner" style="display: none;">
<div style="display: flex; align-items: center; gap: 8px;">
<span>👋</span>
<span>Du bist eingeloggt als <strong id="landing-user-name">Teilnehmer</strong>. Dein persönlicher Lernfortschritt ist bereit!</span>
</div>
<a href="dashboard.html" class="btn" style="background: white; color: #0284c7; font-weight: 800; padding: 6px 14px; font-size: 0.82rem; border-radius: 6px; text-decoration: none;">
▶ Direkt zum Lernbereich Dashboard &rarr;
</a>
</div>
<!-- 1. STICKY MARKETING HEADER -->
<header class="portal-header-bar">
<div class="portal-nav-container">
<a href="index.html" class="portal-brand">
<div class="portal-brand-logo">
<img src="assets/favicon.svg" alt="IT-Praxisportal Logo" style="width: 24px; height: 24px;">
</div>
<div>
<span class="portal-brand-title">IT-Praxisportal</span>
<span class="portal-brand-badge">Alpha</span>
</div>
</a>
<nav class="portal-nav-links">
<a href="#hero" class="portal-nav-link">🚀 Übersicht</a>
<a href="#curriculum" class="portal-nav-link">📚 Inhalts-Katalog</a>
<a href="#ihk-section" class="portal-nav-link">🎓 IHK Prüfung</a>
<a href="#features-ide" class="portal-nav-link">💻 Web-IDE</a>
<a href="#features" class="portal-nav-link">💎 Vorteile</a>
<a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link" style="display: none; color: #34d399; font-weight: 700;">💻 Lernbereich</a>
<a href="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">👨‍🏫 Dozenten</a>
<a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171; font-weight: 800;">🛡️ Admin</a>
</nav>
<div style="display: flex; align-items: center; gap: 10px;">
<span id="nav-auth-user" style="display: none; font-size: 0.82rem; font-weight: 700; color: #38bdf8; background: rgba(56, 189, 248, 0.1); padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(56, 189, 248, 0.2);"></span>
<button type="button" class="btn" id="nav-btn-login" style="padding: 6px 14px; font-size: 0.82rem; background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2);" onclick="window.openAuthModal('login', { allowClose: true })">🔑 Anmelden</button>
<button type="button" class="btn" id="nav-btn-register" style="padding: 6px 14px; font-size: 0.82rem; background: #0284c7; color: white;" onclick="window.openAuthModal('register', { allowClose: true })">✨ Kostenlos registrieren</button>
</div>
</div>
</header>
<!-- 2. HIGH-CONVERTING HERO SECTION -->
<section class="portal-hero" id="hero">
<div class="portal-container">
<div class="portal-hero-pill">
<span>⚡ Die #1 Lernplattform für Fachinformatiker &amp; IT-Profis</span>
<span style="opacity: 0.5;">•</span>
<span>216+ Module</span>
<span style="opacity: 0.5;">•</span>
<span>100% Kostenlos</span>
</div>
<h1>Echte IT-Praxis statt trockener Theorie.</h1>
<p>Die All-in-One Lernplattform für <strong>Fachinformatiker, Software-Entwickler &amp; IT-Auszubildende</strong>. Beherrsche 13 Schlüssel-Technologien in 216 interaktiven Modulen und bereite dich mit echten IHK-Fragen auf deine Abschlussprüfung vor – direkt im Browser mit professioneller Monaco Web-IDE.</p>
<div class="portal-hero-actions">
<button type="button" id="hero-primary-cta" class="portal-btn-primary" style="cursor: pointer; border: none;" onclick="window.openAuthModal('register', { allowClose: true })">
<span>🚀 Jetzt kostenlos registrieren</span>
</button>
<a href="#curriculum" class="portal-btn-secondary">
<span>📚 Lehrplan &amp; Inhaltskatalog ansehen &darr;</span>
</a>
<a href="#ihk-section" class="portal-btn-secondary" style="border-color: #38bdf8; color: #38bdf8;">
<span>🎓 IHK AP1 &amp; AP2 Prüfungstrainer</span>
</a>
</div>
<!-- 4 Quick Stats -->
<div class="portal-stats-bar">
<div class="portal-stat-card">
<div class="portal-stat-num">13</div>
<div class="portal-stat-label">Fachdisziplinen</div>
<div class="portal-stat-desc">Linux, Cloud, OOP, Systems &amp; Web</div>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num">216+</div>
<div class="portal-stat-label">Inhalts-Module</div>
<div class="portal-stat-desc">Geführte Subgoals &amp; Praxislabore</div>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num">150+</div>
<div class="portal-stat-label">IHK-Prüfungsfragen</div>
<div class="portal-stat-desc">AP1 &amp; AP2 Simulation mit Timer</div>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num">0 min</div>
<div class="portal-stat-label">Installationsaufwand</div>
<div class="portal-stat-desc">VS Code Monaco Editor im Browser</div>
</div>
</div>
</div>
</section>
<!-- 3. CURRICULUM & INHALTS-AUFLISTUNG -->
<main class="portal-container" id="curriculum" style="padding-top: 48px; padding-bottom: 64px;">
<div class="portal-filter-bar">
<div>
<h2 style="font-size: 1.8rem; font-weight: 900; margin: 0 0 6px 0; color: #0f172a;">📚 Lehrplan &amp; Inhalts-Übersicht</h2>
<p style="color: #64748b; margin: 0; font-size: 0.95rem;">
Hier findest du den vollständigen Lehrplan aller 13 Fachdisziplinen und 216 Module im Detail. Erstelle deinen kostenlosen Account, um den geschützten Lernbereich und die Web-IDE freizuschalten.
</p>
</div>
<!-- Search Box -->
<div class="portal-search-box">
<span style="font-size: 1rem;">🔍</span>
<input type="text" id="curriculum-filter-input" placeholder="Thema filtern (z.B. Subnetting, SQL, Bash, Python, Rust, Docker)...">
</div>
</div>
<!-- Category Filter Tabs -->
<div class="portal-filter-tabs" style="margin-bottom: 24px;">
<button type="button" class="portal-tab-pill active" onclick="filterCurriculum('all', this)">🌟 Alle Fachbereiche (13)</button>
<button type="button" class="portal-tab-pill" onclick="filterCurriculum('ihk', this)">🎓 IHK Prüfungen (2)</button>
<button type="button" class="portal-tab-pill" onclick="filterCurriculum('devops', this)">🐧 DevOps &amp; Linux (2)</button>
<button type="button" class="portal-tab-pill" onclick="filterCurriculum('coding', this)">💻 Backend &amp; Systems (6)</button>
<button type="button" class="portal-tab-pill" onclick="filterCurriculum('data', this)">🗄️ Daten &amp; Web (3)</button>
</div>
<!-- GRID OF ALL 13 CURRICULUM OVERVIEWS -->
<div class="portal-courses-grid" id="curriculum-grid-container">
<!-- 1. IHK AP1 -->
<div class="curriculum-card portal-card" data-category="ihk" data-title="ihk ap1 lernfelder 1-8 it-arbeitsplatz subnetting trace tabellen probeprüfung">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">📘</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP1: IT-Arbeitsplatz &amp; Basissysteme</h3>
<p class="portal-card-desc">Lückenlose Vorbereitung auf die bundeseinheitliche IHK-Abschlussprüfung Teil 1 für alle Fachinformatiker-Ausbildungsberufe.</p>
<ul class="curriculum-topics">
<li><strong>Lernfeld 1–4:</strong> Verträge, Arbeitsplatz-Ergonomie, Datenschutz &amp; DSGVO</li>
<li><strong>Lernfeld 5–8:</strong> BSI-Schutzbedarf, IPv4 &amp; IPv6 Subnetting Berechnungen</li>
<li><strong>Methoden-Drill:</strong> Relationale SQL-Abfragen &amp; Trace-Tabellen Ablauflogik</li>
<li><strong>Abschluss:</strong> Vollständige 90-Minuten Probeprüfung (100 Punkte)</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">12 Module</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>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="ihk_ap1" onclick="handleCurriculumAction('ihk_ap1', 'IHK AP1 Prüfungsvorbereitung')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 2. IHK AP2 FISI -->
<div class="curriculum-card portal-card" data-category="ihk" data-title="ihk ap2 fisi systemintegration vlan active directory raid storage cloud 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 Systemintegration</h3>
<p class="portal-card-desc">Spezifische Fachqualifikationen der Fachrichtung Systemintegration nach aktueller Prüfungsordnung AO 2020.</p>
<ul class="curriculum-topics">
<li><strong>Lernfeld 9:</strong> Netzwerkdienste, Topologien, Routing &amp; VLANs</li>
<li><strong>Lernfeld 10:</strong> Server-Infrastrukturen, Windows Server &amp; Active Directory GPO</li>
<li><strong>Lernfeld 11–12:</strong> Storage (RAID, NAS/SAN), Containerisierung &amp; Cloud</li>
<li><strong>Prüfungstraining:</strong> WiSo-Kompaktfragen &amp; 40h-Projektarbeits-Leitfaden</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">9 Module</span>
<span class="portal-card-tag">LF 9–12 FISI</span>
<span class="portal-card-tag">WiSo Prüfungsfragen</span>
<span class="portal-card-tag">40h-Projektarbeit</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="ihk_ap2_fisi" onclick="handleCurriculumAction('ihk_ap2_fisi', 'IHK AP2 FISI Prüfungsvorbereitung')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 3. PYTHON 3 -->
<div class="curriculum-card portal-card" data-category="coding" data-title="python 3 software entwicklung oop grundlagen tkinter data engineering">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐍</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">Python 3: Vom Einsteiger zum Entwickler</h3>
<p class="portal-card-desc">Das umfassende Flaggschiff-Curriculum von algorithmischen Grundlagen bis zum professionellen Software-Engineering.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> Variablen, Kontrollfluss, Listen, Dicts &amp; saubere Funktionen</li>
<li><strong>Lehrpfad 2:</strong> Objektorientierung, Klassen, Konstruktor <code>__init__</code> &amp; Git</li>
<li><strong>Lehrpfad 3:</strong> Vererbung, Polymorphie, TDD Unit Testing &amp; Tkinter Desktop-GUIs</li>
<li><strong>Lehrpfad 4:</strong> Functional Programming, Generatoren, SQLite &amp; REST-APIs</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">35 Module</span>
<span class="portal-card-tag">4 Lehrpfade</span>
<span class="portal-card-tag">Pyodide WASM</span>
<span class="portal-card-tag">TDD Unit Tests</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="python" onclick="handleCurriculumAction('python', 'Python 3 Professional')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 4. LINUX BASH & CLOUD DEVOPS -->
<div class="curriculum-card portal-card" data-category="devops" data-title="linux bash shell scripting devops terminal jq sed awk docker bats parallel">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐧</div>
<span class="portal-card-badge badge-devops">DevOps &amp; Cloud</span>
</div>
<h3 class="portal-card-title">Linux Bash, Shell Scripting &amp; Cloud DevOps</h3>
<p class="portal-card-desc">Terminal-Mastery und Automatisierung für Linux-Systemadministratoren und DevOps Engineers.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> Navigation, Globbing, I/O Redirection, Pipes &amp; Dateirechte</li>
<li><strong>Lehrpfad 2:</strong> Regex-Mining mit <code>grep</code>, <code>sed</code>, <code>awk</code>, <code>jq</code> &amp; Strict Mode</li>
<li><strong>Lehrpfad 3:</strong> Multiprocessing mit <code>xargs -P</code>, Named Pipes &amp; Systemd Services</li>
<li><strong>Lehrpfad 4:</strong> Docker-Scripting, BATS Unittests &amp; DevOps Monitoring Engine</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">16 Module</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>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="bash" onclick="handleCurriculumAction('bash', 'Linux Bash & Cloud DevOps')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 5. POWERSHELL 7+ CORE -->
<div class="curriculum-card portal-card" data-category="devops" data-title="powershell ps7 cmdlets pipeline .net rest api pester active directory parallel">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🛡️</div>
<span class="portal-card-badge badge-devops">DevOps &amp; Cloud</span>
</div>
<h3 class="portal-card-title">PowerShell 7+ Core: Enterprise Automation</h3>
<p class="portal-card-desc">Moderne Windows &amp; Multi-Platform Systemautomatisierung basierend auf der .NET Objekt-Pipeline.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> Cmdlet-Architektur, Objekt-Pipeline &amp; berechnete Eigenschaften</li>
<li><strong>Lehrpfad 2:</strong> Typisierung, <code>[PSCustomObject]</code>, PS7 Ternary &amp; Error-Handling</li>
<li><strong>Lehrpfad 3:</strong> Parallelisierung mit <code>ForEach-Object -Parallel</code> &amp; REST-APIs</li>
<li><strong>Lehrpfad 4:</strong> Modul-Manifeste, Pester v5 Unit Tests &amp; Multi-Cloud Ops Engine</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">16 Module</span>
<span class="portal-card-tag">Objekt-Pipeline</span>
<span class="portal-card-tag">Parallel-Jobs</span>
<span class="portal-card-tag">Pester Tests</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="powershell" onclick="handleCurriculumAction('powershell', 'PowerShell 7+ Core')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 6. SQL & DATENBANKEN -->
<div class="curriculum-card portal-card" data-category="data" data-title="sql datenbanken relational postgresql sqlite normalisierung joins cte window functions acid">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐬</div>
<span class="portal-card-badge badge-data">Daten &amp; Web</span>
</div>
<h3 class="portal-card-title">SQL &amp; Relationale Datenbank-Architektur</h3>
<p class="portal-card-desc">Vollständiges relationales Datenmanagement vom Tabellenentwurf bis zur Hochleistungs-Analytik.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> DDL/DML, Constraints, Foreign Keys &amp; 1NF–3NF Normalisierung</li>
<li><strong>Lehrpfad 2:</strong> Multi-Table JOINs (INNER/LEFT/FULL), Aggregationen &amp; Subqueries</li>
<li><strong>Lehrpfad 3:</strong> Common Table Expressions (CTEs) &amp; Analytische Window Functions</li>
<li><strong>Lehrpfad 4:</strong> B-Tree Indizes, ACID Transaktionen &amp; Data Warehouse Analytics</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">16 Module</span>
<span class="portal-card-tag">1NF–3NF Normalisierung</span>
<span class="portal-card-tag">JOINs &amp; CTEs</span>
<span class="portal-card-tag">ACID Transaktionen</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="sql" onclick="handleCurriculumAction('sql', 'SQL & Datenbank-Architektur')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 7. JAVASCRIPT & TYPESCRIPT -->
<div class="curriculum-card portal-card" data-category="coding" data-title="javascript typescript frontend dom async await es6 web apps generics">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🌐</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">JavaScript &amp; Modernes TypeScript</h3>
<p class="portal-card-desc">Moderne Web-Entwicklung von ES6-Grundlagen bis zur statischen Typisierung mit TypeScript Generics.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> ES6+ Syntax, Scopes, Closures, Destructuring &amp; Datenstrukturen</li>
<li><strong>Lehrpfad 2:</strong> Klassen, OOP-Vererbung, RegExp Text-Mining &amp; Custom Errors</li>
<li><strong>Lehrpfad 3:</strong> DOM Event-Delegation, LocalStorage &amp; Asynchrones Async/Await</li>
<li><strong>Lehrpfad 4:</strong> ES-Module Architektur, TypeScript Generics &amp; Type Guards</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">16 Module</span>
<span class="portal-card-tag">ES6+ &amp; OOP</span>
<span class="portal-card-tag">Async/Await</span>
<span class="portal-card-tag">TypeScript Generics</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="javascript" onclick="handleCurriculumAction('javascript', 'JavaScript & TypeScript')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 8. JAVA 21 ENTERPRISE -->
<div class="curriculum-card portal-card" data-category="coding" data-title="java 21 enterprise oop virtual threads streams junit5 records">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">☕</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">Java 21+ Enterprise &amp; IHK Standard</h3>
<p class="portal-card-desc">Enterprise-Architektur mit dem IHK-Prüfungsstandard und modernen Sprachfeatures von Java 21 LTS.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> Syntax, Typen, Switch Expressions, Methoden &amp; Konstruktoren</li>
<li><strong>Lehrpfad 2:</strong> Kapselung, Java 17+ Records, Vererbung &amp; Interfaces</li>
<li><strong>Lehrpfad 3:</strong> Generics, Collections Framework, Streams API &amp; Virtual Threads</li>
<li><strong>Lehrpfad 4:</strong> JUnit 5 Testsuites &amp; Enterprise Banking Architecture Engine</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">16 Module</span>
<span class="portal-card-tag">Java 21 LTS</span>
<span class="portal-card-tag">Records &amp; Streams</span>
<span class="portal-card-tag">Virtual Threads</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="java" onclick="handleCurriculumAction('java', 'Java 21+ Enterprise')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 9. RUST SYSTEMS -->
<div class="curriculum-card portal-card" data-category="coding" data-title="rust systems ownership borrowing concurrency lifetimes cargo">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🦀</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">Rust Modern Systems &amp; Safety</h3>
<p class="portal-card-desc">Zero-Cost Abstractions und kompromisslose Speichersicherheit ohne Garbage Collector.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> Ownership- &amp; Borrowing-Modell, Aliasing vs Mutation &amp; Lifetimes</li>
<li><strong>Lehrpfad 2:</strong> Enums mit Option &amp; Result, Pattern Matching &amp; Cargo Modules</li>
<li><strong>Lehrpfad 3:</strong> Traits, Dynamic Dispatch, Closures &amp; Smart Pointer (Box, Arc, Mutex)</li>
<li><strong>Lehrpfad 4:</strong> Fearless Concurrency (MPSC Channels) &amp; LRU-Cache Master Engine</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">16 Module</span>
<span class="portal-card-tag">Ownership System</span>
<span class="portal-card-tag">Fearless Concurrency</span>
<span class="portal-card-tag">Cargo Tests</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="rust" onclick="handleCurriculumAction('rust', 'Rust Systems & Safety')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 10. GO CLOUD MICROSERVICES -->
<div class="curriculum-card portal-card" data-category="coding" data-title="go golang microservices concurrency goroutines channels rest apis">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐹</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">Go Cloud Microservices &amp; Concurrency</h3>
<p class="portal-card-desc">Google Go für hochperformante Cloud-Native Backend-Services und parallele Worker-Pipelines.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> Go-Syntax, dynamische Slices, Maps &amp; Multiple Return Values</li>
<li><strong>Lehrpfad 2:</strong> Structs, Receiver-Methoden, Duck Typing Interfaces &amp; Defer/Panic</li>
<li><strong>Lehrpfad 3:</strong> Goroutines, Channels, Select Multiplexing &amp; Mutex Thread-Safety</li>
<li><strong>Lehrpfad 4:</strong> Standard-HTTP REST-Server, Middleware &amp; Analytics Microservice</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">16 Module</span>
<span class="portal-card-tag">Goroutines &amp; Channels</span>
<span class="portal-card-tag">net/http Server</span>
<span class="portal-card-tag">Microservice Engine</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="go" onclick="handleCurriculumAction('go', 'Go Microservices & Concurrency')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 11. C# 12 & .NET 8 -->
<div class="curriculum-card portal-card" data-category="coding" data-title="csharp dotnet c# 12 linq async tasks xunit clean architecture">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🔷</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">C# 12 &amp; Modernes .NET 8 Enterprise</h3>
<p class="portal-card-desc">Moderne Unternehmenssoftware mit Clean Architecture, Pattern Matching und funktionalen LINQ-Pipelines.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> Top-Level Statements, Pattern Matching &amp; Primary Constructors</li>
<li><strong>Lehrpfad 2:</strong> Records &amp; Immutability, Vererbung &amp; Dependency Injection</li>
<li><strong>Lehrpfad 3:</strong> LINQ Method Syntax, Asynchrone Tasks &amp; System.Text.Json</li>
<li><strong>Lehrpfad 4:</strong> Delegates/Events, xUnit Testsuites &amp; Order Processing Pipeline</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">16 Module</span>
<span class="portal-card-tag">C# 12 &amp; .NET 8</span>
<span class="portal-card-tag">LINQ Analytics</span>
<span class="portal-card-tag">xUnit Testsuite</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="csharp" onclick="handleCurriculumAction('csharp', 'C# 12 & .NET 8')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 12. C & C++20 SYSTEMS -->
<div class="curriculum-card portal-card" data-category="coding" data-title="cpp c c++ c++20 pointer speicher raii stl templates googletest">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">⚙️</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">C &amp; Modernes C++20 Systems Engineering</h3>
<p class="portal-card-desc">Hardwarenahe Systemprogrammierung, Pointer-Arithmetik und moderne C++20 RAII-Abstraktionen.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> Pointer-Grundlagen, Heap-Speicherallokation &amp; Structs</li>
<li><strong>Lehrpfad 2:</strong> C++ Namespaces, RAII-Prinzip, Rule of Five &amp; Operator Overloading</li>
<li><strong>Lehrpfad 3:</strong> Generische Templates, Smart Pointer (unique/shared) &amp; STL</li>
<li><strong>Lehrpfad 4:</strong> C++ Lambdas, std::thread Concurrency &amp; GoogleTest Simulation</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">16 Module</span>
<span class="portal-card-tag">Pointer &amp; Heap</span>
<span class="portal-card-tag">RAII Resource Guard</span>
<span class="portal-card-tag">GoogleTest Suite</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="cpp" onclick="handleCurriculumAction('cpp', 'C & C++20 Systems')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
<!-- 13. HTML5 & CSS3 -->
<div class="curriculum-card portal-card" data-category="data" data-title="html css frontend flexbox grid webdesign responsive ui a11y">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🎨</div>
<span class="portal-card-badge badge-data">Daten &amp; Web</span>
</div>
<h3 class="portal-card-title">HTML5, Modern CSS3 &amp; Responsive UI</h3>
<p class="portal-card-desc">Moderne Benutzeroberflächen vom semantischen Markup über Flexbox/Grid bis zu Dark Mode Themes.</p>
<ul class="curriculum-topics">
<li><strong>Lehrpfad 1:</strong> Semantische HTML5-Elemente, Formulare &amp; Barrierefreiheit (ARIA)</li>
<li><strong>Lehrpfad 2:</strong> CSS Box-Modell, Kaskade, Spezifität &amp; CSS Custom Properties</li>
<li><strong>Lehrpfad 3:</strong> 1D-Layouts mit Flexbox, 2D-Layouts mit CSS Grid &amp; Media Queries</li>
<li><strong>Lehrpfad 4:</strong> Transitions, BEM-Methodik, Dark Mode Themes &amp; SaaS Landingpage</li>
</ul>
<div class="portal-card-tags">
<span class="portal-card-tag">16 Module</span>
<span class="portal-card-tag">Semantik &amp; A11y</span>
<span class="portal-card-tag">Flexbox &amp; Grid</span>
<span class="portal-card-tag">Responsive Design</span>
</div>
</div>
<div style="margin-top: 18px;">
<button type="button" class="curriculum-cta-btn portal-card-action-btn" data-course-id="html_css" onclick="handleCurriculumAction('html_css', 'HTML5 & CSS3 Responsive UI')">
<span>✨ Lehrplan freischalten &amp; starten</span>
</button>
</div>
</div>
</div>
<!-- 4. IHK PRÜFUNGSVORBEREITUNG SHOWCASE -->
<section class="card" id="ihk-section" style="margin-top: 56px; border: 1px solid #bfdbfe; background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%); border-radius: 16px; padding: 32px;">
<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 badge-ihk" style="font-size: 0.8rem; font-weight: 800;">Offizieller Prüfungsstandard</span>
<h3 style="margin: 8px 0 6px 0; font-size: 1.6rem; color: #1e3a8a; font-weight: 900;">🎓 IHK Prüfungstrainer AP1 &amp; AP2</h3>
<p style="margin: 0; color: #475569; font-size: 0.95rem; max-width: 780px;">Realistische Prüfungssimulation nach der neuen Ausbildungsordnung (AO 2020) für Fachinformatiker aller Fachrichtungen (FIAE, FISI, IT-SE, IT-SM).</p>
</div>
<button type="button" class="btn" style="background: #1d4ed8; color: white; padding: 10px 20px; font-weight: 800; border-radius: 8px; border: none; cursor: pointer;" onclick="window.openAuthModal('register', { allowClose: true, title: '🔒 Prüfungssimulation freischalten', message: 'Erstelle einen kostenlosen Account, um den 90-Minuten IHK-Prüfungstrainer mit automatischer Punkteberechnung im Lernbereich zu starten.' })">
<span>🚀 Prüfungssimulation freischalten</span>
</button>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 16px;">
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #1e3a8a; font-size: 1.05rem;">📘 AP1: IT-Arbeitsplatz (LF 1–8)</h4>
<p style="font-size: 0.86rem; color: #64748b; margin: 0 0 14px 0;">Gemeinsame Kernqualifikationen: Verträge, Ergonomie, IPv4/IPv6 Subnetting, BSI-Schutzbedarf, relationales SQL &amp; Trace-Tabellen.</p>
<button type="button" class="btn" style="background: #f1f5f9; color: #1e3a8a; border: 1px solid #cbd5e1; font-size: 0.82rem; font-weight: 700; border-radius: 6px; padding: 8px 12px; cursor: pointer;" onclick="handleCurriculumAction('ihk_ap1', 'IHK AP1')">
🔒 In Lernbereich freischalten
</button>
</div>
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #991b1b; font-size: 1.05rem;">📕 AP2: Systemintegration (LF 9–12)</h4>
<p style="font-size: 0.86rem; color: #64748b; margin: 0 0 14px 0;">Fachrichtungsspezifisch: VLANs &amp; Routing, Active Directory GPO, RAID &amp; SAN-Speicher, Virtualisierung, WiSo-Kompaktfragen &amp; 40h-Projektleitfaden.</p>
<button type="button" class="btn" style="background: #f1f5f9; color: #991b1b; border: 1px solid #cbd5e1; font-size: 0.82rem; font-weight: 700; border-radius: 6px; padding: 8px 12px; cursor: pointer;" onclick="handleCurriculumAction('ihk_ap2_fisi', 'IHK AP2 FISI')">
🔒 In Lernbereich freischalten
</button>
</div>
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">⚡ Interaktive Drill-Trainer</h4>
<p style="font-size: 0.86rem; color: #64748b; margin: 0 0 14px 0;">Blitzschnelles Rechnen: Subnetting-Drill Generator mit Live-Punktevergabe, schrittweise Trace-Tabellen-Simulation und relationale Abfrage-Validierung.</p>
<button type="button" class="btn" style="background: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1; font-size: 0.82rem; font-weight: 700; border-radius: 6px; padding: 8px 12px; cursor: pointer;" onclick="handleCurriculumAction('ihk_ap1', 'Subnetting Drill')">
🔒 In Lernbereich freischalten
</button>
</div>
</div>
</section>
<!-- 5. MONACO WEB-IDE SHOWCASE -->
<section class="card" id="features-ide" style="margin-top: 48px; border-radius: 16px; padding: 32px; background: #090d16; color: #f8fafc; border: 1px solid rgba(255,255,255,0.1);">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
<div style="max-width: 640px;">
<span style="background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); padding: 4px 10px; border-radius: 99px; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;">0 Min. Setup • Direkt im Browser</span>
<h3 style="font-size: 1.6rem; font-weight: 900; margin: 10px 0; color: #f8fafc;">💻 Monaco Web-IDE: Echte Entwickler-Erfahrung</h3>
<p style="color: #94a3b8; font-size: 0.92rem; line-height: 1.6; margin-bottom: 16px;">Vergiss mühsame Compiler-Installationen oder Treiberprobleme. Das IT-Praxisportal bringt den Original-Code-Editor von Microsoft VS Code direkt in deinen Webbrowser – mit Autovervollständigung, Syntax-Highlighting, Unittests und automatischem Cloud-Save.</p>
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<span style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 5px 10px; border-radius: 6px; font-size: 0.8rem;">⚡ Multi-Language Runner</span>
<span style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 5px 10px; border-radius: 6px; font-size: 0.8rem;">🧪 Automatisierte Unittests</span>
<span style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 5px 10px; border-radius: 6px; font-size: 0.8rem;">💡 Intelligente Fehleranalyse</span>
</div>
</div>
<div>
<button type="button" class="btn" style="background: #10b981; color: white; padding: 12px 24px; font-size: 0.95rem; font-weight: 800; border-radius: 8px; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);" onclick="window.openAuthModal('register', { allowClose: true, title: '🔒 Web-IDE im Lernbereich freischalten', message: 'Registriere dich kostenlos, um direkt im Browser mit der Monaco IDE zu programmieren.' })">
<span>✨ Account erstellen &amp; Web-IDE starten &rarr;</span>
</button>
</div>
</div>
</section>
<!-- 6. BENTO FEATURE MATRIX -->
<div style="text-align: center; margin: 64px 0 24px 0;" id="features">
<h2 style="font-size: 1.8rem; font-weight: 900; margin: 0 0 6px 0; color: #0f172a;">🛠️ Warum IT-Praxisportal?</h2>
<p style="color: #64748b; margin: 0; font-size: 0.95rem;">Wissenschaftlich fundierte Didaktik, moderne Web-Technologien und zero lokale Installation.</p>
</div>
<div class="bento-grid">
<div class="bento-item">
<div style="font-size: 1.8rem; margin-bottom: 8px;">⚡</div>
<h4>Monaco Web-IDE (VS Code)</h4>
<p>Gleicher professioneller Editor wie in Microsoft VS Code: Syntax-Highlighting, Autocomplete, Shortcuts und automatisierte Tests direkt im Browser.</p>
</div>
<div class="bento-item">
<div style="font-size: 1.8rem; margin-bottom: 8px;">⏱️</div>
<h4>Realtime Prüfungssimulation</h4>
<p>Echte Prüfungsbedingungen: 90 Minuten Countdown, 100 Punkte, dynamisch gemischte 150 IHK-Fragen und automatischer Notenrechner nach IHK-Schlüssel.</p>
</div>
<div class="bento-item">
<div style="font-size: 1.8rem; margin-bottom: 8px;">🏆</div>
<h4>Gamification &amp; Zertifikate</h4>
<p>Sammle XP für bestandene Tests, halte deinen täglichen Lern-Streak und drucke nach Abschluss verifizierbare PDF-Zertifikate für Bewerbungen aus.</p>
</div>
<div class="bento-item">
<div style="font-size: 1.8rem; margin-bottom: 8px;">🛡️</div>
<h4>100% DSGVO &amp; Cloud-Sync</h4>
<p>Gehostet in Deutschland, kein Third-Party Tracking und verschlüsselte Passwörter. Speichere deinen Fortschritt sicher in der Cloud.</p>
</div>
</div>
<!-- 7. ZIELGRUPPEN -->
<section class="card" style="margin-top: 48px; border-radius: 16px; padding: 32px; background: #ffffff;">
<div style="text-align: center; margin-bottom: 28px;">
<h3 style="font-size: 1.5rem; font-weight: 900; color: #0f172a; margin: 0 0 6px 0;">👥 Für wen ist das IT-Praxisportal?</h3>
<p style="color: #64748b; margin: 0; font-size: 0.92rem;">Entwickelt von echten IHK-Dozenten und erfahrenen IT-Architekten.</p>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;">
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px;">
<div style="font-size: 1.6rem; margin-bottom: 8px;">👨‍💻</div>
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">Auszubildende Fachinformatiker</h4>
<p style="font-size: 0.86rem; color: #64748b; margin: 0;">Der ideale Begleiter vom ersten Ausbildungstag bis zur Abschlussprüfung. Schließe Wissenslücken in Berufsschul-Lernfeldern mit praxisnahem Code.</p>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px;">
<div style="font-size: 1.6rem; margin-bottom: 8px;">🎓</div>
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">Umschüler &amp; Quereinsteiger</h4>
<p style="font-size: 0.86rem; color: #64748b; margin: 0;">Verständliche Didaktik ohne Vorwissen-Frust. Schritt-für-Schritt Subgoals bringen dich sicher durch technische Prüfungen und Job-Interviews.</p>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px;">
<div style="font-size: 1.6rem; margin-bottom: 8px;">👨‍🏫</div>
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">Berufsschulen &amp; Ausbilder</h4>
<p style="font-size: 0.86rem; color: #64748b; margin: 0;">Organisiere ganze Klassen mit Invite-Codes. Behalte die Live-Lernmatrix deiner Azubis im Blick und inspiziere abgegebenen Code im Dozenten-Dashboard.</p>
</div>
</div>
</section>
<!-- 8. HIGH-CONVERTING BOTTOM CTA BANNER -->
<section class="card" style="margin-top: 48px; border-radius: 16px; padding: 40px 24px; text-align: center; background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%); color: white; box-shadow: var(--shadow-xl);">
<h2 style="font-size: 2rem; font-weight: 900; margin: 0 0 10px 0; color: white;">Bereit für echte IT-Praxis?</h2>
<p style="font-size: 1.05rem; opacity: 0.9; max-width: 650px; margin: 0 auto 24px auto;">
Erstelle jetzt deinen Account in weniger als 30 Sekunden. 100% kostenlos, keine Kreditkarte, kein Abonnement.
</p>
<button type="button" class="btn" style="background: #ffffff; color: #0284c7; padding: 12px 28px; font-size: 1rem; font-weight: 800; border-radius: 8px; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.2);" onclick="window.openAuthModal('register', { allowClose: true })">
<span>✨ Jetzt kostenlos registrieren &rarr;</span>
</button>
</section>
</main>
<!-- 9. CLEAN MARKETING FOOTER -->
<footer style="background: #0b0f19; color: #94a3b8; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 48px 24px;">
<div class="portal-container" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
<div style="display: flex; align-items: center; gap: 10px;">
<div class="portal-brand-logo" style="width: 32px; height: 32px;">
<img src="assets/favicon.svg" alt="Logo" style="width: 20px; height: 20px;">
</div>
<div>
<div style="color: white; font-weight: 800; font-size: 1rem;">it-praxisportal.de</div>
<div style="font-size: 0.75rem; color: #64748b;">Version 1.0 Alpha &bull; Die moderne Plattform für echte IT-Praxis</div>
</div>
</div>
<div style="display: flex; gap: 20px; font-size: 0.85rem;">
<a href="#hero" style="color: #94a3b8; text-decoration: none;">Übersicht</a>
<a href="#curriculum" style="color: #94a3b8; text-decoration: none;">Curriculum</a>
<a href="#ihk-section" style="color: #94a3b8; text-decoration: none;">IHK Prüfung</a>
<a href="#features-ide" style="color: #94a3b8; text-decoration: none;">Web-IDE</a>
<a href="teacher.html" style="color: #94a3b8; text-decoration: none;">Dozenten</a>
</div>
<div style="font-size: 0.8rem; color: #64748b;">
🔒 100% DSGVO-konform &bull; Serverstandort Deutschland
</div>
</div>
</footer>
<!-- Scripts -->
<script src="assets/app_auth.js"></script>
<script>
// Live Filter & Instant Search Engine für Curriculum
function filterCurriculum(category, element) {
document.querySelectorAll('.portal-tab-pill').forEach(btn => btn.classList.remove('active'));
if (element) element.classList.add('active');
const cards = document.querySelectorAll('.curriculum-card');
const query = (document.getElementById('curriculum-filter-input').value || '').toLowerCase().trim();
cards.forEach(card => {
const cardCat = card.getAttribute('data-category');
const cardTitle = (card.getAttribute('data-title') || '').toLowerCase();
const matchesCategory = (category === 'all' || cardCat === category);
const matchesQuery = (!query || cardTitle.includes(query) || card.innerText.toLowerCase().includes(query));
if (matchesCategory && matchesQuery) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
});
}
const searchInput = document.getElementById('curriculum-filter-input');
if (searchInput) {
searchInput.addEventListener('input', () => {
const activeTab = document.querySelector('.portal-tab-pill.active');
const activeCat = activeTab ? activeTab.getAttribute('onclick').match(/'([^']+)'/)[1] : 'all';
filterCurriculum(activeCat, activeTab);
});
}
// Klick auf Curriculum Aktion
function handleCurriculumAction(courseId, title) {
if (window.AUTH && window.AUTH.isLoggedIn()) {
window.location.href = 'dashboard.html';
} else {
window.openAuthModal('register', {
allowClose: true,
title: `🔒 ${title} freischalten`,
message: 'Erstelle deinen kostenlosen Account in unter 30 Sekunden, um sofort vollen Zugriff auf alle 216 Module, die Web-IDE und IHK-Prüfungen im Lernbereich zu erhalten.'
});
}
}
document.addEventListener('DOMContentLoaded', () => {
window.AUTH.updateUI();
// Prüfe, ob Nutzer bereits eingeloggt ist -> Banner und Buttons anpassen
if (window.AUTH && window.AUTH.isLoggedIn()) {
const user = window.AUTH.getUser();
const banner = document.getElementById('landing-logged-in-banner');
const userNameEl = document.getElementById('landing-user-name');
const dashLink = document.getElementById('nav-dashboard-link');
if (dashLink) dashLink.style.display = 'inline-flex';
if (banner && user) {
banner.style.display = 'flex';
if (userNameEl) userNameEl.innerText = user.name || user.email.split('@')[0];
}
// Action Buttons auf "Im Lernbereich öffnen" umstellen
document.querySelectorAll('.curriculum-cta-btn').forEach(btn => {
btn.innerHTML = '<span>▶ Im Lernbereich öffnen</span> <span>&rarr;</span>';
btn.style.background = '#10b981';
});
}
});
</script>
</body>
</html>