diff --git a/data/app_ui_strings.json b/data/app_ui_strings.json
index abc8411..aa95e5e 100644
--- a/data/app_ui_strings.json
+++ b/data/app_ui_strings.json
@@ -236,11 +236,9 @@
"upload_scoring_review_summary": "Coach: {band} · Summe {total}",
"upload_summary": "{qn} Fragebögen · {scores} Punkteprüfungen · {clients} Klienten",
"upload_success_message": "Hochladen: {count} erledigt.",
- "upload_success_questionnaires": "{count} Fragebogen/Fragebögen",
+ "upload_success_questionnaires": "{count} Fragebogen\/Fragebögen",
"upload_success_scoring_reviews": "{count} Punkteprüfung(en)",
"username_hint": "Benutzername",
- "year": "Jahr",
- "questionnaire_group_demographics": "Demografie test",
- "questionnaire_group_rhs": "Gesundheitsinterview"
+ "year": "Jahr"
}
}
diff --git a/website/css/style.css b/website/css/style.css
index 4e4d9e8..3a1c419 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -1,98 +1,99 @@
:root {
- color-scheme: dark;
- --bg: #0f1218;
- --surface: rgba(26, 31, 42, 0.94);
- --surface-raised: rgba(34, 40, 54, 0.9);
- --surface-hover: rgba(42, 49, 64, 0.92);
- --surface-muted: rgba(22, 27, 36, 0.82);
- --surface-input: rgba(34, 40, 54, 0.88);
- --primary: #3b82f6;
- --primary-hover: #60a5fa;
- --primary-subtle: rgba(59, 130, 246, 0.14);
- --primary-border: rgba(59, 130, 246, 0.35);
- --primary-text: #93c5fd;
- --danger: #f87171;
- --danger-hover: #fca5a5;
- --danger-subtle: rgba(248, 113, 113, 0.12);
- --danger-subtle-hover: rgba(248, 113, 113, 0.22);
- --danger-border: rgba(248, 113, 113, 0.45);
- --danger-text: #fca5a5;
- --danger-focus-ring: rgba(248, 113, 113, 0.35);
- --success: #4ade80;
- --warning: #fbbf24;
- --text: #e8edf4;
- --text-secondary: #94a3b8;
- --text-on-primary: #fff;
- --border: #2e3648;
+ color-scheme: light;
+ --bg: #eef2f7;
+ --surface: #ffffff;
+ --surface-raised: #f8fafc;
+ --surface-hover: #f1f5f9;
+ --surface-muted: #f8fafc;
+ --surface-input: #ffffff;
+ --surface-elevated: #f8fafc;
+ --primary: #2563eb;
+ --primary-hover: #1d4ed8;
+ --primary-subtle: rgba(37, 99, 235, 0.1);
+ --primary-border: rgba(37, 99, 235, 0.28);
+ --primary-text: #1d4ed8;
+ --danger: #dc2626;
+ --danger-hover: #b91c1c;
+ --danger-subtle: rgba(220, 38, 38, 0.08);
+ --danger-subtle-hover: rgba(220, 38, 38, 0.14);
+ --danger-border: rgba(220, 38, 38, 0.35);
+ --danger-text: #b91c1c;
+ --danger-focus-ring: rgba(220, 38, 38, 0.25);
+ --success: #16a34a;
+ --warning: #d97706;
+ --text: #0f172a;
+ --text-secondary: #64748b;
+ --text-on-primary: #ffffff;
+ --border: #e2e8f0;
--radius: 8px;
--radius-lg: 12px;
- --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
- --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.4);
- --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
- --focus-ring: rgba(59, 130, 246, 0.28);
+ --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
+ --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
+ --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85);
+ --focus-ring: rgba(37, 99, 235, 0.22);
--sidebar-width: 240px;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --table-header-bg: rgba(30, 36, 48, 0.97);
- --table-stripe-bg: rgba(30, 36, 48, 0.45);
- --row-hover-bg: rgba(37, 44, 58, 0.85);
- --sticky-shadow: rgba(0, 0, 0, 0.35);
- --atmosphere-blue: rgba(59, 130, 246, 0.11);
- --atmosphere-indigo: rgba(99, 102, 241, 0.07);
- --grid-line: rgba(148, 163, 184, 0.035);
- --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #4f6ef7 45%, #6366f1 100%);
- --accent-gradient-soft: linear-gradient(90deg, rgba(59, 130, 246, 0.5), rgba(99, 102, 241, 0.35));
- --accent-glow: 0 4px 20px rgba(59, 130, 246, 0.22);
- --shine-line: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.12), transparent);
+ --table-header-bg: #f1f5f9;
+ --table-stripe-bg: rgba(241, 245, 249, 0.85);
+ --row-hover-bg: #e8eef5;
+ --sticky-shadow: rgba(15, 23, 42, 0.08);
+ --atmosphere-blue: rgba(37, 99, 235, 0.09);
+ --atmosphere-indigo: rgba(79, 70, 229, 0.06);
+ --grid-line: rgba(100, 116, 139, 0.1);
+ --accent-gradient: linear-gradient(135deg, #2563eb 0%, #3b5bdb 45%, #4f46e5 100%);
+ --accent-gradient-soft: linear-gradient(90deg, rgba(37, 99, 235, 0.55), rgba(79, 70, 229, 0.4));
+ --accent-glow: 0 4px 18px rgba(37, 99, 235, 0.18);
+ --shine-line: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
/* Incomplete translation highlight */
- --trans-missing-bg: #1c222d;
- --trans-missing-bg-hover: #242b38;
- --trans-missing-border: #3d4a5c;
- --trans-missing-accent: #64748b;
- --trans-missing-placeholder: #64748b;
+ --trans-missing-bg: #fffbeb;
+ --trans-missing-bg-hover: #fef3c7;
+ --trans-missing-border: #fcd34d;
+ --trans-missing-accent: #d97706;
+ --trans-missing-placeholder: #92400e;
/* Status badges */
- --badge-draft-bg: #2a3140;
- --badge-draft-fg: #94a3b8;
- --badge-active-bg: rgba(74, 222, 128, 0.15);
- --badge-active-fg: #4ade80;
- --badge-archived-bg: rgba(251, 191, 36, 0.15);
- --badge-archived-fg: #fbbf24;
+ --badge-draft-bg: #f1f5f9;
+ --badge-draft-fg: #64748b;
+ --badge-active-bg: rgba(22, 163, 74, 0.12);
+ --badge-active-fg: #15803d;
+ --badge-archived-bg: rgba(217, 119, 6, 0.12);
+ --badge-archived-fg: #b45309;
--badge-in-progress-bg: var(--primary-subtle);
--badge-in-progress-fg: var(--primary-text);
--badge-pending-bg: var(--badge-draft-bg);
--badge-pending-fg: var(--badge-draft-fg);
- --badge-admin-bg: rgba(167, 139, 250, 0.18);
- --badge-admin-fg: #c4b5fd;
- --badge-supervisor-bg: rgba(244, 114, 182, 0.15);
- --badge-supervisor-fg: #f9a8d4;
- --badge-coach-bg: rgba(74, 222, 128, 0.12);
- --badge-coach-fg: #86efac;
+ --badge-admin-bg: rgba(109, 40, 217, 0.1);
+ --badge-admin-fg: #6d28d9;
+ --badge-supervisor-bg: rgba(190, 24, 93, 0.1);
+ --badge-supervisor-fg: #be185d;
+ --badge-coach-bg: rgba(22, 163, 74, 0.1);
+ --badge-coach-fg: #15803d;
--badge-you-bg: var(--primary-subtle);
--badge-you-fg: var(--primary-text);
- --badge-warn-bg: rgba(251, 191, 36, 0.15);
- --badge-warn-fg: #fcd34d;
+ --badge-warn-bg: rgba(217, 119, 6, 0.12);
+ --badge-warn-fg: #b45309;
--badge-q-bg: var(--primary-subtle);
--badge-q-fg: var(--primary-text);
- --badge-opt-bg: #2a3140;
- --badge-opt-fg: #cbd5e1;
- --badge-app-bg: rgba(74, 222, 128, 0.12);
- --badge-app-fg: #86efac;
- --badge-str-bg: rgba(167, 139, 250, 0.15);
- --badge-str-fg: #c4b5fd;
- --badge-branch-bg: rgba(167, 139, 250, 0.18);
- --badge-branch-fg: #c4b5fd;
+ --badge-opt-bg: #f1f5f9;
+ --badge-opt-fg: #475569;
+ --badge-app-bg: rgba(22, 163, 74, 0.1);
+ --badge-app-fg: #15803d;
+ --badge-str-bg: rgba(109, 40, 217, 0.1);
+ --badge-str-fg: #6d28d9;
+ --badge-branch-bg: rgba(109, 40, 217, 0.1);
+ --badge-branch-fg: #6d28d9;
--lang-chip-fixed-bg: var(--primary-subtle);
--lang-chip-fixed-border: var(--primary-border);
- --toast-success-bg: #1a2e22;
- --toast-success-fg: #bbf7d0;
- --toast-success-border: #3d6b4f;
- --toast-error-bg: #2e1a1a;
- --toast-error-fg: #fecaca;
- --toast-error-border: #7f3f3f;
- --toast-info-bg: #1a2438;
- --toast-info-fg: #bfdbfe;
- --toast-info-border: #3b5a8a;
+ --toast-success-bg: #ecfdf5;
+ --toast-success-fg: #166534;
+ --toast-success-border: #86efac;
+ --toast-error-bg: #fef2f2;
+ --toast-error-fg: #991b1b;
+ --toast-error-border: #fca5a5;
+ --toast-info-bg: #eff6ff;
+ --toast-info-fg: #1e40af;
+ --toast-info-border: #93c5fd;
--save-flash-bg: var(--primary-subtle);
- --progress-track: #2e3648;
+ --progress-track: #e2e8f0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -164,7 +165,7 @@ body.logged-in:not(.login-active) .layout::after {
/* Sidebar */
.sidebar {
width: var(--sidebar-width);
- background: color-mix(in srgb, var(--surface) 88%, transparent);
+ background: var(--surface);
backdrop-filter: blur(14px);
border-right: 1px solid var(--border);
display: flex;
@@ -174,7 +175,7 @@ body.logged-in:not(.login-active) .layout::after {
left: 0;
bottom: 0;
z-index: 100;
- box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+ box-shadow: 2px 0 16px rgba(15, 23, 42, 0.06);
}
.sidebar-brand {
position: relative;
@@ -184,7 +185,7 @@ body.logged-in:not(.login-active) .layout::after {
font-size: 1.05rem;
line-height: 1.35;
letter-spacing: -0.02em;
- background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
+ background: linear-gradient(180deg, rgba(37, 99, 235, 0.06) 0%, transparent 100%);
}
.sidebar-brand::before {
content: '';
@@ -195,7 +196,7 @@ body.logged-in:not(.login-active) .layout::after {
width: 3px;
border-radius: 0 2px 2px 0;
background: var(--accent-gradient);
- box-shadow: 0 0 12px rgba(59, 130, 246, 0.45);
+ box-shadow: 0 0 8px rgba(37, 99, 235, 0.25);
}
.sidebar-brand small {
display: block;
@@ -240,13 +241,13 @@ body.logged-in:not(.login-active) .layout::after {
}
.sidebar-nav a.active svg {
color: var(--primary);
- filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.35));
+ filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.2));
}
.sidebar-footer {
padding: 16px 20px;
border-top: 1px solid var(--border);
font-size: .85rem;
- background: rgba(15, 18, 24, 0.35);
+ background: var(--surface-muted);
}
.sidebar-footer .user-info {
color: var(--text-secondary);
@@ -388,13 +389,13 @@ body.logged-in .btn-home:hover svg {
.btn-primary {
background: var(--accent-gradient);
color: var(--text-on-primary);
- border-color: rgba(99, 102, 241, 0.5);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ border-color: rgba(79, 70, 229, 0.35);
+ box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-primary:hover {
- background: linear-gradient(135deg, #60a5fa 0%, #6d8ef8 45%, #818cf8 100%);
- border-color: rgba(129, 140, 248, 0.6);
- box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
+ background: linear-gradient(135deg, #2563eb 0%, #4338ca 45%, #4f46e5 100%);
+ border-color: rgba(67, 56, 202, 0.45);
+ box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-danger {
background: var(--danger-subtle);
@@ -479,7 +480,7 @@ body.logged-in .btn-home:hover svg {
border-radius: 999px;
text-transform: uppercase;
letter-spacing: .03em;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.badge-draft { background: var(--badge-draft-bg); color: var(--badge-draft-fg); }
.badge-active { background: var(--badge-active-bg); color: var(--badge-active-fg); }
@@ -653,7 +654,7 @@ body.logged-in .page-header-titles::before {
width: 3px;
border-radius: 2px;
background: var(--accent-gradient);
- box-shadow: 0 0 10px rgba(59, 130, 246, 0.35);
+ box-shadow: 0 0 8px rgba(37, 99, 235, 0.2);
}
.page-header h1 {
font-size: 1.5rem;
@@ -909,7 +910,7 @@ table.data-table tbody tr:nth-child(even) td {
background: var(--table-stripe-bg);
}
table.data-table tbody tr:nth-child(even) td.sticky-col {
- background: color-mix(in srgb, var(--table-stripe-bg) 70%, var(--surface));
+ background: color-mix(in srgb, var(--table-stripe-bg) 80%, var(--surface));
}
table.data-table tr:hover td {
background: var(--row-hover-bg);
@@ -924,7 +925,7 @@ table.data-table .sticky-col {
position: sticky;
left: 0;
z-index: 1;
- background: color-mix(in srgb, var(--surface) 98%, var(--bg));
+ background: var(--surface);
box-shadow: 2px 0 4px var(--sticky-shadow);
}
table.data-table thead th.sticky-col {
@@ -1100,8 +1101,8 @@ body.login-active .main-content {
inset: 0;
z-index: 0;
background:
- radial-gradient(ellipse 80% 60% at 30% 40%, rgba(59, 130, 246, 0.16), transparent 65%),
- radial-gradient(ellipse 55% 45% at 75% 65%, rgba(99, 102, 241, 0.1), transparent 55%),
+ radial-gradient(ellipse 80% 60% at 30% 40%, rgba(37, 99, 235, 0.12), transparent 65%),
+ radial-gradient(ellipse 55% 45% at 75% 65%, rgba(79, 70, 229, 0.08), transparent 55%),
var(--bg);
}
@@ -1119,20 +1120,20 @@ body.login-active .main-content {
position: absolute;
border-radius: 50%;
filter: blur(72px);
- opacity: 0.45;
+ opacity: 0.35;
animation: login-orb-drift 22s ease-in-out infinite;
}
.login-orb--a {
width: 420px;
height: 420px;
- background: rgba(59, 130, 246, 0.26);
+ background: rgba(37, 99, 235, 0.15);
top: 10%;
left: 15%;
}
.login-orb--b {
width: 300px;
height: 300px;
- background: rgba(99, 102, 241, 0.16);
+ background: rgba(79, 70, 229, 0.1);
bottom: 10%;
right: 20%;
animation-delay: -9s;
@@ -1256,7 +1257,7 @@ body.login-active .main-content {
font-size: .875rem;
font-weight: 500;
line-height: 1.45;
- box-shadow: var(--shadow-lg), 0 8px 24px rgba(0, 0, 0, 0.35);
+ box-shadow: var(--shadow-lg), 0 8px 24px rgba(15, 23, 42, 0.1);
opacity: 0;
transform: translateX(40px);
transition: opacity .3s, transform .3s;
@@ -1373,10 +1374,10 @@ body.login-active .main-content {
height: 26px;
border: 2px solid var(--border);
border-top-color: var(--primary);
- border-right-color: #6366f1;
+ border-right-color: #4f46e5;
border-radius: 50%;
animation: spin .7s linear infinite;
- box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
+ box-shadow: 0 0 10px rgba(37, 99, 235, 0.12);
}
#app > .spinner,
.main-content > .spinner,
@@ -1485,7 +1486,7 @@ table.data-table tbody tr.row-orphan-category td {
flex-shrink: 0;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
- background: rgba(34, 40, 54, 0.5);
+ background: var(--surface-muted);
}
.assign-panel-header h3 {
@@ -1693,7 +1694,7 @@ table.data-table tbody tr.row-orphan-category td {
border-radius: var(--radius);
font-size: .875rem;
color: var(--primary-text);
- box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+ box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Tabs */
@@ -1726,7 +1727,7 @@ table.data-table tbody tr.row-orphan-category td {
.tab-bar button.active {
color: var(--primary-text);
background: var(--primary-subtle);
- box-shadow: inset 0 0 0 1px var(--primary-border), 0 1px 4px rgba(59, 130, 246, 0.12);
+ box-shadow: inset 0 0 0 1px var(--primary-border), 0 1px 3px rgba(37, 99, 235, 0.08);
}
/* Metadata form in editor */
@@ -1799,8 +1800,8 @@ table.data-table tbody tr.row-orphan-category td {
justify-content: center;
padding: 16px;
background:
- radial-gradient(ellipse 70% 50% at 50% 40%, rgba(59, 130, 246, 0.08), transparent 70%),
- color-mix(in srgb, var(--bg) 25%, rgba(0, 0, 0, 0.7));
+ radial-gradient(ellipse 70% 50% at 50% 40%, rgba(37, 99, 235, 0.06), transparent 70%),
+ color-mix(in srgb, var(--bg) 50%, rgba(15, 23, 42, 0.35));
backdrop-filter: blur(4px);
}
.modal-overlay[hidden] {
@@ -1814,7 +1815,7 @@ body.modal-open {
max-width: 460px;
max-height: calc(100vh - 32px);
overflow: auto;
- background: color-mix(in srgb, var(--surface) 98%, var(--bg));
+ background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg), var(--shadow-inset);
@@ -2295,7 +2296,7 @@ body.modal-open {
.trans-input-missing {
border-color: var(--trans-missing-border) !important;
background: var(--surface) !important;
- box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.12);
+ box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.18);
}
.trans-input-missing::placeholder {
color: var(--trans-missing-placeholder);
@@ -2711,7 +2712,7 @@ body.logged-in .insights-chart-card.card {
}
body.logged-in .insights-chart-card.card:hover {
border-color: var(--primary-border);
- box-shadow: var(--shadow-lg), 0 0 20px rgba(59, 130, 246, 0.08);
+ box-shadow: var(--shadow-lg), 0 0 16px rgba(37, 99, 235, 0.06);
}
.insights-chart-hint {
margin: 0 0 14px;
@@ -3650,10 +3651,10 @@ select:disabled {
font-weight: 600;
letter-spacing: .02em;
}
-.band-badge.band-green { background: #14532d; color: #bbf7d0; border: 1px solid #166534; }
-.band-badge.band-yellow { background: #713f12; color: #fef08a; border: 1px solid #854d0e; }
-.band-badge.band-red { background: #7f1d1d; color: #fecaca; border: 1px solid #991b1b; }
-.band-badge.band-none { background: #334155; color: #cbd5e1; border: 1px solid #475569; }
+.band-badge.band-green { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
+.band-badge.band-yellow { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
+.band-badge.band-red { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
+.band-badge.band-none { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
/* Client list — scoring profiles */
.client-scoring-legend {
@@ -3661,7 +3662,7 @@ select:disabled {
padding: 12px 14px;
border-radius: 8px;
border: 1px solid var(--border);
- background: var(--surface-elevated, rgba(0, 0, 0, 0.02));
+ background: var(--surface-elevated);
}
.client-scoring-legend-title {
margin: 0 0 6px;
@@ -3705,7 +3706,7 @@ select:disabled {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--border);
- background: var(--surface-elevated, rgba(0, 0, 0, 0.02));
+ background: var(--surface-elevated);
font-size: .8125rem;
line-height: 1.35;
}
@@ -3776,7 +3777,7 @@ select:disabled {
}
.coach-band-trigger:hover {
border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
- background: var(--surface-hover, rgba(0, 0, 0, 0.03));
+ background: var(--surface-hover);
}
.coach-band-picker.is-open .coach-band-trigger,
.coach-band-trigger:focus-visible {
@@ -3834,7 +3835,7 @@ select:disabled {
transition: background 0.12s, border-color 0.12s;
}
.coach-band-option:hover {
- background: var(--surface-hover, rgba(0, 0, 0, 0.04));
+ background: var(--surface-hover);
}
.coach-band-option.is-selected {
border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
@@ -3861,7 +3862,7 @@ select:disabled {
padding: 16px;
border-radius: 10px;
border: 1px solid var(--border);
- background: var(--surface-elevated, rgba(0, 0, 0, 0.02));
+ background: var(--surface-elevated);
}
.coach-band-confirm-col {
display: flex;
diff --git a/website/index.html b/website/index.html
index 520d8fb..a13f1b1 100644
--- a/website/index.html
+++ b/website/index.html
@@ -3,8 +3,8 @@
-
-
+
+
BW Schützt - NAT-AS
diff --git a/website/js/pages/home.js b/website/js/pages/home.js
index d651e3c..7418e78 100644
--- a/website/js/pages/home.js
+++ b/website/js/pages/home.js
@@ -48,12 +48,6 @@ function renderHomeDashboard(ov, isAdmin) {
links.push({ href: '#/dev', label: 'Admin settings', desc: 'Dev import, exports, database tools' });
}
- const scoringProfiles = ov.scoringProfiles || [];
- const primaryProfile = scoringProfiles[0];
- const greenPct = primaryProfile && primaryProfile.clientCount
- ? Math.round(((primaryProfile.bands?.green ?? 0) / primaryProfile.clientCount) * 100)
- : null;
-
el.innerHTML = `