Completely revamp the design

components/bot-card.js

@@ -1,4 +1,5 @@
-// Bot Card Web Component
+
+// Bot Card Web Component - Quantum Theme
 class BotCard extends HTMLElement {
   constructor() {
     super();
@@ -86,24 +87,25 @@ class BotCard extends HTMLElement {
 
     // Quotes
     quotes.innerHTML = `
-      <div class="grid grid-cols-3 gap-2 text-xs">
-        <div class="text-left text-gray-500">Bid</div>
-        <div class="text-center font-semibold">${this._quotes.bid}</div>
-        <div class="text-right"></div>
-
-        <div class="text-left text-gray-500">Ask</div>
-        <div class="text-center font-semibold">${this._quotes.ask}</div>
-        <div class="text-right"></div>
-
-        <div class="text-left text-gray-500">Spread</div>
-        <div class="text-center font-semibold">${this._quotes.spread}</div>
-        <div class="text-right"></div>
+      <div class="space-y-1">
+        <div class="flex justify-between text-xs">
+          <span class="text-gray-400">Bid</span>
+          <span class="font-mono font-semibold">${this._quotes.bid}</span>
+        </div>
+        <div class="flex justify-between text-xs">
+          <span class="text-gray-400">Ask</span>
+          <span class="font-mono font-semibold">${this._quotes.ask}</span>
+        </div>
+        <div class="flex justify-between text-xs">
+          <span class="text-gray-400">Spread</span>
+          <span class="font-mono font-semibold text-accent">${this._quotes.spread}</span>
+        </div>
       </div>
     `;
 
     // Metrics
     const metricHtml = Array.from(this._metrics.entries())
-      .map(([k, v]) => `<div class="text-xs text-gray-500">${k}: <span class="font-semibold text-gray-800">${v}</span></div>`)
+      .map(([k, v]) => `<div class="flex justify-between text-xs"><span class="text-gray-400">${k}</span><span class="font-mono text-indigo-300">${v}</span></div>`)
       .join("");
     metrics.innerHTML = metricHtml;
 
@@ -114,7 +116,7 @@ class BotCard extends HTMLElement {
     }
 
     // Logs
-    logs.innerHTML = this._logs.map((l) => `<div class="text-[11px] text-gray-600 truncate">${l}</div>`).join("");
+    logs.innerHTML = this._logs.map((l) => `<div class="text-[11px] text-gray-500 truncate font-mono">${l}</div>`).join("");
     // Re-apply feather icons if needed
     if (typeof feather !== "undefined") feather.replace();
   }
@@ -122,30 +124,36 @@ class BotCard extends HTMLElement {
   render() {
     if (!this._bot) return;
     const colorMap = {
-      green: "bg-green-500",
-      blue: "bg-blue-500",
-      purple: "bg-purple-500",
-      amber: "bg-amber-500",
+      green: "bg-gradient-to-br from-emerald-500 to-green-600",
+      blue: "bg-gradient-to-br from-blue-500 to-cyan-600",
+      purple: "bg-gradient-to-br from-purple-500 to-pink-600",
+      amber: "bg-gradient-to-br from-amber-500 to-orange-600",
     };
-    const color = colorMap[this._bot.color] || "bg-green-500";
+    const color = colorMap[this._bot.color] || "bg-gradient-to-br from-indigo-500 to-purple-600";
     const paused = this._bot.paused;
 
     this.shadowRoot.innerHTML = `
       <style>
         :host { display: block; }
         .card {
-          border: 1px solid #e5e7eb;
-          border-radius: 0.5rem;
+          background: rgba(15, 23, 42, 0.6);
+          backdrop-filter: blur(20px);
+          border: 1px solid rgba(99, 102, 241, 0.2);
+          border-radius: 12px;
           overflow: hidden;
-          background: #ffffff;
+          transition: all 0.3s ease;
+        }
+        .card:hover {
+          border-color: rgba(99, 102, 241, 0.4);
+          box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
         }
         .header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 8px;
-          padding: 10px 12px;
-          border-bottom: 1px solid #f3f4f6;
+          padding: 12px;
+          border-bottom: 1px solid rgba(99, 102, 241, 0.1);
         }
         .left {
           display: flex;
@@ -153,82 +161,95 @@ class BotCard extends HTMLElement {
           gap: 8px;
         }
         .dot {
-          width: 10px;
-          height: 10px;
+          width: 12px;
+          height: 12px;
           border-radius: 50%;
+          box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
         }
         .body {
-          padding: 10px 12px;
+          padding: 12px;
           display: grid;
           grid-template-columns: 1fr;
-          gap: 10px;
+          gap: 12px;
         }
-        .row {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: 10px;
+        .section {
+          padding: 8px;
+          background: rgba(30, 41, 59, 0.5);
+          border-radius: 8px;
+          border: 1px solid rgba(99, 102, 241, 0.1);
         }
         .meta {
-          font-size: 12px;
-          color: #6b7280;
+          font-size: 11px;
+          color: #94a3b8;
         }
         button {
-          border: 1px solid #e5e7eb;
-          background: #ffffff;
-          border-radius: 0.375rem;
+          background: rgba(99, 102, 241, 0.1);
+          border: 1px solid rgba(99, 102, 241, 0.3);
+          color: #fff;
+          border-radius: 6px;
           padding: 4px 8px;
-          font-size: 12px;
+          font-size: 11px;
           cursor: pointer;
-          transition: background 0.2s ease;
+          transition: all 0.2s ease;
+          display: flex;
+          align-items: center;
+          gap: 4px;
         }
         button:hover {
-          background: #f9fafb;
+          background: rgba(99, 102, 241, 0.2);
+          border-color: rgba(99, 102, 241, 0.5);
         }
         #progress {
-          height: 6px;
-          background: #f3f4f6;
-          border-radius: 9999px;
+          height: 8px;
+          background: rgba(30, 41, 59, 0.8);
+          border-radius: 4px;
           overflow: hidden;
         }
         #progressFill {
           height: 100%;
-          background: #22c55e;
+          background: linear-gradient(to right, #6366f1, #a855f7);
           width: 0%;
+          transition: width 0.3s ease;
         }
         #logs {
-          background: #fafafa;
-          border: 1px dashed #e5e7eb;
+          background: rgba(15, 23, 42, 0.8);
+          border: 1px solid rgba(99, 102, 241, 0.1);
           padding: 8px;
           border-radius: 6px;
-          max-height: 100px;
+          max-height: 80px;
           overflow: hidden;
         }
       </style>
-      <div class="card">
+      <div class="card" id="root">
         <div class="header">
           <div class="left">
             <div class="dot ${color}"></div>
             <div>
-              <div class="font-semibold text-sm">${this._bot.name}</div>
+              <div class="font-semibold text-sm text-white">${this._bot.name}</div>
               <div class="meta">${this._bot.type} • ${this._bot.symbol}</div>
             </div>
           </div>
-          <div class="row">
-            <span id="pausedBadge" class="text-[10px] px-2 py-0.5 rounded-full bg-red-50 text-red-600 border border-red-200 ${paused ? "" : "hidden"}">PAUSED</span>
+          <div class="flex items-center gap-2">
+            <span id="pausedBadge" class="text-[10px] px-2 py-1 rounded-full bg-red-500/20 text-red-400 border border-red-500/30 ${paused ? "" : "hidden"}">PAUSED</span>
             <button id="pauseBtn" title="Pause/Resume">
               ${paused ? "Resume" : "Pause"}
             </button>
           </div>
         </div>
         <div class="body">
-          <div id="quotes"></div>
-          <div id="metrics"></div>
+          <div class="section">
+            <div class="text-xs font-semibold text-gray-300 mb-2">Quotes</div>
+            <div id="quotes"></div>
+          </div>
+          <div class="section">
+            <div class="text-xs font-semibold text-gray-300 mb-2">Metrics</div>
+            <div id="metrics"></div>
+          </div>
           <div id="progress" class="hidden">
             <div id="progressFill"></div>
           </div>
-          <div>
-            <div class="text-xs text-gray-500 mb-1">Logs</div>
+          <div class="section">
+            <div class="text-xs font-semibold text-gray-300 mb-2">Activity Log</div>
             <div id="logs"></div>
           </div>
         </div>
@@ -241,4 +262,4 @@ class BotCard extends HTMLElement {
   }
 }
 
-customElements.define("bot-card", BotCard);
+customElements.define("bot-card", BotCard);

index.html

@@ -1,9 +1,10 @@
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Trading Terminal - Light Mode</title>
+  <title>Quantum Trading Terminal</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
   <script>
@@ -11,8 +12,17 @@
       theme: {
         extend: {
           colors: {
-            primary: '#22c55e', // green-500
-            secondary: '#ef4444', // red-500
+            primary: '#6366f1', // indigo-500
+            secondary: '#a855f7', // purple-500
+            accent: '#14b8a6', // teal-500
+            dark: '#0f172a', // slate-900
+            'dark-secondary': '#1e293b', // slate-800
+            'dark-tertiary': '#334155', // slate-700
+          },
+          animation: {
+            'glow': 'glow 2s ease-in-out infinite',
+            'float': 'float 3s ease-in-out infinite',
+            'pulse-slow': 'pulse 3s ease-in-out infinite',
           }
         }
       }
@@ -20,208 +30,277 @@
   </script>
   <link rel="stylesheet" href="style.css"/>
 </head>
-<body class="bg-gray-50 text-gray-900 selection:bg-green-100 selection:text-green-900">
-  <div class="min-h-screen grid grid-cols-12">
-    <!-- Sidebar -->
-    <aside class="col-span-12 lg:col-span-3 xl:col-span-2 bg-white border-r border-gray-200 flex flex-col">
-      <!-- Header -->
-      <div class="px-4 py-3 border-b border-gray-200 flex items-center gap-3">
-        <div class="h-8 w-8 rounded-md bg-green-500 flex items-center justify-center">
-          <i data-feather="activity" class="text-white w-4 h-4"></i>
-        </div>
-        <div>
-          <div class="font-semibold">Trade Terminal</div>
-          <div class="text-xs text-gray-500">Light Mode • Mock Data</div>
-        </div>
-      </div>
-
-      <!-- Controls -->
-      <div class="px-4 py-3 border-b border-gray-100">
-        <div class="flex items-center justify-between">
-          <button id="pauseAllBtn" class="inline-flex items-center gap-2 text-sm px-3 py-1.5 rounded-md border border-gray-200 hover:bg-gray-50 transition">
-            <i data-feather="pause-circle" class="w-4 h-4"></i>
-            Pause All
-          </button>
-          <div class="text-xs text-gray-500">Update: ~50ms</div>
-        </div>
-      </div>
-
-      <!-- Watchlist -->
-      <div class="px-4 py-3">
-        <div class="flex items-center justify-between mb-2">
-          <div class="font-semibold text-sm">Watchlist</div>
-          <div class="text-xs text-gray-500">Top markets</div>
-        </div>
-        <div id="watchlist" class="space-y-2">
-          <div data-symbol="BTCUSD" class="wl-item flex items-center justify-between px-3 py-2 rounded-md border border-gray-200 hover:border-green-400 cursor-pointer transition">
-            <div class="flex items-center gap-2">
-              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100">BTC</span>
-              <span class="text-sm font-medium">BTC/USD</span>
-            </div>
-            <div class="text-right">
-              <div class="text-sm font-semibold" data-field="price">-</div>
-              <div class="text-[11px]" data-field="change">-</div>
+<body class="bg-gradient-to-br from-dark via-dark-secondary to-dark text-white selection:bg-indigo-500/20 selection:text-indigo-200">
+  <!-- Background Effects -->
+  <div class="fixed inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-indigo-900/10 via-transparent to-transparent"></div>
+  <div class="fixed inset-0 bg-gradient-to-t from-transparent via-purple-900/5 to-transparent pointer-events-none"></div>
+  
+  <div class="min-h-screen relative z-10">
+    <!-- Header Bar -->
+    <header class="fixed top-0 left-0 right-0 h-16 bg-dark/80 backdrop-blur-xl border-b border-indigo-500/20 z-50">
+      <div class="h-full flex items-center justify-between px-6">
+        <div class="flex items-center gap-4">
+          <div class="relative">
+            <div class="absolute inset-0 bg-indigo-500 blur-xl animate-pulse-slow"></div>
+            <div class="relative h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
+              <i data-feather="zap" class="text-white w-5 h-5"></i>
             </div>
           </div>
-          <div data-symbol="ETHUSD" class="wl-item flex items-center justify-between px-3 py-2 rounded-md border border-gray-200 hover:border-green-400 cursor-pointer transition">
-            <div class="flex items-center gap-2">
-              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100">ETH</span>
-              <span class="text-sm font-medium">ETH/USD</span>
-            </div>
-            <div class="text-right">
-              <div class="text-sm font-semibold" data-field="price">-</div>
-              <div class="text-[11px]" data-field="change">-</div>
-            </div>
+          <div>
+            <div class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">Quantum Terminal</div>
+            <div class="text-xs text-gray-400">Real-Time Trading Engine</div>
           </div>
-          <div data-symbol="SOLUSD" class="wl-item flex items-center justify-between px-3 py-2 rounded-md border border-gray-200 hover:border-green-400 cursor-pointer transition">
-            <div class="flex items-center gap-2">
-              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100">SOL</span>
-              <span class="text-sm font-medium">SOL/USD</span>
+        </div>
+        
+        <div class="flex items-center gap-6">
+          <div class="hidden lg:flex items-center gap-8">
+            <div class="text-center">
+              <div class="text-xs text-gray-500">Last Price</div>
+              <div class="text-lg font-bold" id="lastPrice">-</div>
             </div>
-            <div class="text-right">
-              <div class="text-sm font-semibold" data-field="price">-</div>
-              <div class="text-[11px]" data-field="change">-</div>
+            <div class="text-center">
+              <div class="text-xs text-gray-500">24h Change</div>
+              <div class="text-sm font-semibold" id="dayChange">-</div>
+            </div>
+            <div class="text-center">
+              <div class="text-xs text-gray-500">Volume 24h</div>
+              <div class="text-sm font-semibold" id="volume24h">$1.2B</div>
             </div>
           </div>
+          
+          <div class="flex items-center gap-3">
+            <button id="pauseAllBtn" class="px-4 py-2 rounded-lg bg-indigo-500/10 hover:bg-indigo-500/20 border border-indigo-500/30 transition-all duration-200 flex items-center gap-2">
+              <i data-feather="pause-circle" class="w-4 h-4"></i>
+              <span class="text-sm">Pause</span>
+            </button>
+            <div class="text-xs text-gray-500">Latency: <span id="latency" class="text-indigo-400">2ms</span></div>
+          </div>
         </div>
       </div>
+    </header>
 
-      <div class="mt-auto px-4 py-3 border-t border-gray-200">
-        <div class="text-[11px] text-gray-500">
-          Mock microstructure data. Not financial advice.
-        </div>
-      </div>
-    </aside>
-
-    <!-- Main -->
-    <main class="col-span-12 lg:col-span-9 xl:col-span-7 flex flex-col">
-      <!-- Header -->
-      <header class="px-4 py-3 border-b border-gray-200 bg-white">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-4">
-            <div class="flex items-center gap-2">
-              <span class="text-lg font-semibold" id="symbolTitle">BTC/USD</span>
-              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100" id="exchangeTitle">BINANCE</span>
-            </div>
-            <div class="hidden md:flex items-center gap-6">
-              <div class="text-right">
-                <div class="text-xs text-gray-500">Last Price</div>
-                <div class="text-lg font-semibold" id="lastPrice">-</div>
-              </div>
-              <div class="text-right">
-                <div class="text-xs text-gray-500">24h Change</div>
-                <div class="text-sm font-semibold" id="dayChange">-</div>
+    <div class="flex h-screen pt-16">
+      <!-- Left Sidebar -->
+      <aside class="w-72 bg-dark/50 backdrop-blur-lg border-r border-indigo-500/20 flex flex-col">
+        <!-- Markets Section -->
+        <div class="p-4 border-b border-indigo-500/10">
+          <div class="flex items-center justify-between mb-3">
+            <h2 class="text-sm font-semibold text-gray-300">Markets</h2>
+            <span class="text-xs px-2 py-1 rounded-full bg-accent/20 text-accent border border-accent/30">LIVE</span>
+          </div>
+          <div id="watchlist" class="space-y-2">
+            <div data-symbol="BTCUSD" class="wl-item group relative">
+              <div class="absolute inset-0 bg-gradient-to-r from-indigo-500/5 to-purple-500/5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div class="relative p-3 rounded-lg border border-indigo-500/20 hover:border-indigo-400/50 cursor-pointer transition-all duration-200">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-3">
+                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-500 to-yellow-500 flex items-center justify-center">
+                      <span class="text-xs font-bold">BTC</span>
+                    </div>
+                    <div>
+                      <div class="text-sm font-medium">BTC/USD</div>
+                      <div class="text-xs text-gray-500">Bitcoin</div>
+                    </div>
+                  </div>
+                  <div class="text-right">
+                    <div class="text-sm font-semibold" data-field="price">-</div>
+                    <div class="text-xs" data-field="change">-</div>
+                  </div>
+                </div>
               </div>
-              <div class="text-right">
-                <div class="text-xs text-gray-500">Spread</div>
-                <div class="text-sm font-semibold" id="spread">-</div>
+            </div>
+            <div data-symbol="ETHUSD" class="wl-item group relative">
+              <div class="absolute inset-0 bg-gradient-to-r from-indigo-500/5 to-purple-500/5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div class="relative p-3 rounded-lg border border-indigo-500/20 hover:border-indigo-400/50 cursor-pointer transition-all duration-200">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-3">
+                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
+                      <span class="text-xs font-bold">ETH</span>
+                    </div>
+                    <div>
+                      <div class="text-sm font-medium">ETH/USD</div>
+                      <div class="text-xs text-gray-500">Ethereum</div>
+                    </div>
+                  </div>
+                  <div class="text-right">
+                    <div class="text-sm font-semibold" data-field="price">-</div>
+                    <div class="text-xs" data-field="change">-</div>
+                  </div>
+                </div>
               </div>
-              <div class="text-right">
-                <div class="text-xs text-gray-500">Mid</div>
-                <div class="text-sm font-semibold" id="midPrice">-</div>
+            </div>
+            <div data-symbol="SOLUSD" class="wl-item group relative">
+              <div class="absolute inset-0 bg-gradient-to-r from-indigo-500/5 to-purple-500/5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div class="relative p-3 rounded-lg border border-indigo-500/20 hover:border-indigo-400/50 cursor-pointer transition-all duration-200">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-3">
+                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
+                      <span class="text-xs font-bold">SOL</span>
+                    </div>
+                    <div>
+                      <div class="text-sm font-medium">SOL/USD</div>
+                      <div class="text-xs text-gray-500">Solana</div>
+                    </div>
+                  </div>
+                  <div class="text-right">
+                    <div class="text-sm font-semibold" data-field="price">-</div>
+                    <div class="text-xs" data-field="change">-</div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="flex items-center gap-2">
-            <button id="refreshBtn" class="inline-flex items-center gap-2 text-sm px-3 py-1.5 rounded-md border border-gray-200 hover:bg-gray-50 transition">
-              <i data-feather="refresh-ccw" class="w-4 h-4"></i>
-              Refresh
-            </button>
-            <div class="text-xs text-gray-500 hidden sm:block">Latency: <span id="latency">2ms</span></div>
-          </div>
         </div>
-      </header>
 
-      <!-- Panels -->
-      <section class="p-4 grid grid-cols-12 gap-4">
-        <!-- Order Book -->
-        <div class="col-span-12 xl:col-span-7 bg-white rounded-lg border border-gray-200 overflow-hidden">
-          <div class="px-4 py-2 border-b border-gray-100 flex items-center justify-between">
-            <div class="font-semibold text-sm">Order Book</div>
-            <div class="text-xs text-gray-500" id="bookTs">-</div>
-          </div>
-          <div class="grid grid-cols-3 text-xs text-gray-500 px-3 py-2 border-b border-gray-100">
-            <div class="text-left">Bid Size</div>
-            <div class="text-center">Price</div>
-            <div class="text-right">Ask Size</div>
-          </div>
-          <div id="orderBook" class="h-[340px] overflow-y-auto text-xs">
-            <!-- Bids -->
-            <div id="bookBids" class="flex flex-col-reverse"></div>
-            <!-- Center Spread -->
-            <div id="bookSpread" class="flex items-center justify-center py-1 text-[11px] text-gray-500 border-y border-gray-100"></div>
-            <!-- Asks -->
-            <div id="bookAsks" class="flex flex-col"></div>
+        <!-- Quick Stats -->
+        <div class="p-4 border-b border-indigo-500/10">
+          <h3 class="text-xs font-semibold text-gray-400 mb-3">Market Stats</h3>
+          <div class="space-y-2">
+            <div class="flex justify-between items-center">
+              <span class="text-xs text-gray-500">Total Volume</span>
+              <span class="text-xs font-semibold">$2.4B</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span class="text-xs text-gray-500">Open Interest</span>
+              <span class="text-xs font-semibold">$856M</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span class="text-xs text-gray-500">Funding Rate</span>
+              <span class="text-xs font-semibold text-accent">0.012%</span>
+            </div>
           </div>
         </div>
 
-        <!-- Bots Panel -->
-        <div class="col-span-12 xl:col-span-5 bg-white rounded-lg border border-gray-200 overflow-hidden">
-          <div class="px-4 py-2 border-b border-gray-100 flex items-center justify-between">
-            <div class="font-semibold text-sm">Algorithmic Trading Bots</div>
-            <div class="text-xs text-gray-500">Microstructure-driven</div>
+        <div class="mt-auto p-4 border-t border-indigo-500/20">
+          <div class="text-xs text-gray-500 text-center">
+            Quantum Trading Engine v2.0
           </div>
-          <div id="botsPanel" class="p-3 space-y-3 h-[340px] overflow-y-auto"></div>
         </div>
+      </aside>
 
-        <!-- Trade Tape -->
-        <div class="col-span-12 bg-white rounded-lg border border-gray-200 overflow-hidden">
-          <div class="px-4 py-2 border-b border-gray-100 flex items-center justify-between">
-            <div class="font-semibold text-sm">Trade Tape (Real-time)</div>
-            <div class="text-xs text-gray-500">Last 200 trades</div>
-          </div>
-          <div id="tradeTape" class="h-[220px] overflow-y-auto text-xs">
-            <div class="grid grid-cols-12 px-3 py-2 text-gray-500 border-b border-gray-100">
-              <div class="col-span-3">Time</div>
-              <div class="col-span-3 text-right">Price</div>
-              <div class="col-span-3 text-right">Size</div>
-              <div class="col-span-3 text-right">Side</div>
+      <!-- Main Content -->
+      <main class="flex-1 flex flex-col bg-gradient-to-br from-dark-secondary/50 to-dark-tertiary/30">
+        <div class="flex-1 p-6 space-y-6">
+          <!-- Top Row: Order Book & Trading Bots -->
+          <div class="grid grid-cols-12 gap-6">
+            <!-- Order Book -->
+            <div class="col-span-12 xl:col-span-8 relative group">
+              <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500"></div>
+              <div class="relative bg-dark/60 backdrop-blur-xl rounded-2xl border border-indigo-500/20 overflow-hidden">
+                <div class="px-6 py-4 border-b border-indigo-500/20 flex items-center justify-between">
+                  <div>
+                    <h3 class="text-lg font-bold">Order Book</h3>
+                    <p class="text-xs text-gray-400">Depth visualization</p>
+                  </div>
+                  <div class="flex items-center gap-4">
+                    <span class="text-xs text-gray-500" id="bookTs">-</span>
+                    <button class="p-2 rounded-lg bg-indigo-500/10 hover:bg-indigo-500/20 border border-indigo-500/30 transition-all">
+                      <i data-feather="settings" class="w-4 h-4"></i>
+                    </button>
+                  </div>
+                </div>
+                
+                <div class="p-4">
+                  <div class="grid grid-cols-3 text-xs text-gray-400 mb-2">
+                    <div class="text-left">Size</div>
+                    <div class="text-center">Price</div>
+                    <div class="text-right">Size</div>
+                  </div>
+                  <div id="orderBook" class="h-[400px] overflow-y-auto space-y-1">
+                    <div id="bookBids" class="space-y-0.5"></div>
+                    <div id="bookSpread" class="py-2 text-center text-xs text-gray-500 border-y border-indigo-500/20 my-2"></div>
+                    <div id="bookAsks" class="space-y-0.5"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Trading Bots -->
+            <div class="col-span-12 xl:col-span-4 relative group">
+              <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500"></div>
+              <div class="relative bg-dark/60 backdrop-blur-xl rounded-2xl border border-purple-500/20 overflow-hidden">
+                <div class="px-6 py-4 border-b border-purple-500/20">
+                  <h3 class="text-lg font-bold">Trading Bots</h3>
+                  <p class="text-xs text-gray-400">AI-powered strategies</p>
+                </div>
+                <div id="botsPanel" class="p-4 space-y-3 h-[400px] overflow-y-auto"></div>
+              </div>
             </div>
-            <div id="tapeBody"></div>
           </div>
-        </div>
-      </section>
-    </main>
 
-    <!-- Right Sidebar -->
-    <aside class="col-span-12 xl:col-span-3 bg-white border-l border-gray-200 flex flex-col">
-      <!-- Portfolio -->
-      <div class="px-4 py-3 border-b border-gray-200">
-        <div class="font-semibold text-sm">Portfolio (Mock)</div>
-      </div>
-      <div class="px-4 py-3 space-y-2">
-        <div class="flex items-center justify-between text-sm">
-          <span class="text-gray-500">Cash</span>
-          <span class="font-semibold" id="cash">$1,000,000.00</span>
-        </div>
-        <div class="flex items-center justify-between text-sm">
-          <span class="text-gray-500">Margin Used</span>
-          <span class="font-semibold" id="marginUsed">$0.00</span>
-        </div>
-        <div class="flex items-center justify-between text-sm">
-          <span class="text-gray-500">Positions P&L</span>
-          <span class="font-semibold" id="pnl">$0.00</span>
-        </div>
-        <div class="mt-2 pt-2 border-t border-gray-100">
-          <div class="text-xs text-gray-500">Holdings</div>
-          <ul class="mt-1 space-y-1 text-sm" id="holdings">
-            <!-- filled by script -->
-          </ul>
-        </div>
-      </div>
+          <!-- Bottom Row: Trade Tape & Portfolio -->
+          <div class="grid grid-cols-12 gap-6">
+            <!-- Trade Tape -->
+            <div class="col-span-12 lg:col-span-8 relative group">
+              <div class="absolute inset-0 bg-gradient-to-br from-accent/10 to-indigo-500/10 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500"></div>
+              <div class="relative bg-dark/60 backdrop-blur-xl rounded-2xl border border-accent/20 overflow-hidden">
+                <div class="px-6 py-4 border-b border-accent/20 flex items-center justify-between">
+                  <div>
+                    <h3 class="text-lg font-bold">Live Trades</h3>
+                    <p class="text-xs text-gray-400">Real-time market activity</p>
+                  </div>
+                  <div class="text-xs text-gray-500">Last 200</div>
+                </div>
+                <div id="tradeTape" class="h-[250px] overflow-y-auto">
+                  <div class="grid grid-cols-12 px-4 py-2 text-xs text-gray-400 border-b border-accent/20">
+                    <div class="col-span-2">Time</div>
+                    <div class="col-span-3 text-right">Price</div>
+                    <div class="col-span-3 text-right">Size</div>
+                    <div class="col-span-2 text-right">Side</div>
+                    <div class="col-span-2 text-right">Value</div>
+                  </div>
+                  <div id="tapeBody"></div>
+                </div>
+              </div>
+            </div>
 
-      <div class="mt-auto px-4 py-3 border-t border-gray-200">
-        <div class="text-[11px] text-gray-500">
-          © 2025 Trading Terminal Demo
+            <!-- Portfolio -->
+            <div class="col-span-12 lg:col-span-4 relative group">
+              <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500"></div>
+              <div class="relative bg-dark/60 backdrop-blur-xl rounded-2xl border border-yellow-500/20 overflow-hidden">
+                <div class="px-6 py-4 border-b border-yellow-500/20">
+                  <h3 class="text-lg font-bold">Portfolio</h3>
+                  <p class="text-xs text-gray-400">Performance metrics</p>
+                </div>
+                <div class="p-4 space-y-4">
+                  <div class="space-y-3">
+                    <div class="flex items-center justify-between">
+                      <span class="text-sm text-gray-400">Cash Balance</span>
+                      <span class="text-sm font-bold" id="cash">$1,000,000.00</span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                      <span class="text-sm text-gray-400">Margin Used</span>
+                      <span class="text-sm font-bold" id="marginUsed">$0.00</span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                      <span class="text-sm text-gray-400">Unrealized P&L</span>
+                      <span class="text-sm font-bold" id="pnl">$0.00</span>
+                    </div>
+                    <div class="h-px bg-gradient-to-r from-transparent via-gray-600 to-transparent"></div>
+                    <div class="flex items-center justify-between">
+                      <span class="text-sm text-gray-400">Total Value</span>
+                      <span class="text-lg font-bold text-indigo-400" id="totalValue">$1,000,000.00</span>
+                    </div>
+                  </div>
+                  
+                  <div class="space-y-2">
+                    <h4 class="text-xs font-semibold text-gray-400">Holdings</h4>
+                    <ul class="space-y-2" id="holdings">
+                      <!-- filled by script -->
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-    </aside>
+      </main>
+    </div>
   </div>
 
   <!-- Components -->
   <script src="components/bot-card.js"></script>
   <script src="script.js"></script>
   <script>feather.replace();</script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -148,7 +148,6 @@
     updatePortfolioUI();
     return { price: fillPrice, size: vol };
   }
-
   // UI: Order Book
   function renderOrderBook() {
     const bidsEl = document.getElementById("bookBids");
@@ -167,14 +166,14 @@
     for (const level of state.bids) {
       const intensity = level.size / maxBidVol;
       const row = document.createElement("div");
-      row.className = "grid grid-cols-3 px-3 py-1 hover:bg-gray-50";
+      row.className = "grid grid-cols-3 px-3 py-1 hover:bg-indigo-500/10 rounded transition-all duration-200";
       row.innerHTML = `
-        <div class="text-left text-green-600">${fmtSize(level.size)}</div>
-        <div class="text-center font-semibold">${fmtNum(level.price, 1)}</div>
-        <div class="text-right text-gray-400">-</div>
+        <div class="text-left text-emerald-400 font-mono">${fmtSize(level.size)}</div>
+        <div class="text-center font-semibold text-white">${fmtNum(level.price, 1)}</div>
+        <div class="text-right text-gray-500">-</div>
       `;
       // Gradient background bar
-      row.style.background = `linear-gradient(to right, rgba(34,197,94,${0.10 * intensity}), rgba(34,197,94,0) 60%)`;
+      row.style.background = `linear-gradient(to right, rgba(16,185,129,${0.15 * intensity}), rgba(16,185,129,0.02) 80%)`;
       bidsEl.appendChild(row);
     }
 
@@ -182,44 +181,46 @@
     for (const level of state.asks) {
       const intensity = level.size / maxAskVol;
       const row = document.createElement("div");
-      row.className = "grid grid-cols-3 px-3 py-1 hover:bg-gray-50";
+      row.className = "grid grid-cols-3 px-3 py-1 hover:bg-indigo-500/10 rounded transition-all duration-200";
       row.innerHTML = `
-        <div class="text-left text-gray-400">-</div>
-        <div class="text-center font-semibold">${fmtNum(level.price, 1)}</div>
-        <div class="text-right text-red-600">${fmtSize(level.size)}</div>
+        <div class="text-left text-gray-500">-</div>
+        <div class="text-center font-semibold text-white">${fmtNum(level.price, 1)}</div>
+        <div class="text-right text-rose-400 font-mono">${fmtSize(level.size)}</div>
       `;
-      row.style.background = `linear-gradient(to right, rgba(239,68,68,0) 40%, rgba(239,68,68,${0.10 * intensity}))`;
+      row.style.background = `linear-gradient(to right, rgba(244,63,94,0.02) 20%, rgba(244,63,94,${0.15 * intensity}))`;
       asksEl.appendChild(row);
     }
 
     // Spread
     const bestBid = state.bids[state.bids.length - 1]?.price ?? state.lastPrice - state.spread / 2;
     const bestAsk = state.asks[0]?.price ?? state.lastPrice + state.spread / 2;
-    spreadEl.textContent = `Spread: ${fmtNum(bestAsk - bestBid, 2)}  |  Best Bid: ${fmtNum(bestBid, 1)}  |  Best Ask: ${fmtNum(bestAsk, 1)}`;
-    tsEl.textContent = "Updated: " + nowTs();
+    spreadEl.innerHTML = `<span class="text-indigo-300">Spread:</span> <span class="font-mono text-accent">${fmtNum(bestAsk - bestBid, 2)}</span> | <span class="text-gray-400">Best:</span> <span class="text-emerald-400">${fmtNum(bestBid, 1)}</span> / <span class="text-rose-400">${fmtNum(bestAsk, 1)}</span>`;
+    tsEl.textContent = nowTs();
   }
-
   // UI: Trade Tape
   function renderTape() {
     const body = document.getElementById("tapeBody");
     body.innerHTML = state.tape
       .map(
-        (t) => `
-        <div class="grid grid-cols-12 px-3 py-1 border-b border-gray-50 hover:bg-gray-50">
-          <div class="col-span-3">${t.time}</div>
-          <div class="col-span-3 text-right font-semibold">${fmtNum(t.price, 2)}</div>
-          <div class="col-span-3 text-right">${fmtSize(t.size)}</div>
-          <div class="col-span-3 text-right">
-            <span class="px-2 py-0.5 rounded-full text-white text-[10px] ${t.side === "buy" ? "bg-green-500" : "bg-red-500"}">
+        (t) => {
+          const value = t.price * t.size;
+          return `
+        <div class="grid grid-cols-12 px-4 py-2 border-b border-accent/10 hover:bg-accent/5 transition-colors">
+          <div class="col-span-2 text-gray-400">${t.time}</div>
+          <div class="col-span-3 text-right font-mono font-semibold text-white">${fmtNum(t.price, 2)}</div>
+          <div class="col-span-3 text-right font-mono text-gray-300">${fmtSize(t.size)}</div>
+          <div class="col-span-2 text-right">
+            <span class="px-2 py-1 rounded-full text-white text-[10px] font-semibold ${t.side === "buy" ? "bg-emerald-500/80" : "bg-rose-500/80"}">
               ${t.side.toUpperCase()}
             </span>
           </div>
+          <div class="col-span-2 text-right font-mono text-indigo-300">${fmtNum(value, 0)}</div>
         </div>
-      `
+      `;
+        }
       )
       .join("");
   }
-
   // UI: Header stats
   function renderHeader() {
     const lastEl = document.getElementById("lastPrice");
@@ -228,21 +229,34 @@
     const midEl = document.getElementById("midPrice");
     const symEl = document.getElementById("symbolTitle");
     const exEl = document.getElementById("exchangeTitle");
+    const totalEl = document.getElementById("totalValue");
 
     lastEl.textContent = fmtNum(state.lastPrice, 2);
     dayEl.textContent = `${state.dayChange >= 0 ? "+" : ""}${state.dayChange.toFixed(2)}%`;
-    dayEl.classList.toggle("text-green-600", state.dayChange >= 0);
-    dayEl.classList.toggle("text-red-600", state.dayChange < 0);
+    dayEl.classList.toggle("text-emerald-400", state.dayChange >= 0);
+    dayEl.classList.toggle("text-rose-400", state.dayChange < 0);
 
     const bestBid = state.bids[state.bids.length - 1]?.price ?? state.lastPrice - state.spread / 2;
     const bestAsk = state.asks[0]?.price ?? state.lastPrice + state.spread / 2;
     const mid = (bestBid + bestAsk) / 2;
     spreadEl.textContent = fmtNum(bestAsk - bestBid, 2);
-    midEl.textContent = fmtNum(mid, 2);
-    symEl.textContent = state.symbol.replace("USD", "/USD");
-    exEl.textContent = state.exchange;
+    
+    if (midEl) midEl.textContent = fmtNum(mid, 2);
+    if (symEl) symEl.textContent = state.symbol.replace("USD", "/USD");
+    if (exEl) exEl.textContent = state.exchange;
+    
+    // Update total portfolio value
+    if (totalEl) {
+      let totalValue = state.portfolio.cash;
+      for (const [sym, pos] of Object.entries(state.portfolio.positions)) {
+        const mark = getSymbolPrice(sym);
+        if (pos.qty !== 0) {
+          totalValue += mark * pos.qty;
+        }
+      }
+      totalEl.textContent = fmtUSD(totalValue);
+    }
   }
-
   // UI: Watchlist
   function renderWatchlist() {
     const items = document.querySelectorAll("#watchlist .wl-item");
@@ -261,16 +275,17 @@
       const changeEl = el.querySelector('[data-field="change"]');
       priceEl.textContent = fmtNum(price, 2);
       changeEl.textContent = `${change >= 0 ? "+" : ""}${change.toFixed(2)}%`;
-      changeEl.classList.toggle("text-green-600", change >= 0);
-      changeEl.classList.toggle("text-red-600", change < 0);
+      changeEl.classList.toggle("text-emerald-400", change >= 0);
+      changeEl.classList.toggle("text-rose-400", change < 0);
 
       // Visual selection
-      el.classList.toggle("border-green-400", sym === state.symbol);
-      el.classList.toggle("ring-1", sym === state.symbol);
-      el.classList.toggle("ring-green-300", sym === state.symbol);
+      const container = el.querySelector('.relative > div:last-child');
+      container.classList.toggle("border-indigo-400", sym === state.symbol);
+      container.classList.toggle("ring-1", sym === state.symbol);
+      container.classList.toggle("ring-indigo-300", sym === state.symbol);
+      container.classList.toggle("bg-indigo-500/10", sym === state.symbol);
     });
   }
-
   // UI: Portfolio
   function updatePortfolioUI() {
     const pnlEl = document.getElementById("pnl");
@@ -286,24 +301,35 @@
       }
     }
     pnlEl.textContent = fmtUSD(unrealized);
-    pnlEl.classList.toggle("text-green-600", unrealized >= 0);
-    pnlEl.classList.toggle("text-red-600", unrealized < 0);
+    pnlEl.classList.toggle("text-emerald-400", unrealized >= 0);
+    pnlEl.classList.toggle("text-rose-400", unrealized < 0);
     cashEl.textContent = fmtUSD(state.portfolio.cash);
     marginEl.textContent = fmtUSD(state.portfolio.marginUsed);
 
     holdingsEl.innerHTML = Object.entries(state.portfolio.positions)
+      .filter(([_, pos]) => pos.qty !== 0)
       .map(
-        ([sym, pos]) => `
-        <li class="flex items-center justify-between">
-          <span class="text-gray-500">${sym}</span>
-          <span class="font-semibold">${pos.qty.toFixed(4)} @ ${fmtNum(pos.avg, 2)}</span>
-        </li>
-      `
+        ([sym, pos]) => {
+          const mark = getSymbolPrice(sym);
+          const value = mark * pos.qty;
+          const pnl = (mark - pos.avg) * pos.qty;
+          return `
+          <li class="p-2 rounded-lg bg-dark/50 border border-indigo-500/10">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-xs text-gray-400">${sym}</span>
+              <span class="text-xs font-mono ${pnl >= 0 ? 'text-emerald-400' : 'text-rose-400'}">${fmtUSD(pnl)}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-semibold">${pos.qty.toFixed(4)}</span>
+              <span class="text-xs text-gray-500">${fmtUSD(value)}</span>
+            </div>
+          </li>
+        `;
+        }
       )
       .join("");
   }
-
-  function getSymbolPrice(sym) {
+function getSymbolPrice(sym) {
     if (sym === state.symbol) return state.lastPrice;
     // Mock other symbols around BTC with small offset
     const map = { ETHUSD: 3200, SOLUSD: 160 };
@@ -510,7 +536,6 @@
     }
     card.setMetric("Window", bot.params.window);
   }
-
   // Event: select symbol in watchlist
   function wireWatchlist() {
     document.querySelectorAll("#watchlist .wl-item").forEach((el) => {
@@ -527,8 +552,7 @@
       });
     });
   }
-
-  // Top-level loop
+// Top-level loop
   function tick() {
     if (!state.pausedAll) {
       tickMicrostructure();
@@ -539,27 +563,27 @@
       botEngineLoop();
     }
   }
-
   // Controls
   function wireControls() {
     const pauseBtn = document.getElementById("pauseAllBtn");
     pauseBtn.addEventListener("click", () => {
       state.pausedAll = !state.pausedAll;
       pauseBtn.innerHTML = state.pausedAll
-        ? `<i data-feather="play-circle" class="w-4 h-4"></i> Resume All`
-        : `<i data-feather="pause-circle" class="w-4 h-4"></i> Pause All`;
+        ? `<i data-feather="play-circle" class="w-4 h-4"></i> <span class="text-sm">Resume</span>`
+        : `<i data-feather="pause-circle" class="w-4 h-4"></i> <span class="text-sm">Pause</span>`;
       feather.replace();
     });
 
-    document.getElementById("refreshBtn").addEventListener("click", () => {
-      // Reset dayOpen to current to avoid large 24h moves on refresh
-      state.dayOpen = state.lastPrice;
-      renderHeader();
-      renderWatchlist();
-    });
+    const refreshBtn = document.getElementById("refreshBtn");
+    if (refreshBtn) {
+      refreshBtn.addEventListener("click", () => {
+        state.dayOpen = state.lastPrice;
+        renderHeader();
+        renderWatchlist();
+      });
+    }
   }
-
-  // Initialize
+// Initialize
   function init() {
     wireWatchlist();
     wireControls();