feat: Revamp UI to futuristic dark theme with glass-morphism effects

index.html

@@ -7,17 +7,19 @@
     <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
     <style>
         :root {
-            --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'];
+            --bg-color: #0d1117;
+            --card-bg-color: #161b22;
+            --text-color: #e6edf3;
+            --muted-text-color: #7d8590;
+            --border-color: #30363d;
+            --shadow-color: rgba(1, 4, 9, 0.8);
+            --primary-color: #58a6ff;
+            --success-color: #3fb950;
+            --warning-color: #d29922;
+            --danger-color: #f85149;
+            --plot-colorway: ['#58a6ff', '#bc8cff', '#ff7b72', '#ffa657', '#7ee787', '#a5d6ff', '#79c0ff', '#d2a8ff', '#ffa198', '#ffdfb6'];
+            --glass-effect: rgba(22, 27, 34, 0.7);
+            --highlight-color: rgba(88, 166, 255, 0.1);
         }
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
         
@@ -26,13 +28,16 @@
             margin: 0;
             background-color: var(--bg-color);
             color: var(--text-color);
-            line-height: 1.5;
-            font-weight: 300;
+            line-height: 1.6;
+            font-weight: 400;
+            background-image: 
+                radial-gradient(circle at 25% 25%, rgba(88, 166, 255, 0.1) 0%, transparent 50%),
+                radial-gradient(circle at 75% 75%, rgba(188, 140, 255, 0.1) 0%, transparent 50%);
         }
         .container {
-            max-width: 1700px; /* Wider container */
-            margin: 20px auto;
-            padding: 0 20px;
+            max-width: 1800px;
+            margin: 0 auto;
+            padding: 0 30px;
         }
         h1 {
             text-align: center;
@@ -53,19 +58,36 @@
              font-weight: 500;
              color: var(--muted-text-color);
         }
+        .controls {
+            margin-bottom: 40px;
+            padding: 20px;
+            background: var(--glass-effect);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            backdrop-filter: blur(8px);
+            max-width: fit-content;
+            margin-left: auto;
+            margin-right: auto;
+        }
         .controls select {
-            padding: 10px 14px;
+            padding: 12px 16px;
             border: 1px solid var(--border-color);
-            border-radius: 8px;
-            background-color: var(--card-bg-color);
-            min-width: 300px;
+            border-radius: 12px;
+            background: var(--glass-effect);
+            min-width: 320px;
             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-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='%237d8590' 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-position: right 16px center;
             background-size: 16px;
+            transition: all 0.2s ease;
+        }
+        .controls select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3);
         }
 
         .kpi-container {
@@ -75,13 +97,30 @@
             margin-bottom: 30px;
         }
         .kpi-card {
-            background-color: var(--card-bg-color);
-            padding: 20px;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px var(--shadow-color);
+            background: var(--glass-effect);
+            padding: 24px;
+            border-radius: 16px;
+            box-shadow: 0 8px 32px var(--shadow-color);
             text-align: center;
             border: 1px solid var(--border-color);
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(8px);
+            position: relative;
+            overflow: hidden;
+        }
+        .kpi-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, var(--primary-color), transparent);
+        }
+        .kpi-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 40px rgba(88, 166, 255, 0.2);
+            border-color: var(--primary-color);
         }
         .kpi-card h3 {
             margin-top: 0;
@@ -109,13 +148,15 @@
             margin-bottom: 30px;
         }
         .plot-container, .table-container {
-            background-color: var(--card-bg-color);
-            padding: 20px;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px var(--shadow-color);
+            background: var(--glass-effect);
+            padding: 24px;
+            border-radius: 16px;
+            box-shadow: 0 8px 32px 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 */
+            transition: all 0.3s ease;
+            min-height: 500px;
+            backdrop-filter: blur(8px);
+            position: relative;
             display: flex; /* For centering loading/error inside */
             flex-direction: column; /* Allow title and content stacking */
             justify-content: flex-start; /* Align content top */

style.css

@@ -39,13 +39,28 @@ p {
     color: var(--muted-text-color);
 }
 .spinner {
-    border: 3px solid rgba(255, 255, 255, 0.1);
-    width: 36px;
-    height: 36px;
+    border: 3px solid transparent;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
+    border-top-color: var(--primary-color);
     border-left-color: var(--primary-color);
-    margin-bottom: 15px;
-    animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    margin-bottom: 20px;
+    animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
+    position: relative;
+}
+.spinner::after {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: -6px;
+    right: -6px;
+    bottom: -6px;
+    border: 3px solid transparent;
+    border-radius: 50%;
+    border-top-color: rgba(88, 166, 255, 0.3);
+    border-left-color: rgba(88, 166, 255, 0.3);
+    animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite reverse;
 }
 #loading-message {
     font-size: 1rem; /* Slightly smaller message */
@@ -54,8 +69,13 @@ p {
 @keyframes spin {
     0% {
         transform: rotate(0deg);
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
     }
     100% {
         transform: rotate(360deg);
+        opacity: 1;
     }
 }