diff --git a/assets/app_auth.js b/assets/app_auth.js index e9af1ed..749e45f 100644 --- a/assets/app_auth.js +++ b/assets/app_auth.js @@ -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 = '💻 Zum Kurs-DashboardDashboard'; + registerBtn.innerHTML = 'Zum Kurs-DashboardDashboard'; registerBtn.style.background = '#10b981'; registerBtn.removeAttribute('onclick'); registerBtn.onclick = (e) => { @@ -382,7 +382,7 @@ }; } if (heroPrimaryCta) { - heroPrimaryCta.innerHTML = '▶ Zum Dashboard & Kurse wählen →'; + heroPrimaryCta.innerHTML = 'Zum Dashboard & Kurse wählen →'; 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 = '▶ Zum Dashboard & Kurse wählen →'; + btn.innerHTML = 'Zum Dashboard & Kurse wählen →'; 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 = '✨ Kostenlos registrierenStarten'; + registerBtn.innerHTML = 'Kostenlos registrierenStarten'; 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 = '🚀 Jetzt kostenlos registrieren'; + heroPrimaryCta.innerHTML = 'Jetzt kostenlos registrieren →'; 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 = '✨ Jetzt kostenlos registrieren & Kurse wählen →'; + btn.innerHTML = 'Jetzt kostenlos registrieren & Kurse wählen →'; 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 = '▶ Im Lernbereich öffnen →'; + btn.innerHTML = 'Im Lernbereich öffnen →'; btn.classList.remove('locked'); btn.style.background = '#10b981'; btn.onclick = () => { window.location.href = 'dashboard.html'; }; } else { - btn.innerHTML = '✨ Lehrplan freischalten & starten'; + btn.innerHTML = 'Lehrplan ansehen'; 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 @@ ` : ''}
-
🎓
+
IT
- ${escapeHtml(options.title || (initialMode === 'register' && allowReg ? '✨ Kostenlos registrieren' : '🔑 Anmelden'))} + ${escapeHtml(options.title || (initialMode === 'register' && allowReg ? 'Kostenlos registrieren' : 'Anmelden'))}
IT-PRAXISPORTAL AUTHENTICATION
@@ -576,9 +576,9 @@ @@ -586,13 +586,13 @@ Schaltet deinen spezifischen IHK AP2-Prüfungskurs auf dem Dashboard frei.
@@ -621,7 +621,7 @@
- 🔒 100% DSGVO-konform • Deutsche Server • Keine Tracking-Cookies + 100% DSGVO-konform • Serverstandort Deutschland • Keine Tracking-Cookies
`; diff --git a/assets/style.css b/assets/style.css index 711a13f..10ba6fc 100644 --- a/assets/style.css +++ b/assets/style.css @@ -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; } /* ========================================================================== diff --git a/dashboard.html b/dashboard.html index ee13be9..6c23203 100644 --- a/dashboard.html +++ b/dashboard.html @@ -38,19 +38,19 @@ .apprenticeship-panel { background: #ffffff; border: 1px solid #e2e8f0; - border-radius: 16px; - padding: 22px 26px; + border-radius: 12px; + padding: 22px 24px; margin-bottom: 24px; - box-shadow: 0 4px 16px rgba(0,0,0,0.03); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .year-pill { - background: #f1f5f9; + background: #ffffff; color: #475569; border: 1px solid #cbd5e1; - padding: 8px 16px; - border-radius: 99px; - font-size: 0.84rem; - font-weight: 700; + padding: 6px 14px; + border-radius: 6px; + font-size: 0.82rem; + font-weight: 600; cursor: pointer; transition: all 0.15s ease; display: inline-flex; @@ -58,36 +58,38 @@ gap: 6px; } .year-pill:hover { - background: #e2e8f0; + background: #f8fafc; color: #0f172a; - transform: translateY(-1px); + border-color: #94a3b8; } .year-pill.active { - background: #0284c7; + background: #0f172a; color: #ffffff; - border-color: #0284c7; - box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35); + border-color: #0f172a; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .year-pill.assigned-only-btn { - border-color: #10b981; - color: #047857; - background: #ecfdf5; + border-color: #cbd5e1; + color: #475569; + background: #ffffff; } .year-pill.assigned-only-btn:hover { - background: #d1fae5; + background: #f8fafc; + color: #0f172a; + border-color: #94a3b8; } .year-pill.assigned-only-btn.active { - background: #10b981; + background: #0f172a; color: #ffffff; - border-color: #10b981; - box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35); + border-color: #0f172a; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .lf-card { background: #ffffff; border: 1px solid #e2e8f0; - border-radius: 10px; - padding: 12px 16px; + border-radius: 8px; + padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; @@ -96,8 +98,7 @@ transition: all 0.15s ease; } .lf-card:hover { - border-color: #38bdf8; - transform: translateY(-1px); + border-color: #cbd5e1; box-shadow: var(--shadow-md); } .lf-card-header { @@ -107,14 +108,14 @@ } .lf-tag { font-size: 0.72rem; - font-weight: 800; + font-weight: 600; padding: 2px 7px; - border-radius: 6px; + border-radius: 4px; } .lf-tag-ap1 { - background: #e0f2fe; - color: #0369a1; - border: 1px solid #bae6fd; + background: #eff6ff; + color: #1d4ed8; + border: 1px solid #bfdbfe; } .lf-tag-ap2 { background: #fef2f2; @@ -122,107 +123,106 @@ border: 1px solid #fecaca; } .lf-tag-wiso { - background: #fefce8; - color: #a16207; - border: 1px solid #fef08a; + background: #fffbeb; + color: #b45309; + border: 1px solid #fde68a; } /* Course Progress Elements */ .course-progress-wrap { - margin: 14px 0 16px 0; + margin: 12px 0 14px 0; background: #f1f5f9; - border-radius: 99px; - height: 8px; + border-radius: 4px; + height: 6px; overflow: hidden; position: relative; } .course-progress-bar { height: 100%; - background: linear-gradient(90deg, #0284c7, #10b981); + background: #1d4ed8; width: 0%; - border-radius: 99px; + border-radius: 4px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .course-progress-meta { display: flex; justify-content: space-between; align-items: center; - font-size: 0.78rem; + font-size: 0.76rem; color: #64748b; - font-weight: 600; + font-weight: 500; } /* Dashboard Action Buttons */ .btn-start-ide { - background: #0284c7; + background: #0f172a; color: white; border: none; display: inline-flex; align-items: center; gap: 6px; - padding: 8px 14px; - border-radius: 8px; - font-size: 0.84rem; - font-weight: 700; - text-decoration: none; - cursor: pointer; - transition: all 0.15s ease; - } - .btn-start-ide:hover { - background: #0369a1; - transform: translateY(-1px); - } - .btn-view-theory { - background: #f1f5f9; - color: #475569; - border: 1px solid #cbd5e1; - display: inline-flex; - align-items: center; - gap: 6px; - padding: 8px 12px; - border-radius: 8px; - font-size: 0.84rem; + padding: 7px 14px; + border-radius: 6px; + font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.15s ease; } + .btn-start-ide:hover { + background: #1d4ed8; + } + .btn-view-theory { + background: #ffffff; + color: #475569; + border: 1px solid #cbd5e1; + display: inline-flex; + align-items: center; + gap: 6px; + padding: 7px 12px; + border-radius: 6px; + font-size: 0.82rem; + font-weight: 500; + text-decoration: none; + cursor: pointer; + transition: all 0.15s ease; + } .btn-view-theory:hover { - background: #e2e8f0; + background: #f8fafc; color: #0f172a; + border-color: #94a3b8; } /* Resume Card */ .resume-card { - background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 16px; - padding: 24px 28px; + background: #1e293b; + border: 1px solid #334155; + border-radius: 12px; + padding: 20px 24px; color: #f8fafc; margin-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; - gap: 18px; - box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3); + gap: 16px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Certificates Grid */ .cert-preview-card { background: #ffffff; border: 1px solid #e2e8f0; - border-radius: 12px; + border-radius: 10px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; - transition: all 0.2s ease; + transition: all 0.15s ease; box-shadow: var(--shadow-sm); } .cert-preview-card:hover { - border-color: #0284c7; - transform: translateY(-2px); + border-color: #cbd5e1; box-shadow: var(--shadow-md); } @@ -234,34 +234,34 @@
IT-Praxisportal - Lernbereich + Aus- & Weiterbildung
-
-
@@ -612,10 +613,10 @@
@@ -645,10 +646,10 @@ @@ -678,10 +679,10 @@ @@ -711,10 +712,10 @@ @@ -744,10 +745,10 @@ @@ -777,10 +778,10 @@ @@ -810,10 +811,10 @@ @@ -844,10 +845,10 @@ @@ -877,10 +878,10 @@ @@ -910,10 +911,10 @@ @@ -943,10 +944,10 @@ @@ -976,10 +977,10 @@ @@ -1009,10 +1010,10 @@ @@ -1042,10 +1043,10 @@ @@ -1075,10 +1076,10 @@ @@ -1108,10 +1109,10 @@ @@ -1141,10 +1142,10 @@ @@ -1174,10 +1175,10 @@ @@ -1185,100 +1186,99 @@ -
+
- Offizieller Prüfungsstandard -

🎓 IHK Prüfungstrainer AP1 & AP2

-

Realistische Prüfungssimulation nach der neuen Ausbildungsordnung (AO 2020) für Fachinformatiker aller Fachrichtungen mit Timer, Notenschlüssel & Lösungserklärungen.

+ Offizieller Prüfungsstandard +

IHK Prüfungsvorbereitung AP1 & AP2

+

Prüfungssimulation nach bundeseinheitlicher Ausbildungsordnung (AO 2020) für Fachinformatiker aller Fachrichtungen mit Zeitbegrenzung, Notenschlüssel und detaillierten Lösungserklärungen.

- - ⚡ 90-Min AP1 Probeprüfung starten + + AP1 Probeprüfung starten →
-
-

📘 AP1: IT-Arbeitsplatz (LF 1–8)

-

Gemeinsame Kernqualifikationen für alle IT-Berufe: Verträge, Ergonomie, Subnetting, BSI, BPMN 2.0, Belege & Netzplan.

- - ▶ AP1 Module üben + -
-

📕 AP2: Systemintegration (FISI)

-

VLAN & Routing, VRT-Symbole, Active Directory, RAID 0-10, Backup 3-2-1-1-0, Enterprise SQL & 40h-Projektleitfaden.

- - ▶ AP2 FISI üben + -
-

💻 AP2: Anwendungsentwicklung (FIAE)

-

Clean Architecture, GoF-Entwurfsmuster, UML 2.5, Algorithmen (O-Notation), OOP & SOLID, REST/GraphQL & 80h-Projektleitfaden.

- - ▶ AP2 FIAE üben + -
-

📊 AP2: Daten- & Prozessanalyse (FIDP)

-

Prozessoptimierung, BPMN 2.0, ISO 25012 Datenqualität, ETL/CDC, Star-Schema, Statistik, ML-Evaluation & 40h-Projektleitfaden.

- - ▶ AP2 FIDP üben + -
-

🏭 AP2: Digitale Vernetzung (FIDV)

-

Cyber-Physische Systeme, RAMI 4.0, IO-Link, Profinet IO, TSN, OPC UA/MQTT, 5G-Campus, IEC 62443, Purdue & 40h-Projekt.

- - ▶ AP2 FIDV üben + -
-

⚡ AP2: IT-System-Elektroniker (ITSE)

-

VDE 0100/0701, DGUV V3, USV (VFI), LWL-Spleißen & OTDR, EMV, Brandschottung & 40h-Projektleitfaden.

- - ▶ AP2 ITSE üben + -
-

💼 AP2: IT-System-Management (ITSM)

-

7P-Marketing, Handelskalkulation, TCO/ROI, EVB-IT Verträge, SLAs, ITIL & 40h-Projektleitfaden.

- - ▶ AP2 ITSM üben + -
-

📈 AP2: Digitalisierungsmanagement (KDM)

-

Business Model Canvas, Plattformökonomie, BPMN 2.0, GoBD/DMS, XRechnung, DSFA & 40h-Projektleitfaden.

- - ▶ AP2 KDM üben + -
-

⚡ Subnetting-Drill Master

-

Interaktiver Rechentrainer: Netz-ID, Broadcast-Adresse, Hostbereich & Präfixlängen im Sekundentakt trainieren.

- - ▶ Subnetting-Drill öffnen + - @@ -1536,6 +1536,7 @@ const msgEl = document.getElementById('azubi-prof-account-msg'); const badgeEl = document.getElementById('azubi-prof-account-badge'); const navProf = document.getElementById('nav-auth-profession'); + const statProf = document.getElementById('stat-user-prof-name'); if (!msgEl || !badgeEl) return; if (navProf) { @@ -1550,26 +1551,36 @@ } } + if (statProf) { + if (!currentProfession) { + statProf.innerText = 'Nicht festgelegt'; + } else if (currentProfession === 'ALL') { + statProf.innerText = 'Alle IT-Berufe (Admin)'; + } else { + statProf.innerText = PROFESSION_NAMES[currentProfession] || currentProfession; + } + } + if (!currentProfession) { badgeEl.style.background = '#fef2f2'; badgeEl.style.borderColor = '#fecaca'; badgeEl.style.color = '#991b1b'; - msgEl.innerHTML = '⚠️ Kein Ausbildungsberuf im Account angegeben: Spezifische AP2-Prüfungskurse sind ausgeblendet. Wähle oben deinen Beruf und klicke auf Speichern.'; + msgEl.innerHTML = 'Kein Ausbildungsberuf hinterlegt: Berufsbezogene AP2-Kurse sind ausgeblendet. Wähle oben deinen Beruf und klicke auf Speichern.'; } else if (currentProfession === 'ALL') { - badgeEl.style.background = '#eff6ff'; - badgeEl.style.borderColor = '#bfdbfe'; - badgeEl.style.color = '#1e40af'; - msgEl.innerHTML = '🌟 Dozenten- & Admin-Vollansicht: Alle 7 IT-Ausbildungsberufe sind auf dem Dashboard sichtbar.'; + badgeEl.style.background = '#f8fafc'; + badgeEl.style.borderColor = '#cbd5e1'; + badgeEl.style.color = '#1e293b'; + msgEl.innerHTML = 'Dozenten- & Admin-Vollansicht: Alle IT-Ausbildungsberufe sind auf dem Dashboard freigeschaltet.'; } else if (currentProfession === accountProfession) { badgeEl.style.background = '#f0fdf4'; badgeEl.style.borderColor = '#bbf7d0'; badgeEl.style.color = '#166534'; - msgEl.innerHTML = `✅ Im Account gespeichert: ${PROFESSION_NAMES[currentProfession] || currentProfession}. Es wird exklusiv dein passender AP2-Prüfungskurs angezeigt.`; + msgEl.innerHTML = `Im Account hinterlegt: ${PROFESSION_NAMES[currentProfession] || currentProfession}. Es wird exklusiv dein passender AP2-Prüfungskurs angezeigt.`; } else { badgeEl.style.background = '#fffbeb'; badgeEl.style.borderColor = '#fde68a'; badgeEl.style.color = '#92400e'; - msgEl.innerHTML = `⏳ Vorschau für: ${PROFESSION_NAMES[currentProfession] || currentProfession} (noch nicht im Account gespeichert). Klicke auf 💾 Im Account speichern.`; + msgEl.innerHTML = `Vorschau: ${PROFESSION_NAMES[currentProfession] || currentProfession} (noch nicht im Account gespeichert). Klicke auf Im Account speichern.`; } } @@ -1666,11 +1677,11 @@ const pillCoding = document.getElementById('tab-pill-coding'); const pillData = document.getElementById('tab-pill-data'); - if (pillAll) pillAll.innerText = `🌟 Alle Fachbereiche (${counts.all})`; - if (pillIhk) pillIhk.innerText = `🎓 IHK Prüfung (${counts.ihk})`; - if (pillDevops) pillDevops.innerText = `🐧 DevOps, Linux & AD (${counts.devops})`; - if (pillCoding) pillCoding.innerText = `💻 Backend & Systems (${counts.coding})`; - if (pillData) pillData.innerText = `🗄️ Daten & Web (${counts.data})`; + if (pillAll) pillAll.innerText = `Alle Fachbereiche (${counts.all})`; + if (pillIhk) pillIhk.innerText = `IHK Prüfungsvorbereitung (${counts.ihk})`; + if (pillDevops) pillDevops.innerText = `DevOps & Infrastruktur (${counts.devops})`; + if (pillCoding) pillCoding.innerText = `Softwaretechnik & Systems (${counts.coding})`; + if (pillData) pillData.innerText = `Datenbanken & Web (${counts.data})`; } // 3. Live Category Filter @@ -1686,6 +1697,10 @@ document.querySelectorAll('.year-pill').forEach(btn => btn.classList.remove('active')); if (element) element.classList.add('active'); currentYear = year; + const statYear = document.getElementById('stat-user-year-name'); + if (statYear) { + statYear.innerText = (year === 'all') ? 'Alle Lehrjahre' : `${year}. Ausbildungsjahr`; + } renderLernfelder(currentProfession, year); applyAllFilters(); } @@ -1695,6 +1710,10 @@ document.querySelectorAll('.year-pill').forEach(btn => btn.classList.remove('active')); if (element) element.classList.add('active'); currentYear = 'assigned'; + const statYear = document.getElementById('stat-user-year-name'); + if (statYear) { + statYear.innerText = 'Dozenten-Zuweisung'; + } renderLernfelder(currentProfession, 'assigned'); applyAllFilters(); } @@ -1734,10 +1753,10 @@ currentProfession = prof; updateProfessionStatusBadge(); if (btn) { - btn.innerText = '✓ Im Account gespeichert!'; + btn.innerText = 'Gespeichert!'; btn.style.background = '#10b981'; setTimeout(() => { - btn.innerText = '💾 Im Account speichern'; + btn.innerText = 'Im Account speichern'; btn.style.background = '#0284c7'; }, 2000); } @@ -1758,8 +1777,8 @@ accountProfession = prof; currentProfession = prof; updateProfessionStatusBadge(); - if (btn) btn.innerText = '✓ Lokal gemerkt'; - setTimeout(() => { if (btn) btn.innerText = '💾 Im Account speichern'; }, 2000); + if (btn) btn.innerText = 'Lokal übernommen'; + setTimeout(() => { if (btn) btn.innerText = 'Im Account speichern'; }, 2000); applyAllFilters(); } } @@ -1784,7 +1803,7 @@ if (year === 'assigned') { container.style.display = 'block'; - if (titleEl) titleEl.innerText = `🔒 Deine zugeteilten Kurse (${userAssignedCourses.length} Kurse aktiv)`; + if (titleEl) titleEl.innerText = `Zugeteilte Kurse (${userAssignedCourses.length} Kurse aktiv)`; if (badgeEl) badgeEl.innerText = 'Dozenten-Zuweisung'; if (userAssignedCourses.length === 0) { @@ -1804,7 +1823,7 @@
`; @@ -1819,7 +1838,7 @@ container.style.display = 'block'; if (titleEl) { - titleEl.innerText = `📖 Lernfelder im ${year}. Ausbildungsjahr (${prof.shortName})`; + titleEl.innerText = `Lernfelder im ${year}. Ausbildungsjahr (${prof.shortName})`; } if (badgeEl) { badgeEl.innerText = year === 2 ? 'IHK AP1 Prüfungsrelevant' : (year === 3 ? 'IHK AP2 Fachvertiefung' : 'Kernqualifikationen'); @@ -1887,7 +1906,7 @@ const user = window.AUTH ? window.AUTH.getUser() : null; if (user) { const nameStr = user.name || user.email.split('@')[0]; - document.getElementById('nav-auth-user').innerText = `👤 ${nameStr}`; + document.getElementById('nav-auth-user').innerText = nameStr; document.getElementById('dash-greeting-name').innerText = nameStr; const roleEl = document.getElementById('nav-auth-role'); if (roleEl) { @@ -1977,7 +1996,7 @@ const streak = user.streak_days || 1; document.getElementById('stat-user-xp').innerText = xp; document.getElementById('stat-user-level').innerText = level; - document.getElementById('stat-user-streak').innerText = `${streak} 🔥`; + document.getElementById('stat-user-streak').innerText = `${streak} Tag(e)`; } } diff --git a/datenschutz.html b/datenschutz.html index fcd0fda..724c766 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -27,19 +27,19 @@
- - + + @@ -49,15 +49,15 @@ diff --git a/impressum.html b/impressum.html index a656c81..31358ec 100644 --- a/impressum.html +++ b/impressum.html @@ -27,19 +27,19 @@
- - + + @@ -49,15 +49,15 @@ diff --git a/index.html b/index.html index 933df3c..ce30269 100644 --- a/index.html +++ b/index.html @@ -242,11 +242,10 @@ @@ -259,25 +258,25 @@
IT-Praxisportal - Alpha + Aus- & Weiterbildung
- - + + @@ -289,26 +288,26 @@ @@ -316,9 +315,9 @@
- ⚡ Interaktive Lern- & Prüfungsvorbereitungs-Plattform für IT-Berufe + Berufliche Bildung & Prüfungsvorbereitung • - 100% Kostenlos + Fachinformatiker & IT-Berufe

Echte IT-Praxis statt trockener Theorie.

@@ -326,13 +325,13 @@
- 📖 Was ist im Account enthalten? ↓ + Lehrkonzept ansehen - - 🎓 IHK AP1 & AP2 Prüfungstrainer + + IHK AP1 & AP2 Prüfungstrainer
@@ -378,7 +377,7 @@
Zentraler Lernbereich -

📊 Dein persönliches Kurs-Dashboard

+

Dein persönliches Kurs-Dashboard

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.

@@ -386,7 +385,7 @@
@@ -595,7 +594,7 @@
🎯 Bereit zur Kurswahl? Nach dem Login stehen alle 13 Spezialkurse im Dashboard zur freien Verfügung.
-
@@ -606,29 +605,29 @@
Offizieller Prüfungsstandard -

🎓 IHK Prüfungstrainer AP1 & AP2

+

IHK Prüfungstrainer AP1 & AP2

Realistische Prüfungssimulation nach der bundeseinheitlichen Ausbildungsordnung (AO 2020) für Fachinformatiker aller Fachrichtungen (FIAE, FISI, FIDP, FITD).

-

📘 AP1: IT-Arbeitsplatz & Basissysteme

+

AP1: IT-Arbeitsplatz & Basissysteme

Gemeinsame Kernqualifikationen der Lernfelder 1–8: Verträge, Ergonomie, IPv4/IPv6 Subnetting, BSI-Schutzbedarf, relationales SQL & Trace-Tabellen.

✓ 90-Minuten Probeprüfung mit automatischem Notenschlüssel
-

📕 AP2: Fachqualifikationen & WiSo

+

AP2: Fachqualifikationen & WiSo

Spezifische Lernfelder 9–12: VLANs & Routing, Active Directory GPO, RAID & SAN-Speicher, Containerisierung, WiSo-Kompaktfragen & 40h-Projektarbeits-Leitfaden.

✓ Inklusive Leitfaden für Fachgespräch & Präsentation
-

⚡ Interaktive Drill-Trainer

+

Interaktive Drill-Trainer

Blitzschnelles Rechnen: Dynamischer Subnetting-Generator mit Live-Punktevergabe, schrittweise Trace-Tabellen-Simulation und relationale Abfrage-Validierung.

✓ Unbegrenzt wiederholbare Zufallsaufgaben
@@ -640,7 +639,7 @@
0 Min. Setup • Direkt im Browser -

💻 Monaco Web-IDE: Coden wie ein Profi

+

Monaco Web-IDE: Professionelle Entwicklung im Browser

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.

@@ -654,7 +653,7 @@
@@ -698,7 +697,7 @@
-

🛠️ Warum IT-Praxisportal?

+

Warum IT-Praxisportal?

Didaktisch durchdacht, technisch modern und konsequent praxisorientiert.

@@ -731,7 +730,7 @@
-

👥 Für wen ist das IT-Praxisportal?

+

Für wen ist das IT-Praxisportal?

Entwickelt von IHK-Dozenten und erfahrenen Software-Architekten.

@@ -764,7 +763,7 @@