UI Fix: Enable scrolling + Hybrid V1/V2 Metrics Layout

templates/index.html

@@ -10,7 +10,36 @@
     <link rel="stylesheet" href="/static/style.css">
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <style>
-        /* Ensure new inputs match the theme */
+        /* Fix Scrolling Issue */
+        .container {
+            display: flex;
+            /* Changed from grid to flex for better sidebar control on mobile */
+            height: 100vh;
+            overflow: hidden;
+            /* Container doesn't scroll, children do */
+        }
+
+        .sidebar {
+            width: 300px;
+            min-width: 300px;
+            overflow-y: auto;
+            border-right: 1px solid rgba(255, 255, 255, 0.1);
+            background: #0E1117;
+            padding: 20px;
+        }
+
+        #dashboard {
+            flex: 1;
+            overflow-y: auto;
+            /* ENABLE SCROLLING */
+            padding: 20px;
+            display: none;
+            /* Toggled by JS */
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        /* New Inputs */
         .input-dark {
             width: 100%;
             padding: 10px;
@@ -22,9 +51,23 @@
             margin-bottom: 10px;
         }
 
-        .input-dark:focus {
-            outline: none;
-            border-color: var(--primary-gold);
+        /* Responsive */
+        @media (max-width: 768px) {
+            .container {
+                flex-direction: column;
+            }
+
+            .sidebar {
+                width: 100%;
+                min-width: 0;
+                height: auto;
+                border-right: none;
+                border-bottom: 1px solid #333;
+            }
+
+            #dashboard {
+                height: 100%;
+            }
         }
     </style>
 </head>
@@ -34,7 +77,7 @@
     <div class="container">
 
         <!-- SIDEBAR -->
-        <div class="glass-panel" style="padding:20px;">
+        <div class="sidebar">
             <div style="display:flex; align-items:center; gap:10px; margin-bottom:20px;">
                 <i class="fas fa-chart-line" style="color:var(--primary-gold); font-size:1.5rem;"></i>
                 <h2 style="margin:0; font-size:1.2rem;">ECM Quant AI</h2>
@@ -42,83 +85,90 @@
 
             <div class="form-group">
                 <label>RESEARCH QUERY</label>
-                <textarea id="query" rows="4"
+                <textarea id="query" class="input-dark" rows="4"
                     placeholder="e.g. 'Analyze SaaS IPO comparables'">Analyze SaaS sector for IPO pricing: comparables, investors, signals</textarea>
             </div>
 
             <div class="form-group">
                 <label>DEAL CONTEXT (OPTIONAL)</label>
                 <input type="number" id="last-private" class="input-dark" placeholder="Last Pvt Price ($)">
-                <select id="period" class="input-dark">
-                    <option value="6mo">Last 6 Months</option>
-                    <option value="1y">Last 1 Year</option>
-                </select>
-            </div>
-
-            <div class="form-group">
-                <label>SETTINGS</label>
-                <div style="display:flex; align-items:center; gap:10px;">
-                    <input type="checkbox" checked> <span style="font-size:0.8rem; color:#888;">EXCLUDE
-                        MICRO-CAPS</span>
-                </div>
             </div>
 
-            <button onclick="runAnalysis()" id="analyze-btn">
+            <button onclick="runAnalysis()" id="analyze-btn"
+                style="width:100%; padding:12px; background:var(--primary-gold); border:none; border-radius:4px; font-weight:bold; cursor:pointer;">
                 <i class="fas fa-bolt"></i> RUN ANALYSIS
             </button>
 
-            <div id="loader" class="loader">
-                <div class="spinner"></div>
+            <div id="loader" class="loader" style="display:none; text-align:center; margin-top:20px;">
+                <div class="spinner"
+                    style="border: 4px solid #333; border-top: 4px solid var(--primary-gold); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 0 auto;">
+                </div>
                 <div style="margin-top:10px; font-size:0.9rem; color:var(--primary-gold);">Running Quantum Models...
                 </div>
             </div>
         </div>
 
         <!-- MAIN DASHBOARD -->
-        <div id="dashboard" style="display:none; grid-template-columns: 1fr; gap:20px;">
+        <div id="dashboard">
 
-            <!-- EXECUTIVE SUMMARY (Restored Original Style) -->
-            <div class="glass-panel" style="padding:20px;">
+            <!-- 1. EXECUTIVE ADVISORY (New Intelligence) -->
+            <div class="glass-panel"
+                style="padding:20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px;">
                 <h3 style="margin-top:0; color:var(--primary-gold);">Executive Summary</h3>
-                <div id="exec-summary-content" style="line-height:1.6; color:#ccc;">
-                    <!-- Dynamic Content will be injected here by script.js -->
+                <div id="exec-summary-content" style="line-height:1.6; color:#e0e0e0; font-size:1.05rem;">
+                    <!-- Dynamic -->
                 </div>
             </div>
 
-            <!-- METRICS GRID -->
+            <!-- 2. HYBRID METRICS GRID (Old + New) -->
+            <!-- Row 1: The Classics (Momentum/Beta/Price) -->
             <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:15px;">
-                <div class="metric-card">
-                    <div class="metric-label">Implied Range</div>
-                    <div class="metric-value" id="m-price" style="color:var(--primary-gold);">--</div>
+                <div class="metric-card"
+                    style="background:#1E1E1E; padding:15px; border-radius:8px; text-align:center;">
+                    <div style="font-size:0.8rem; color:#888;">Implied Range</div>
+                    <div id="m-price" style="font-size:1.4rem; color:var(--primary-gold); font-weight:600;">--</div>
+                </div>
+                <div class="metric-card"
+                    style="background:#1E1E1E; padding:15px; border-radius:8px; text-align:center;">
+                    <div style="font-size:0.8rem; color:#888;">Sector Momentum</div>
+                    <div id="m-momentum" style="font-size:1.4rem; color:white; font-weight:600;">--</div>
                 </div>
-                <div class="metric-card">
-                    <div class="metric-label">Market Status</div>
-                    <div class="metric-value" id="m-status">--</div>
+                <div class="metric-card"
+                    style="background:#1E1E1E; padding:15px; border-radius:8px; text-align:center;">
+                    <div style="font-size:0.8rem; color:#888;">Mean Beta</div>
+                    <div id="m-beta" style="font-size:1.4rem; color:white; font-weight:600;">--</div>
                 </div>
-                <div class="metric-card">
-                    <div class="metric-label">Avg EV/Rev</div>
-                    <div class="metric-value" id="m-ev-rev">--</div>
+            </div>
+
+            <!-- Row 2: The New Intelligence (VIX/Rule 40/Status) -->
+            <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:15px;">
+                <div class="metric-card"
+                    style="background:#1E1E1E; padding:15px; border-radius:8px; text-align:center;">
+                    <div style="font-size:0.8rem; color:#888;">Market Window</div>
+                    <div id="m-status" style="font-size:1.2rem; color:white; font-weight:600;">--</div>
                 </div>
-                <div class="metric-card">
-                    <div class="metric-label">Rule of 40</div>
-                    <div class="metric-value" id="m-rule-40">--</div>
+                <div class="metric-card"
+                    style="background:#1E1E1E; padding:15px; border-radius:8px; text-align:center;">
+                    <div style="font-size:0.8rem; color:#888;">Rule of 40 (Avg)</div>
+                    <div id="m-rule-40" style="font-size:1.4rem; color:white; font-weight:600;">--</div>
                 </div>
-                <div class="metric-card">
-                    <div class="metric-label">VIX (Macro)</div>
-                    <div class="metric-value" id="m-vix">--</div>
+                <div class="metric-card"
+                    style="background:#1E1E1E; padding:15px; border-radius:8px; text-align:center;">
+                    <div style="font-size:0.8rem; color:#888;">Macro VIX</div>
+                    <div id="m-vix" style="font-size:1.4rem; color:white; font-weight:600;">--</div>
                 </div>
             </div>
 
-            <!-- CHART -->
-            <div class="glass-panel" style="padding:20px;">
+            <!-- 3. CHART -->
+            <div class="glass-panel" style="padding:20px; background: rgba(255,255,255,0.03); border-radius: 8px;">
                 <div id="main-chart"></div>
             </div>
 
-            <!-- TABLE -->
-            <div class="glass-panel" style="padding:20px;">
+            <!-- 4. TABLE -->
+            <div class="glass-panel" style="padding:20px; background: rgba(255,255,255,0.03); border-radius: 8px;">
                 <h3 style="margin-top:0;"><i class="fas fa-table"></i> Fundamental Multiples Matrix</h3>
                 <div style="overflow-x:auto;">
-                    <table id="comps-table" style="width:100%; border-collapse:collapse; font-size:0.9rem;">
+                    <table id="comps-table" style="width:100%; border-collapse:collapse; font-size:0.9rem; color:#ccc;">
                         <thead>
                             <tr style="border-bottom:1px solid #333; text-align:left;">
                                 <th style="padding:10px;">Ticker</th>
@@ -133,6 +183,8 @@
                     </table>
                 </div>
             </div>
+
+            <div style="height: 50px;"></div> <!-- Spacer -->
         </div>
 
     </div>