From 3f34d40fe30828e7f54af0514b5b8e187dc75f17 Mon Sep 17 00:00:00 2001 From: Till Tomczak Date: Tue, 3 Jun 2025 22:40:56 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Improved=20performance=20with=20?= =?UTF-8?q?optimized=20CSS=20file=20=F0=9F=93=A6=F0=9F=90=9B=20in=20backen?= =?UTF-8?q?d/static/css/performance-optimized.css=20&=20backend/templates/?= =?UTF-8?q?base.html.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/.claude/settings.local.json | 7 +- backend/static/css/performance-optimized.css | 197 +++++++++++++++++++ backend/templates/base.html | 13 +- 3 files changed, 212 insertions(+), 5 deletions(-) create mode 100644 backend/static/css/performance-optimized.css diff --git a/backend/.claude/settings.local.json b/backend/.claude/settings.local.json index dd8ca7aa..616dc09f 100644 --- a/backend/.claude/settings.local.json +++ b/backend/.claude/settings.local.json @@ -1,7 +1,12 @@ { "permissions": { "allow": [ - "Bash(grep:*)" + "Bash(grep:*)", + "Bash(ls:*)", + "Bash(for file in animations-optimized.css glassmorphism.css components.css professional-theme.css)", + "Bash(do echo \"=== $file ===\")", + "Bash(echo)", + "Bash(done)" ], "deny": [] } diff --git a/backend/static/css/performance-optimized.css b/backend/static/css/performance-optimized.css new file mode 100644 index 00000000..902d394d --- /dev/null +++ b/backend/static/css/performance-optimized.css @@ -0,0 +1,197 @@ +/* Performance-optimized CSS for MYP Application - Fast Rendering Focus */ + +/* ===== CRITICAL GLASSMORPHISM FOR NAVBAR - PRESERVED ===== */ +.glass-navbar { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +.dark .glass-navbar { + background: rgba(15, 23, 42, 0.85); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* ===== SIMPLIFIED GLASS EFFECTS - NO ANIMATIONS ===== */ +.glass-base { + background: rgba(255, 255, 255, 0.95); + border: 1px solid rgba(255, 255, 255, 0.3); +} + +.glass-strong { + background: rgba(255, 255, 255, 0.98); + border: 1px solid rgba(255, 255, 255, 0.4); +} + +.glass-subtle { + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +/* Dark mode variants */ +.dark .glass-base { + background: rgba(15, 23, 42, 0.95); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.dark .glass-strong { + background: rgba(30, 41, 59, 0.98); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.dark .glass-subtle { + background: rgba(15, 23, 42, 0.9); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +/* ===== SIMPLIFIED CARDS - NO SHADOWS OR TRANSITIONS ===== */ +.glass-card { + background: rgba(255, 255, 255, 0.98); + border: 1px solid rgba(229, 231, 235, 0.5); + border-radius: 12px; + padding: 1.5rem; +} + +.dark .glass-card { + background: rgba(30, 41, 59, 0.98); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* ===== BUTTONS - INSTANT FEEDBACK ===== */ +.btn-primary { + background-color: #1a1a1a; + color: white; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + font-weight: 500; +} + +.btn-primary:hover { + background-color: #333333; +} + +.btn-secondary { + background-color: #e5e7eb; + color: #374151; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + font-weight: 500; +} + +.btn-secondary:hover { + background-color: #d1d5db; +} + +/* ===== FORMS - SIMPLIFIED FOCUS STATES ===== */ +input:focus, +textarea:focus, +select:focus { + outline: 2px solid #3b82f6; + outline-offset: -2px; +} + +/* ===== MODAL OVERLAYS - INSTANT APPEARANCE ===== */ +.modal-backdrop { + background-color: rgba(0, 0, 0, 0.5); + position: fixed; + inset: 0; +} + +.modal-content { + background: white; + border-radius: 0.5rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.dark .modal-content { + background: #1f2937; +} + +/* ===== TOOLTIPS - SIMPLIFIED ===== */ +.tooltip { + background: #1f2937; + color: white; + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-size: 0.875rem; +} + +/* ===== LOADING STATES - MINIMAL ===== */ +.spinner { + border: 2px solid #f3f4f6; + border-top-color: #3b82f6; + border-radius: 50%; + width: 1.5rem; + height: 1.5rem; + animation: spin 0.8s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* ===== PERFORMANCE UTILITIES ===== */ +.will-change-auto { will-change: auto; } +.gpu-accelerated { transform: translateZ(0); } +.no-transitions * { transition: none !important; } +.no-animations * { animation: none !important; } + +/* ===== REDUCED MOTION PREFERENCE ===== */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* ===== OPTIMIZED GRID LAYOUTS ===== */ +.grid-optimized { + display: grid; + contain: layout; +} + +/* ===== SIMPLIFIED BADGES ===== */ +.badge { + display: inline-flex; + align-items: center; + padding: 0.125rem 0.625rem; + font-size: 0.75rem; + font-weight: 500; + border-radius: 9999px; +} + +.badge-success { + background-color: #10b981; + color: white; +} + +.badge-warning { + background-color: #f59e0b; + color: white; +} + +.badge-error { + background-color: #ef4444; + color: white; +} + +/* ===== OPTIMIZE PAINT AREAS ===== */ +.contain-paint { contain: paint; } +.contain-layout { contain: layout; } +.contain-strict { contain: strict; } + +/* ===== CRITICAL RENDERING PATH OPTIMIZATION ===== */ +.above-fold { + content-visibility: visible; +} + +.below-fold { + content-visibility: auto; + contain-intrinsic-size: 0 500px; +} \ No newline at end of file diff --git a/backend/templates/base.html b/backend/templates/base.html index d5625f5d..ab41f8e1 100644 --- a/backend/templates/base.html +++ b/backend/templates/base.html @@ -25,11 +25,16 @@ - + - - - + + + + +