Aufgaben-Python/index.html
Alex Mueller e49c685f25 feat(admin): implement full admin panel with user management, role switcher and platform settings
- admin.html: Executive Dashboard mit KPI-Metriken (User, Rollen, gelöste Aufgaben, DB-Größe)
- Userverwaltung: Interaktive Tabelle mit Sofortsuche, Rollen-Filter, Rollenwechsel (Admin/Lehrer/Schüler/Solo), Passwort-Reset & Benutzer löschen/anlegen
- Plattform-Einstellungen: Globales Announcement-Banner, Registrierungs-Toggle & Wartungsmodus
- Backend-API (server.py): Geschützte Admin-Endpunkte (/api/admin/stats, /api/admin/users, /api/admin/settings etc.) mit rollenbasierter Autorisierung (RBAC)
- CLI-Tool make_admin.py zur Vergabe von Administratorrechten im Terminal
2026-09-12 14:00:53 +02:00

704 lines
41 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;
}
.portal-card-btn.locked {
background: rgba(2, 132, 199, 0.1);
color: #0284c7;
border: 1px solid rgba(2, 132, 199, 0.3);
display: inline-flex;
align-items: center;
gap: 6px;
}
.portal-card-btn.locked:hover {
background: #0284c7;
color: white;
border-color: #0284c7;
}
.portal-card-btn {
background: #0284c7;
color: white;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 8px;
font-size: 0.84rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: all 0.15s ease;
}
.portal-card-btn:hover {
background: #0369a1;
transform: translateY(-1px);
}
</style>
</head>
<body style="background: #f8fafc; color: #0f172a; font-family: var(--font-sans); margin: 0; padding: 0;">
<!-- 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="#katalog" class="portal-nav-link">📚 13 Praxis-Kurse</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="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="#katalog" class="portal-btn-secondary">
<span>📚 Curriculum &amp; Inhalte 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">Praxis-Lehrpfade</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">Interaktive Module</div>
<div class="portal-stat-desc">Geführte Subgoals &amp; Sofort-Tests</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. KURS-KATALOG & CURRICULUM ÜBERSICHT -->
<main class="portal-container" id="katalog" 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; Kurs-Katalog</h2>
<p style="color: #64748b; margin: 0; font-size: 0.95rem;">Entdecke alle 13 Disziplinen. Registriere dich kostenlos, um alle Aufgaben und die Web-IDE freizuschalten.</p>
</div>
<!-- Search Box -->
<div class="portal-search-box">
<span style="font-size: 1rem;">🔍</span>
<input type="text" id="course-filter-input" placeholder="Kurs oder Thema filtern (z.B. Python, Subnetting, SQL, Bash, Rust)...">
</div>
</div>
<!-- Category Filter Tabs -->
<div class="portal-filter-tabs" style="margin-bottom: 24px;">
<button type="button" class="portal-tab-pill active" onclick="filterCourses('all', this)">🌟 Alle Disziplinen (13)</button>
<button type="button" class="portal-tab-pill" onclick="filterCourses('ihk', this)">🎓 IHK Prüfung (2)</button>
<button type="button" class="portal-tab-pill" onclick="filterCourses('devops', this)">🐧 DevOps &amp; Linux (2)</button>
<button type="button" class="portal-tab-pill" onclick="filterCourses('coding', this)">💻 Backend &amp; Systems (6)</button>
<button type="button" class="portal-tab-pill" onclick="filterCourses('data', this)">🗄️ Daten &amp; Web (3)</button>
</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-title="ihk ap1 lernfelder 1-8 it-arbeitsplatz subnetting trace tabellen simulation">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">📘</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP1: IT-Arbeitsplatz &amp; Basissysteme</h3>
<p class="portal-card-desc">Lückenlose Vorbereitung auf die Abschlussprüfung Teil 1. Alle Lernfelder (LF 1 bis LF 8), Subnetting-Drill, Trace-Tabellen, SQL-Labor &amp; 90-Minuten Probeprüfung.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">LF 1–8 Kernqualifikation</span>
<span class="portal-card-tag">Subnetting Drill</span>
<span class="portal-card-tag">Trace-Tabellen</span>
<span class="portal-card-tag">90-Min Simulation</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 12 Module &bull; 100 Pkt.</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="ihk_ap1" data-course-url="courses/ihk_ap1/01_lf1_unternehmen_und_arbeitsplatz/index.html">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 2. IHK AP2 FISI -->
<div class="portal-card" data-category="ihk" data-title="ihk ap2 fisi fachinformatiker systemintegration wiso vlan routing storage cloud 40h-projekt">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">📕</div>
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
</div>
<h3 class="portal-card-title">IHK AP2: Fachinformatiker Systemintegration</h3>
<p class="portal-card-desc">Fachrichtung Systemintegration: LF 9 (Netzwerke/VLAN), LF 10 (Server/AD), LF 11 (Storage/RAID), LF 12 (Cloud/Docker), WiSo &amp; offizieller Leitfaden zur 40h-Projektarbeit.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">LF 9–12 FISI</span>
<span class="portal-card-tag">Active Directory &amp; GPO</span>
<span class="portal-card-tag">WiSo Prüfungsfragen</span>
<span class="portal-card-tag">40h-Projektarbeit</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 9 Module &bull; 3 Simulationen</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="ihk_ap2_fisi" data-course-url="courses/ihk_ap2_fisi/01_lf9_netzwerke_und_dienste/index.html">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 3. PYTHON 3 -->
<div class="portal-card" data-category="coding" data-title="python software entwicklung oop grundlagen tkinter data engineering">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐍</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">Python 3: Vom Einsteiger zum Entwickler</h3>
<p class="portal-card-desc">Das umfassende Flaggschiff-Curriculum: Grundlagen (G01–G10), Objektorientierung (00–06), Fortgeschrittenes OOP &amp; GUI (07–16) und Data Engineering (17–22).</p>
<div class="portal-card-tags">
<span class="portal-card-tag">OOP &amp; Klassen</span>
<span class="portal-card-tag">Pyodide WASM</span>
<span class="portal-card-tag">Tkinter GUI</span>
<span class="portal-card-tag">Unit Testing</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 35 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="python" data-course-url="workspace.html?course=python&chapter=01_erste_schritte_taschenrechner">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 4. LINUX BASH & CLOUD DEVOPS -->
<div class="portal-card" data-category="devops" data-title="linux bash shell scripting terminal devops jq sed awk docker bats ci/cd">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐧</div>
<span class="portal-card-badge badge-devops">DevOps &amp; Cloud</span>
</div>
<h3 class="portal-card-title">Linux Bash, Shell Scripting &amp; Cloud DevOps</h3>
<p class="portal-card-desc">Terminal-Mastery für Sysadmins: I/O Streams, Pipes, Text-Mining mit <code>jq</code>, <code>sed</code> und <code>awk</code>, Parallelisierung (xargs/parallel), Docker-Scripting &amp; BATS Unittests.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">I/O Redirection</span>
<span class="portal-card-tag">jq JSON Mining</span>
<span class="portal-card-tag">xargs Multithreading</span>
<span class="portal-card-tag">BATS Testsuite</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="bash" data-course-url="workspace.html?course=bash&chapter=01_navigation_dateien_und_globbing">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 5. POWERSHELL 7+ CORE -->
<div class="portal-card" data-category="devops" data-title="powershell ps7 cmdlets pipeline .net rest api pester active directory">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🛡️</div>
<span class="portal-card-badge badge-devops">DevOps &amp; Cloud</span>
</div>
<h3 class="portal-card-title">PowerShell 7+ Core: Enterprise Automation</h3>
<p class="portal-card-desc">Modernes Microsoft &amp; Multi-Platform Scripting: Die Objekt-Pipeline, Custom PSCustomObjects, REST-APIs, moderne Parallelisierung mit <code>ForEach-Object -Parallel</code> &amp; Pester Unit Tests.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Objekt-Pipeline</span>
<span class="portal-card-tag">PSCustomObject</span>
<span class="portal-card-tag">Parallel-Jobs</span>
<span class="portal-card-tag">Pester Tests</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="powershell" data-course-url="workspace.html?course=powershell&chapter=01_powershell_konsole_und_cmdlet_architektur">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 6. SQL & DATENBANKEN -->
<div class="portal-card" data-category="data" data-title="sql datenbanken postgresql sqlite normalisierung joins cte window-functions acid">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐬</div>
<span class="portal-card-badge badge-data">Daten &amp; Web</span>
</div>
<h3 class="portal-card-title">SQL &amp; Relationale Datenbank-Architektur</h3>
<p class="portal-card-desc">Vollständiges relationales Datenmanagement: Strikte Normalisierung (1NF–3NF), komplexe Multi-Table JOINs, Subqueries, Common Table Expressions (CTEs), Window Functions &amp; ACID Transaktionen.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">1NF–3NF Normalisierung</span>
<span class="portal-card-tag">JOINs &amp; CTEs</span>
<span class="portal-card-tag">Window Functions</span>
<span class="portal-card-tag">Query Plans</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="sql" data-course-url="workspace.html?course=sql&chapter=01_tabellen_und_select">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 7. JAVASCRIPT & TYPESCRIPT -->
<div class="portal-card" data-category="coding" data-title="javascript typescript frontend dom async await es6 web-apps">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🌐</div>
<span class="portal-card-badge badge-code">Software &amp; Coding</span>
</div>
<h3 class="portal-card-title">JavaScript &amp; Modernes TypeScript</h3>
<p class="portal-card-desc">Moderne Web-Entwicklung: ES6+ Syntax, Klassen &amp; OOP, Async/Await &amp; Promises, DOM-Manipulation, Web Storage, ES-Module und statische Typisierung mit TypeScript Generics.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">ES6+ &amp; OOP</span>
<span class="portal-card-tag">Async/Await</span>
<span class="portal-card-tag">DOM Events</span>
<span class="portal-card-tag">TypeScript Generics</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="javascript" data-course-url="workspace.html?course=javascript&chapter=01_erste_schritte_variablen">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 8. JAVA 21 ENTERPRISE -->
<div class="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: Strikte Typisierung, Records, Vererbung &amp; Interfaces, Generics, Collections Framework, Streams API, Virtual Threads &amp; automatisierte JUnit 5 Tests.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Java 21</span>
<span class="portal-card-tag">Records &amp; OOP</span>
<span class="portal-card-tag">Streams API</span>
<span class="portal-card-tag">Virtual Threads</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="java" data-course-url="workspace.html?course=java&chapter=01_java_syntax_und_primitive_typen">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 9. RUST SYSTEMS -->
<div class="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: Ownership &amp; Borrowing, Lifetimes, Enums mit Option/Result, Traits, Smart Pointer (Box, Arc, Mutex), Fearless Concurrency &amp; LRU-Cache Masterprojekt.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Ownership System</span>
<span class="portal-card-tag">Lifetimes</span>
<span class="portal-card-tag">Arc&lt;Mutex&gt;</span>
<span class="portal-card-tag">Cargo Tests</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="rust" data-course-url="workspace.html?course=rust&chapter=01_variablen_mutabilitaet_und_typen">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 10. GO CLOUD MICROSERVICES (NEU) -->
<div class="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">Entwickle hochskalierbare Cloud-Services mit Google Go: Goroutines, Channel-Pipelines, Mutex Synchronisation, Standard-HTTP-Server, Middleware &amp; REST Microservice Master.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Goroutines</span>
<span class="portal-card-tag">Channels &amp; Select</span>
<span class="portal-card-tag">net/http Server</span>
<span class="portal-card-tag">Table Tests</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="go" data-course-url="workspace.html?course=go&chapter=01_syntax_variablen_und_typen">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 11. C# 12 & .NET 8 -->
<div class="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: Top-Level Statements, Pattern Matching, Records, LINQ funktionale Datenabfragen, Asynchrones Task/await, xUnit Tests &amp; Enterprise Order Engine.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">C# 12 Primary Ctors</span>
<span class="portal-card-tag">LINQ Queries</span>
<span class="portal-card-tag">Async / Await</span>
<span class="portal-card-tag">xUnit Testsuite</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="csharp" data-course-url="workspace.html?course=csharp&chapter=01_syntax_datentypen_und_top_level_statements">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 12. C & C++20 SYSTEMS -->
<div class="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">Das Fundament der Systemprogrammierung: Pointer &amp; dynamischer Speicher, RAII, Klassen &amp; Rule of Five, Templates, Smart Pointer (unique_ptr, shared_ptr), STL &amp; GoogleTest.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Pointer &amp; Heap</span>
<span class="portal-card-tag">RAII Resource Guard</span>
<span class="portal-card-tag">Smart Pointer</span>
<span class="portal-card-tag">GoogleTest Suite</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="cpp" data-course-url="workspace.html?course=cpp&chapter=01_c_syntax_datentypen_und_io">
<span>🔒 Kostenlos freischalten</span>
</button>
</div>
</div>
<!-- 13. HTML5 & CSS3 -->
<div class="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">Modernes UI-Handwerk: Semantische Tags, Barrierefreiheit (ARIA/A11y), CSS Custom Properties, 1D-Layouts mit Flexbox, 2D-Layouts mit CSS Grid, Media Queries &amp; Dark Mode.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Semantik &amp; A11y</span>
<span class="portal-card-tag">Flexbox &amp; CSS Grid</span>
<span class="portal-card-tag">Dark Mode Themes</span>
<span class="portal-card-tag">Responsive Design</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="html_css" data-course-url="workspace.html?course=html_css&chapter=01_semantisches_html_und_struktur">
<span>🔒 Kostenlos freischalten</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 zu starten.' })">
<span>🚀 Prüfungssimulation starten</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 aller Fachinformatiker: Verträge, Ergonomie, IPv4/IPv6 Subnetting, BSI-Schutzbedarf, relationales SQL &amp; Trace-Tabellen.</p>
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="ihk_ap1" data-course-url="courses/ihk_ap1/01_lf1_unternehmen_und_arbeitsplatz/index.html" style="font-size: 0.84rem; padding: 8px 14px;">
<span>🔒 AP1 Lehrplan öffnen</span>
</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="portal-card-btn portal-card-action-btn locked" data-course-id="ihk_ap2_fisi" data-course-url="courses/ihk_ap2_fisi/01_lf9_netzwerke_und_dienste/index.html" style="font-size: 0.84rem; padding: 8px 14px;">
<span>🔒 AP2 FISI Lehrplan öffnen</span>
</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="portal-card-btn portal-card-action-btn locked" data-course-id="ihk_ap1" data-course-url="courses/ihk_ap1/11_subnetting_drill_master/index.html" style="font-size: 0.84rem; padding: 8px 14px;">
<span>🔒 Drill-Trainer öffnen</span>
</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 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 (WARUM IT-PRAXISPORTAL?) -->
<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 / FÜR WEN IST DAS PORTAL? -->
<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="#katalog" style="color: #94a3b8; text-decoration: none;">13 Kurse</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
function filterCourses(category, element) {
document.querySelectorAll('.portal-tab-pill').forEach(btn => btn.classList.remove('active'));
if (element) element.classList.add('active');
const cards = document.querySelectorAll('.portal-card');
const query = (document.getElementById('course-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('course-filter-input');
if (searchInput) {
searchInput.addEventListener('input', () => {
const activeTab = document.querySelector('.portal-tab-pill.active');
const activeCat = activeTab ? activeTab.getAttribute('onclick').match(/'([^']+)'/)[1] : 'all';
filterCourses(activeCat, activeTab);
});
}
document.addEventListener('DOMContentLoaded', () => {
window.AUTH.updateUI();
});
</script>
</body>
</html>