diff --git a/assets/app_auth.js b/assets/app_auth.js index c6a0ca6..74b9ad7 100644 --- a/assets/app_auth.js +++ b/assets/app_auth.js @@ -342,15 +342,16 @@ }; } if (registerBtn) { - registerBtn.innerText = '💻 Zum Lernbereich'; + registerBtn.innerText = '💻 Zum Kurs-Dashboard'; registerBtn.style.background = '#10b981'; registerBtn.onclick = () => { window.location.href = 'dashboard.html'; }; } if (heroPrimaryCta) { - heroPrimaryCta.innerHTML = '▶ Direkt zum Lernbereich Dashboard'; + heroPrimaryCta.innerHTML = '▶ Zum Dashboard & Kurse wählen →'; heroPrimaryCta.onclick = (e) => { + e.preventDefault(); window.location.href = 'dashboard.html'; }; } @@ -361,6 +362,16 @@ if (adminLink) { adminLink.style.display = this.user.role === 'admin' ? 'inline-flex' : 'none'; } + + // Alle allgemeinen Landing-Page Action Buttons anpassen + document.querySelectorAll('.landing-cta-btn').forEach(btn => { + btn.innerHTML = '▶ Zum Dashboard & Kurse wählen →'; + btn.style.background = '#10b981'; + btn.onclick = (e) => { + e.preventDefault(); + window.location.href = 'dashboard.html'; + }; + }); } else { if (userSpan) userSpan.style.display = 'none'; if (loginBtn) { @@ -385,13 +396,20 @@ }; } if (teacherLink) teacherLink.style.display = 'none'; + + // 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.style.background = '#0284c7'; + btn.onclick = (e) => { + e.preventDefault(); + window.openAuthModal('register', { allowClose: true }); + }; + }); } - // Aktualisiere Curriculum-Aktions-Buttons auf der Landingpage + // Aktualisiere ggf. vorhandene Curriculum-Aktions-Buttons document.querySelectorAll('.portal-card-action-btn').forEach(btn => { - const courseId = btn.getAttribute('data-course-id') || 'python'; - const targetUrl = btn.getAttribute('data-course-url') || `workspace.html?course=${courseId}`; - if (loggedIn) { btn.innerHTML = '▶ Im Lernbereich öffnen →'; btn.classList.remove('locked'); @@ -406,7 +424,7 @@ window.openAuthModal('register', { allowClose: true, title: '🔒 Lehrplan freischalten', - message: 'Erstelle einen kostenlosen Account in unter 30 Sekunden, um sofort vollen Zugriff auf diesen Kurs und alle 216 Module im Lernbereich zu erhalten.' + message: 'Erstelle einen kostenlosen Account in unter 30 Sekunden, um sofort vollen Zugriff auf alle Kurse und Module im Lernbereich zu erhalten.' }); }; } diff --git a/index.html b/index.html index d1baf2d..5b17316 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + @@ -38,82 +38,188 @@ border: 1px solid #fed7aa; } - /* Curriculum Cards Style */ - .curriculum-card { - background: #ffffff; - border: 1px solid #e2e8f0; - border-radius: 16px; - padding: 24px; - display: flex; - flex-direction: column; - justify-content: space-between; - transition: all 0.2s ease; - box-shadow: var(--shadow-sm); - } - .curriculum-card:hover { - border-color: #38bdf8; - transform: translateY(-2px); - box-shadow: var(--shadow-md); - } - .curriculum-topics { - list-style: none; - padding: 0; - margin: 14px 0 18px 0; - font-size: 0.86rem; - color: #475569; - display: flex; - flex-direction: column; - gap: 6px; - } - .curriculum-topics li { - display: flex; - align-items: flex-start; - gap: 8px; - line-height: 1.4; - } - .curriculum-topics li::before { - content: "•"; - color: #0284c7; - font-weight: bold; - font-size: 1.1rem; - line-height: 1; - } - - .curriculum-cta-btn { - width: 100%; - background: #0284c7; - color: white; - border: none; - padding: 10px 16px; - border-radius: 8px; - font-size: 0.86rem; - font-weight: 700; - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - text-decoration: none; - transition: all 0.15s ease; - } - .curriculum-cta-btn:hover { - background: #0369a1; - transform: translateY(-1px); - } - /* Logged In Welcome Banner */ .logged-in-banner { background: linear-gradient(90deg, #0284c7, #10b981); color: white; - padding: 10px 18px; - font-size: 0.88rem; + padding: 12px 20px; + font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; - gap: 10px; - box-shadow: 0 2px 8px rgba(0,0,0,0.15); + gap: 12px; + box-shadow: 0 2px 10px rgba(0,0,0,0.15); + } + + /* Value Pillars Grid */ + .value-pillars-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 24px; + margin: 32px 0 48px 0; + } + .pillar-card { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 16px; + padding: 28px; + display: flex; + flex-direction: column; + justify-content: space-between; + box-shadow: var(--shadow-sm); + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; + } + .pillar-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); + border-color: #38bdf8; + } + .pillar-icon-box { + width: 48px; + height: 48px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + margin-bottom: 16px; + } + .pillar-title { + font-size: 1.25rem; + font-weight: 800; + color: #0f172a; + margin: 0 0 8px 0; + } + .pillar-desc { + font-size: 0.92rem; + color: #475569; + line-height: 1.6; + margin: 0 0 16px 0; + } + .pillar-features { + list-style: none; + padding: 0; + margin: 0 0 20px 0; + display: flex; + flex-direction: column; + gap: 8px; + font-size: 0.86rem; + color: #334155; + } + .pillar-features li { + display: flex; + align-items: flex-start; + gap: 8px; + line-height: 1.45; + } + .pillar-features li::before { + content: "✓"; + color: #10b981; + font-weight: 800; + font-size: 0.95rem; + } + + /* Dashboard Preview Banner */ + .dashboard-hero-card { + background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 20px; + padding: 36px 32px; + color: #f8fafc; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); + margin: 40px 0 56px 0; + } + .dashboard-mockup-bar { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 16px 20px; + margin-top: 24px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 16px; + } + .mockup-item { + display: flex; + align-items: center; + gap: 12px; + } + .mockup-icon { + font-size: 1.6rem; + } + .mockup-label { + font-size: 0.76rem; + color: #94a3b8; + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: 700; + } + .mockup-value { + font-size: 1rem; + font-weight: 800; + color: #f8fafc; + } + + /* Competency Domains */ + .domain-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 16px; + margin: 20px 0; + } + .domain-card { + background: #f8fafc; + border: 1px solid #e2e8f0; + border-radius: 12px; + padding: 18px; + transition: all 0.15s ease; + } + .domain-card:hover { + background: #ffffff; + border-color: #0284c7; + transform: translateY(-2px); + box-shadow: var(--shadow-sm); + } + .domain-title { + font-weight: 800; + font-size: 0.95rem; + color: #0f172a; + margin-bottom: 6px; + display: flex; + align-items: center; + gap: 8px; + } + .domain-desc { + font-size: 0.82rem; + color: #64748b; + line-height: 1.45; + margin: 0; + } + + /* Steps 1-2-3 */ + .steps-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 20px; + margin: 32px 0 48px 0; + } + .step-card { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 14px; + padding: 24px; + position: relative; + } + .step-number { + position: absolute; + top: 16px; + right: 18px; + font-size: 2rem; + font-weight: 900; + color: #e2e8f0; + line-height: 1; } @@ -121,12 +227,12 @@