🎉 Improved performance with optimized CSS file 📦🐛 in backend/static/css/performance-optimized.css & backend/templates/base.html.

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": []
   }

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;
+}

backend/templates/base.html

@@ -25,11 +25,16 @@
     <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png') }}">
     <link rel="mask-icon" href="{{ url_for('static', filename='favicon.svg') }}" color="#000000">
     
-    <!-- CSS -->
+    <!-- CSS - Performance Optimized -->
     <link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
-    <link href="{{ url_for('static', filename='css/components.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/performance-optimized.css') }}" rel="stylesheet">
-    <link href="{{ url_for('static', filename='css/professional-theme.css') }}" rel="stylesheet">
+    <!-- Conditional loading for non-critical CSS -->
-    <link href="{{ url_for('static', filename='css/optimization-animations.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/components.min.css') }}" rel="stylesheet" media="print" onload="this.media='all'">
+    <link href="{{ url_for('static', filename='css/professional-theme.min.css') }}" rel="stylesheet" media="print" onload="this.media='all'">
+    <noscript>
+        <link href="{{ url_for('static', filename='css/components.min.css') }}" rel="stylesheet">
+        <link href="{{ url_for('static', filename='css/professional-theme.min.css') }}" rel="stylesheet">
+    </noscript>
     
     <!-- Preload critical resources -->
     <link rel="preload" href="{{ url_for('static', filename='js/ui-components.js') }}" as="script">