890 lines
49 KiB
HTML
890 lines
49 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FinanceIQ — Multi-Asset Analytics Platform</title>
|
|
<meta name="description"
|
|
content="Professional multi-asset analytics: stocks, futures, options, currencies. DCF, Monte Carlo, AI insights, and live charting.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src="https://unpkg.com/lightweight-charts@4.2.1/dist/lightweight-charts.standalone.production.js"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ═══════════════════════════════════════════════════ -->
|
|
<!-- WELCOME PAGE -->
|
|
<!-- ═══════════════════════════════════════════════════ -->
|
|
<div class="welcome-page" id="welcomePage">
|
|
<div class="welcome-bg"></div>
|
|
<div class="welcome-content">
|
|
<div class="welcome-logo">
|
|
<div class="welcome-icon-wrap">
|
|
<i data-lucide="bar-chart-3" class="welcome-lucide-icon"></i>
|
|
</div>
|
|
<h1 class="welcome-title">FinanceIQ</h1>
|
|
<span class="badge-version">v5.2</span>
|
|
</div>
|
|
<p class="welcome-subtitle">Multi-Asset Intelligence Platform</p>
|
|
<p class="welcome-desc">
|
|
Stocks · Futures · Options · Currencies<br>
|
|
AI-powered analysis, live charts, DCF valuation, Monte Carlo forecasting, and institutional-grade
|
|
analytics.
|
|
</p>
|
|
|
|
<div class="welcome-features">
|
|
<div class="wf-card">
|
|
<i data-lucide="candlestick-chart" class="wf-lucide"></i>
|
|
<h3>Live Charts</h3>
|
|
<p>Real-time candlestick charts with EMA, SMA, Bollinger, and drawing tools.</p>
|
|
</div>
|
|
<div class="wf-card">
|
|
<i data-lucide="calculator" class="wf-lucide"></i>
|
|
<h3>DCF Valuation</h3>
|
|
<p>Intrinsic value via discounted cash flows, WACC, and terminal growth.</p>
|
|
</div>
|
|
<div class="wf-card">
|
|
<i data-lucide="brain" class="wf-lucide"></i>
|
|
<h3>AI Analyst</h3>
|
|
<p>LLM-powered research synthesizing technicals, fundamentals, and sentiment.</p>
|
|
</div>
|
|
<div class="wf-card">
|
|
<i data-lucide="trending-up" class="wf-lucide"></i>
|
|
<h3>Monte Carlo</h3>
|
|
<p>1,000-path probabilistic simulation with percentile bands.</p>
|
|
</div>
|
|
<div class="wf-card">
|
|
<i data-lucide="target" class="wf-lucide"></i>
|
|
<h3>Analyst Consensus</h3>
|
|
<p>Live Wall Street ratings, price targets, and insider activity.</p>
|
|
</div>
|
|
<div class="wf-card">
|
|
<i data-lucide="globe" class="wf-lucide"></i>
|
|
<h3>Macro Intelligence</h3>
|
|
<p>FRED indicators, sector heatmaps, correlation and peer analysis.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="welcome-cta" id="letsBeginBtn">
|
|
<i data-lucide="arrow-right" style="width:20px;height:20px;"></i>
|
|
<span>Get Started</span>
|
|
</button>
|
|
<p class="welcome-footer">FMP · Finnhub · FRED · Alpha Vantage · Ollama AI</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════════════ -->
|
|
<!-- MAIN APP -->
|
|
<!-- ═══════════════════════════════════════════════════ -->
|
|
<div class="app-layout" id="mainApp" style="display:none;">
|
|
|
|
<!-- ── SIDEBAR ─────────────────────────────────── -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-brand">
|
|
<i data-lucide="bar-chart-3" class="brand-icon"></i>
|
|
<span class="brand-text">FinanceIQ</span>
|
|
<span class="badge-version badge-sm">v5.2</span>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-group-label">Analysis</div>
|
|
<button class="nav-item active" data-tab="overview" data-asset="stocks,futures,options,currencies">
|
|
<i data-lucide="layout-dashboard"></i>
|
|
<span>Overview</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="technical" data-asset="stocks,futures,currencies">
|
|
<i data-lucide="activity"></i>
|
|
<span>Technical</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="fundamentals" data-asset="stocks">
|
|
<i data-lucide="landmark"></i>
|
|
<span>Fundamentals</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="sentiment" data-asset="stocks,futures,options,currencies">
|
|
<i data-lucide="heart-pulse"></i>
|
|
<span>Sentiment</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="options" data-asset="options">
|
|
<i data-lucide="layers"></i>
|
|
<span>Options</span>
|
|
</button>
|
|
|
|
<div class="nav-group-label">Research</div>
|
|
<button class="nav-item" data-tab="intelligence" data-asset="stocks,futures,options,currencies">
|
|
<i data-lucide="sparkles"></i>
|
|
<span>Intelligence</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="macro" data-asset="stocks,futures">
|
|
<i data-lucide="globe-2"></i>
|
|
<span>Macro</span>
|
|
</button>
|
|
|
|
<div class="nav-group-label">Trading</div>
|
|
<button class="nav-item" data-tab="portfolio" data-asset="stocks,futures,options,currencies">
|
|
<i data-lucide="briefcase"></i>
|
|
<span>Portfolio</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<div class="sidebar-bottom">
|
|
<button class="nav-item" id="themeToggle">
|
|
<i data-lucide="moon" id="themeIcon"></i>
|
|
<span id="themeLabel">Dark Mode</span>
|
|
</button>
|
|
<button class="nav-item" id="exportBtnSidebar" style="display:none;">
|
|
<i data-lucide="download"></i>
|
|
<span>Export Excel</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ── MAIN CONTENT ────────────────────────────── -->
|
|
<main class="main-content">
|
|
|
|
<!-- Top Bar -->
|
|
<header class="topbar">
|
|
<button class="sidebar-toggle" id="sidebarToggle">
|
|
<i data-lucide="menu"></i>
|
|
</button>
|
|
|
|
<div class="search-container">
|
|
<!-- Asset Type Selector -->
|
|
<div class="asset-selector">
|
|
<button class="asset-btn active" data-asset="stocks">
|
|
<i data-lucide="bar-chart-2"></i> Stocks
|
|
</button>
|
|
<button class="asset-btn" data-asset="futures">
|
|
<i data-lucide="timer"></i> Futures
|
|
</button>
|
|
<button class="asset-btn" data-asset="options">
|
|
<i data-lucide="layers"></i> Options
|
|
</button>
|
|
<button class="asset-btn" data-asset="currencies">
|
|
<i data-lucide="coins"></i> Currencies
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Search Input -->
|
|
<div class="search-input-group">
|
|
<i data-lucide="search" class="search-icon"></i>
|
|
<div class="ticker-wrapper">
|
|
<input type="text" id="tickerInput" placeholder="Search ticker (e.g. AAPL, TSLA, NIFTY)"
|
|
autocomplete="off">
|
|
<div class="dropdown" id="dropdown"></div>
|
|
</div>
|
|
<select id="timeframeSelect" class="select-control">
|
|
<option value="1Y">1 Year</option>
|
|
<option value="6M">6 Months</option>
|
|
<option value="3M">3 Months</option>
|
|
<option value="1M">1 Month</option>
|
|
<option value="5Y">5 Years</option>
|
|
<option value="custom">Custom</option>
|
|
</select>
|
|
<select id="periodSelect" class="select-control">
|
|
<option value="yearly">Annual</option>
|
|
<option value="quarterly">Quarterly</option>
|
|
</select>
|
|
<select id="currencySelect" class="select-control">
|
|
<option value="GBP">£ GBP</option>
|
|
<option value="USD">$ USD</option>
|
|
<option value="INR">₹ INR</option>
|
|
</select>
|
|
<button id="analyzeBtn" class="btn-primary">
|
|
<i data-lucide="zap" style="width:16px;height:16px;"></i>
|
|
Analyze
|
|
</button>
|
|
</div>
|
|
<div class="custom-dates" id="customDates" style="display:none;">
|
|
<label>From <input type="date" id="startDate"></label>
|
|
<label>To <input type="date" id="endDate"></label>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Loader -->
|
|
<div class="loader-overlay" id="loader" style="display:none">
|
|
<div class="loader-spinner"></div>
|
|
<p class="loader-text" id="loaderText">Analyzing...</p>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- TAB: OVERVIEW -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<div class="tab-page active" id="page-overview">
|
|
<!-- ── Market Dashboard ── -->
|
|
<div class="market-dashboard" id="marketDashboard">
|
|
<div class="dashboard-header">
|
|
<h2 class="dashboard-title">
|
|
<i data-lucide="globe" style="width:22px;height:22px;"></i>
|
|
Market Pulse
|
|
<span class="live-dot"></span>
|
|
</h2>
|
|
<span class="dashboard-subtitle">Live global market snapshot · Auto-refreshes every 60s</span>
|
|
</div>
|
|
<div class="dashboard-section">
|
|
<h3 class="dash-section-title"><i data-lucide="trending-up" style="width:16px;height:16px;"></i>
|
|
Global Indices</h3>
|
|
<div class="market-grid" id="dashIndices">
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-section">
|
|
<h3 class="dash-section-title"><i data-lucide="gem" style="width:16px;height:16px;"></i>
|
|
Commodities</h3>
|
|
<div class="market-grid" id="dashCommodities">
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-section">
|
|
<h3 class="dash-section-title"><i data-lucide="coins" style="width:16px;height:16px;"></i>
|
|
Currency Pairs</h3>
|
|
<div class="market-grid" id="dashCurrencies">
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div class="market-card skeleton-card">
|
|
<div class="skeleton-line"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="results">
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="candlestick-chart"></i>
|
|
Interactive Price Chart
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Candlestick chart with volume. Toggle overlays below to add EMA, SMA, Bollinger Bands, and Fibonacci levels.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="chart-controls" id="chartControls" style="display:none">
|
|
<label class="chart-toggle"><input type="checkbox" id="togEma5"> EMA 5</label>
|
|
<label class="chart-toggle"><input type="checkbox" id="togEma10"> EMA 10</label>
|
|
<label class="chart-toggle"><input type="checkbox" id="togEma20"> EMA 20</label>
|
|
<label class="chart-toggle"><input type="checkbox" id="togSma200"> SMA 200</label>
|
|
<label class="chart-toggle"><input type="checkbox" id="togBb"> Bollinger</label>
|
|
<label class="chart-toggle"><input type="checkbox" id="togFib"> Fibonacci</label>
|
|
<div class="custom-ema">
|
|
<input type="number" id="customEmaPeriod" placeholder="Custom EMA" min="2" max="500">
|
|
<button class="btn-sm" id="addCustomEma">Add</button>
|
|
</div>
|
|
</div>
|
|
<div id="chartContainer"
|
|
style="width:100%;height:420px;border-radius:var(--radius);overflow:hidden;"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="gauge"></i>
|
|
Key Metrics
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Essential price and valuation metrics. RSI above 70 = overbought, below 30 = oversold.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="data-grid" id="keyMetrics"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="zap"></i>
|
|
Quick Signal
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Algorithmic signal based on RSI, MACD, and moving average crossovers.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="quickSignal"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- TAB: TECHNICAL -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<div class="tab-page" id="page-technical">
|
|
<div class="results">
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="activity"></i>
|
|
Technical Indicators
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="RSI (14-period), MACD trend direction, Bollinger Bands volatility measure.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="data-grid" id="technicalIndicators"></div>
|
|
</div>
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="scan-line"></i>
|
|
Candlestick Patterns — Last 7 Days
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Patterns detected in the last 7 trading days with forward-looking predictions.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="patternOutlook" class="pattern-outlook-box"></div>
|
|
<div id="candlestickPatterns" class="patterns-grid"></div>
|
|
</div>
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="calendar-check"></i>
|
|
Earnings History (EPS)
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Quarterly EPS — Actual vs Estimate. Consistent beats are bullish.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="earningsTable" class="table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- TAB: FUNDAMENTALS -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<div class="tab-page" id="page-fundamentals">
|
|
<div class="results">
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="landmark"></i>
|
|
DCF Intrinsic Valuation
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="DCF projects future FCF, discounts by WACC, and derives intrinsic value. Intrinsic > price = undervalued.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="dcfValuation"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="shield-check"></i>
|
|
Altman Z-Score
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Bankruptcy risk. Z > 2.99 = Safe, 1.81-2.99 = Grey Zone, < 1.81 = Distress.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="zScore"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="banknote"></i>
|
|
Dividend Analysis
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Dividend yield, payout ratio, and history. Payout > 80% may be unsustainable.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="dividendAnalysis"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="file-text"></i>
|
|
Income Statement
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Revenue, operating income, and net income from the latest filings.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="data-grid" id="incomeStatement"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="pie-chart"></i>
|
|
Ratios & Valuation
|
|
</div>
|
|
<span class="info-icon" data-tooltip="P/E, EV/EBITDA, ROE and other valuation multiples.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="data-grid" id="ratiosGrid"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="wallet"></i>
|
|
Free Cash Flow
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Cash available after CapEx. Strong FCF = flexibility for dividends and buybacks.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="data-grid" id="fcffGrid"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- TAB: SENTIMENT -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<div class="tab-page" id="page-sentiment">
|
|
<div class="results">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="heart-pulse"></i>
|
|
Fear & Greed Index
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="CNN Fear & Greed (0-100). Extreme Fear (<25) = buying opportunity.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="fearGreedGauge"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="triangle-alert"></i>
|
|
VIX Volatility Index
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="VIX < 15 = calm, 15-25 = normal, 25-35 = elevated, > 35 = panic.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="vixDisplay"></div>
|
|
</div>
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="newspaper"></i>
|
|
News Sentiment (VADER)
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Headlines analyzed with VADER. Compound score -1 to +1.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="newsSection"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- TAB: INTELLIGENCE -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<div class="tab-page" id="page-intelligence">
|
|
<div class="results">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="target"></i>
|
|
Analyst Ratings & Price Target
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Wall Street consensus from Finnhub. Buy vs Hold vs Sell counts and price target range.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="analystRatings"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="eye"></i>
|
|
Insider Trading Activity
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Recent SEC insider filings. Insider buying is often bullish.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="insiderTrading"></div>
|
|
</div>
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="trending-up"></i>
|
|
Monte Carlo Price Forecast (60-Day)
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="1,000 random simulations based on historical volatility. Toggle percentile bands below.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="mc-band-controls" id="mcBandControls">
|
|
<label class="chart-toggle"><input type="checkbox" id="togP90" checked> P90 (Bull)</label>
|
|
<label class="chart-toggle"><input type="checkbox" id="togP75" checked> P75</label>
|
|
<label class="chart-toggle"><input type="checkbox" id="togP50" checked> P50
|
|
(Median)</label>
|
|
<label class="chart-toggle"><input type="checkbox" id="togP25" checked> P25</label>
|
|
<label class="chart-toggle"><input type="checkbox" id="togP10" checked> P10 (Bear)</label>
|
|
</div>
|
|
<div id="monteCarloChart"
|
|
style="width:100%;height:340px;border-radius:var(--radius);overflow:hidden;"></div>
|
|
<div id="monteCarloStats" class="mc-stats"></div>
|
|
</div>
|
|
<div class="card card-full card-ai">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="sparkles"></i>
|
|
AI Analyst
|
|
<span class="badge-ai">Ollama</span>
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Local AI analysis via Ollama (Llama 3.1). Synthesizes all data for Buy/Hold/Sell.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="ai-content" id="aiContent">
|
|
<p class="ai-placeholder">Run analysis first, then AI commentary will appear here.</p>
|
|
</div>
|
|
<div class="ai-actions">
|
|
<input class="ai-input" id="aiInput" placeholder="Ask a follow-up question...">
|
|
<button class="btn-primary btn-sm" id="askAi">
|
|
<i data-lucide="send" style="width:14px;height:14px;"></i> Ask
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- TAB: MACRO -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<div class="tab-page" id="page-macro">
|
|
<div class="results">
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="landmark"></i>
|
|
Economic Indicators (FRED)
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Live macro data from the Federal Reserve. Hover to see impact.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="data-grid" id="macroIndicators"></div>
|
|
</div>
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="grid-3x3"></i>
|
|
Sector Performance Heatmap
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="S&P 500 sector performance. Green = outperforming, Red = underperforming.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="heatmap-controls" id="heatmapControls"></div>
|
|
<div id="sectorHeatmap" class="heatmap-grid"></div>
|
|
</div>
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="link"></i>
|
|
Correlation Matrix
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Daily return correlation with benchmarks (SPY, QQQ, DIA, Gold, Bonds, VIX).">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="correlationMatrix" class="corr-matrix"></div>
|
|
</div>
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="building-2"></i>
|
|
Competitor Analysis
|
|
</div>
|
|
<span class="info-icon"
|
|
data-tooltip="Compares key ratios with sector peers. Analyzed stock is highlighted.">
|
|
<i data-lucide="info" style="width:14px;height:14px;"></i>
|
|
</span>
|
|
</div>
|
|
<div id="compSection" class="comp-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- TAB: OPTIONS -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<div class="tab-page" id="page-options">
|
|
<div class="results">
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="layers"></i>
|
|
Options Chain
|
|
</div>
|
|
<div class="options-controls">
|
|
<select id="optExpiry" class="select-control"></select>
|
|
<button class="btn-sm btn-primary" id="loadChainBtn">Load Chain</button>
|
|
</div>
|
|
</div>
|
|
<div class="options-toggle">
|
|
<button class="heatmap-btn active" data-chain="calls">Calls</button>
|
|
<button class="heatmap-btn" data-chain="puts">Puts</button>
|
|
</div>
|
|
<div id="optionsChainTable" class="table-container"></div>
|
|
</div>
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="trending-up"></i>
|
|
Options Payoff Diagram
|
|
</div>
|
|
</div>
|
|
<div class="payoff-controls">
|
|
<label>Strike: <input type="number" id="payoffStrike" class="input-sm" value="100"></label>
|
|
<label>Premium: <input type="number" id="payoffPremium" class="input-sm" value="5"
|
|
step="0.5"></label>
|
|
<select id="payoffType" class="select-control">
|
|
<option value="call">Call</option>
|
|
<option value="put">Put</option>
|
|
</select>
|
|
<select id="payoffDirection" class="select-control">
|
|
<option value="long">Long</option>
|
|
<option value="short">Short</option>
|
|
</select>
|
|
<button class="btn-sm btn-primary" id="drawPayoffBtn">Draw</button>
|
|
</div>
|
|
<div id="payoffChart" style="width:100%;height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- TAB: PORTFOLIO -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<div class="tab-page" id="page-portfolio">
|
|
<div class="results">
|
|
<!-- Portfolio Summary -->
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="briefcase"></i>
|
|
Portfolio Summary
|
|
<span class="live-dot"></span>
|
|
</div>
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<span class="badge-sm" id="pfSlippageLabel" title="Slippage">Slip: 5 bps</span>
|
|
<span class="badge-sm" id="pfCommLabel" title="Commission">Comm: $0.005/sh</span>
|
|
<button class="btn-sm btn-danger" id="resetPortfolioBtn" title="Reset to $100K">
|
|
<i data-lucide="rotate-ccw" style="width:14px;height:14px;"></i> Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-summary-grid" id="portfolioSummary">
|
|
<div class="data-item">
|
|
<div class="data-label">Total Value</div>
|
|
<div class="data-value" id="pfTotalValue">$100,000.00</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">Cash</div>
|
|
<div class="data-value" id="pfCash">$100,000.00</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">Buying Power</div>
|
|
<div class="data-value" id="pfBuyingPower">$100,000.00</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">Positions</div>
|
|
<div class="data-value" id="pfPositionsValue">$0.00</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">Margin Used</div>
|
|
<div class="data-value" id="pfMarginUsed">$0.00</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">P&L</div>
|
|
<div class="data-value" id="pfPnL">$0.00</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">Return</div>
|
|
<div class="data-value" id="pfReturnPct">0.00%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Equity Curve -->
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="line-chart"></i>
|
|
Equity Curve
|
|
</div>
|
|
</div>
|
|
<div id="equityCurveContainer"
|
|
style="width:100%;height:260px;border-radius:var(--radius);overflow:hidden;"></div>
|
|
</div>
|
|
|
|
<!-- Trade Form -->
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="arrow-left-right"></i>
|
|
Trade Terminal
|
|
</div>
|
|
</div>
|
|
<div class="trade-form">
|
|
<div class="trade-search-wrap">
|
|
<input type="text" id="tradeTicker" placeholder="Search ticker..." class="input-sm"
|
|
autocomplete="off">
|
|
<div class="trade-dropdown" id="tradeDropdown"></div>
|
|
</div>
|
|
<input type="number" id="tradeShares" placeholder="Qty" min="0.01" step="0.01"
|
|
class="input-sm" style="width:90px;">
|
|
<select id="tradeOrderType" class="input-sm" style="width:110px;">
|
|
<option value="market">Market</option>
|
|
<option value="limit">Limit</option>
|
|
<option value="stop">Stop</option>
|
|
</select>
|
|
<input type="number" id="tradeLimitPrice" placeholder="Price" step="0.01" class="input-sm"
|
|
style="width:100px;display:none;">
|
|
<select id="tradeAssetType" class="input-sm" style="width:100px;">
|
|
<option value="stock">Stock</option>
|
|
<option value="futures">Futures</option>
|
|
<option value="currency">Currency</option>
|
|
</select>
|
|
<div class="trade-btn-group">
|
|
<button class="btn-trade btn-buy" id="buyBtn">Buy Long</button>
|
|
<button class="btn-trade btn-sell" id="sellBtn">Sell</button>
|
|
<button class="btn-trade btn-short" id="shortBtn">Short</button>
|
|
<button class="btn-trade btn-cover" id="coverBtn">Cover</button>
|
|
</div>
|
|
</div>
|
|
<div id="tradeResult" class="trade-result"></div>
|
|
</div>
|
|
|
|
<!-- Pending Orders -->
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="clock"></i>
|
|
Pending Orders
|
|
</div>
|
|
</div>
|
|
<div id="pendingOrdersTable" class="table-container"></div>
|
|
</div>
|
|
|
|
<!-- Positions Table -->
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="list"></i>
|
|
Positions
|
|
</div>
|
|
</div>
|
|
<div id="positionsTable" class="table-container"></div>
|
|
</div>
|
|
|
|
<!-- Analytics -->
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="bar-chart-3"></i>
|
|
Performance Analytics
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-analytics-grid" id="portfolioAnalytics"></div>
|
|
</div>
|
|
|
|
<!-- Transaction History -->
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i data-lucide="scroll-text"></i>
|
|
Transaction History
|
|
</div>
|
|
</div>
|
|
<div id="transactionHistory" class="table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>FinanceIQ v5.2 · FMP · Finnhub · FRED · Alpha Vantage · Ollama AI · Paper Trading · Educational
|
|
purposes only</p>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/static/script.js"></script>
|
|
<script>lucide.createIcons();</script>
|
|
</body>
|
|
|
|
</html> |