Round 19: Professional Notebooks, Digital Rewards, GDPR, Role-Based Dashboard, Deep Styling Polish
- Fixed attendance API 403: added TEACHER school membership check - Fixed competitions API 403: cross-school access, null schoolId, public fallback - Fixed GDPR export API 500: 16 Prisma field name mismatches - Enhanced notebooks: page templates (Cornell, Mind Map, Venn, T-Chart, Weekly Planner), sticky notes, search, page duplication, sections/chapters, highlighter tool - Added scratch pad with DrawingCanvas in assessments for hand-written solutions - Role-based dashboard: TEACHER (competence radar, upcoming lessons), STUDENT (grades trend, competitions), PARENT (children grades, calendar), SCHOOL_ADMIN (system health, audit log, user management) - Digital reward system: 16 demo rewards, points earning/redemption, categories (streaming, shopping, experiences, merchandise, privileges) - GDPR compliance: consent management, data retention, cookie consent - Deep styling polish: glassmorphism, gradient headers, animated sidebar, card hover effects, progress bar animations, timeline dots, FAB button - 160+ new i18n keys (DE/EN)
This commit is contained in:
Mustafa Cetin committed
1 parent
86e4b504e4
commit
6d9b42ac37
43 files changed
+4569
-140
No files matched your search
@@ -2786,4 +2786,430 @@
|
||||
background: linear-gradient(90deg, #10b981, #14b8a6);
|
||||
border-radius: 0.75rem 0.75rem 0 0;
|
||||
}
|
||||
|
||||
/* ─── Task 9: Deep Styling Polish ──────────────────────────────────── */
|
||||
|
||||
/* Activity Timeline with animated dots */
|
||||
.activity-timeline {
|
||||
position: relative;
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
.activity-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0.55rem;
|
||||
top: 0.25rem;
|
||||
bottom: 0.25rem;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, oklch(0.55 0.17 155 / 0.3), oklch(0.55 0.17 155 / 0.08));
|
||||
border-radius: 1px;
|
||||
}
|
||||
.activity-timeline-item {
|
||||
position: relative;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.activity-timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1.35rem;
|
||||
top: 0.4rem;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: oklch(0.55 0.17 155);
|
||||
box-shadow: 0 0 0 3px oklch(0.55 0.17 155 / 0.15);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.activity-timeline-item:hover::before {
|
||||
transform: scale(1.4);
|
||||
box-shadow: 0 0 0 5px oklch(0.55 0.17 155 / 0.2);
|
||||
}
|
||||
.activity-timeline-item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.dark .activity-timeline::before {
|
||||
background: linear-gradient(to bottom, oklch(0.65 0.17 155 / 0.3), oklch(0.65 0.17 155 / 0.08));
|
||||
}
|
||||
.dark .activity-timeline-item::before {
|
||||
background: oklch(0.65 0.17 155);
|
||||
box-shadow: 0 0 0 3px oklch(0.65 0.17 155 / 0.2);
|
||||
}
|
||||
|
||||
/* Gradient Card Header */
|
||||
.card-header-gradient {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem 0.75rem 0 0;
|
||||
}
|
||||
.card-header-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, oklch(0.55 0.17 155 / 0.08) 0%, oklch(0.55 0.14 175 / 0.05) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.dark .card-header-gradient::before {
|
||||
background: linear-gradient(135deg, oklch(0.65 0.17 155 / 0.1) 0%, oklch(0.65 0.14 175 / 0.06) 100%);
|
||||
}
|
||||
|
||||
/* Progress Ring (SVG-based) */
|
||||
.progress-ring-circle {
|
||||
transition: stroke-dashoffset 0.6s ease-out;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
/* Glassmorphism Toolbar (for notebooks, editors) */
|
||||
.glass-toolbar {
|
||||
background: oklch(1 0 0 / 0.75);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||
border: 1px solid oklch(1 0 0 / 0.35);
|
||||
box-shadow:
|
||||
0 4px 16px -4px oklch(0 0 0 / 0.1),
|
||||
inset 0 0 0 1px oklch(1 0 0 / 0.2);
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
.dark .glass-toolbar {
|
||||
background: oklch(0.18 0.015 260 / 0.7);
|
||||
border-color: oklch(1 0 0 / 0.08);
|
||||
box-shadow:
|
||||
0 4px 16px -4px oklch(0 0 0 / 0.4),
|
||||
inset 0 0 0 1px oklch(1 0 0 / 0.05);
|
||||
}
|
||||
|
||||
/* Floating Action Button */
|
||||
.fab {
|
||||
position: fixed;
|
||||
bottom: 5rem;
|
||||
right: 1.5rem;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 9999px;
|
||||
background: linear-gradient(135deg, #10b981, #14b8a6);
|
||||
color: white;
|
||||
box-shadow: 0 6px 20px -4px oklch(0.55 0.17 155 / 0.45), 0 0 0 1px oklch(0.55 0.17 155 / 0.2);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fab:hover {
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
box-shadow: 0 10px 30px -6px oklch(0.55 0.17 155 / 0.5), 0 0 0 1px oklch(0.55 0.17 155 / 0.3);
|
||||
}
|
||||
.fab:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.dark .fab {
|
||||
box-shadow: 0 6px 20px -4px oklch(0 0 0 / 0.5), 0 0 0 1px oklch(0.65 0.17 155 / 0.3);
|
||||
background: linear-gradient(135deg, #10b981, #14b8a6);
|
||||
}
|
||||
.dark .fab:hover {
|
||||
box-shadow: 0 10px 30px -6px oklch(0 0 0 / 0.6), 0 0 0 1px oklch(0.65 0.17 155 / 0.4);
|
||||
}
|
||||
|
||||
/* Notebook Cover Gradient Effects */
|
||||
.notebook-cover {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
.notebook-cover::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40%;
|
||||
background: linear-gradient(180deg, oklch(0.55 0.17 155 / 0.12) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
.notebook-cover:hover::before {
|
||||
height: 55%;
|
||||
}
|
||||
.dark .notebook-cover::before {
|
||||
background: linear-gradient(180deg, oklch(0.65 0.17 155 / 0.15) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Grade Badge Color Coding */
|
||||
.grade-badge-excellent {
|
||||
background: linear-gradient(135deg, oklch(0.55 0.17 155 / 0.15), oklch(0.55 0.14 175 / 0.1));
|
||||
color: oklch(0.45 0.17 155);
|
||||
border: 1px solid oklch(0.55 0.17 155 / 0.25);
|
||||
}
|
||||
.dark .grade-badge-excellent {
|
||||
background: linear-gradient(135deg, oklch(0.65 0.17 155 / 0.2), oklch(0.65 0.14 175 / 0.15));
|
||||
color: oklch(0.75 0.17 155);
|
||||
border-color: oklch(0.65 0.17 155 / 0.3);
|
||||
}
|
||||
.grade-badge-good {
|
||||
background: linear-gradient(135deg, oklch(0.55 0.14 175 / 0.15), oklch(0.60 0.16 195 / 0.1));
|
||||
color: oklch(0.45 0.14 175);
|
||||
border: 1px solid oklch(0.55 0.14 175 / 0.25);
|
||||
}
|
||||
.dark .grade-badge-good {
|
||||
background: linear-gradient(135deg, oklch(0.65 0.14 175 / 0.2), oklch(0.70 0.16 195 / 0.15));
|
||||
color: oklch(0.75 0.14 175);
|
||||
border-color: oklch(0.65 0.14 175 / 0.3);
|
||||
}
|
||||
.grade-badge-average {
|
||||
background: linear-gradient(135deg, oklch(0.72 0.19 85 / 0.15), oklch(0.72 0.19 85 / 0.1));
|
||||
color: oklch(0.55 0.19 85);
|
||||
border: 1px solid oklch(0.72 0.19 85 / 0.25);
|
||||
}
|
||||
.dark .grade-badge-average {
|
||||
background: linear-gradient(135deg, oklch(0.72 0.19 85 / 0.2), oklch(0.72 0.19 85 / 0.15));
|
||||
color: oklch(0.82 0.19 85);
|
||||
border-color: oklch(0.72 0.19 85 / 0.3);
|
||||
}
|
||||
.grade-badge-below {
|
||||
background: linear-gradient(135deg, oklch(0.65 0.22 15 / 0.15), oklch(0.65 0.22 15 / 0.1));
|
||||
color: oklch(0.55 0.22 15);
|
||||
border: 1px solid oklch(0.65 0.22 15 / 0.25);
|
||||
}
|
||||
.dark .grade-badge-below {
|
||||
background: linear-gradient(135deg, oklch(0.65 0.22 15 / 0.2), oklch(0.65 0.22 15 / 0.15));
|
||||
color: oklch(0.75 0.22 15);
|
||||
border-color: oklch(0.65 0.22 15 / 0.3);
|
||||
}
|
||||
|
||||
/* Competence Flower Petal Animation */
|
||||
@keyframes petal-bloom {
|
||||
0% { transform: scale(0.3); opacity: 0; }
|
||||
60% { transform: scale(1.05); opacity: 0.9; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
.animate-petal-bloom {
|
||||
animation: petal-bloom 0.6s ease-out backwards;
|
||||
}
|
||||
|
||||
/* Radar Chart Gradient Fill */
|
||||
.radar-gradient-fill {
|
||||
fill: oklch(0.55 0.17 155 / 0.2);
|
||||
stroke: oklch(0.55 0.17 155);
|
||||
stroke-width: 2;
|
||||
}
|
||||
.dark .radar-gradient-fill {
|
||||
fill: oklch(0.65 0.17 155 / 0.25);
|
||||
stroke: oklch(0.65 0.17 155);
|
||||
}
|
||||
|
||||
/* Mastery Level Indicator */
|
||||
.mastery-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.mastery-indicator:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.mastery-indicator-1 {
|
||||
background: oklch(0.55 0.22 25 / 0.1);
|
||||
color: oklch(0.55 0.22 25);
|
||||
border: 1px solid oklch(0.55 0.22 25 / 0.2);
|
||||
}
|
||||
.mastery-indicator-2 {
|
||||
background: oklch(0.72 0.19 85 / 0.1);
|
||||
color: oklch(0.60 0.18 50);
|
||||
border: 1px solid oklch(0.72 0.19 85 / 0.2);
|
||||
}
|
||||
.mastery-indicator-3 {
|
||||
background: oklch(0.55 0.17 155 / 0.1);
|
||||
color: oklch(0.45 0.17 155);
|
||||
border: 1px solid oklch(0.55 0.17 155 / 0.2);
|
||||
}
|
||||
.mastery-indicator-4 {
|
||||
background: oklch(0.55 0.14 175 / 0.1);
|
||||
color: oklch(0.45 0.14 175);
|
||||
border: 1px solid oklch(0.55 0.14 175 / 0.2);
|
||||
}
|
||||
.dark .mastery-indicator-1 {
|
||||
background: oklch(0.55 0.22 25 / 0.15);
|
||||
color: oklch(0.75 0.19 22);
|
||||
border-color: oklch(0.55 0.22 25 / 0.3);
|
||||
}
|
||||
.dark .mastery-indicator-2 {
|
||||
background: oklch(0.72 0.19 85 / 0.15);
|
||||
color: oklch(0.82 0.19 85);
|
||||
border-color: oklch(0.72 0.19 85 / 0.3);
|
||||
}
|
||||
.dark .mastery-indicator-3 {
|
||||
background: oklch(0.65 0.17 155 / 0.15);
|
||||
color: oklch(0.75 0.17 155);
|
||||
border-color: oklch(0.65 0.17 155 / 0.3);
|
||||
}
|
||||
.dark .mastery-indicator-4 {
|
||||
background: oklch(0.65 0.14 175 / 0.15);
|
||||
color: oklch(0.75 0.14 175);
|
||||
border-color: oklch(0.65 0.14 175 / 0.3);
|
||||
}
|
||||
|
||||
/* Animated Progress Bar with Gradient */
|
||||
.progress-bar-animated {
|
||||
position: relative;
|
||||
height: 0.5rem;
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
background: oklch(0.93 0.005 155);
|
||||
}
|
||||
.dark .progress-bar-animated {
|
||||
background: oklch(0.25 0.02 155);
|
||||
}
|
||||
.progress-bar-animated-fill {
|
||||
height: 100%;
|
||||
border-radius: 9999px;
|
||||
background: linear-gradient(90deg, #10b981, #14b8a6);
|
||||
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
.progress-bar-animated-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.3), transparent);
|
||||
animation: shimmer-progress 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Gradient Header Bar */
|
||||
.header-gradient {
|
||||
background: linear-gradient(135deg, oklch(0.99 0.002 155) 0%, oklch(0.97 0.01 155) 50%, oklch(0.99 0.002 175) 100%);
|
||||
border-bottom: 1px solid oklch(0.93 0.005 155);
|
||||
}
|
||||
.dark .header-gradient {
|
||||
background: linear-gradient(135deg, oklch(0.15 0.01 260) 0%, oklch(0.13 0.01 260) 50%, oklch(0.15 0.015 155) 100%);
|
||||
border-bottom-color: oklch(1 0 0 / 8%);
|
||||
}
|
||||
|
||||
/* Sidebar Active Indicator with Animated Underline */
|
||||
.sidebar-active-indicator {
|
||||
position: relative;
|
||||
}
|
||||
.sidebar-active-indicator::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #10b981, #14b8a6);
|
||||
border-radius: 1px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.sidebar-active-indicator.active::after {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/* Notification Bell Pulse */
|
||||
@keyframes bell-ring {
|
||||
0% { transform: rotate(0deg); }
|
||||
10% { transform: rotate(14deg); }
|
||||
20% { transform: rotate(-12deg); }
|
||||
30% { transform: rotate(10deg); }
|
||||
40% { transform: rotate(-8deg); }
|
||||
50% { transform: rotate(4deg); }
|
||||
60% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
.animate-bell-ring {
|
||||
animation: bell-ring 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
/* Notification Badge Pulse */
|
||||
@keyframes badge-pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 oklch(0.55 0.17 155 / 0.4); }
|
||||
50% { box-shadow: 0 0 0 6px oklch(0.55 0.17 155 / 0); }
|
||||
}
|
||||
.animate-badge-pulse {
|
||||
animation: badge-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Card Shadow Transition on Hover */
|
||||
.card-shadow-transition {
|
||||
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
|
||||
}
|
||||
.card-shadow-transition:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px -6px oklch(0.55 0.17 155 / 0.12), 0 0 0 1px oklch(0.55 0.17 155 / 0.06);
|
||||
border-color: oklch(0.55 0.17 155 / 0.2);
|
||||
}
|
||||
.dark .card-shadow-transition:hover {
|
||||
box-shadow: 0 8px 24px -6px oklch(0 0 0 / 0.4), 0 0 0 1px oklch(0.65 0.17 155 / 0.12);
|
||||
border-color: oklch(0.65 0.17 155 / 0.2);
|
||||
}
|
||||
|
||||
/* Chart Gradient Fill */
|
||||
.chart-gradient-fill {
|
||||
fill: url(#emeraldGradient);
|
||||
}
|
||||
|
||||
/* Breadcrumb Current View Indicator */
|
||||
.breadcrumb-active-view {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: linear-gradient(135deg, oklch(0.55 0.17 155 / 0.08), oklch(0.55 0.14 175 / 0.05));
|
||||
color: oklch(0.45 0.17 155);
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid oklch(0.55 0.17 155 / 0.12);
|
||||
}
|
||||
.dark .breadcrumb-active-view {
|
||||
background: linear-gradient(135deg, oklch(0.65 0.17 155 / 0.12), oklch(0.65 0.14 175 / 0.08));
|
||||
color: oklch(0.75 0.17 155);
|
||||
border-color: oklch(0.65 0.17 155 / 0.2);
|
||||
}
|
||||
|
||||
/* Student Grid Animation */
|
||||
@keyframes student-appear {
|
||||
from { opacity: 0; transform: scale(0.9) translateY(4px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
.animate-student-appear {
|
||||
animation: student-appear 0.3s ease-out backwards;
|
||||
}
|
||||
|
||||
/* Enhanced Tooltip/Popover Styling */
|
||||
.popover-enhanced {
|
||||
box-shadow:
|
||||
0 8px 30px -6px oklch(0 0 0 / 0.12),
|
||||
0 0 0 1px oklch(0.55 0.17 155 / 0.08);
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
.dark .popover-enhanced {
|
||||
box-shadow:
|
||||
0 8px 30px -6px oklch(0 0 0 / 0.5),
|
||||
0 0 0 1px oklch(0.65 0.17 155 / 0.12);
|
||||
}
|
||||
|
||||
/* Gradient border for active class cards */
|
||||
.class-card-active {
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.class-card-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: calc(0.75rem + 2px);
|
||||
background: linear-gradient(135deg, #10b981, #14b8a6, #10b981);
|
||||
z-index: -1;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.class-card-active:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user