596 lines
33 KiB
HTML
596 lines
33 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IT-Praxisportal | Die interaktive Plattform für IT-Berufe & 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 & IT-Ausbildung. 216+ Module, Monaco Web-IDE und IHK AP1 & 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++ & 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 & 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>↓</span>
|
||
</a>
|
||
<a href="#ihk-section" class="portal-btn-secondary">
|
||
<span>📘 IHK Prüfungsvorbereitung (AP1 & 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 & 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 & 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 & 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 & 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 & Sysadmin (2)</button>
|
||
<button type="button" class="portal-tab-pill" onclick="filterCourses('coding', this)">💻 Software & Coding (6)</button>
|
||
<button type="button" class="portal-tab-pill" onclick="filterCourses('data', this)">🗄️ Daten & 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 & 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 & 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 • 100 Pkt.</span>
|
||
<a href="courses/ihk_ap1/01_lf1_unternehmen_und_arbeitsplatz/index.html" class="portal-card-btn">📘 AP1 Starten →</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 & 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 • 3 Simulationen</span>
|
||
<a href="courses/ihk_ap2_fisi/01_lf9_netzwerke_und_dienste/index.html" class="portal-card-btn">📕 AP2 FISI Starten →</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 & 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 & GUI (07–16) und Data Engineering (17–22).</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">OOP & Klassen</span>
|
||
<span class="portal-card-tag">Pyodide WASM</span>
|
||
<span class="portal-card-tag">Tkinter GUI</span>
|
||
<span class="portal-card-tag">Unit Testing</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 35 Module • 4 Lehrpfade</span>
|
||
<a href="workspace.html?course=python&chapter=01_erste_schritte_taschenrechner" class="portal-card-btn">🐍 In Web-IDE →</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 & Sysadmin</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Linux Bash, Shell Scripting & Cloud DevOps</h3>
|
||
<p class="portal-card-desc">Praxisnahe Automatisierung: Streams & Redirection, awk/sed/jq Text Mining, Job-Control, Multithreading mit xargs/parallel, Systemd Services, Docker & CI/CD Pipelines.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Pipes & Streams</span>
|
||
<span class="portal-card-tag">jq & 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 • 4 Lehrpfade</span>
|
||
<a href="workspace.html?course=bash&chapter=01_navigation_dateien_und_globbing" class="portal-card-btn">🐧 In Web-IDE →</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 & Sysadmin</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Modern PowerShell 7+ Core & Automation</h3>
|
||
<p class="portal-card-desc">Objekt-orientiertes Scripting: .NET Pipeline-Architektur, PSCustomObject, CmdletBinding, Multithreading (-Parallel), REST APIs, Registry, Pester Tests & 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 • 4 Lehrpfade</span>
|
||
<a href="workspace.html?course=powershell&chapter=01_powershell_konsole_und_cmdlet_architektur" class="portal-card-btn">🔷 In Web-IDE →</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 & Web</span>
|
||
</div>
|
||
<h3 class="portal-card-title">SQL & 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) & ACID-Transaktionen.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">SQLite WASM</span>
|
||
<span class="portal-card-tag">JOINs & 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 • 4 Lehrpfade</span>
|
||
<a href="workspace.html?course=sql&chapter=01_tabellen_und_select" class="portal-card-btn">🗄️ In Web-IDE →</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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">JavaScript & Modernes TypeScript</h3>
|
||
<p class="portal-card-desc">Moderne Web-Entwicklung: ES6+ Syntax, Klassen & OOP, Async/Await & Promises, DOM-Manipulation, Web Storage, ES-Module und statische Typisierung mit TypeScript Generics.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">ES6+</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 • 4 Lehrpfade</span>
|
||
<a href="workspace.html?course=javascript&chapter=01_erste_schritte_variablen" class="portal-card-btn">🌐 In Web-IDE →</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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Java 21+ Enterprise & IHK Standard</h3>
|
||
<p class="portal-card-desc">Enterprise-Architektur: Strikte Typisierung, Records, Vererbung & Interfaces, Generics, Collections Framework, Streams API, Virtual Threads & automatisierte JUnit 5 Tests.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Java 21</span>
|
||
<span class="portal-card-tag">Records & OOP</span>
|
||
<span class="portal-card-tag">Streams API</span>
|
||
<span class="portal-card-tag">Virtual Threads</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<a href="workspace.html?course=java&chapter=01_java_syntax_und_primitive_typen" class="portal-card-btn">☕ In Web-IDE →</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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Rust Modern Systems & Safety</h3>
|
||
<p class="portal-card-desc">Zero-Cost Abstractions: Ownership & Borrowing, Lifetimes, Enums mit Option/Result, Traits, Smart Pointer (Box, Arc, Mutex), Fearless Concurrency & LRU-Cache Masterprojekt.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Ownership</span>
|
||
<span class="portal-card-tag">Lifetimes</span>
|
||
<span class="portal-card-tag">Arc<Mutex></span>
|
||
<span class="portal-card-tag">Cargo Tests</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<a href="workspace.html?course=rust&chapter=01_variablen_mutabilitaet_und_typen" class="portal-card-btn">🦀 In Web-IDE →</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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">C# 12 & Modernes .NET 8 Enterprise</h3>
|
||
<p class="portal-card-desc">Moderne Unternehmenssoftware: Top-Level Statements, Pattern Matching, Records, LINQ funktionale Datenabfragen, Asynchrones Task/await, xUnit Tests & Enterprise Order Engine.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">C# 12</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 • 4 Lehrpfade</span>
|
||
<a href="workspace.html?course=csharp&chapter=01_syntax_datentypen_und_top_level_statements" class="portal-card-btn">💜 In Web-IDE →</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 & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">C & Modernes C++20 Systems Engineering</h3>
|
||
<p class="portal-card-desc">Das Fundament der Systemprogrammierung: Pointer & dynamischer Speicher, RAII, Klassen & Rule of Five, Templates, Smart Pointer (unique_ptr, shared_ptr), STL & GoogleTest.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Pointer & Heap</span>
|
||
<span class="portal-card-tag">RAII</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 • 4 Lehrpfade</span>
|
||
<a href="workspace.html?course=cpp&chapter=01_c_syntax_datentypen_und_io" class="portal-card-btn">⚙️ In Web-IDE →</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 & Web</span>
|
||
</div>
|
||
<h3 class="portal-card-title">HTML5, Modern CSS3 & Responsive UI</h3>
|
||
<p class="portal-card-desc">Modernes UI-Handwerk: Semantische Tags, Barrierefreiheit (ARIA/A11y), CSS Custom Properties, 1D-Layouts mit Flexbox, 2D-Layouts mit CSS Grid, Media Queries & Dark Mode.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Semantik & A11y</span>
|
||
<span class="portal-card-tag">Flexbox & 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 • 4 Lehrpfade</span>
|
||
<a href="workspace.html?course=html_css&chapter=01_semantisches_html_und_struktur" class="portal-card-btn">🎨 In Web-IDE →</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 & 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 & 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 →</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 & Routing, Active Directory, RAID & 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 →</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 →</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 & 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 & 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 & 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 • 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 & 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>
|