core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"Refactor calendar template using Conventional Commits format (feat)"

Browse Source
This commit is contained in:
Till Tomczak
2025-05-29 18:57:47 +02:00
parent e2d628df0d
commit 122551df3d
1 changed files with 329 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

410
backend/app/templates/calendar.html
View File

@@ -27,185 +27,342 @@
.border-mercedes-silver { border-color: #d1d5db; } .border-mercedes-silver { border-color: #d1d5db; }
.border-mercedes-blue { border-color: #0073ce; } .border-mercedes-blue { border-color: #0073ce; }
/* Enhanced Calendar Styling */ /* Advanced Calendar Styling */
.fc { .fc {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--fc-border-color: #e2e8f0;
--fc-today-bg-color: rgba(0, 115, 206, 0.08);
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 16px;
overflow: hidden;
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
} }
.dark .fc {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
--fc-border-color: #334155;
--fc-today-bg-color: rgba(0, 115, 206, 0.15);
}
/* Premium Header Toolbar */
.fc-header-toolbar { .fc-header-toolbar {
margin-bottom: 1.5rem !important; margin-bottom: 0 !important;
padding: 1rem; padding: 1.5rem 2rem !important;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0; border: none !important;
border-radius: 12px; border-bottom: 1px solid #e2e8f0 !important;
border-radius: 0 !important;
backdrop-filter: blur(10px);
} }
.dark .fc-header-toolbar { .dark .fc-header-toolbar {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-color: #334155; border-bottom-color: #334155 !important;
} }
/* Premium Buttons */
.fc-button { .fc-button {
background: #0073ce !important; background: linear-gradient(135deg, #0073ce 0%, #005ba3 100%) !important;
border: none !important; border: none !important;
border-radius: 8px !important; border-radius: 10px !important;
padding: 0.5rem 1rem !important; padding: 0.75rem 1.25rem !important;
font-weight: 500 !important; font-weight: 600 !important;
transition: all 0.2s ease !important; font-size: 0.875rem !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
overflow: hidden !important;
}
.fc-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.fc-button:hover::before {
left: 100%;
} }
.fc-button:hover { .fc-button:hover {
background: #005ba3 !important; background: linear-gradient(135deg, #005ba3 0%, #003d82 100%) !important;
transform: translateY(-1px) !important; transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; box-shadow:
0 12px 20px -5px rgba(0, 115, 206, 0.4),
0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
} }
.fc-button:focus { .fc-button:focus {
box-shadow: 0 0 0 3px rgba(0, 115, 206, 0.3) !important; box-shadow:
0 0 0 3px rgba(0, 115, 206, 0.3),
0 12px 20px -5px rgba(0, 115, 206, 0.4) !important;
outline: none !important;
} }
.fc-button-active { .fc-button-active {
background: #003d82 !important; background: linear-gradient(135deg, #003d82 0%, #002952 100%) !important;
transform: translateY(1px) !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
} }
.fc-today-button { .fc-today-button {
background: #16a34a !important; background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
} }
.fc-today-button:hover { .fc-today-button:hover {
background: #15803d !important; background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
} }
/* Elegant Typography */
.fc-toolbar-title { .fc-toolbar-title {
color: #000000 !important; color: #000000 !important;
font-size: 1.5rem !important; font-size: 1.875rem !important;
font-weight: 700 !important; font-weight: 800 !important;
letter-spacing: -0.025em !important;
background: linear-gradient(135deg, #000000 0%, #374151 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.dark .fc-toolbar-title { .dark .fc-toolbar-title {
color: #ffffff !important; background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
/* Premium Column Headers */
.fc-col-header { .fc-col-header {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
border: 1px solid #e2e8f0 !important; border: none !important;
border-bottom: 2px solid #0073ce !important;
} }
.dark .fc-col-header { .dark .fc-col-header {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
border-color: #334155 !important; border-bottom-color: #0ea5e9 !important;
} }
.fc-col-header-cell { .fc-col-header-cell {
padding: 1rem !important; padding: 1.25rem 1rem !important;
font-weight: 600 !important; font-weight: 700 !important;
color: #000000 !important; font-size: 0.875rem !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: #374151 !important;
position: relative !important;
} }
.dark .fc-col-header-cell { .dark .fc-col-header-cell {
color: #ffffff !important; color: #e2e8f0 !important;
} }
/* Elegant Grid Styling */
.fc-daygrid-day, .fc-timegrid-slot { .fc-daygrid-day, .fc-timegrid-slot {
border-color: #e2e8f0 !important; border-color: #f1f5f9 !important;
transition: background-color 0.2s ease !important;
} }
.dark .fc-daygrid-day, .dark .fc-timegrid-slot { .dark .fc-daygrid-day, .dark .fc-timegrid-slot {
border-color: #334155 !important; border-color: #1e293b !important;
}
.fc-timegrid-slot:hover {
background: rgba(0, 115, 206, 0.03) !important;
}
.dark .fc-timegrid-slot:hover {
background: rgba(0, 115, 206, 0.08) !important;
} }
.fc-day-today { .fc-day-today {
background: rgba(0, 115, 206, 0.05) !important; background: linear-gradient(135deg, rgba(0, 115, 206, 0.08) 0%, rgba(0, 115, 206, 0.04) 100%) !important;
position: relative !important;
}
.fc-day-today::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #0073ce, #00a8ff, #0073ce);
border-radius: 0 0 2px 2px;
} }
.dark .fc-day-today { .dark .fc-day-today {
background: rgba(0, 115, 206, 0.1) !important; background: linear-gradient(135deg, rgba(0, 115, 206, 0.15) 0%, rgba(0, 115, 206, 0.08) 100%) !important;
} }
/* Enhanced Event Styling */ /* Premium Event Styling */
.fc-event { .fc-event {
border-radius: 8px !important; border-radius: 12px !important;
border: none !important; border: none !important;
padding: 0.25rem 0.5rem !important; padding: 0.5rem 0.75rem !important;
margin: 2px !important; margin: 3px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; box-shadow:
transition: all 0.2s ease !important; 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
overflow: hidden !important;
backdrop-filter: blur(10px) !important;
}
.fc-event::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
opacity: 0;
transition: opacity 0.3s ease;
} }
.fc-event:hover { .fc-event:hover {
transform: translateY(-1px) !important; transform: translateY(-3px) scale(1.02) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}
.fc-event:hover::before {
opacity: 1;
} }
.fc-event-title { .fc-event-title {
font-weight: 600 !important; font-weight: 700 !important;
font-size: 0.875rem !important; font-size: 0.875rem !important;
line-height: 1.4 !important;
} }
.fc-event-time { .fc-event-time {
font-size: 0.75rem !important; font-size: 0.75rem !important;
font-weight: 500 !important;
opacity: 0.9 !important; opacity: 0.9 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
} }
/* Job Status Colors */ /* Premium Status Colors with Gradients */
.fc-event.event-running { .fc-event.event-running {
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; background: linear-gradient(135deg, #10b981 0%, #059669 80%, #047857 100%) !important;
color: white !important; color: white !important;
box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3) !important;
} }
.fc-event.event-queued { .fc-event.event-queued {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 80%, #1d4ed8 100%) !important;
color: white !important; color: white !important;
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3) !important;
} }
.fc-event.event-completed { .fc-event.event-completed {
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important; background: linear-gradient(135deg, #16a34a 0%, #15803d 80%, #166534 100%) !important;
color: white !important; color: white !important;
box-shadow: 0 8px 32px rgba(22, 163, 74, 0.3) !important;
} }
.fc-event.event-cancelled { .fc-event.event-cancelled {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; background: linear-gradient(135deg, #ef4444 0%, #dc2626 80%, #b91c1c 100%) !important;
color: white !important; color: white !important;
box-shadow: 0 8px 32px rgba(239, 68, 68, 0.3) !important;
} }
.fc-event.event-maintenance { .fc-event.event-maintenance {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 80%, #6d28d9 100%) !important;
color: white !important; color: white !important;
box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3) !important;
} }
.fc-event.event-high-priority { .fc-event.event-high-priority {
box-shadow: 0 0 0 2px #f59e0b !important; box-shadow:
0 0 0 3px rgba(245, 158, 11, 0.4),
0 8px 32px rgba(245, 158, 11, 0.2) !important;
animation: priority-pulse 3s infinite ease-in-out;
} }
.fc-event.event-urgent { .fc-event.event-urgent {
box-shadow: 0 0 0 2px #ef4444 !important; box-shadow:
animation: urgent-pulse 2s infinite; 0 0 0 3px rgba(239, 68, 68, 0.6),
0 8px 32px rgba(239, 68, 68, 0.4) !important;
animation: urgent-pulse 2s infinite ease-in-out;
}
@keyframes priority-pulse {
0%, 100% {
box-shadow:
0 0 0 3px rgba(245, 158, 11, 0.4),
0 8px 32px rgba(245, 158, 11, 0.2);
}
50% {
box-shadow:
0 0 0 6px rgba(245, 158, 11, 0.6),
0 12px 40px rgba(245, 158, 11, 0.3);
}
} }
@keyframes urgent-pulse { @keyframes urgent-pulse {
0%, 100% { opacity: 1; } 0%, 100% {
50% { opacity: 0.8; } box-shadow:
0 0 0 3px rgba(239, 68, 68, 0.6),
0 8px 32px rgba(239, 68, 68, 0.4);
}
50% {
box-shadow:
0 0 0 8px rgba(239, 68, 68, 0.8),
0 16px 48px rgba(239, 68, 68, 0.5);
}
} }
/* Enhanced Form Elements */ /* Time Grid Enhancements */
.fc-timegrid-axis {
font-weight: 600 !important;
color: #6b7280 !important;
font-size: 0.75rem !important;
}
.dark .fc-timegrid-axis {
color: #9ca3af !important;
}
.fc-timegrid-slot-label {
font-variant-numeric: tabular-nums !important;
}
/* Premium Form Elements */
.mercedes-form-input { .mercedes-form-input {
transition: all 0.2s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #d1d5db; border: 2px solid #e5e7eb;
background: rgba(255, 255, 255, 0.9); background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 12px;
font-weight: 500;
} }
.mercedes-form-input:focus { .mercedes-form-input:focus {
border-color: #0073ce; border-color: #0073ce;
box-shadow: box-shadow:
0 0 0 3px rgba(0, 115, 206, 0.1), 0 0 0 4px rgba(0, 115, 206, 0.1),
0 4px 6px -1px rgba(0, 0, 0, 0.1); 0 10px 15px -3px rgba(0, 0, 0, 0.1),
transform: translateY(-1px); 0 4px 6px -2px rgba(0, 0, 0, 0.05);
background: rgba(255, 255, 255, 1); transform: translateY(-2px);
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 100%);
} }
.dark .mercedes-form-input { .dark .mercedes-form-input {
background: rgba(30, 41, 59, 0.8); background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
border-color: #475569; border-color: #475569;
color: #f8fafc; color: #f8fafc;
} }
@@ -213,19 +370,37 @@
.dark .mercedes-form-input:focus { .dark .mercedes-form-input:focus {
border-color: #0ea5e9; border-color: #0ea5e9;
box-shadow: box-shadow:
0 0 0 3px rgba(14, 165, 233, 0.1), 0 0 0 4px rgba(14, 165, 233, 0.1),
0 4px 6px -1px rgba(0, 0, 0, 0.3); 0 10px 15px -3px rgba(0, 0, 0, 0.3),
background: rgba(30, 41, 59, 1); 0 4px 6px -2px rgba(0, 0, 0, 0.2);
background: linear-gradient(135deg, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 100%);
} }
/* Enhanced Statistics Cards */ /* Enhanced Statistics Cards */
.stat-card { .stat-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0; border: 2px solid #f1f5f9;
border-radius: 12px; border-radius: 16px;
transition: all 0.3s ease; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
backdrop-filter: blur(10px);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(0, 115, 206, 0.3), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.stat-card:hover::before {
transform: translateX(100%);
} }
.dark .stat-card { .dark .stat-card {
@@ -234,39 +409,112 @@
} }
.stat-card:hover { .stat-card:hover {
transform: translateY(-2px); transform: translateY(-4px) scale(1.02);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 10px 15px -3px rgba(0, 0, 0, 0.1);
border-color: #0073ce;
} }
.stat-card.active { .stat-card.active {
border-left: 4px solid #10b981; border-left: 5px solid #10b981;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}
.dark .stat-card.active {
background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
} }
.stat-card.queued { .stat-card.queued {
border-left: 4px solid #3b82f6; border-left: 5px solid #3b82f6;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.dark .stat-card.queued {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
} }
.stat-card.time { .stat-card.time {
border-left: 4px solid #f59e0b; border-left: 5px solid #f59e0b;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
} }
/* Enhanced Modals */ .dark .stat-card.time {
background: linear-gradient(135deg, #92400e 0%, #b45309 100%);
}
/* Premium Modal Styling */
.mercedes-modal { .mercedes-modal {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0; border: 2px solid #e2e8f0;
box-shadow: box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 50px 100px -20px rgba(0, 0, 0, 0.25),
0 4px 6px -1px rgba(0, 0, 0, 0.1); 0 20px 40px -10px rgba(0, 0, 0, 0.1);
border-radius: 16px; border-radius: 20px;
backdrop-filter: blur(10px); backdrop-filter: blur(20px);
} }
.dark .mercedes-modal { .dark .mercedes-modal {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-color: #334155; border-color: #334155;
box-shadow: box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 50px 100px -20px rgba(0, 0, 0, 0.5),
0 4px 6px -1px rgba(0, 0, 0, 0.3); 0 20px 40px -10px rgba(0, 0, 0, 0.3);
}
/* Smooth Scrolling for Calendar */
.fc-scroller {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
.fc-scroller::-webkit-scrollbar {
width: 8px;
}
.fc-scroller::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.fc-scroller::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #cbd5e1, #94a3b8);
border-radius: 4px;
}
.fc-scroller::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #94a3b8, #64748b);
}
/* Loading Animation */
@keyframes calendar-load {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.fc {
animation: calendar-load 0.6s ease-out;
}
/* Responsive Enhancements */
@media (max-width: 768px) {
.fc-toolbar-title {
font-size: 1.25rem !important;
}
.fc-button {
padding: 0.5rem 0.75rem !important;
font-size: 0.75rem !important;
}
.fc-header-toolbar {
padding: 1rem !important;
}
.fc-col-header-cell {
padding: 0.75rem 0.5rem !important;
font-size: 0.75rem !important;
}
} }
</style> </style>
{% endblock %} {% endblock %}