bfdaf63ba9
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>
1238 lines
21 KiB
Python
1238 lines
21 KiB
Python
"""
|
|
School Module - Shared CSS Styles
|
|
BreakPilot Schulverwaltung styling
|
|
"""
|
|
|
|
# Shared CSS Variables and Base Styles
|
|
SCHOOL_BASE_STYLES = """
|
|
:root {
|
|
--bp-primary: #6C1B1B;
|
|
--bp-primary-soft: rgba(108, 27, 27, 0.1);
|
|
--bp-bg: #F8F8F8;
|
|
--bp-surface: #FFFFFF;
|
|
--bp-surface-elevated: #FFFFFF;
|
|
--bp-border: #E0E0E0;
|
|
--bp-border-subtle: rgba(108, 27, 27, 0.15);
|
|
--bp-accent: #5ABF60;
|
|
--bp-accent-soft: rgba(90, 191, 96, 0.15);
|
|
--bp-text: #4A4A4A;
|
|
--bp-text-muted: #6B6B6B;
|
|
--bp-danger: #ef4444;
|
|
--bp-warning: #F1C40F;
|
|
--bp-info: #3b82f6;
|
|
--bp-gold: #F1C40F;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
|
|
background: var(--bp-bg);
|
|
color: var(--bp-text);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Layout */
|
|
.app-container {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 260px;
|
|
background: var(--bp-surface);
|
|
border-right: 1px solid var(--bp-border);
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--bp-primary);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: var(--bp-primary);
|
|
}
|
|
|
|
.nav-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.nav-section-title {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
color: var(--bp-text-muted);
|
|
margin-bottom: 0.75rem;
|
|
padding-left: 0.75rem;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
color: var(--bp-text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--bp-primary-soft);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: var(--bp-primary);
|
|
color: white;
|
|
}
|
|
|
|
.nav-item svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 2rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.page-subtitle {
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
background: var(--bp-surface);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--bp-border);
|
|
padding: 1.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card-icon.primary { background: var(--bp-primary-soft); color: var(--bp-primary); }
|
|
.card-icon.accent { background: var(--bp-accent-soft); color: var(--bp-accent); }
|
|
.card-icon.warning { background: rgba(241, 196, 15, 0.15); color: var(--bp-warning); }
|
|
.card-icon.info { background: rgba(59, 130, 246, 0.15); color: var(--bp-info); }
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--bp-primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #8B2323;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bp-bg);
|
|
color: var(--bp-text);
|
|
border: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--bp-border);
|
|
}
|
|
|
|
.btn-success {
|
|
background: var(--bp-accent);
|
|
color: white;
|
|
}
|
|
|
|
/* Tables */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th, td {
|
|
padding: 1rem 1.5rem;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background: var(--bp-bg);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
tr:not(:last-child) td {
|
|
border-bottom: 1px solid var(--bp-border);
|
|
}
|
|
|
|
tr:hover td {
|
|
background: var(--bp-bg);
|
|
}
|
|
|
|
/* Status Badges */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 100px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.badge.present { background: var(--bp-accent-soft); color: var(--bp-accent); }
|
|
.badge.absent { background: rgba(239, 68, 68, 0.15); color: var(--bp-danger); }
|
|
.badge.late { background: rgba(241, 196, 15, 0.15); color: #b8860b; }
|
|
.badge.pending { background: rgba(59, 130, 246, 0.15); color: var(--bp-info); }
|
|
|
|
/* Controls */
|
|
.controls {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.select-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
select {
|
|
padding: 0.625rem 2.5rem 0.625rem 1rem;
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: 8px;
|
|
background: var(--bp-surface);
|
|
font-size: 0.875rem;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
min-width: 180px;
|
|
}
|
|
|
|
.select-wrapper::after {
|
|
content: '▼';
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 0.75rem;
|
|
color: var(--bp-text-muted);
|
|
pointer-events: none;
|
|
}
|
|
|
|
input[type="date"] {
|
|
padding: 0.625rem 1rem;
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: 8px;
|
|
background: var(--bp-surface);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* User Info */
|
|
.user-info {
|
|
margin-top: auto;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.user-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
border-radius: 8px;
|
|
background: var(--bp-bg);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: var(--bp-primary);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.user-name {
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.user-role {
|
|
font-size: 0.75rem;
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
/* Student Info */
|
|
.student-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.student-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: var(--bp-primary-soft);
|
|
color: var(--bp-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.student-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.student-number {
|
|
font-size: 0.75rem;
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
/* Toast */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 2rem;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 10px;
|
|
background: var(--bp-text);
|
|
color: white;
|
|
font-weight: 500;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
transform: translateY(100px);
|
|
opacity: 0;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.toast.show {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.toast.success {
|
|
background: var(--bp-accent);
|
|
}
|
|
|
|
/* Modal */
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-overlay.show {
|
|
display: flex;
|
|
}
|
|
|
|
.modal {
|
|
background: var(--bp-surface);
|
|
border-radius: 16px;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: flex-end;
|
|
padding: 1.5rem;
|
|
border-top: 1px solid var(--bp-border);
|
|
}
|
|
|
|
/* Form Elements */
|
|
.form-group {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-input, .form-select, .form-textarea {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-input:focus, .form-select:focus, .form-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--bp-primary);
|
|
}
|
|
|
|
/* Grade Colors */
|
|
.grade { font-weight: 600; }
|
|
.grade-1 { color: #16a34a; }
|
|
.grade-2 { color: #22c55e; }
|
|
.grade-3 { color: #f59e0b; }
|
|
.grade-4 { color: #f97316; }
|
|
.grade-5 { color: #ef4444; }
|
|
.grade-6 { color: #dc2626; }
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
position: fixed;
|
|
left: -260px;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
transition: left 0.3s;
|
|
}
|
|
|
|
.sidebar.open {
|
|
left: 0;
|
|
}
|
|
|
|
.controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
"""
|
|
|
|
|
|
# Dashboard-specific styles
|
|
DASHBOARD_STYLES = """
|
|
/* Dashboard Grid */
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--bp-text-muted);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Quick Actions */
|
|
.quick-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.quick-action {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1.25rem;
|
|
background: var(--bp-surface);
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
color: var(--bp-text);
|
|
}
|
|
|
|
.quick-action:hover {
|
|
border-color: var(--bp-primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.quick-action-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--bp-primary-soft);
|
|
color: var(--bp-primary);
|
|
}
|
|
|
|
.quick-action-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Table Container */
|
|
.table-container {
|
|
background: var(--bp-surface);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--bp-border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.table-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
"""
|
|
|
|
|
|
# Attendance-specific styles
|
|
ATTENDANCE_STYLES = """
|
|
/* Status Toggle Buttons */
|
|
.status-toggle {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.status-btn {
|
|
padding: 0.375rem 0.75rem;
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: 6px;
|
|
background: var(--bp-surface);
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.status-btn:hover {
|
|
border-color: var(--bp-primary);
|
|
}
|
|
|
|
.status-btn.present.active {
|
|
background: var(--bp-accent);
|
|
color: white;
|
|
border-color: var(--bp-accent);
|
|
}
|
|
|
|
.status-btn.absent.active {
|
|
background: var(--bp-danger);
|
|
color: white;
|
|
border-color: var(--bp-danger);
|
|
}
|
|
|
|
.status-btn.late.active {
|
|
background: var(--bp-warning);
|
|
color: #333;
|
|
border-color: var(--bp-warning);
|
|
}
|
|
|
|
.status-btn.excused.active {
|
|
background: var(--bp-info);
|
|
color: white;
|
|
border-color: var(--bp-info);
|
|
}
|
|
|
|
/* Notes Input */
|
|
.notes-input {
|
|
padding: 0.375rem 0.625rem;
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
width: 100%;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.notes-input:focus {
|
|
outline: none;
|
|
border-color: var(--bp-primary);
|
|
}
|
|
|
|
/* Stats Bar */
|
|
.stats-bar {
|
|
display: flex;
|
|
gap: 2rem;
|
|
padding: 1rem 1.5rem;
|
|
background: var(--bp-bg);
|
|
border-radius: 10px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.stat-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.stat-dot.present { background: var(--bp-accent); }
|
|
.stat-dot.absent { background: var(--bp-danger); }
|
|
.stat-dot.late { background: var(--bp-warning); }
|
|
.stat-dot.excused { background: var(--bp-info); }
|
|
|
|
.stat-value {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--bp-text-muted);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-bar {
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
"""
|
|
|
|
|
|
# Grades-specific styles
|
|
GRADES_STYLES = """
|
|
/* Grade Badge */
|
|
.grade-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
font-weight: 700;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.grade-1 { background: #dcfce7; color: #16a34a; }
|
|
.grade-2 { background: #d1fae5; color: #059669; }
|
|
.grade-3 { background: #fef3c7; color: #d97706; }
|
|
.grade-4 { background: #fed7aa; color: #ea580c; }
|
|
.grade-5 { background: #fee2e2; color: #dc2626; }
|
|
.grade-6 { background: #fecaca; color: #991b1b; }
|
|
|
|
.average {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* Grade Buttons in Modal */
|
|
.grade-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.grade-btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 2px solid var(--bp-border);
|
|
border-radius: 10px;
|
|
background: var(--bp-surface);
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.grade-btn:hover {
|
|
border-color: var(--bp-primary);
|
|
}
|
|
|
|
.grade-btn.selected {
|
|
background: var(--bp-primary);
|
|
color: white;
|
|
border-color: var(--bp-primary);
|
|
}
|
|
|
|
/* Stats Row */
|
|
.stats-row {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.stat-card {
|
|
flex: 1;
|
|
background: var(--bp-surface);
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: 12px;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.stat-card-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-card-label {
|
|
color: var(--bp-text-muted);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Distribution Bar */
|
|
.distribution-bar {
|
|
display: flex;
|
|
height: 24px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.distribution-segment {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: white;
|
|
}
|
|
|
|
.dist-1 { background: #16a34a; }
|
|
.dist-2 { background: #22c55e; }
|
|
.dist-3 { background: #f59e0b; }
|
|
.dist-4 { background: #f97316; }
|
|
.dist-5 { background: #ef4444; }
|
|
.dist-6 { background: #dc2626; }
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-row {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
"""
|
|
|
|
|
|
# Timetable-specific styles
|
|
TIMETABLE_STYLES = """
|
|
/* Week Navigation */
|
|
.week-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
background: var(--bp-surface);
|
|
padding: 0.5rem;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.week-nav-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: var(--bp-bg);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.week-nav-btn:hover {
|
|
background: var(--bp-primary-soft);
|
|
}
|
|
|
|
.week-label {
|
|
font-weight: 600;
|
|
min-width: 200px;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-today {
|
|
background: var(--bp-accent);
|
|
color: white;
|
|
}
|
|
|
|
/* Timetable Grid */
|
|
.timetable-container {
|
|
background: var(--bp-surface);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--bp-border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timetable {
|
|
display: grid;
|
|
grid-template-columns: 80px repeat(5, 1fr);
|
|
width: 100%;
|
|
}
|
|
|
|
.timetable-header {
|
|
display: contents;
|
|
}
|
|
|
|
.timetable-header > div {
|
|
padding: 1rem;
|
|
background: var(--bp-bg);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.timetable-row {
|
|
display: contents;
|
|
}
|
|
|
|
.time-cell {
|
|
padding: 1rem 0.5rem;
|
|
background: var(--bp-bg);
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
color: var(--bp-text-muted);
|
|
border-bottom: 1px solid var(--bp-border);
|
|
border-right: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.time-cell .lesson-num {
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
color: var(--bp-text);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.lesson-cell {
|
|
padding: 0.5rem;
|
|
border-bottom: 1px solid var(--bp-border);
|
|
border-right: 1px solid var(--bp-border);
|
|
min-height: 80px;
|
|
}
|
|
|
|
.lesson-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Lesson Card */
|
|
.lesson-card {
|
|
height: 100%;
|
|
padding: 0.75rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.lesson-card:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.lesson-card.math { background: #e0f2fe; border-left: 3px solid #0ea5e9; }
|
|
.lesson-card.german { background: #fef3c7; border-left: 3px solid #f59e0b; }
|
|
.lesson-card.english { background: #dbeafe; border-left: 3px solid #3b82f6; }
|
|
.lesson-card.physics { background: #f3e8ff; border-left: 3px solid #a855f7; }
|
|
.lesson-card.biology { background: #dcfce7; border-left: 3px solid #22c55e; }
|
|
.lesson-card.history { background: #fee2e2; border-left: 3px solid #ef4444; }
|
|
.lesson-card.sport { background: #ffedd5; border-left: 3px solid #f97316; }
|
|
.lesson-card.music { background: #fce7f3; border-left: 3px solid #ec4899; }
|
|
.lesson-card.art { background: #e0e7ff; border-left: 3px solid #6366f1; }
|
|
|
|
.lesson-card.substitution {
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
#fef3c7,
|
|
#fef3c7 10px,
|
|
#fde68a 10px,
|
|
#fde68a 20px
|
|
);
|
|
border-left: 3px solid var(--bp-warning);
|
|
}
|
|
|
|
.lesson-card.cancelled {
|
|
background: #fee2e2;
|
|
border-left: 3px solid var(--bp-danger);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.lesson-card.cancelled .lesson-subject {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.lesson-subject {
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.lesson-teacher {
|
|
font-size: 0.75rem;
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
.lesson-room {
|
|
font-size: 0.75rem;
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
.lesson-badge {
|
|
display: inline-block;
|
|
font-size: 0.625rem;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 4px;
|
|
margin-top: 0.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.badge-substitution {
|
|
background: var(--bp-warning);
|
|
color: #333;
|
|
}
|
|
|
|
.badge-cancelled {
|
|
background: var(--bp-danger);
|
|
color: white;
|
|
}
|
|
|
|
/* Legend */
|
|
.legend {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
margin-top: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Modal Info */
|
|
.modal-info {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.modal-info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.modal-info-label {
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
.modal-info-value {
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.timetable {
|
|
grid-template-columns: 60px repeat(5, 1fr);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.lesson-card {
|
|
padding: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.timetable {
|
|
grid-template-columns: 50px repeat(5, minmax(80px, 1fr));
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.week-nav {
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
"""
|
|
|
|
|
|
# Parent onboarding styles
|
|
ONBOARDING_STYLES = """
|
|
body {
|
|
font-family: 'Manrope', system-ui, sans-serif;
|
|
background: var(--bp-bg);
|
|
color: var(--bp-text);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.onboarding-container {
|
|
background: var(--bp-surface);
|
|
border-radius: 16px;
|
|
padding: 2.5rem;
|
|
max-width: 480px;
|
|
width: 100%;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 2rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--bp-primary);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--bp-primary);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
color: var(--bp-text-muted);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.info-card {
|
|
background: var(--bp-bg);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
color: var(--bp-text-muted);
|
|
}
|
|
|
|
.info-value {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.checkbox-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.checkbox-item input {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.checkbox-label {
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.checkbox-label a {
|
|
color: var(--bp-primary);
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--bp-primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #8B2323;
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
background: var(--bp-border);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.error {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: #dc2626;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.success {
|
|
background: rgba(90, 191, 96, 0.1);
|
|
color: var(--bp-accent);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
#loading {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid var(--bp-border);
|
|
border-top-color: var(--bp-primary);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 1rem;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
"""
|