it-praxisportal/index.html

877 lines
45 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IT-Praxisportal | Die interaktive Lern- &amp; Prüfungsvorbereitungs-Plattform für IT-Berufe</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<meta name="description" content="IT-Praxisportal: Die interaktive Lernplattform für Fachinformatiker &amp; IT-Entwickler. 216+ Module in 13 Schlüssel-Technologien, Monaco Web-IDE und IHK AP1 &amp; AP2 Prüfungsvorbereitung im Browser.">
<meta property="og:title" content="IT-Praxisportal | Praxisnahe IT-Kompetenz im Browser">
<meta property="og:description" content="Interaktives IT-Praxisportal mit Monaco Web-IDE, 216+ Modulen und 90-Minuten IHK-Prüfungssimulation. Kostenlos registrieren und Kurse im Dashboard wählen.">
<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;
}
/* Logged In Welcome Banner */
.logged-in-banner {
background: linear-gradient(90deg, #0284c7, #10b981);
color: white;
padding: 12px 20px;
font-size: 0.9rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
/* Value Pillars Grid */
.value-pillars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin: 32px 0 48px 0;
}
.pillar-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pillar-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: #38bdf8;
}
.pillar-icon-box {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 16px;
}
.pillar-title {
font-size: 1.25rem;
font-weight: 800;
color: #0f172a;
margin: 0 0 8px 0;
}
.pillar-desc {
font-size: 0.92rem;
color: #475569;
line-height: 1.6;
margin: 0 0 16px 0;
}
.pillar-features {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 0.86rem;
color: #334155;
}
.pillar-features li {
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.45;
}
.pillar-features li::before {
content: "✓";
color: #10b981;
font-weight: 800;
font-size: 0.95rem;
}
/* Dashboard Preview Banner */
.dashboard-hero-card {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
padding: 36px 32px;
color: #f8fafc;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
margin: 40px 0 56px 0;
}
.dashboard-mockup-bar {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 16px 20px;
margin-top: 24px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.mockup-item {
display: flex;
align-items: center;
gap: 12px;
}
.mockup-icon {
font-size: 1.6rem;
}
.mockup-label {
font-size: 0.76rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
}
.mockup-value {
font-size: 1rem;
font-weight: 800;
color: #f8fafc;
}
/* Competency Domains */
.domain-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 20px 0;
}
.domain-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 18px;
transition: all 0.15s ease;
}
.domain-card:hover {
background: #ffffff;
border-color: #0284c7;
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.domain-title {
font-weight: 800;
font-size: 0.95rem;
color: #0f172a;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.domain-desc {
font-size: 0.82rem;
color: #64748b;
line-height: 1.45;
margin: 0;
}
/* Steps 1-2-3 */
.steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin: 32px 0 48px 0;
}
.step-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 24px;
position: relative;
}
.step-number {
position: absolute;
top: 16px;
right: 18px;
font-size: 2rem;
font-weight: 900;
color: #e2e8f0;
line-height: 1;
}
</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: 10px;">
<span style="font-size: 1.2rem;">👋</span>
<span>Du bist eingeloggt als <strong id="landing-user-name">Teilnehmer</strong>. Deine Kurse und dein Lernfortschritt stehen im Dashboard bereit!</span>
</div>
<a href="dashboard.html" class="btn" style="background: white; color: #0284c7; font-weight: 800; padding: 7px 16px; font-size: 0.85rem; border-radius: 6px; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,0.15);">
▶ Zum Kurs-Dashboard &rarr;
</a>
</div>
<!-- 1. STICKY MARKETING HEADER -->
<header class="portal-header-bar">
<div class="portal-nav-container">
<a href="index.html" class="portal-brand">
<div class="portal-brand-logo">
<img src="assets/favicon.svg" alt="IT-Praxisportal Logo" style="width: 24px; height: 24px;">
</div>
<div>
<span class="portal-brand-title">IT-Praxisportal</span>
<span class="portal-brand-badge">Alpha</span>
</div>
</a>
<nav class="portal-nav-links">
<a href="#hero" class="portal-nav-link">🚀 Start</a>
<a href="#was-du-bekommst" class="portal-nav-link">💎 Das Konzept</a>
<a href="#dashboard-spotlight" class="portal-nav-link">📊 Features</a>
<a href="#features-ide" class="portal-nav-link">💻 Web-IDE</a>
<a href="#ihk-section" class="portal-nav-link">🎓 IHK Prüfung</a>
<a href="#zielgruppen" class="portal-nav-link">👥 Für wen?</a>
<a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link" style="display: none; color: #34d399; font-weight: 800; background: rgba(52, 211, 153, 0.12); padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(52, 211, 153, 0.3);">💻 Zum Kurs-Dashboard &rarr;</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: 8px;">
<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 12px; 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 12px; font-size: 0.82rem; background: #0284c7; color: white;" onclick="window.openAuthModal('register', { allowClose: true })"><span class="btn-text-desktop">✨ Kostenlos registrieren</span><span class="btn-text-mobile">Starten</span></button>
<button type="button" id="portal-mobile-menu-btn" class="mobile-menu-toggle" aria-label="Menü umschalten" onclick="toggleMobileMenu()">
<span>☰</span>
</button>
</div>
</div>
</header>
<!-- Mobile Navigation Drawer -->
<div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
<a href="#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">🚀 Start &amp; Übersicht</a>
<a href="#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">💎 Was du bekommst</a>
<a href="#dashboard-spotlight" class="mobile-drawer-link" onclick="toggleMobileMenu()">📊 Features &amp; Vorschau</a>
<a href="#features-ide" class="mobile-drawer-link" onclick="toggleMobileMenu()">💻 Monaco Web-IDE</a>
<a href="#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">🎓 IHK Prüfungstrainer</a>
<a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">⚖️ Impressum</a>
<a href="datenschutz.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">🔒 Datenschutzerklärung</a>
<a href="dashboard.html" class="mobile-drawer-link" id="mobile-drawer-dash-link" style="display: none; color: #34d399; font-weight: 800; background: rgba(52, 211, 153, 0.1); padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(52, 211, 153, 0.3);">💻 Zum Kurs-Dashboard &rarr;</a>
<a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">👨‍🏫 Dozenten-Portal</a>
<a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 800;">🛡️ Admin-Panel</a>
</div>
<!-- 2. HIGH-CONVERTING HERO SECTION -->
<section class="portal-hero" id="hero">
<div class="portal-container">
<div class="portal-hero-pill">
<span>⚡ Interaktive Lern- &amp; Prüfungsvorbereitungs-Plattform für IT-Berufe</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 Plattform für <strong>Fachinformatiker, Software-Entwickler &amp; IT-Auszubildende</strong>. Entwickle direkt im Webbrowser mit professioneller Monaco Web-IDE, automatisierten Code-Tests und realistischer IHK-Abschlussprüfungssimulation (AP1 &amp; AP2). Nach deiner Registrierung wählst du deine Kurse flexibel im persönlichen Dashboard.</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 &amp; Kurse freischalten</span>
</button>
<a href="#was-du-bekommst" class="portal-btn-secondary">
<span>📖 Was ist im Account enthalten? &darr;</span>
</a>
<a href="#ihk-section" class="portal-btn-secondary" style="border-color: #38bdf8; color: #38bdf8;">
<span>🎓 IHK AP1 &amp; AP2 Prüfungstrainer</span>
</a>
</div>
<!-- 4 Quick Stats -->
<div class="portal-stats-bar">
<div class="portal-stat-card">
<div class="portal-stat-num">13</div>
<div class="portal-stat-label">Schlüssel-Disziplinen</div>
<div class="portal-stat-desc">DevOps, Cloud, Systems, OOP &amp; Web</div>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num">216+</div>
<div class="portal-stat-label">Praxisnahe Module</div>
<div class="portal-stat-desc">Geführte Teilziele &amp; Live-Code-Tests</div>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num">90 Min.</div>
<div class="portal-stat-label">IHK-Prüfungssimulation</div>
<div class="portal-stat-desc">AP1 &amp; AP2 mit automatischem Notenschlüssel</div>
</div>
<div class="portal-stat-card">
<div class="portal-stat-num">0 min</div>
<div class="portal-stat-label">Setup-Aufwand</div>
<div class="portal-stat-desc">VS Code Monaco Editor direkt im Browser</div>
</div>
</div>
</div>
</section>
<!-- 3. WAS DU BEKOMMST (KOMPLETTÜBERSICHT STATT EINZELKURSE) -->
<main class="portal-container" id="was-du-bekommst" style="padding-top: 48px; padding-bottom: 64px;">
<div style="text-align: center; max-width: 820px; margin: 0 auto 40px auto;">
<span style="background: rgba(2, 132, 199, 0.1); color: #0284c7; border: 1px solid rgba(2, 132, 199, 0.25); padding: 4px 12px; border-radius: 99px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;">Das Komplettpaket</span>
<h2 style="font-size: 2.1rem; font-weight: 900; margin: 12px 0 10px 0; color: #0f172a;">Was du mit deinem kostenlosen Account bekommst</h2>
<p style="color: #64748b; margin: 0; font-size: 1.02rem; line-height: 1.6;">
Alles, was du für deine Ausbildung, IHK-Abschlussprüfung und berufliche Praxis benötigst. Gebündelt in einer modernen, interaktiven Lernumgebung ohne Abo-Fallen und ohne lokale Installationen.
</p>
</div>
<!-- SPOTLIGHT: DAS PERSÖNLICHE KURS-DASHBOARD -->
<section class="dashboard-hero-card" id="dashboard-spotlight">
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px;">
<div style="max-width: 720px;">
<span style="background: rgba(52, 211, 153, 0.2); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.4); padding: 4px 10px; border-radius: 99px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;">Zentraler Lernbereich</span>
<h3 style="font-size: 1.7rem; font-weight: 900; margin: 10px 0; color: #ffffff;">📊 Dein persönliches Kurs-Dashboard</h3>
<p style="color: #94a3b8; font-size: 0.96rem; line-height: 1.6; margin-bottom: 16px;">
Sobald du dich registrierst, erhältst du vollen Zugriff auf dein persönliches Dashboard. Hier wählst du deine gewünschten Kurse aus, verfolgst deinen Lernfortschritt, sammelst Erfahrungspunkte (XP) und startest mit einem Klick genau dort in der Web-IDE, wo du zuletzt aufgehört hast.
</p>
</div>
<div>
<button type="button" class="landing-cta-btn 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.35);">
<span>✨ Kostenlos registrieren &amp; Dashboard öffnen &rarr;</span>
</button>
</div>
</div>
<!-- Mockup Metrics Preview -->
<div class="dashboard-mockup-bar">
<div class="mockup-item">
<div class="mockup-icon">📚</div>
<div>
<div class="mockup-label">Freie Kursauswahl</div>
<div class="mockup-value">13 Fachdisziplinen</div>
</div>
</div>
<div class="mockup-item">
<div class="mockup-icon">⚡</div>
<div>
<div class="mockup-label">Lernfortschritt</div>
<div class="mockup-value">Cloud-Synchronisiert</div>
</div>
</div>
<div class="mockup-item">
<div class="mockup-icon">🔥</div>
<div>
<div class="mockup-label">Motivation</div>
<div class="mockup-value">Level, XP &amp; Tages-Streak</div>
</div>
</div>
<div class="mockup-item">
<div class="mockup-icon">🏆</div>
<div>
<div class="mockup-label">Abschluss-Nachweis</div>
<div class="mockup-value">Verifizierbare Zertifikate</div>
</div>
</div>
</div>
<div style="margin-top: 18px; font-size: 0.82rem; color: #94a3b8; display: flex; align-items: center; gap: 8px;">
<span>🔒</span>
<span>Hinweis: Alle Kurse, Kapitel und Web-IDEs sind im geschützten Dashboard für angemeldete Nutzer freigeschaltet.</span>
</div>
</section>
<!-- DIE 6 KERN-SÄULEN (WAS MAN BEKOMMT) -->
<div class="value-pillars-grid">
<!-- 1. MONACO WEB-IDE -->
<div class="pillar-card">
<div>
<div class="pillar-icon-box" style="background: #0f172a; color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3);">
💻
</div>
<h3 class="pillar-title">Monaco Web-IDE (VS Code)</h3>
<p class="pillar-desc">Professionelle Entwicklungsumgebung direkt im Webbrowser – ohne Treiber, Compiler-Installationen oder Lizenzkosten.</p>
<ul class="pillar-features">
<li>Original Editor von Microsoft VS Code im Browser</li>
<li>Multi-Language Runner (Python, Bash, SQL, Java, Rust, Go, C#, C++, JS, PowerShell)</li>
<li>Autovervollständigung, Syntax-Highlighting &amp; Shortcuts</li>
<li>Integrierte automatische Testläufe mit Sofort-Feedback</li>
</ul>
</div>
<div style="margin-top: 12px;">
<span style="font-size: 0.8rem; font-weight: 700; color: #0284c7;">⚡ 0 Minuten Einrichtungszeit</span>
</div>
</div>
<!-- 2. IHK PRÜFUNGSTRAINER -->
<div class="pillar-card" style="border-color: #bfdbfe;">
<div>
<div class="pillar-icon-box" style="background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;">
🎓
</div>
<h3 class="pillar-title">Offizieller IHK Prüfungstrainer</h3>
<p class="pillar-desc">Strikte Vorbereitung auf die bundeseinheitlichen IHK-Abschlussprüfungen Teil 1 und Teil 2 nach aktueller Ausbildungsordnung (AO 2020).</p>
<ul class="pillar-features">
<li>90-Minuten Echtzeit-Simulation mit Live-Countdown</li>
<li>100-Punkte-Schema &amp; automatischer IHK-Notenrechner</li>
<li>Subnetting-Drill Rechner für IPv4 &amp; IPv6 Netze</li>
<li>Trace-Tabellen-Simulation &amp; WiSo-Kompaktfragen</li>
</ul>
</div>
<div style="margin-top: 12px;">
<span style="font-size: 0.8rem; font-weight: 700; color: #1d4ed8;">📋 Nach offizieller AO 2020</span>
</div>
</div>
<!-- 3. SUBGOAL DIDAKTIK -->
<div class="pillar-card">
<div>
<div class="pillar-icon-box" style="background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0;">
🎯
</div>
<h3 class="pillar-title">Subgoal-Lernmethode</h3>
<p class="pillar-desc">Wissenschaftlich fundierte Didaktik, die Frustration verhindert und durch strukturierte Teilziele schnellen Lernerfolg garantiert.</p>
<ul class="pillar-features">
<li>Aufteilung komplexer Aufgaben in handhabbare Subgoals</li>
<li>Startercode mit klar nummerierten Todos</li>
<li>Automatische Testsuites prüfen jedes Teilziel einzeln</li>
<li>Vollständige, kommentierte Musterlösungen bei Bedarf</li>
</ul>
</div>
<div style="margin-top: 12px;">
<span style="font-size: 0.8rem; font-weight: 700; color: #15803d;">🧠 Aktives Coding statt passiver Videos</span>
</div>
</div>
<!-- 4. GAMIFICATION & ZERTIFIKATE -->
<div class="pillar-card">
<div>
<div class="pillar-icon-box" style="background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa;">
🏆
</div>
<h3 class="pillar-title">Gamification &amp; Zertifikate</h3>
<p class="pillar-desc">Bleibe motiviert mit sichtbaren Erfolgen und weise deine erworbenen Fachkenntnisse bei Bewerbungen nach.</p>
<ul class="pillar-features">
<li>Erfahrungspunkte (XP) und Levelaufstiege bei jedem gelösten Modul</li>
<li>Tages-Streak für kontinuierliche Lerngewohnheiten</li>
<li>Verifizierbare PDF-Abschlusszertifikate mit Prüfcode</li>
<li>Direkt einsetzbar für Lebenslauf, Portfolio und Ausbildungsbetrieb</li>
</ul>
</div>
<div style="margin-top: 12px;">
<span style="font-size: 0.8rem; font-weight: 700; color: #c2410c;">📜 Mit individuellem Validierungs-Hash</span>
</div>
</div>
<!-- 5. DAS 5-SÄULEN THEMENFELD -->
<div class="pillar-card">
<div>
<div class="pillar-icon-box" style="background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff;">
🌐
</div>
<h3 class="pillar-title">Das 5-Säulen Themenspektrum</h3>
<p class="pillar-desc">Breite Abdeckung moderner IT-Berufe von Systemadministration bis hin zu Enterprise-Backend-Systemen.</p>
<ul class="pillar-features">
<li>Systemintegration, Linux &amp; DevOps-Automatisierung</li>
<li>Moderne Softwareentwicklung &amp; Clean OOP</li>
<li>High-Performance Systems Programming &amp; Memory Safety</li>
<li>Relationale Datenbank-Architektur &amp; SQL-Analytics</li>
</ul>
</div>
<div style="margin-top: 12px;">
<span style="font-size: 0.8rem; font-weight: 700; color: #7e22ce;">📚 216+ Module im Dashboard freigeschaltet</span>
</div>
</div>
<!-- 6. DOZENTEN & AUSBILDER PORTAL -->
<div class="pillar-card">
<div>
<div class="pillar-icon-box" style="background: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1;">
👨‍🏫
</div>
<h3 class="pillar-title">Dozenten- &amp; Ausbilder-Suite</h3>
<p class="pillar-desc">Perfekt für Berufsschulen, Ausbildungsleiter und Bildungsträger, die strukturierte IT-Klassen führen möchten.</p>
<ul class="pillar-features">
<li>Virtuelle Klassenräume mit individuellen Einladungs-Codes</li>
<li>Echtzeit-Lernmatrix aller Schüler und Auszubildenden</li>
<li>Code-Einsicht zur gezielten Unterstützung bei Problemen</li>
<li>Entlastung im Unterricht durch automatisierte Tests</li>
</ul>
</div>
<div style="margin-top: 12px;">
<span style="font-size: 0.8rem; font-weight: 700; color: #0f172a;">🏫 Für Schulen &amp; Ausbildungsbetriebe</span>
</div>
</div>
</div>
<!-- THEMENBEREICHE IM DETAIL (KEINE KURSKARTEN MIT LINKS, SONDERN KOMPETENZFELDER) -->
<section class="card" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 32px; margin-bottom: 48px;">
<div style="text-align: center; margin-bottom: 24px;">
<span style="font-size: 0.8rem; font-weight: 800; color: #0284c7; text-transform: uppercase; letter-spacing: 0.5px;">Kompetenzbereiche</span>
<h3 style="font-size: 1.5rem; font-weight: 900; color: #0f172a; margin: 6px 0;">Die 5 Kern-Fachdisziplinen der Plattform</h3>
<p style="font-size: 0.92rem; color: #64748b; margin: 0; max-width: 700px; margin: 0 auto;">
Die konkreten Kurse und Module wählst du nach der kostenlosen Anmeldung in deinem persönlichen Dashboard. Hier ein Auszug der Themenbereiche, die du meistern wirst:
</p>
</div>
<div class="domain-grid">
<div class="domain-card">
<div class="domain-title">🐧 Linux &amp; DevOps</div>
<p class="domain-desc">Shell-Scripting, Dateirechte, I/O-Pipes, Prozess-Monitoring, Docker-Containerisierung &amp; PowerShell-Automatisierung.</p>
</div>
<div class="domain-card">
<div class="domain-title">💻 Software Engineering</div>
<p class="domain-desc">Objektorientierung (OOP), Datenstrukturen, Design Patterns, Unit Testing &amp; Enterprise-Architektur (Python, Java, C#).</p>
</div>
<div class="domain-card">
<div class="domain-title">🦀 Systems Programming</div>
<p class="domain-desc">Hardwarenahe Programmierung, Speichersicherheit mit Rust Ownership, Pointer-Arithmetik (C/C++) &amp; Go-Microservices.</p>
</div>
<div class="domain-card">
<div class="domain-title">🐬 Datenbanken &amp; SQL</div>
<p class="domain-desc">Relationale Datenmodelle, 1NF–3NF Normalisierung, Multi-Table JOINs, CTEs, Window Functions &amp; ACID-Transaktionen.</p>
</div>
<div class="domain-card">
<div class="domain-title">🎨 Modernes Web-Design</div>
<p class="domain-desc">Semantisches HTML5, barrierefreie Interfaces (ARIA), responsive Layouts mit Flexbox &amp; CSS Grid, Themes und Dark Mode.</p>
</div>
</div>
<div style="background: #f8fafc; border-left: 4px solid #0284c7; padding: 14px 18px; border-radius: 6px; margin-top: 20px; font-size: 0.88rem; color: #475569; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;">
<div>
<strong>🎯 Bereit zur Kurswahl?</strong> Nach dem Login stehen alle 13 Spezialkurse im Dashboard zur freien Verfügung.
</div>
<button type="button" class="landing-cta-btn btn" style="background: #0284c7; color: white; padding: 8px 16px; font-size: 0.84rem; font-weight: 700; border-radius: 6px; border: none; cursor: pointer;">
<span>✨ Account erstellen &amp; Kurse wählen &rarr;</span>
</button>
</div>
</section>
<!-- 4. IHK PRÜFUNGSVORBEREITUNG SHOWCASE -->
<section class="card" id="ihk-section" style="border: 1px solid #bfdbfe; background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%); border-radius: 16px; padding: 32px; margin-bottom: 48px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 24px;">
<div>
<span class="portal-card-badge badge-ihk" style="font-size: 0.8rem; font-weight: 800;">Offizieller Prüfungsstandard</span>
<h3 style="margin: 8px 0 6px 0; font-size: 1.6rem; color: #1e3a8a; font-weight: 900;">🎓 IHK Prüfungstrainer AP1 &amp; AP2</h3>
<p style="margin: 0; color: #475569; font-size: 0.95rem; max-width: 780px;">Realistische Prüfungssimulation nach der bundeseinheitlichen Ausbildungsordnung (AO 2020) für Fachinformatiker aller Fachrichtungen (FIAE, FISI, FIDP, FITD).</p>
</div>
<button type="button" class="landing-cta-btn btn" style="background: #1d4ed8; color: white; padding: 10px 20px; font-weight: 800; border-radius: 8px; border: none; cursor: pointer;">
<span>🚀 Prüfungssimulation im Dashboard starten</span>
</button>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 16px;">
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #1e3a8a; font-size: 1.05rem;">📘 AP1: IT-Arbeitsplatz &amp; Basissysteme</h4>
<p style="font-size: 0.86rem; color: #64748b; margin: 0 0 12px 0;">Gemeinsame Kernqualifikationen der Lernfelder 1–8: Verträge, Ergonomie, IPv4/IPv6 Subnetting, BSI-Schutzbedarf, relationales SQL &amp; Trace-Tabellen.</p>
<div style="font-size: 0.78rem; font-weight: 700; color: #0284c7;">✓ 90-Minuten Probeprüfung mit automatischem Notenschlüssel</div>
</div>
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; box-shadow: var(--shadow-sm);">
<h4 style="margin: 0 0 6px 0; color: #991b1b; font-size: 1.05rem;">📕 AP2: Fachqualifikationen &amp; WiSo</h4>
<p style="font-size: 0.86rem; color: #64748b; margin: 0 0 12px 0;">Spezifische Lernfelder 9–12: VLANs &amp; Routing, Active Directory GPO, RAID &amp; SAN-Speicher, Containerisierung, WiSo-Kompaktfragen &amp; 40h-Projektarbeits-Leitfaden.</p>
<div style="font-size: 0.78rem; font-weight: 700; color: #991b1b;">✓ Inklusive Leitfaden für Fachgespräch &amp; Präsentation</div>
</div>
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; 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 12px 0;">Blitzschnelles Rechnen: Dynamischer Subnetting-Generator mit Live-Punktevergabe, schrittweise Trace-Tabellen-Simulation und relationale Abfrage-Validierung.</p>
<div style="font-size: 0.78rem; font-weight: 700; color: #10b981;">✓ Unbegrenzt wiederholbare Zufallsaufgaben</div>
</div>
</div>
</section>
<!-- 5. MONACO WEB-IDE SHOWCASE -->
<section class="card" id="features-ide" style="border-radius: 16px; padding: 32px; background: #090d16; color: #f8fafc; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 48px;">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
<div style="max-width: 660px;">
<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.65rem; font-weight: 900; margin: 10px 0; color: #f8fafc;">💻 Monaco Web-IDE: Coden wie ein Profi</h3>
<p style="color: #94a3b8; font-size: 0.94rem; line-height: 1.6; margin-bottom: 16px;">
Vergiss komplizierte Compiler-Installationen, Treiber-Inkompatibilitäten oder Administrationsrechte auf Schulrechnern. Das IT-Praxisportal bringt die vertraute VS Code Entwicklererfahrung direkt in jeden modernen Webbrowser.
</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>
<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;">☁️ Automatisches Cloud-Speichern</span>
</div>
</div>
<div>
<button type="button" class="landing-cta-btn 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);">
<span>✨ Web-IDE im Dashboard starten &rarr;</span>
</button>
</div>
</div>
</section>
<!-- 6. IN 3 SCHRITTEN STARTEN -->
<div style="text-align: center; margin: 48px 0 24px 0;" id="schritte">
<span style="font-size: 0.8rem; font-weight: 800; color: #0284c7; text-transform: uppercase; letter-spacing: 0.5px;">Einfacher Einstieg</span>
<h3 style="font-size: 1.6rem; font-weight: 900; color: #0f172a; margin: 6px 0;">In 3 Schritten zum Praxis-Erfolg</h3>
<p style="color: #64748b; margin: 0; font-size: 0.95rem;">Ohne Vorwissen oder komplizierte Installationen sofort produktiv werden.</p>
</div>
<div class="steps-container">
<div class="step-card">
<div class="step-number">01</div>
<div style="font-size: 1.8rem; margin-bottom: 8px;">✨</div>
<h4 style="margin: 0 0 8px 0; font-size: 1.1rem; color: #0f172a;">Kostenlos registrieren</h4>
<p style="font-size: 0.88rem; color: #64748b; margin: 0; line-height: 1.5;">
Erstelle deinen persönlichen Account in unter 30 Sekunden. Kein Abonnement, keine Zahlungsdaten erforderlich, 100% DSGVO-konform.
</p>
</div>
<div class="step-card">
<div class="step-number">02</div>
<div style="font-size: 1.8rem; margin-bottom: 8px;">📚</div>
<h4 style="margin: 0 0 8px 0; font-size: 1.1rem; color: #0f172a;">Kurse im Dashboard wählen</h4>
<p style="font-size: 0.88rem; color: #64748b; margin: 0; line-height: 1.5;">
Wähle in deinem persönlichen Dashboard flexibel deine Fachdisziplin – ob Linux, Python, SQL, Java oder die gezielte IHK-Prüfungsvorbereitung.
</p>
</div>
<div class="step-card">
<div class="step-number">03</div>
<div style="font-size: 1.8rem; margin-bottom: 8px;">💻</div>
<h4 style="margin: 0 0 8px 0; font-size: 1.1rem; color: #0f172a;">Direkt im Browser coden</h4>
<p style="font-size: 0.88rem; color: #64748b; margin: 0; line-height: 1.5;">
Öffne die Monaco Web-IDE, löse die strukturierten Teilziele und überprüfe deinen Code mit einem Klick auf automatisierte Testrunner.
</p>
</div>
</div>
<!-- 7. BENTO FEATURE MATRIX -->
<div style="text-align: center; margin: 48px 0 24px 0;" id="vorteile">
<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;">Didaktisch durchdacht, technisch modern und konsequent praxisorientiert.</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>Der de-facto Standard der Softwareindustrie direkt im Browser: Autovervollständigung, Syntaxprüfung und TDD-Unittests ohne lokale Runtimes.</p>
</div>
<div class="bento-item">
<div style="font-size: 1.8rem; margin-bottom: 8px;">⏱️</div>
<h4>Realtime Prüfungssimulation</h4>
<p>Prüfungsstress abbauen: 90 Minuten Timer, 100 Punkte und automatischer Notenschlüssel bereiten dich optimal auf den Ernstfall vor.</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 gelöste Aufgaben, halte deinen täglichen Lern-Streak und erstelle verifizierbare PDF-Zertifikate mit individuellem Prüfcode.</p>
</div>
<div class="bento-item">
<div style="font-size: 1.8rem; margin-bottom: 8px;">🛡️</div>
<h4>100% DSGVO &amp; Cloud-Sync</h4>
<p>Gehostet in Deutschland, frei von Werbetrackern und mit verschlüsselten Passwörtern. Dein Lernstand wird sicher synchronisiert.</p>
</div>
</div>
<!-- 8. ZIELGRUPPEN -->
<section class="card" id="zielgruppen" 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 IHK-Dozenten und erfahrenen Software-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 perfekte Begleiter vom 1. Ausbildungsjahr bis zur Abschlussprüfung. Schließe schulische Wissenslücken mit echtem Code und realen Prüfungsfragen.</p>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px;">
<div style="font-size: 1.6rem; margin-bottom: 8px;">🎓</div>
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">Umschüler &amp; Quereinsteiger</h4>
<p style="font-size: 0.86rem; color: #64748b; margin: 0;">Schrittweise Didaktik ohne Vorwissen-Frust. Geführte Teilziele und nachvollziehbare Musterlösungen bringen dich sicher durch technische Bewerbungsverfahren.</p>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px;">
<div style="font-size: 1.6rem; margin-bottom: 8px;">👨‍🏫</div>
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">Berufsschulen &amp; Ausbilder</h4>
<p style="font-size: 0.86rem; color: #64748b; margin: 0;">Organisiere ganze Klassen über Invite-Codes. Behalte die Lernstände im Blick und unterstütze Auszubildende gezielt anhand abgegebenen Codes.</p>
</div>
</div>
</section>
<!-- 9. 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 in weniger als 30 Sekunden deinen kostenlosen Account und wähle deine Kurse direkt im Dashboard aus.
</p>
<div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;">
<button type="button" class="landing-cta-btn 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);">
<span>✨ Jetzt kostenlos registrieren &amp; Kurse wählen &rarr;</span>
</button>
<button type="button" class="btn" id="footer-cta-login" style="background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.3); padding: 12px 20px; font-size: 1rem; font-weight: 700; border-radius: 8px; cursor: pointer;" onclick="window.openAuthModal('login', { allowClose: true })">
🔑 Anmelden
</button>
</div>
</section>
</main>
<!-- 10. MODERN MULTI-COLUMN FOOTER -->
<footer id="site-footer" class="portal-footer">
<div class="portal-footer-grid">
<!-- Brand Column -->
<div class="portal-footer-brand">
<a href="index.html" class="portal-footer-logo-row">
<div class="portal-brand-logo" style="width: 36px; height: 36px;">
<img src="assets/favicon.svg" alt="IT-Praxisportal Logo" style="width: 22px; height: 22px;">
</div>
<span class="portal-footer-logo-text">IT-Praxisportal</span>
</a>
<p class="portal-footer-desc">
Die interaktive Plattform für Fachinformatiker, Software-Entwickler &amp; IT-Auszubildende. Echte Praxis mit browserbasierter Monaco Web-IDE, CI/CD-Pipelines &amp; realistischer IHK-Abschlussprüfungssimulation.
</p>
<div class="portal-footer-badge">
<span>🟢 Alle Systeme online &bull; Serverstandort Deutschland</span>
</div>
</div>
<!-- Lehrpfade -->
<div class="portal-footer-col">
<h4>📚 Lehrpfade</h4>
<ul class="portal-footer-links">
<li><a href="dashboard.html" class="portal-footer-link">🐍 Python &amp; OOP</a></li>
<li><a href="dashboard.html" class="portal-footer-link">⚡ JavaScript &amp; Web</a></li>
<li><a href="dashboard.html" class="portal-footer-link">🐧 Linux Bash &amp; DevOps</a></li>
<li><a href="dashboard.html" class="portal-footer-link">🔷 PowerShell Core</a></li>
<li><a href="dashboard.html" class="portal-footer-link">🗄️ SQL &amp; Datenbanken</a></li>
<li><a href="dashboard.html" class="portal-footer-link">🌐 Modernes HTML5 &amp; CSS3</a></li>
<li><a href="dashboard.html" class="portal-footer-link">🦀 Rust, Go, C# &amp; C++</a></li>
</ul>
</div>
<!-- Features & Tools -->
<div class="portal-footer-col">
<h4>💻 Plattform</h4>
<ul class="portal-footer-links">
<li><a href="dashboard.html" class="portal-footer-link">📊 Kurs-Dashboard</a></li>
<li><a href="workspace.html?course=python" class="portal-footer-link">💻 Monaco Web-IDE</a></li>
<li><a href="#ihk-section" class="portal-footer-link">🎓 IHK Prüfungstrainer</a></li>
<li><a href="dashboard.html#zertifikate-section" class="portal-footer-link">🏆 Zertifikate &amp; Badges</a></li>
<li class="teacher-only" style="display: none;"><a href="teacher.html" class="portal-footer-link" id="footer-teacher-link">👨‍🏫 Dozenten-Portal</a></li>
<li class="admin-only" style="display: none;"><a href="admin.html" class="portal-footer-link" id="footer-admin-link">🛡️ Administration</a></li>
</ul>
</div>
<!-- Rechtliches & Kontakt -->
<div class="portal-footer-col">
<h4>⚖️ Rechtliches &amp; Kontakt</h4>
<ul class="portal-footer-links">
<li><a href="impressum.html" class="portal-footer-link">⚖️ Impressum (§ 5 DDG)</a></li>
<li><a href="datenschutz.html" class="portal-footer-link">🔒 Datenschutzerklärung (DSGVO)</a></li>
<li><a href="mailto:kontakt@it-praxisportal.de" class="portal-footer-link">✉️ Support &amp; Kontakt</a></li>
<li><span class="portal-footer-link" style="color: #10b981; cursor: default;">🛡️ Zero Tracking Cookies</span></li>
<li><span class="portal-footer-link" style="color: #64748b; cursor: default;">🇩🇪 Deutsches Hosting</span></li>
</ul>
</div>
</div>
<!-- Bottom Bar -->
<div class="portal-footer-bottom">
<div>
&copy; 2026 IT-Praxisportal &bull; Alexander Müller. Alle Rechte vorbehalten.
</div>
<div class="portal-footer-bottom-links">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
<a href="#hero">Nach oben &uarr;</a>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="assets/app_auth.js"></script>
<script>
function toggleMobileMenu() {
const drawer = document.getElementById('portal-mobile-drawer');
const btn = document.getElementById('portal-mobile-menu-btn');
if (!drawer) return;
const isHidden = drawer.style.display === 'none' || !drawer.style.display;
drawer.style.display = isHidden ? 'flex' : 'none';
if (btn) btn.innerHTML = isHidden ? '✕' : '☰';
}
if (window.location.hash === '#menu') {
document.addEventListener('DOMContentLoaded', () => toggleMobileMenu());
} else if (window.location.hash) {
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const el = document.querySelector(window.location.hash);
if (el) el.scrollIntoView();
}, 100);
});
}
document.addEventListener('DOMContentLoaded', () => {
// Prüfe Benutzer-Status
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');
const mobDashLink = document.getElementById('mobile-drawer-dash-link');
const mobTeacherLink = document.getElementById('mobile-drawer-teacher-link');
const mobAdminLink = document.getElementById('mobile-drawer-admin-link');
if (dashLink) dashLink.style.display = 'inline-flex';
if (mobDashLink) mobDashLink.style.display = 'flex';
if (user) {
if (user.role === 'admin') {
if (mobAdminLink) mobAdminLink.style.display = 'flex';
if (mobTeacherLink) mobTeacherLink.style.display = 'flex';
} else if (user.role === 'teacher') {
if (mobTeacherLink) mobTeacherLink.style.display = 'flex';
}
}
if (banner && user) {
banner.style.display = 'flex';
if (userNameEl) userNameEl.innerText = user.name || user.email.split('@')[0];
}
}
});
</script>
</body>
</html>