style: Modernize dashboard with dark mode and minimalist design

index.html

@@ -7,24 +7,27 @@
     <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
     <style>
         :root {
-            --bg-color: #f8f9fa;
-            --card-bg-color: #ffffff;
-            --text-color: #212529;
-            --muted-text-color: #6c757d;
-            --border-color: #dee2e6;
-            --shadow-color: rgba(0, 0, 0, 0.05);
-            --primary-color: #0d6efd;
-            --success-color: #198754;
-            --warning-color: #ffc107;
-            --danger-color: #dc3545;
-            --plot-colorway: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf']; /* Plotly default */
-        }
+            --bg-color: #0a0a0a;
+            --card-bg-color: #121212;
+            --text-color: #e0e0e0;
+            --muted-text-color: #757575;
+            --border-color: #2a2a2a;
+            --shadow-color: rgba(0, 0, 0, 0.3);
+            --primary-color: #3a86ff;
+            --success-color: #4ade80;
+            --warning-color: #fbbf24;
+            --danger-color: #f87171;
+            --plot-colorway: ['#3a86ff', '#8338ec', '#ff006e', '#fb5607', '#ffbe0b', '#80ffdb', '#a0e8af', '#ff9e00', '#e36414', '#0a9396'];
+        }
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+        
         body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
             margin: 0;
             background-color: var(--bg-color);
             color: var(--text-color);
             line-height: 1.5;
+            font-weight: 300;
         }
         .container {
             max-width: 1700px; /* Wider container */
@@ -35,7 +38,9 @@
             text-align: center;
             color: var(--text-color);
             margin-bottom: 15px;
-            font-weight: 500;
+            font-weight: 400;
+            letter-spacing: 0.5px;
+            font-size: 1.8rem;
         }
         .controls {
             display: flex;
@@ -49,12 +54,18 @@
              color: var(--muted-text-color);
         }
         .controls select {
-            padding: 8px 12px;
+            padding: 10px 14px;
             border: 1px solid var(--border-color);
-            border-radius: 6px;
+            border-radius: 8px;
             background-color: var(--card-bg-color);
             min-width: 300px;
             font-size: 1rem;
+            color: var(--text-color);
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+            background-repeat: no-repeat;
+            background-position: right 10px center;
+            background-size: 16px;
         }
 
         .kpi-container {
@@ -66,10 +77,11 @@
         .kpi-card {
             background-color: var(--card-bg-color);
             padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 8px var(--shadow-color);
+            border-radius: 12px;
+            box-shadow: 0 4px 12px var(--shadow-color);
             text-align: center;
             border: 1px solid var(--border-color);
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
         .kpi-card h3 {
             margin-top: 0;
@@ -99,9 +111,10 @@
         .plot-container, .table-container {
             background-color: var(--card-bg-color);
             padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 8px var(--shadow-color);
+            border-radius: 12px;
+            box-shadow: 0 4px 12px var(--shadow-color);
             border: 1px solid var(--border-color);
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
             min-height: 450px; /* Ensure plots have some height */
             display: flex; /* For centering loading/error inside */
             flex-direction: column; /* Allow title and content stacking */
@@ -427,15 +440,15 @@
                 paper_bgcolor: 'rgba(0,0,0,0)',
                 plot_bgcolor: 'rgba(0,0,0,0)',
                 font: {
-                    family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-                    color: '#212529'
+                    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+                    color: '#e0e0e0'
                 },
                 title: {
                     font: { size: 16, weight: '500' },
                     x: 0.05, xanchor: 'left'
                 },
-                xaxis: { gridcolor: '#e9ecef', linecolor: '#adb5bd', automargin: true, tickfont: { size: 10 } },
-                yaxis: { gridcolor: '#e9ecef', linecolor: '#adb5bd', automargin: true, tickfont: { size: 10 } }
+                xaxis: { gridcolor: '#2a2a2a', linecolor: '#3a3a3a', automargin: true, tickfont: { size: 10 } },
+                yaxis: { gridcolor: '#2a2a2a', linecolor: '#3a3a3a', automargin: true, tickfont: { size: 10 } }
             };
 
             function mergeLayout(customLayout) {

style.css

@@ -39,14 +39,13 @@ p {
     color: var(--muted-text-color);
 }
 .spinner {
-    border: 4px solid rgba(0, 0, 0, 0.1);
+    border: 3px solid rgba(255, 255, 255, 0.1);
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border-left-color: var(--primary-color);
-    margin-bottom: 15px; /* Space between spinner and text */
-
-    animation: spin 1s ease infinite;
+    margin-bottom: 15px;
+    animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 }
 #loading-message {
     font-size: 1rem; /* Slightly smaller message */