alex-mueller/it-praxisportal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(ui): professional enterprise redesign of navbar, layout and color scheme

Browse source 
- Replace arcade/candy aesthetics with authoritative deep slate and enterprise blue palette
- Streamline navigation bar across dashboard, landing page, impressum and datenschutz (no emojis)
- Upgrade vocational metrics (Ausbildungsberuf, Lehrjahr, Lernfortschritt) replacing toy gamification
- Modernize course action buttons, category filter tabs and mobile drawer
This commit is contained in:
Alex Mueller 2026-09-15 10:13:46 +02:00
parent 1cf27fbd52
commit 44b9daa00d
6 changed files with 620 additions and 586 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
assets/app_auth.js
View file

@ -353,7 +353,7 @@
document.body.classList.add('logged-in');
if (userSpan) {
userSpan.style.display = 'inline-flex';
userSpan.innerHTML = `👤 ${escapeHtml(user.name || user.email)}`;
userSpan.innerHTML = `${escapeHtml(user.name || user.email)}`;
userSpan.style.cursor = 'pointer';
userSpan.title = 'Zum Kurs-Dashboard wechseln';
userSpan.onclick = () => { window.location.href = 'dashboard.html'; };
@ -373,7 +373,7 @@
}
if (registerBtn) {
registerBtn.style.display = 'inline-flex';
registerBtn.innerHTML = '<span class="btn-text-desktop">💻 Zum Kurs-Dashboard</span><span class="btn-text-mobile">Dashboard</span>';
registerBtn.innerHTML = '<span class="btn-text-desktop">Zum Kurs-Dashboard</span><span class="btn-text-mobile">Dashboard</span>';
registerBtn.style.background = '#10b981';
registerBtn.removeAttribute('onclick');
registerBtn.onclick = (e) => {
@ -382,7 +382,7 @@
};
}
if (heroPrimaryCta) {
heroPrimaryCta.innerHTML = '<span>▶ Zum Dashboard &amp; Kurse wählen &rarr;</span>';
heroPrimaryCta.innerHTML = '<span>Zum Dashboard &amp; Kurse wählen &rarr;</span>';
heroPrimaryCta.removeAttribute('onclick');
heroPrimaryCta.onclick = (e) => {
e.preventDefault();
@ -392,7 +392,7 @@
// Alle allgemeinen Landing-Page Action Buttons anpassen
document.querySelectorAll('.landing-cta-btn').forEach(btn => {
btn.innerHTML = '<span>▶ Zum Dashboard &amp; Kurse wählen &rarr;</span>';
btn.innerHTML = '<span>Zum Dashboard &amp; Kurse wählen &rarr;</span>';
btn.style.background = '#10b981';
btn.removeAttribute('onclick');
btn.onclick = (e) => {
@ -425,7 +425,7 @@
}
if (loginBtn) {
loginBtn.style.display = 'inline-flex';
loginBtn.innerText = '🔑 Anmelden';
loginBtn.innerText = 'Anmelden';
loginBtn.style.background = 'rgba(255,255,255,0.12)';
loginBtn.style.color = 'white';
loginBtn.style.borderColor = 'rgba(255,255,255,0.2)';
@ -433,7 +433,7 @@
}
if (registerBtn) {
registerBtn.style.display = 'inline-flex';
registerBtn.innerHTML = '<span class="btn-text-desktop">✨ Kostenlos registrieren</span><span class="btn-text-mobile">Starten</span>';
registerBtn.innerHTML = '<span class="btn-text-desktop">Kostenlos registrieren</span><span class="btn-text-mobile">Starten</span>';
registerBtn.style.background = '#0284c7';
registerBtn.onclick = () => window.openAuthModal('register', { allowClose: true });
}
@ -443,7 +443,7 @@
const mobLogoutBtn = document.getElementById('mobile-drawer-logout-btn');
if (mobLogoutBtn) mobLogoutBtn.style.display = 'none';
if (heroPrimaryCta) {
heroPrimaryCta.innerHTML = '<span>🚀 Jetzt kostenlos registrieren</span>';
heroPrimaryCta.innerHTML = '<span>Jetzt kostenlos registrieren &rarr;</span>';
heroPrimaryCta.onclick = (e) => {
e.preventDefault();
window.openAuthModal('register', { allowClose: true });
@ -452,7 +452,7 @@
// Alle allgemeinen Landing-Page Action Buttons für Besucher
document.querySelectorAll('.landing-cta-btn').forEach(btn => {
btn.innerHTML = '<span>✨ Jetzt kostenlos registrieren &amp; Kurse wählen &rarr;</span>';
btn.innerHTML = '<span>Jetzt kostenlos registrieren &amp; Kurse wählen &rarr;</span>';
btn.style.background = '#0284c7';
btn.onclick = (e) => {
e.preventDefault();
@ -489,19 +489,19 @@
// Aktualisiere ggf. vorhandene Curriculum-Aktions-Buttons
document.querySelectorAll('.portal-card-action-btn').forEach(btn => {
if (loggedIn) {
btn.innerHTML = '<span>▶ Im Lernbereich öffnen</span> <span>&rarr;</span>';
btn.innerHTML = '<span>Im Lernbereich öffnen</span> <span>&rarr;</span>';
btn.classList.remove('locked');
btn.style.background = '#10b981';
btn.onclick = () => { window.location.href = 'dashboard.html'; };
} else {
btn.innerHTML = '<span>✨ Lehrplan freischalten &amp; starten</span>';
btn.innerHTML = '<span>Lehrplan ansehen</span>';
btn.classList.add('locked');
btn.style.background = '#0284c7';
btn.onclick = (e) => {
e.preventDefault();
window.openAuthModal('register', {
allowClose: true,
title: '🔒 Lehrplan freischalten',
title: 'Lehrplan freischalten',
message: 'Erstelle einen kostenlosen Account in unter 30 Sekunden, um sofort vollen Zugriff auf alle Kurse und Module im Lernbereich zu erhalten.'
});
};
@ -534,10 +534,10 @@
` : ''}
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 14px;">
<div style="width: 36px; height: 36px; border-radius: 8px; background: rgba(56, 189, 248, 0.15); border: 1px solid rgba(56, 189, 248, 0.4); display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">🎓</div>
<div style="width: 36px; height: 36px; border-radius: 8px; background: #eff6ff; border: 1px solid #bfdbfe; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #1d4ed8; font-weight: 800;">IT</div>
<div>
<div style="font-size: 1.15rem; font-weight: 800; color: #0f172a;" id="auth-modal-title">
${escapeHtml(options.title || (initialMode === 'register' && allowReg ? '✨ Kostenlos registrieren' : '🔑 Anmelden'))}
${escapeHtml(options.title || (initialMode === 'register' && allowReg ? 'Kostenlos registrieren' : 'Anmelden'))}
</div>
<div style="font-size: 0.72rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;">IT-PRAXISPORTAL AUTHENTICATION</div>
</div>
@ -576,9 +576,9 @@
<div id="auth-field-role" style="display: none;">
<label style="display: block; font-size: 0.8rem; font-weight: 700; color: #0f172a; margin-bottom: 4px;">Deine Rolle / Lernziel:</label>
<select id="auth-select-role" style="width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.88rem; outline: none; background: white; box-sizing: border-box;">
<option value="solo">🎓 Solo-Selbstlerner & Quereinsteiger</option>
<option value="student">💼 Auszubildender IT-Beruf</option>
<option value="teacher">👨‍🏫 Lehrkraft / Dozent / Ausbilder</option>
<option value="solo">Solo-Selbstlerner &amp; Quereinsteiger</option>
<option value="student">Auszubildender IT-Beruf</option>
<option value="teacher">Lehrkraft / Dozent / Ausbilder</option>
</select>
</div>
@ -586,13 +586,13 @@
<label style="display: block; font-size: 0.8rem; font-weight: 700; color: #0f172a; margin-bottom: 4px;">Dein IT-Ausbildungsberuf (optional):</label>
<select id="auth-select-profession" style="width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.88rem; outline: none; background: white; box-sizing: border-box;">
<option value="">Keine Angabe / Quereinsteiger</option>
<option value="FISI">🖥️ Fachinformatiker Systemintegration (FISI)</option>
<option value="FIAE">💻 Fachinformatiker Anwendungsentwicklung (FIAE)</option>
<option value="FIDP">📊 Fachinformatiker Daten- &amp; Prozessanalyse (FIDP)</option>
<option value="FIDV">🌐 Fachinformatiker Digitale Vernetzung (FIDV)</option>
<option value="ITSE">⚡ IT-System-Elektroniker/in (ITSE)</option>
<option value="ITSM">💼 Kaufleute für IT-System-Management (ITSM)</option>
<option value="KDM">📈 Kaufleute für Digitalisierungsmanagement (KDM)</option>
<option value="FISI">Fachinformatiker Systemintegration (FISI)</option>
<option value="FIAE">Fachinformatiker Anwendungsentwicklung (FIAE)</option>
<option value="FIDP">Fachinformatiker Daten- &amp; Prozessanalyse (FIDP)</option>
<option value="FIDV">Fachinformatiker Digitale Vernetzung (FIDV)</option>
<option value="ITSE">IT-System-Elektroniker/in (ITSE)</option>
<option value="ITSM">Kaufleute für IT-System-Management (ITSM)</option>
<option value="KDM">Kaufleute für Digitalisierungsmanagement (KDM)</option>
</select>
<span style="display: block; font-size: 0.74rem; color: #64748b; margin-top: 3px;">Schaltet deinen spezifischen IHK AP2-Prüfungskurs auf dem Dashboard frei.</span>
</div>
@ -621,7 +621,7 @@
</form>
<div style="margin-top: 14px; text-align: center; font-size: 0.76rem; color: #94a3b8;">
🔒 100% DSGVO-konform • Deutsche Server • Keine Tracking-Cookies
100% DSGVO-konform • Serverstandort Deutschland • Keine Tracking-Cookies
</div>
</div>
`;

382
assets/style.css
View file

@ -3,56 +3,67 @@
========================================================================== */
:root {
/* Brand Colors */
--primary: #4f46e5;
--primary-hover: #4338ca;
--primary-light: #eef2ff;
--primary-glow: rgba(79, 70, 229, 0.15);
/* Brand Colors - Authoritative Tech & Enterprise Blue */
--primary: #1d4ed8;
--primary-hover: #1e40af;
--primary-light: #eff6ff;
--primary-glow: rgba(29, 78, 216, 0.12);
--slate-900: #0f172a;
--slate-800: #1e293b;
--slate-700: #334155;
--slate-600: #475569;
--slate-500: #64748b;
--slate-400: #94a3b8;
--slate-300: #cbd5e1;
--slate-200: #e2e8f0;
--slate-100: #f1f5f9;
--slate-50: #f8fafc;
--emerald: #059669;
--emerald-light: #ecfdf5;
--emerald-light: #f0fdf4;
--purple: #7c3aed;
--purple-light: #f5f3ff;
--purple: #6366f1;
--purple-light: #eef2ff;
--amber: #d97706;
--amber: #b45309;
--amber-light: #fffbeb;
--rose: #e11d48;
--rose-light: #fff1f2;
--rose: #b91c1c;
--rose-light: #fef2f2;
--success: #10b981;
--success-light: #ecfdf5;
--success: #059669;
--success-light: #f0fdf4;
/* Surfaces & Backgrounds */
--bg-body: #f8fafc;
--bg-surface: #ffffff;
--bg-subtle: #f1f5f9;
--bg-sidebar: #090d16;
--bg-sidebar: #0f172a;
--bg-code: #0b0f19;
/* Borders */
--border-color: #e2e8f0;
--border-dark: rgba(255, 255, 255, 0.08);
--border-dark: #1e293b;
/* Typography */
--text-main: #0f172a;
--text-body: #1e293b;
--text-muted: #475569;
--text-body: #334155;
--text-muted: #64748b;
--text-inverse: #f8fafc;
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, Menlo, monospace;
/* Elevation */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-full: 9999px;
}
@ -1066,31 +1077,32 @@ textarea:focus {
position: sticky;
top: 0;
z-index: 100;
background: rgba(15, 23, 42, 0.94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 10px 20px;
background: #0f172a;
border-bottom: 1px solid #1e293b;
padding: 0 24px;
height: 62px;
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
}
.portal-nav-container {
max-width: 1320px;
max-width: 1360px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: nowrap;
gap: 20px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.portal-brand {
display: flex;
align-items: center;
gap: 10px;
gap: 12px;
text-decoration: none;
color: white;
flex-shrink: 0;
@ -1099,35 +1111,35 @@ textarea:focus {
}
.portal-brand-logo {
width: 34px;
height: 34px;
border-radius: 9px;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.2));
border: 1px solid rgba(56, 189, 248, 0.4);
width: 36px;
height: 36px;
border-radius: 8px;
background: #1e293b;
border: 1px solid #334155;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.15);
flex-shrink: 0;
}
.portal-brand-title {
font-size: 1.15rem;
font-weight: 800;
letter-spacing: -0.4px;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.3px;
color: #f8fafc;
line-height: 1;
line-height: 1.2;
white-space: nowrap;
flex-shrink: 0;
}
.portal-brand-badge {
font-size: 0.65rem;
font-weight: 700;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
background: linear-gradient(90deg, #0284c7, #2563eb);
color: white;
letter-spacing: 0.6px;
background: #1e293b;
color: #94a3b8;
border: 1px solid #334155;
padding: 2px 7px;
border-radius: 4px;
margin-left: 6px;
@ -1139,35 +1151,42 @@ textarea:focus {
.portal-nav-links {
display: flex;
align-items: center;
gap: 10px;
gap: 4px;
flex-shrink: 0;
white-space: nowrap;
height: 100%;
}
.portal-nav-link {
color: #94a3b8;
text-decoration: none;
font-size: 0.83rem;
font-weight: 600;
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
padding: 4px 7px;
padding: 7px 12px;
border-radius: 6px;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 5px;
gap: 6px;
}
.portal-nav-link:hover, .portal-nav-link.active {
color: #38bdf8;
background: rgba(56, 189, 248, 0.08);
.portal-nav-link:hover {
color: #f8fafc;
background: rgba(255, 255, 255, 0.06);
}
.portal-nav-link.active {
color: #ffffff;
background: #1e293b;
font-weight: 600;
}
.portal-hero {
background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.15) 0%, transparent 60%), #0b0f19;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 56px 24px 44px 24px;
text-align: center;
background: #0f172a;
border-bottom: 1px solid #1e293b;
padding: 44px 24px 38px 24px;
text-align: left;
color: #f8fafc;
}
@ -1175,74 +1194,76 @@ textarea:focus {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.3);
color: #38bdf8;
padding: 6px 14px;
border-radius: 99px;
font-size: 0.82rem;
font-weight: 700;
margin-bottom: 20px;
background: #1e293b;
border: 1px solid #334155;
color: #cbd5e1;
padding: 5px 12px;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 600;
margin-bottom: 14px;
}
.portal-hero h1 {
font-size: 2.7rem;
font-weight: 900;
letter-spacing: -1px;
line-height: 1.15;
margin: 0 auto 16px auto;
font-size: 2.15rem;
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1.25;
margin: 0 0 10px 0;
max-width: 820px;
color: #ffffff;
}
.portal-hero p {
font-size: 1.12rem;
font-size: 0.98rem;
line-height: 1.6;
color: #94a3b8;
max-width: 680px;
margin: 0 auto 28px auto;
max-width: 720px;
margin: 0;
}
.portal-hero-actions {
display: flex;
justify-content: center;
justify-content: flex-start;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 22px;
}
.portal-btn-primary {
background: linear-gradient(135deg, #0284c7, #2563eb);
background: #1d4ed8;
color: white;
padding: 12px 24px;
border-radius: 10px;
font-weight: 700;
font-size: 0.95rem;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.88rem;
text-decoration: none;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease;
border: 1px solid #1d4ed8;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
cursor: pointer;
}
.portal-btn-primary:hover {
background: #1e40af;
border-color: #1e40af;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}
.portal-btn-secondary {
background: rgba(255, 255, 255, 0.06);
color: #f1f5f9;
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 12px 22px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
background: #1e293b;
color: #cbd5e1;
border: 1px solid #334155;
padding: 10px 18px;
border-radius: 8px;
font-weight: 500;
font-size: 0.88rem;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 8px;
@ -1250,43 +1271,44 @@ textarea:focus {
}
.portal-btn-secondary:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
background: #334155;
color: #ffffff;
}
.portal-stats-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 1080px;
margin: 36px auto 0 auto;
gap: 14px;
margin-top: 26px;
}
.portal-stat-card {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 16px;
background: #1e293b;
border: 1px solid #334155;
border-radius: 10px;
padding: 16px 18px;
text-align: left;
}
.portal-stat-num {
font-size: 1.6rem;
font-weight: 900;
color: #38bdf8;
line-height: 1;
font-size: 1.35rem;
font-weight: 700;
color: #f8fafc;
line-height: 1.25;
margin-bottom: 4px;
}
.portal-stat-label {
font-size: 0.82rem;
font-weight: 700;
color: #f1f5f9;
font-size: 0.78rem;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.portal-stat-desc {
font-size: 0.75rem;
font-size: 0.76rem;
color: #64748b;
}
@ -1296,8 +1318,8 @@ textarea:focus {
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin: 36px 0 24px 0;
gap: 16px;
margin: 32px 0 20px 0;
}
.portal-filter-tabs {
@ -1307,20 +1329,21 @@ textarea:focus {
}
.portal-tab-pill {
background: white;
background: #ffffff;
border: 1px solid #cbd5e1;
color: #475569;
padding: 8px 16px;
border-radius: 99px;
font-size: 0.85rem;
font-weight: 700;
padding: 7px 14px;
border-radius: 8px;
font-size: 0.84rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.portal-tab-pill:hover {
border-color: #94a3b8;
background: #f8fafc;
color: #0f172a;
border-color: #94a3b8;
}
.portal-tab-pill.active {
@ -1334,15 +1357,15 @@ textarea:focus {
align-items: center;
background: white;
border: 1px solid #cbd5e1;
border-radius: 99px;
padding: 6px 14px;
border-radius: 8px;
padding: 7px 14px;
min-width: 280px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.portal-search-box:focus-within {
border-color: #0284c7;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
border-color: #1d4ed8;
box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}
.portal-search-box input {
@ -1366,20 +1389,20 @@ textarea:focus {
.portal-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
border-radius: 12px;
padding: 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
position: relative;
overflow: hidden;
}
.portal-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08);
border-color: #cbd5e1;
}
@ -1391,39 +1414,40 @@ textarea:focus {
}
.portal-card-icon {
font-size: 2rem;
width: 52px;
height: 52px;
border-radius: 12px;
font-size: 1.35rem;
width: 44px;
height: 44px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #1e293b;
}
.portal-card-badge {
font-size: 0.72rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 99px;
font-weight: 600;
padding: 3px 8px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 0.4px;
}
.portal-card-title {
font-size: 1.15rem;
font-weight: 800;
font-size: 1.08rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 6px 0;
line-height: 1.3;
line-height: 1.35;
}
.portal-card-desc {
font-size: 0.86rem;
color: #475569;
line-height: 1.5;
margin: 0 0 16px 0;
margin: 0 0 14px 0;
flex-grow: 1;
}
@ -1438,9 +1462,10 @@ textarea:focus {
background: #f1f5f9;
color: #475569;
font-size: 0.72rem;
font-weight: 600;
padding: 3px 8px;
font-weight: 500;
padding: 3px 7px;
border-radius: 4px;
border: 1px solid #e2e8f0;
}
.portal-card-footer {
@ -1462,9 +1487,9 @@ textarea:focus {
color: white;
text-decoration: none;
font-size: 0.82rem;
font-weight: 700;
font-weight: 600;
padding: 8px 14px;
border-radius: 8px;
border-radius: 6px;
transition: background 0.15s ease;
display: inline-flex;
align-items: center;
@ -1472,7 +1497,7 @@ textarea:focus {
}
.portal-card-btn:hover {
background: #0284c7;
background: #1d4ed8;
}
/* Bento Grid */
@ -1807,23 +1832,25 @@ html, body {
#nav-profile-pill {
display: inline-flex !important;
align-items: center;
gap: 4px;
padding: 4px 8px !important;
max-width: 110px;
gap: 6px;
padding: 4px 10px !important;
max-width: 140px;
flex-shrink: 1;
overflow: hidden;
background: rgba(255, 255, 255, 0.08) !important;
border-radius: 99px;
background: #1e293b !important;
border: 1px solid #334155 !important;
border-radius: 6px;
}
#nav-auth-user {
display: inline-block !important;
font-size: 0.76rem !important;
max-width: 80px;
font-weight: 600 !important;
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap !important;
color: #38bdf8 !important;
color: #f8fafc !important;
}
#nav-auth-role {
@ -1843,7 +1870,8 @@ html, body {
/* Ultra-compact Mobile Screen adjustments (<= 400px e.g. iPhone SE, 375px, 360px, 320px) */
@media (max-width: 400px) {
.portal-header-bar {
padding: 7px 8px !important;
padding: 0 10px !important;
height: 56px !important;
}
.portal-nav-container {
gap: 6px !important;
@ -1858,18 +1886,6 @@ html, body {
.portal-brand-title {
font-size: 0.90rem !important;
}
#nav-auth-user {
max-width: 70px !important;
font-size: 0.72rem !important;
}
#nav-profile-pill {
max-width: 95px !important;
padding: 3px 6px !important;
}
#nav-btn-register {
padding: 4px 7px !important;
font-size: 0.72rem !important;
}
.mobile-menu-toggle {
width: 32px !important;
height: 32px !important;
@ -1880,14 +1896,14 @@ html, body {
/* Mobile Drawer & Hamburger Menu */
.mobile-menu-toggle {
display: none;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
background: #1e293b;
border: 1px solid #334155;
color: #f8fafc;
font-size: 1.2rem;
font-size: 1.1rem;
width: 36px;
height: 36px;
padding: 0;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
line-height: 1;
flex-shrink: 0;
@ -1895,21 +1911,21 @@ html, body {
}
.mobile-menu-toggle:hover {
background: rgba(255, 255, 255, 0.15);
background: #334155;
}
.mobile-drawer {
background: #090d16;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: #0f172a;
border-bottom: 1px solid #1e293b;
padding: 14px 16px 18px 16px;
position: sticky;
top: 52px;
top: 62px;
z-index: 49;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
animation: slideDown 0.2s ease-out;
gap: 4px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
animation: slideDown 0.15s ease-out;
}
@keyframes slideDown {
@ -1920,10 +1936,10 @@ html, body {
.mobile-drawer-link {
color: #cbd5e1;
text-decoration: none;
font-size: 0.94rem;
font-weight: 600;
padding: 10px 14px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
padding: 9px 12px;
border-radius: 6px;
transition: background 0.15s ease, color 0.15s ease;
display: flex;
align-items: center;
@ -1931,8 +1947,8 @@ html, body {
}
.mobile-drawer-link:hover, .mobile-drawer-link:active {
background: rgba(56, 189, 248, 0.12);
color: #38bdf8;
background: #1e293b;
color: #ffffff;
}
/* ==========================================================================

599
dashboard.html
View file

File diff suppressed because it is too large Load diff

36
datenschutz.html
View file

@ -27,19 +27,19 @@
</a>
<nav class="portal-nav-links">
<a href="index.html#hero" class="portal-nav-link">🚀 Start</a>
<a href="index.html#was-du-bekommst" class="portal-nav-link">💎 Das Konzept</a>
<a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link" style="color: #34d399; font-weight: 700;">💻 Kurs-Dashboard</a>
<a href="index.html#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="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>
<a href="index.html#hero" class="portal-nav-link">Start</a>
<a href="index.html#was-du-bekommst" class="portal-nav-link">Lehrkonzept</a>
<a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link" style="color: #38bdf8; font-weight: 600;">Kurs-Dashboard</a>
<a href="index.html#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="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">Dozentenbereich</a>
<a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</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" 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: #1d4ed8; 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>
@ -49,15 +49,15 @@
<!-- Mobile Navigation Drawer -->
<div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
<a href="index.html#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">🚀 Start &amp; Übersicht</a>
<a href="index.html#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">💎 Was du bekommst</a>
<a href="dashboard.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📊 Kurs-Dashboard</a>
<a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">💻 Web-IDE starten</a>
<a href="index.html#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()" style="color: #38bdf8;">🔒 Datenschutzerklärung</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>
<a href="index.html#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">Start &amp; Übersicht</a>
<a href="index.html#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">Lehrkonzept</a>
<a href="dashboard.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Kurs-Dashboard</a>
<a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">Web-IDE starten</a>
<a href="index.html#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()" style="color: #38bdf8;">Datenschutzerklärung</a>
<a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">Dozentenbereich</a>
<a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</a>
</div>
<!-- 2. PAGE HEADER BANNER -->

36
impressum.html
View file

@ -27,19 +27,19 @@
</a>
<nav class="portal-nav-links">
<a href="index.html#hero" class="portal-nav-link">🚀 Start</a>
<a href="index.html#was-du-bekommst" class="portal-nav-link">💎 Das Konzept</a>
<a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link" style="color: #34d399; font-weight: 700;">💻 Kurs-Dashboard</a>
<a href="index.html#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="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>
<a href="index.html#hero" class="portal-nav-link">Start</a>
<a href="index.html#was-du-bekommst" class="portal-nav-link">Lehrkonzept</a>
<a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link" style="color: #38bdf8; font-weight: 600;">Kurs-Dashboard</a>
<a href="index.html#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="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">Dozentenbereich</a>
<a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</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" 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: #1d4ed8; 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>
@ -49,15 +49,15 @@
<!-- Mobile Navigation Drawer -->
<div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
<a href="index.html#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">🚀 Start &amp; Übersicht</a>
<a href="index.html#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">💎 Was du bekommst</a>
<a href="dashboard.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📊 Kurs-Dashboard</a>
<a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">💻 Web-IDE starten</a>
<a href="index.html#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">🎓 IHK Prüfungstrainer</a>
<a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()" style="color: #38bdf8;">⚖️ Impressum</a>
<a href="datenschutz.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">🔒 Datenschutzerklärung</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>
<a href="index.html#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">Start &amp; Übersicht</a>
<a href="index.html#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">Lehrkonzept</a>
<a href="dashboard.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Kurs-Dashboard</a>
<a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">Web-IDE starten</a>
<a href="index.html#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">IHK Prüfungstrainer</a>
<a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()" style="color: #38bdf8;">Impressum</a>
<a href="datenschutz.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Datenschutzerklärung</a>
<a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">Dozentenbereich</a>
<a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</a>
</div>
<!-- 2. PAGE HEADER BANNER -->

105
index.html
View file

@ -242,11 +242,10 @@
<!-- 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>
<span>Angemeldet als <strong id="landing-user-name">Teilnehmer</strong>. Kursfortschritt und Module 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 href="dashboard.html" class="btn" style="background: white; color: #1d4ed8; font-weight: 700; 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>
@ -259,25 +258,25 @@
</div>
<div>
<span class="portal-brand-title">IT-Praxisportal</span>
<span class="portal-brand-badge">Alpha</span>
<span class="portal-brand-badge">Aus- &amp; Weiterbildung</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="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>
<a href="#hero" class="portal-nav-link">Start</a>
<a href="#was-du-bekommst" class="portal-nav-link">Lehrkonzept</a>
<a href="#dashboard-spotlight" class="portal-nav-link">Funktionen</a>
<a href="#features-ide" class="portal-nav-link">Monaco Web-IDE</a>
<a href="#ihk-section" class="portal-nav-link">IHK-Prüfung</a>
<a href="#zielgruppen" class="portal-nav-link">Zielgruppen</a>
<a href="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">Dozentenbereich</a>
<a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</a>
</nav>
<div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0;">
<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); white-space: nowrap;"></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); white-space: nowrap;" 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; white-space: nowrap;" 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" 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); white-space: nowrap;" 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: #1d4ed8; color: white; white-space: nowrap;" 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>
@ -289,26 +288,26 @@
<div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
<!-- Auth-Aktionen für mobile/tablet Besucher -->
<div id="mobile-drawer-auth-actions" style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
<button type="button" class="mobile-drawer-link" id="mobile-drawer-login-btn" style="color: #38bdf8; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.25); text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; font-weight: 700; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="toggleMobileMenu(); window.openAuthModal('login', { allowClose: true });">
🔑 Anmelden
<button type="button" class="mobile-drawer-link" id="mobile-drawer-login-btn" style="color: #f1f5f9; background: rgba(255, 255, 255, 0.05); border: 1px solid #334155; text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; font-weight: 600; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="toggleMobileMenu(); window.openAuthModal('login', { allowClose: true });">
Anmelden
</button>
<button type="button" class="mobile-drawer-link" id="mobile-drawer-register-btn" style="color: #ffffff; background: #0284c7; border: 1px solid #0284c7; text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; font-weight: 700; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="toggleMobileMenu(); window.openAuthModal('register', { allowClose: true });">
✨ Kostenlos registrieren
<button type="button" class="mobile-drawer-link" id="mobile-drawer-register-btn" style="color: #ffffff; background: #1d4ed8; border: 1px solid #1d4ed8; text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; font-weight: 600; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="toggleMobileMenu(); window.openAuthModal('register', { allowClose: true });">
Kostenlos registrieren
</button>
</div>
<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>
<button type="button" class="mobile-drawer-link" id="mobile-drawer-logout-btn" style="display: none; color: #f87171; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.25); text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; margin-top: 8px; font-weight: 700; width: 100%; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
🚪 Abmelden
<a href="#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">Start &amp; Übersicht</a>
<a href="#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">Lehrkonzept</a>
<a href="#dashboard-spotlight" class="mobile-drawer-link" onclick="toggleMobileMenu()">Funktionen</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: #38bdf8; font-weight: 700; background: rgba(56, 189, 248, 0.1); padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(56, 189, 248, 0.2);">Zum Kurs-Dashboard &rarr;</a>
<a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">Dozentenbereich</a>
<a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</a>
<button type="button" class="mobile-drawer-link" id="mobile-drawer-logout-btn" style="display: none; color: #f87171; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.25); text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; margin-top: 8px; font-weight: 600; width: 100%; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
Abmelden
</button>
</div>
@ -316,9 +315,9 @@
<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>Berufliche Bildung &amp; Prüfungsvorbereitung</span>
<span style="opacity: 0.5;">•</span>
<span>100% Kostenlos</span>
<span>Fachinformatiker &amp; IT-Berufe</span>
</div>
<h1>Echte IT-Praxis statt trockener Theorie.</h1>
@ -326,13 +325,13 @@
<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>
<span>Jetzt kostenfrei registrieren &rarr;</span>
</button>
<a href="#was-du-bekommst" class="portal-btn-secondary">
<span>📖 Was ist im Account enthalten? &darr;</span>
<span>Lehrkonzept ansehen</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 href="#ihk-section" class="portal-btn-secondary">
<span>IHK AP1 &amp; AP2 Prüfungstrainer</span>
</a>
</div>
@ -378,7 +377,7 @@
<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>
<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>
@ -386,7 +385,7 @@
<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);" onclick="window.openAuthModal('register', { allowClose: true })">
<span>✨ Kostenlos registrieren &amp; Dashboard öffnen &rarr;</span>
<span>Kostenlos registrieren &amp; Dashboard öffnen &rarr;</span>
</button>
</div>
</div>
@ -595,7 +594,7 @@
<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;" onclick="window.openAuthModal('register', { allowClose: true })">
<button type="button" class="landing-cta-btn btn" style="background: #1d4ed8; color: white; padding: 8px 16px; font-size: 0.84rem; font-weight: 700; border-radius: 6px; border: none; cursor: pointer;" onclick="window.openAuthModal('register', { allowClose: true })">
<span>✨ Account erstellen &amp; Kurse wählen &rarr;</span>
</button>
</div>
@ -606,29 +605,29 @@
<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>
<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;" onclick="window.openAuthModal('register', { allowClose: true })">
<span>🚀 Prüfungssimulation im Dashboard starten</span>
<span>Prüfungssimulation im Dashboard starten &rarr;</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>
<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>
<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>
<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>
@ -640,7 +639,7 @@
<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>
<h3 style="font-size: 1.65rem; font-weight: 900; margin: 10px 0; color: #f8fafc;">Monaco Web-IDE: Professionelle Entwicklung im Browser</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>
@ -654,7 +653,7 @@
<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);" onclick="window.openAuthModal('register', { allowClose: true })">
<span>✨ Web-IDE im Dashboard starten &rarr;</span>
<span>Web-IDE im Dashboard starten &rarr;</span>
</button>
</div>
</div>
@ -698,7 +697,7 @@
<!-- 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>
<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>
@ -731,7 +730,7 @@
<!-- 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>
<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>
@ -764,7 +763,7 @@
</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);" onclick="window.openAuthModal('register', { allowClose: true })">
<span>✨ Jetzt kostenlos registrieren &amp; Kurse wählen &rarr;</span>
<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
@ -795,7 +794,7 @@
<!-- Lehrpfade -->
<div class="portal-footer-col">
<h4>📚 Lehrpfade</h4>
<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>
@ -809,7 +808,7 @@
<!-- Features & Tools -->
<div class="portal-footer-col">
<h4>💻 Plattform</h4>
<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>
@ -822,7 +821,7 @@
<!-- Rechtliches & Kontakt -->
<div class="portal-footer-col">
<h4>⚖️ Rechtliches &amp; Kontakt</h4>
<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>