Aufgaben-Python/index.html

596 lines
33 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 Plattform für IT-Berufe &amp; Software-Entwicklung</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<meta name="description" content="IT-Praxisportal: Die interaktive Lernplattform für Fachinformatiker, Software-Entwickler &amp; IT-Ausbildung. 216+ Module, 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 Python, Bash, PowerShell, SQL, Web, Java, Go, Rust, C#, C++ &amp; IHK AP1/AP2 Prüfungssimulation mit integrierter Monaco 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>
/* Sleek Scoped Enhancements for Minimal Modern UX */
.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;
}
</style>
</head>
<body style="background: #f8fafc; color: #0f172a; font-family: var(--font-sans); margin: 0; padding: 0;">
<!-- 1. STICKY TOPBAR -->
<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="#katalog" class="portal-nav-link">📚 Kurs-Katalog</a>
<a href="#ihk-section" class="portal-nav-link">🎓 IHK Prüfung</a>
<a href="workspace.html?course=python" class="portal-nav-link">💻 Web-IDE</a>
<a href="#zertifikate" class="portal-nav-link">🏆 Zertifikate</a>
<a href="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">👨‍🏫 Dozenten</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-guest" style="padding: 6px 14px; font-size: 0.82rem; background: #059669;" onclick="window.AUTH.startGuestSoloMode()">🚀 Solo-Start (Gast)</button>
<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;" onclick="window.openAuthModal('login')">🔑 Anmelden</button>
<button type="button" class="btn" id="nav-btn-register" style="padding: 6px 14px; font-size: 0.82rem; background: #0284c7;" onclick="window.openAuthModal('register')">Konto erstellen</button>
</div>
</div>
</header>
<!-- 2. HERO SECTION -->
<section class="portal-hero">
<div class="portal-container">
<div class="portal-hero-pill">
<span>⚡ Version 1.0 Alpha</span>
<span style="opacity: 0.5;">•</span>
<span>216+ Interaktive Module</span>
<span style="opacity: 0.5;">•</span>
<span>IHK AO 2020 Konform</span>
</div>
<h1>Praxisnahe IT-Kompetenz – Direkt im Browser</h1>
<p>Die All-in-One Lernplattform für <strong>Fachinformatiker, Software-Entwickler &amp; IT-Auszubildende</strong>. Lerne 11 moderne Programmier- und Skriptsprachen und bereite dich mit echten IHK-Fragen auf deine Abschlussprüfung vor.</p>
<div class="portal-hero-actions">
<a href="#katalog" class="portal-btn-primary">
<span>🚀 Alle Kurse entdecken</span>
<span>&darr;</span>
</a>
<a href="#ihk-section" class="portal-btn-secondary">
<span>📘 IHK Prüfungsvorbereitung (AP1 &amp; AP2)</span>
</a>
<a href="workspace.html?course=python" class="portal-btn-secondary" style="border-color: #38bdf8; color: #38bdf8;">
<span>💻 Web-IDE starten</span>
</a>
</div>
<!-- 4 Quick Stats -->
<div class="portal-stats-bar">
<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">Vollständige Curricula mit Tests</div>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num">12</div>
<div class="portal-stat-label">Technologie-Tracks</div>
<div class="portal-stat-desc">DevOps, Cloud, Web, Systems &amp; IHK</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">Original-Wortlaut &amp; 90-Min Timer</div>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num">100 %</div>
<div class="portal-stat-label">Zero-Install Web-IDE</div>
<div class="portal-stat-desc">Monaco Editor &amp; WASM im Browser</div>
</div>
</div>
</div>
</section>
<!-- 3. KURS-KATALOG & FILTER -->
<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;">📚 Interaktive Kurse &amp; Tracks</h2>
<p style="color: #64748b; margin: 0; font-size: 0.95rem;">Wähle eine Disziplin und starte sofort mit Theorie, Subgoals und Live-Code.</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)...">
</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 Tracks (12)</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; Sysadmin (2)</button>
<button type="button" class="portal-tab-pill" onclick="filterCourses('coding', this)">💻 Software &amp; Coding (6)</button>
<button type="button" class="portal-tab-pill" onclick="filterCourses('data', this)">🗄️ Daten &amp; Web (2)</button>
</div>
<!-- GRID OF 12 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 Prü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</span>
<span class="portal-card-tag">Subnetting</span>
<span class="portal-card-tag">Trace-Tabellen</span>
<span class="portal-card-tag">Probeprüfung</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 12 Module &bull; 100 Pkt.</span>
<a href="courses/ihk_ap1/01_lf1_unternehmen_und_arbeitsplatz/index.html" class="portal-card-btn">📘 AP1 Starten &rarr;</a>
</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 Prü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</span>
<span class="portal-card-tag">Active Directory</span>
<span class="portal-card-tag">WiSo</span>
<span class="portal-card-tag">40h-Projekt</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 9 Module &bull; 3 Simulationen</span>
<a href="courses/ihk_ap2_fisi/01_lf9_netzwerke_und_dienste/index.html" class="portal-card-btn">📕 AP2 FISI Starten &rarr;</a>
</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 Software-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>
<a href="workspace.html?course=python&chapter=01_erste_schritte_taschenrechner" class="portal-card-btn">🐍 In Web-IDE &rarr;</a>
</div>
</div>
<!-- 4. LINUX BASH -->
<div class="portal-card" data-category="devops" data-title="linux bash shell scripting pipelines devops docker systemd automation">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🐧</div>
<span class="portal-card-badge badge-devops">DevOps &amp; Sysadmin</span>
</div>
<h3 class="portal-card-title">Linux Bash, Shell Scripting &amp; Cloud DevOps</h3>
<p class="portal-card-desc">Praxisnahe Automatisierung: Streams &amp; Redirection, awk/sed/jq Text Mining, Job-Control, Multithreading mit xargs/parallel, Systemd Services, Docker &amp; CI/CD Pipelines.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">Pipes &amp; Streams</span>
<span class="portal-card-tag">jq &amp; awk</span>
<span class="portal-card-tag">Systemd</span>
<span class="portal-card-tag">BATS Tests</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<a href="workspace.html?course=bash&chapter=01_navigation_dateien_und_globbing" class="portal-card-btn">🐧 In Web-IDE &rarr;</a>
</div>
</div>
<!-- 5. POWERSHELL -->
<div class="portal-card" data-category="devops" data-title="powershell 7 core windows administration cmdlets objekte pester cloud">
<div>
<div class="portal-card-top">
<div class="portal-card-icon">🔷</div>
<span class="portal-card-badge badge-devops">DevOps &amp; Sysadmin</span>
</div>
<h3 class="portal-card-title">Modern PowerShell 7+ Core &amp; Automation</h3>
<p class="portal-card-desc">Objekt-orientiertes Scripting: .NET Pipeline-Architektur, PSCustomObject, CmdletBinding, Multithreading (-Parallel), REST APIs, Registry, Pester Tests &amp; Cloud Engine.</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</span>
<span class="portal-card-tag">Pester v5</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<a href="workspace.html?course=powershell&chapter=01_powershell_konsole_und_cmdlet_architektur" class="portal-card-btn">🔷 In Web-IDE &rarr;</a>
</div>
</div>
<!-- 6. SQL -->
<div class="portal-card" data-category="data" data-title="sql relationale datenbanken joins ctes window functions normalisierung">
<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; Data Analytics Master</h3>
<p class="portal-card-desc">Vom SELECT bis zum Data Warehouse: Normalisierung (1NF–3NF), INNER/LEFT JOINs, Aggregate, Subqueries, CTEs, Window Functions (OVER/PARTITION BY) &amp; ACID-Transaktionen.</p>
<div class="portal-card-tags">
<span class="portal-card-tag">SQLite WASM</span>
<span class="portal-card-tag">JOINs &amp; CTEs</span>
<span class="portal-card-tag">Window Functions</span>
<span class="portal-card-tag">Normalisierung</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<a href="workspace.html?course=sql&chapter=01_tabellen_und_select" class="portal-card-btn">🗄️ In Web-IDE &rarr;</a>
</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+</span>
<span class="portal-card-tag">Async/Await</span>
<span class="portal-card-tag">DOM Events</span>
<span class="portal-card-tag">TypeScript</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<a href="workspace.html?course=javascript&chapter=01_erste_schritte_variablen" class="portal-card-btn">🌐 In Web-IDE &rarr;</a>
</div>
</div>
<!-- 8. JAVA 21+ -->
<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>
<a href="workspace.html?course=java&chapter=01_java_syntax_und_primitive_typen" class="portal-card-btn">☕ In Web-IDE &rarr;</a>
</div>
</div>
<!-- 9. RUST -->
<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</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>
<a href="workspace.html?course=rust&chapter=01_variablen_mutabilitaet_und_typen" class="portal-card-btn">🦀 In Web-IDE &rarr;</a>
</div>
</div>
<!-- 10. C# & .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</span>
<span class="portal-card-tag">.NET 8</span>
<span class="portal-card-tag">LINQ</span>
<span class="portal-card-tag">xUnit Tests</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<a href="workspace.html?course=csharp&chapter=01_syntax_datentypen_und_top_level_statements" class="portal-card-btn">💜 In Web-IDE &rarr;</a>
</div>
</div>
<!-- 11. C & C++20 -->
<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</span>
<span class="portal-card-tag">Smart Pointer</span>
<span class="portal-card-tag">C++20 STL</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<a href="workspace.html?course=cpp&chapter=01_c_syntax_datentypen_und_io" class="portal-card-btn">⚙️ In Web-IDE &rarr;</a>
</div>
</div>
<!-- 12. 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; Grid</span>
<span class="portal-card-tag">Custom Properties</span>
<span class="portal-card-tag">Dark Mode</span>
</div>
</div>
<div class="portal-card-footer">
<span class="portal-card-meta">⏱️ 16 Module &bull; 4 Lehrpfade</span>
<a href="workspace.html?course=html_css&chapter=01_semantisches_html_und_struktur" class="portal-card-btn">🎨 In Web-IDE &rarr;</a>
</div>
</div>
</div>
<!-- 4. IHK SPEZIAL-HIGHLIGHT BEREICH -->
<section id="ihk-section" style="background: white; border: 1px solid #bfdbfe; border-radius: 16px; padding: 32px; margin: 48px 0; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.05);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px;">
<div>
<span class="portal-card-badge badge-ihk" style="font-size: 0.78rem;">Offizieller Prüfungsstandard</span>
<h2 style="font-size: 1.8rem; font-weight: 900; margin: 8px 0; color: #1e3a8a;">🎓 IHK Abschlussprüfung (AP1 &amp; AP2 FISI)</h2>
<p style="color: #475569; max-width: 720px; margin: 0 0 20px 0; font-size: 0.95rem;">Exakt nach der bundeseinheitlichen Ausbildungsordnung (AO 2020) gegliedert. Jedes Lernfeld besitzt ein eigenes Modul mit prüfungsrelevantem Grundlagenwissen, Cheat-Sheets und originalgetreuen IHK-Operatoren.</p>
</div>
<div style="background: #f0fdf4; border: 1px solid #86efac; border-radius: 12px; padding: 12px 18px; text-align: center;">
<div style="font-size: 1.4rem; font-weight: 900; color: #166534;">100 Punkte</div>
<div style="font-size: 0.78rem; font-weight: 700; color: #15803d;">Offizieller Notenschlüssel 1–6</div>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 12px;">
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px;">
<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.84rem; color: #64748b; margin: 0 0 12px 0;">Gemeinsame Kernqualifikationen aller Fachinformatiker: Verträge, Ergonomie, Subnetting, BSI-Schutzbedarf, SQL, IoT &amp; Instandhaltung.</p>
<a href="courses/ihk_ap1/01_lf1_unternehmen_und_arbeitsplatz/index.html" class="portal-btn-primary" style="font-size: 0.85rem; padding: 8px 16px;">AP1 Lehrplan &rarr;</a>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px;">
<h4 style="margin: 0 0 6px 0; color: #991b1b; font-size: 1.05rem;">📕 AP2: Systemintegration (LF 9–12)</h4>
<p style="font-size: 0.84rem; color: #64748b; margin: 0 0 12px 0;">Fachrichtungsspezifisch: VLANs &amp; Routing, Active Directory, RAID &amp; SAN-Speicher, Virtualisierung, WiSo und 40h-Projektleitfaden.</p>
<a href="courses/ihk_ap2_fisi/01_lf9_netzwerke_und_dienste/index.html" class="portal-btn-primary" style="font-size: 0.85rem; padding: 8px 16px; background: linear-gradient(135deg, #dc2626, #b91c1c);">AP2 FISI Lehrplan &rarr;</a>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px;">
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">⚡ Praxis-Drilltrainer</h4>
<p style="font-size: 0.84rem; color: #64748b; margin: 0 0 12px 0;">Interaktiver Subnetting-Drill Generator, zeilenweiser Trace-Tabellen-Trainer und interaktives relationales SQL-Labor.</p>
<a href="courses/ihk_ap1/11_subnetting_drill_master/index.html" class="portal-btn-secondary" style="font-size: 0.85rem; padding: 8px 16px; background: white; color: #0f172a; border-color: #cbd5e1;">Subnetting-Drill &rarr;</a>
</div>
</div>
</section>
<!-- 5. BENTO FEATURE MATRIX (WARUM IT-PRAXISPORTAL?) -->
<div style="text-align: center; margin: 64px 0 24px 0;">
<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 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 automatische 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.</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 aus.</p>
</div>
<div class="bento-item">
<div style="font-size: 1.8rem; margin-bottom: 8px;">👨‍🏫</div>
<h4>Dozenten &amp; Klassen-Dashboard</h4>
<p>Erstelle Schulklassen mit Invite-Codes. Verfolge den Fortschritt deiner Schüler in der Live-Matrix und inspiziere eingereichten Code.</p>
</div>
</div>
<!-- 6. GAMIFICATION PASS & ZERTIFIKATE BEREICH -->
<section class="card" id="zertifikate" style="margin-top: 48px; border-radius: 16px; padding: 28px;">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 18px;">
<div>
<h3 style="margin: 0; font-size: 1.4rem; color: #0f172a;">🏆 Entwickler-Pass &amp; Zertifikate</h3>
<p style="margin: 4px 0 0 0; color: #64748b; font-size: 0.88rem;">Generiere offizielle, personalisierte Abschlusszertifikate für deine Bewerbung oder Ausbildungsakte:</p>
</div>
<div style="display: flex; gap: 10px; align-items: center;">
<span style="font-weight: 700; color: #0284c7; font-size: 0.9rem;" id="portal-user-level">Level 1 (Code-Küken)</span>
<span style="background: #e0f2fe; color: #0369a1; padding: 4px 10px; border-radius: 99px; font-size: 0.82rem; font-weight: 700;" id="portal-user-xp">0 XP</span>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;">
<button type="button" class="btn" style="background: #2563eb;" onclick="if(window.openCertificate) window.openCertificate('ihk_ap1_master');">📜 Zertifikat: IHK AP1</button>
<button type="button" class="btn" style="background: #dc2626;" onclick="if(window.openCertificate) window.openCertificate('ihk_ap2_fisi');">📜 Zertifikat: IHK AP2 FISI</button>
<button type="button" class="btn" style="background: #16a34a;" onclick="if(window.openCertificate) window.openCertificate('bash_devops');">📜 Zertifikat: Linux DevOps</button>
<button type="button" class="btn" style="background: #0284c7;" onclick="if(window.openCertificate) window.openCertificate('powershell_cloud');">📜 Zertifikat: PowerShell 7</button>
<button type="button" class="btn" style="background: #ea580c;" onclick="if(window.openCertificate) window.openCertificate('sql_analytics');">📜 Zertifikat: SQL Analytics</button>
<button type="button" class="btn" style="background: #7c3aed;" onclick="if(window.openCertificate) window.openCertificate('master');">👑 Grandmaster-Zertifikat</button>
</div>
</section>
</main>
<!-- 7. CLEAN 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; Entwickelt für echte IT-Praxis</div>
</div>
</div>
<div style="display: flex; gap: 20px; font-size: 0.85rem;">
<a href="#katalog" style="color: #94a3b8; text-decoration: none;">Kurse</a>
<a href="#ihk-section" style="color: #94a3b8; text-decoration: none;">IHK Prüfung</a>
<a href="workspace.html?course=python" style="color: #94a3b8; text-decoration: none;">Monaco 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 (Client-Side WASM &amp; Offline-Modus)
</div>
</div>
</footer>
<!-- Scripts -->
<script src="assets/gamification_data.js"></script>
<script src="assets/gamification.js"></script>
<script src="assets/interpreter.js"></script>
<script src="assets/certificate.js"></script>
<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');
cards.forEach(card => {
if (category === 'all' || card.getAttribute('data-category') === category) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
});
}
// Instant Search Input
const searchInput = document.getElementById('course-filter-input');
if (searchInput) {
searchInput.addEventListener('input', (e) => {
const query = e.target.value.toLowerCase().trim();
const cards = document.querySelectorAll('.portal-card');
cards.forEach(card => {
const text = (card.getAttribute('data-title') || '') + ' ' + card.innerText.toLowerCase();
if (query === '' || text.includes(query)) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
});
});
}
// Auth & Gamification State Sync
document.addEventListener('DOMContentLoaded', () => {
if (window.AUTH && window.AUTH.updateUI) {
window.AUTH.updateUI();
}
const user = window.AUTH ? window.AUTH.user : null;
if (user) {
const lvlEl = document.getElementById('portal-user-level');
const xpEl = document.getElementById('portal-user-xp');
if (lvlEl) lvlEl.innerText = `Level ${user.level || 1} (${user.role === 'teacher' ? 'Dozent' : 'Entwickler'})`;
if (xpEl) xpEl.innerText = `${user.xp || 0} XP`;
}
});
</script>
</body>
</html>