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