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

📝 "Refactor database files and UI components"

Browse Source
This commit is contained in:
Till Tomczak
2025-05-29 20:58:01 +02:00
parent 6bbae62b21
commit b1f791bcbd
5 changed files with 280 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
backend/app/static/css/input.css
View File

@@ -790,9 +790,11 @@
left: 0 !important;
right: 0 !important;
/* Verstärktes Glassmorphism Design */
background: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(40px) saturate(200%) brightness(110%) contrast(105%) !important;
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(110%) contrast(105%) !important;
--navbar-blur: 40px;
--navbar-opacity: 0.15;
background: rgba(255, 255, 255, var(--navbar-opacity, 0.15)) !important;
backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important;
-webkit-backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.08),
@@ -803,9 +805,10 @@
}
.dark .navbar {
background: rgba(0, 0, 0, 0.25) !important;
backdrop-filter: blur(45px) saturate(180%) brightness(120%) contrast(115%) !important;
-webkit-backdrop-filter: blur(45px) saturate(180%) brightness(120%) contrast(115%) !important;
--navbar-dark-opacity: 0.25;
background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.25)) !important;
backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;
-webkit-backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 2px 8px rgba(0, 0, 0, 0.3),
@@ -816,9 +819,11 @@
/* Navbar Scroll-Effekt */
.navbar.scrolled {
background: rgba(255, 255, 255, 0.25) !important;
backdrop-filter: blur(50px) saturate(220%) brightness(115%) contrast(110%) !important;
-webkit-backdrop-filter: blur(50px) saturate(220%) brightness(115%) contrast(110%) !important;
--navbar-blur: 50px;
--navbar-opacity: 0.25;
background: rgba(255, 255, 255, var(--navbar-opacity, 0.25)) !important;
backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important;
-webkit-backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.1),
@@ -827,9 +832,10 @@
}
.dark .navbar.scrolled {
background: rgba(0, 0, 0, 0.35) !important;
backdrop-filter: blur(55px) saturate(200%) brightness(125%) contrast(120%) !important;
-webkit-backdrop-filter: blur(55px) saturate(200%) brightness(125%) contrast(120%) !important;
--navbar-dark-opacity: 0.35;
background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.35)) !important;
backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;
-webkit-backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.5),
0 4px 12px rgba(0, 0, 0, 0.4),
@@ -856,6 +862,7 @@
0 6px 20px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .navbar-menu-new {
@@ -873,6 +880,26 @@
display: none;
}
/* Glassmorphism Hover-Animation für Navbar-Menu */
.navbar-menu-new:hover {
backdrop-filter: blur(35px) saturate(190%) brightness(112%);
-webkit-backdrop-filter: blur(35px) saturate(190%) brightness(112%);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
.dark .navbar-menu-new:hover {
backdrop-filter: blur(40px) saturate(170%) brightness(120%);
-webkit-backdrop-filter: blur(40px) saturate(170%) brightness(120%);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05);
}
.nav-item {
@apply flex items-center space-x-1.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-300;
color: rgba(15, 23, 42, 0.85);
@@ -886,6 +913,7 @@
inset 0 1px 0 rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
animation: nav-item-entrance 0.6s ease-out;
}
/* Glassmorphism Hover-Effekt */
@@ -904,6 +932,25 @@
left: 100%;
}
/* Zusätzlicher Glitter-Effekt */
.nav-item::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.1) 30deg, transparent 60deg);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
animation: rotate 3s linear infinite;
}
.nav-item:hover::after {
opacity: 1;
}
.dark .nav-item {
color: rgba(255, 255, 255, 0.85);
background: rgba(0, 0, 0, 0.15);
@@ -951,6 +998,7 @@
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 0 0 1px rgba(59, 130, 246, 0.3);
transform: translateY(-1px);
animation: nav-item-active-glow 2s ease-in-out infinite alternate;
}
.dark .nav-item.active {
@@ -965,6 +1013,81 @@
0 0 0 1px rgba(59, 130, 246, 0.2);
}
/* Animationen für Glassmorphism-Effekte */
@keyframes nav-item-entrance {
0% {
opacity: 0;
transform: translateY(10px) scale(0.95);
backdrop-filter: blur(5px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
backdrop-filter: blur(15px) saturate(140%);
}
}
@keyframes nav-item-active-glow {
0% {
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 0 0 1px rgba(59, 130, 246, 0.3);
}
100% {
box-shadow:
0 16px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 0 0 2px rgba(59, 130, 246, 0.5);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Glassmorphism-Partikel-Effekt */
.navbar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
opacity: 0;
animation: glassmorphism-particles 8s ease-in-out infinite;
pointer-events: none;
}
.dark .navbar::before {
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}
@keyframes glassmorphism-particles {
0%, 100% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
/* Dark Mode Toggle - Kompakteres Design */
.dark-mode-toggle-new {
@apply relative p-2 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer;

2
backend/app/static/css/tailwind.min.css vendored
View File

File diff suppressed because one or more lines are too long