21a844cb8a
A previous `git pull --rebase origin main` dropped 177 local commits,
losing 3400+ files across admin-v2, backend, studio-v2, website,
klausur-service, and many other services. The partial restore attempt
(660295e2) only recovered some files.
This commit restores all missing files from pre-rebase ref 98933f5e
while preserving post-rebase additions (night-scheduler, night-mode UI,
NightModeWidget dashboard integration).
Restored features include:
- AI Module Sidebar (FAB), OCR Labeling, OCR Compare
- GPU Dashboard, RAG Pipeline, Magic Help
- Klausur-Korrektur (8 files), Abitur-Archiv (5+ files)
- Companion, Zeugnisse-Crawler, Screen Flow
- Full backend, studio-v2, website, klausur-service
- All compliance SDKs, agent-core, voice-service
- CI/CD configs, documentation, scripts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
321 lines
11 KiB
Python
321 lines
11 KiB
Python
"""
|
|
Base Component - CSS Variables, Base Styles, Theme Toggle
|
|
"""
|
|
|
|
def get_base_css() -> str:
|
|
"""CSS für Base Styles (Variables, Scrollbar, Layout) zurückgeben"""
|
|
return """
|
|
/* ==========================================
|
|
DARK MODE (Default) - Original Design
|
|
========================================== */
|
|
:root {
|
|
--bp-primary: #0f766e;
|
|
--bp-primary-soft: #ccfbf1;
|
|
--bp-bg: #020617;
|
|
--bp-surface: #020617;
|
|
--bp-surface-elevated: rgba(15,23,42,0.9);
|
|
--bp-border: #1f2937;
|
|
--bp-border-subtle: rgba(148,163,184,0.25);
|
|
--bp-accent: #22c55e;
|
|
--bp-accent-soft: rgba(34,197,94,0.2);
|
|
--bp-text: #e5e7eb;
|
|
--bp-text-muted: #9ca3af;
|
|
--bp-danger: #ef4444;
|
|
--bp-gradient-bg: radial-gradient(circle at top left, #1f2937 0, #020617 50%, #000 100%);
|
|
--bp-gradient-surface: radial-gradient(circle at top left, rgba(15,23,42,0.9) 0, #020617 50%, #000 100%);
|
|
--bp-gradient-sidebar: radial-gradient(circle at top, #020617 0, #020617 40%, #000 100%);
|
|
--bp-gradient-topbar: linear-gradient(to right, rgba(15,23,42,0.9), rgba(15,23,42,0.6));
|
|
--bp-btn-primary-bg: linear-gradient(to right, var(--bp-primary), #15803d);
|
|
--bp-btn-primary-hover: linear-gradient(to right, #0f766e, #166534);
|
|
--bp-card-bg: var(--bp-gradient-surface);
|
|
--bp-input-bg: rgba(255,255,255,0.05);
|
|
--bp-scrollbar-track: rgba(15,23,42,0.5);
|
|
--bp-scrollbar-thumb: rgba(148,163,184,0.5);
|
|
}
|
|
|
|
/* ==========================================
|
|
LIGHT MODE - Website Design
|
|
Farben aus BreakPilot Website:
|
|
- Primary: Sky Blue #0ea5e9 (Modern, Vertrauen)
|
|
- Accent: Fuchsia #d946ef (Kreativ, Energie)
|
|
- Text: Slate #0f172a (Klarheit)
|
|
- Background: White/Slate-50 (Clean, Professional)
|
|
========================================== */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
[data-theme="light"] {
|
|
--bp-primary: #0ea5e9;
|
|
--bp-primary-soft: rgba(14, 165, 233, 0.1);
|
|
--bp-bg: #f8fafc;
|
|
--bp-surface: #FFFFFF;
|
|
--bp-surface-elevated: #FFFFFF;
|
|
--bp-border: #e2e8f0;
|
|
--bp-border-subtle: rgba(14, 165, 233, 0.2);
|
|
--bp-accent: #d946ef;
|
|
--bp-accent-soft: rgba(217, 70, 239, 0.15);
|
|
--bp-text: #0f172a;
|
|
--bp-text-muted: #64748b;
|
|
--bp-danger: #ef4444;
|
|
--bp-gradient-bg: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
|
|
--bp-gradient-surface: linear-gradient(145deg, #FFFFFF 0%, #f8fafc 100%);
|
|
--bp-gradient-sidebar: linear-gradient(180deg, #FFFFFF 0%, #f1f5f9 100%);
|
|
--bp-gradient-topbar: linear-gradient(to right, #FFFFFF, #f8fafc);
|
|
--bp-btn-primary-bg: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
|
|
--bp-btn-primary-hover: linear-gradient(135deg, #0284c7 0%, #c026d3 100%);
|
|
--bp-card-bg: linear-gradient(145deg, #FFFFFF 0%, #f8fafc 100%);
|
|
--bp-input-bg: #FFFFFF;
|
|
--bp-scrollbar-track: rgba(0,0,0,0.05);
|
|
--bp-scrollbar-thumb: rgba(14, 165, 233, 0.3);
|
|
--bp-gold: #eab308;
|
|
}
|
|
|
|
[data-theme="light"] body {
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bp-scrollbar-track);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--bp-scrollbar-thumb);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--bp-scrollbar-thumb);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
|
|
background: var(--bp-gradient-bg);
|
|
color: var(--bp-text);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: background 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.app-root {
|
|
display: grid;
|
|
grid-template-rows: 56px 1fr 32px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
border-bottom: 1px solid var(--bp-border-subtle);
|
|
backdrop-filter: blur(18px);
|
|
background: var(--bp-gradient-topbar);
|
|
transition: background 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 999px;
|
|
border: 2px solid var(--bp-accent);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
color: var(--bp-accent);
|
|
}
|
|
|
|
.brand-text-main {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.brand-text-sub {
|
|
font-size: 12px;
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
.top-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.top-nav-item {
|
|
cursor: pointer;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
color: var(--bp-text-muted);
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.top-nav-item.active {
|
|
color: var(--bp-primary);
|
|
border-color: var(--bp-accent-soft);
|
|
background: var(--bp-surface-elevated);
|
|
}
|
|
|
|
[data-theme="light"] .top-nav-item.active {
|
|
color: var(--bp-primary);
|
|
background: var(--bp-primary-soft);
|
|
border-color: var(--bp-primary);
|
|
}
|
|
|
|
.top-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pill {
|
|
font-size: 11px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--bp-border-subtle);
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
/* Theme Toggle Button */
|
|
.theme-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--bp-border-subtle);
|
|
background: var(--bp-surface-elevated);
|
|
color: var(--bp-text-muted);
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
border-color: var(--bp-primary);
|
|
color: var(--bp-primary);
|
|
}
|
|
|
|
.theme-toggle-icon {
|
|
font-size: 14px;
|
|
}
|
|
"""
|
|
|
|
|
|
def get_base_html() -> str:
|
|
"""HTML für Base Layout zurückgeben"""
|
|
return """
|
|
<div class="app-root">
|
|
<div class="topbar">
|
|
<div class="brand">
|
|
<div class="brand-logo">BP</div>
|
|
<div>
|
|
<div class="brand-text-main">BreakPilot</div>
|
|
<div class="brand-text-sub" data-i18n="brand_sub">Studio</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-nav">
|
|
<span class="top-nav-item" data-i18n="nav_compare">Arbeitsblätter</span>
|
|
<span class="top-nav-item" data-i18n="nav_tiles">Lern-Kacheln</span>
|
|
</div>
|
|
<div class="top-actions">
|
|
<span class="pill" data-i18n="mvp_local">MVP · Lokal auf deinem Mac</span>
|
|
<button id="theme-toggle" class="theme-toggle">
|
|
<span id="theme-icon" class="theme-toggle-icon">🌙</span>
|
|
<span id="theme-label">Dark</span>
|
|
</button>
|
|
<button id="auth-toggle" class="pill" style="cursor: pointer;" data-i18n="login">Login / Anmeldung</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content area will be inserted here -->
|
|
<div class="main-content"></div>
|
|
|
|
<div class="footer">
|
|
<span>© 2025 BreakPilot</span>
|
|
<span style="display: flex; gap: 12px; font-size: 11px;">
|
|
<a id="open-imprint" style="cursor: pointer; color: var(--bp-text-muted);">Impressum</a>
|
|
<a id="open-terms" style="cursor: pointer; color: var(--bp-text-muted);">AGB</a>
|
|
<a id="open-privacy" style="cursor: pointer; color: var(--bp-text-muted);">Datenschutz</a>
|
|
<a id="open-cookies" style="cursor: pointer; color: var(--bp-text-muted);">Cookies</a>
|
|
<a id="open-community" style="cursor: pointer; color: var(--bp-text-muted);">Community</a>
|
|
<a id="open-gdpr" style="cursor: pointer; color: var(--bp-text-muted);">Deine Rechte</a>
|
|
<a id="open-settings" style="cursor: pointer; color: var(--bp-text-muted);">Einstellungen</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
"""
|
|
|
|
|
|
def get_base_js() -> str:
|
|
"""JavaScript für Theme Toggle zurückgeben"""
|
|
return """
|
|
// ==========================================
|
|
// THEME TOGGLE (Dark/Light Mode)
|
|
// ==========================================
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('bp-theme') || 'dark';
|
|
if (savedTheme === 'light') {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
}
|
|
})();
|
|
|
|
function initThemeToggle() {
|
|
const toggle = document.getElementById('theme-toggle');
|
|
const icon = document.getElementById('theme-icon');
|
|
const label = document.getElementById('theme-label');
|
|
|
|
function updateToggleUI(theme) {
|
|
if (theme === 'light') {
|
|
icon.textContent = '☀️';
|
|
label.textContent = 'Light';
|
|
} else {
|
|
icon.textContent = '🌙';
|
|
label.textContent = 'Dark';
|
|
}
|
|
}
|
|
|
|
// Initialize UI based on current theme
|
|
const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
|
|
updateToggleUI(currentTheme);
|
|
|
|
toggle.addEventListener('click', function() {
|
|
const current = document.documentElement.getAttribute('data-theme') || 'dark';
|
|
const newTheme = current === 'dark' ? 'light' : 'dark';
|
|
|
|
if (newTheme === 'light') {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
} else {
|
|
document.documentElement.removeAttribute('data-theme');
|
|
}
|
|
|
|
localStorage.setItem('bp-theme', newTheme);
|
|
updateToggleUI(newTheme);
|
|
});
|
|
}
|
|
"""
|