Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ECM Quant AI | Institutional Analytics</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <style> | |
| /* Fix Scrolling Issue */ | |
| .container { | |
| display: flex; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .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; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| color: #fff; | |
| font-family: 'Inter', sans-serif; | |
| margin-bottom: 10px; | |
| } | |
| /* 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> | |
| <body> | |
| <div class="container"> | |
| <!-- SIDEBAR --> | |
| <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> | |
| </div> | |
| <div class="form-group"> | |
| <label>RESEARCH QUERY</label> | |
| <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</label> | |
| <input type="number" id="last-private" class="input-dark" placeholder="Last Pvt Price ($)"> | |
| </div> | |
| <div class="form-group"> | |
| <label>IPO STRUCTURING</label> | |
| <div style="margin-bottom:10px;"> | |
| <label style="font-size:0.75rem; color:#888;">IPO DISCOUNT: <span id="disp-discount" | |
| style="color:var(--primary-gold);">15%</span></label> | |
| <input type="range" id="ipo-discount" min="0" max="30" value="15" | |
| style="width:100%; accent-color:var(--primary-gold);" | |
| oninput="document.getElementById('disp-discount').innerText = this.value + '%'"> | |
| </div> | |
| <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;"> | |
| <label style="font-size:0.75rem; color:#888;">GREENSHOE (+15%)</label> | |
| <label class="switch"> | |
| <input type="checkbox" id="greenshoe"> | |
| <span class="slider round"></span> | |
| </label> | |
| </div> | |
| <div style="margin-bottom:10px;"> | |
| <label style="font-size:0.75rem; color:#888;">TARGET RAISE ($M)</label> | |
| <input type="number" id="target-raise" class="input-dark" value="250"> | |
| </div> | |
| <div style="margin-bottom:10px;"> | |
| <label style="font-size:0.75rem; color:#888;">PRIMARY SHARES (M)</label> | |
| <input type="number" id="primary-shares" class="input-dark" value="100"> | |
| </div> | |
| </div> | |
| <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" 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"> | |
| <!-- 1. EXECUTIVE ADVISORY (New Intelligence with Summary Card Style) --> | |
| <div class="summary-card glass-panel" | |
| style="padding:20px; background: rgba(255,255,255,0.03); border-radius: 8px;"> | |
| <h3 style="margin-top:0; color:var(--primary-gold);"> | |
| <i class="fas fa-check-square" style="margin-right:8px;"></i>Executive Summary | |
| </h3> | |
| <!-- AUTO DOWN ROUND ALERT --> | |
| <div id="dr-alert" | |
| style="display:none; background: rgba(239, 68, 68, 0.15); border: 1px solid #ef4444; color: #fca5a5; padding: 10px; border-radius: 4px; margin-bottom: 15px; font-weight: bold;"> | |
| <!-- Dynamic Text --> | |
| </div> | |
| <div id="exec-summary-content" style="line-height:1.6; color:#e0e0e0; font-size:1.05rem;"> | |
| <!-- Dynamic --> | |
| </div> | |
| <!-- RISK CHECKLIST --> | |
| <div style="margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px;"> | |
| <h4 style="margin:0 0 10px 0; color:#888; font-size:0.9rem; text-transform:uppercase;">Risk & Deal | |
| Factors</h4> | |
| <table id="risk-table" style="width:100%; font-size:0.9rem; border-collapse:collapse;"> | |
| <thead> | |
| <tr style="color:#666; text-align:left;"> | |
| <th style="padding-bottom:8px;">Factor</th> | |
| <th style="padding-bottom:8px;">Status</th> | |
| <th style="padding-bottom:8px;">Impact</th> | |
| </tr> | |
| </thead> | |
| <tbody><!-- JS Populated --></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- OWNERSHIP & STRUCTURING --> | |
| <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px;"> | |
| <!-- Pie Chart --> | |
| <div class="glass-panel" style="padding:15px; height: 300px;"> | |
| <h4 style="margin:0; color:#888; font-size:0.9rem;">POST-IPO OWNERSHIP</h4> | |
| <div id="ownership-chart" style="height:100%;"></div> | |
| </div> | |
| <!-- IPO Summary Stats --> | |
| <div class="glass-panel" style="padding:15px; display:flex; flex-direction:column; gap:10px;"> | |
| <h4 style="margin:0; color:#888; font-size:0.9rem; text-transform:uppercase;">Cap Table Impact</h4> | |
| <!-- DYNAMIC OWNERSHIP TABLE --> | |
| <div id="ownership-table" style="font-size:0.85rem; margin-bottom:10px;"></div> | |
| <!-- KEY DEAL METRICS --> | |
| <div | |
| style="border-top:1px solid rgba(255,255,255,0.1); padding-top:10px; display:flex; justify-content:space-between;"> | |
| <div> | |
| <div style="color:#888; font-size:0.75rem;">Target Raise</div> | |
| <div id="s-raise" style="color:white; font-weight:bold;">$250M</div> | |
| </div> | |
| <div style="text-align:right;"> | |
| <div style="color:#888; font-size:0.75rem;">Final Price</div> | |
| <div id="s-final-price" | |
| style="color:var(--primary-gold); font-weight:bold; font-size:1.1rem;">--</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 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" | |
| 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" | |
| 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> | |
| <!-- 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" | |
| 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" | |
| 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> | |
| <!-- 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> | |
| <!-- 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; color:#ccc;"> | |
| <thead> | |
| <tr style="border-bottom:1px solid #333; text-align:left;"> | |
| <th style="padding:10px;">Ticker</th> | |
| <th style="padding:10px;">Market Cap</th> | |
| <th style="padding:10px;">EV/Rev</th> | |
| <th style="padding:10px;">Rule of 40</th> | |
| <th style="padding:10px;">Growth</th> | |
| <th style="padding:10px;">Beta</th> | |
| </tr> | |
| </thead> | |
| <tbody><!-- Rows --></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div style="height: 50px;"></div> <!-- Spacer --> | |
| </div> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |