<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Finamatrix vGRE-Lite Integration Hub</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: linear-gradient(135deg, #050915 0%, #0f1420 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #F1F5F9;
min-height: 100vh;
}
.header {
border-bottom: 1px solid #1E293B;
padding: 16px 24px;
background: rgba(2, 6, 23, 0.9);
backdrop-filter: blur(10px);
display: flex;
justify-content: space-between;
align-items: center;
}
.logo { display: flex; gap: 12px; align-items: center; }
.logo-circle { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #1E90FF 0%, #00BFFF 100%); box-shadow: 0 0 20px rgba(30, 144, 255, 0.4); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #FFFFFF; }
.logo-text { display: flex; flex-direction: column; }
.logo-title { font-size: 15px; font-weight: 600; color: #6EE7B7; }
.logo-subtitle { font-size: 10px; color: #94A3B8; letter-spacing: 0.15em; }
.header-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(34, 211, 238, 0.15); border: 1px solid rgba(34, 211, 238, 0.3); border-radius: 20px; font-size: 11px; color: #06B6D4; }
.container { display: flex; height: calc(100vh - 65px); }
/* SIDEBAR */
.sidebar {
width: 220px;
border-right: 1px solid #1E293B;
background: rgba(15, 23, 42, 0.6);
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sidebar-section { margin-bottom: 16px; }
.sidebar-label { font-size: 10px; letter-spacing: 0.15em; color: #64748B; font-weight: 600; margin-bottom: 8px; }
.sidebar-btn {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #1E293B;
background: rgba(15, 23, 42, 0.8);
color: #CBD5E1;
font-size: 12px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: all 200ms;
}
.sidebar-btn:hover { background: rgba(6, 182, 212, 0.1); border-color: rgba(6, 182, 212, 0.3); color: #06B6D4; }
.sidebar-btn.active { background: rgba(6, 182, 212, 0.2); border-color: #06B6D4; color: #06B6D4; box-shadow: 0 0 10px rgba(6, 182, 212, 0.2); }
/* MAIN CONTENT */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.panel { display: none; }
.panel.active { display: flex; flex-direction: column; gap: 16px; }
/* CARDS & LAYOUTS */
.card {
border-radius: 14px;
border: 1px solid #1E293B;
padding: 20px;
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(8px);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(30, 41, 59, 0.3);
}
.card-title {
font-size: 12px;
letter-spacing: 0.15em;
color: #64748B;
font-weight: 600;
}
.card-desc {
font-size: 13px;
color: #CBD5E1;
margin-top: 6px;
}
/* INTEGRATION FLOW */
.integration-flow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.flow-stage {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(5, 9, 21, 0.9));
border: 1px solid #1E293B;
border-radius: 12px;
padding: 16px;
text-align: center;
}
.flow-icon {
font-size: 28px;
margin-bottom: 8px;
}
.flow-label {
font-size: 12px;
font-weight: 600;
color: #06B6D4;
margin-bottom: 4px;
}
.flow-desc {
font-size: 11px;
color: #94A3B8;
line-height: 1.4;
}
/* FORM ELEMENTS */
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.form-label {
font-size: 11px;
color: #64748B;
font-weight: 600;
}
.form-input, .form-select, .form-textarea {
border-radius: 10px;
border: 1px solid #334155;
background: #0F172A;
padding: 8px 12px;
font-size: 12px;
color: #E2E8F0;
outline: none;
font-family: 'Courier New', monospace;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
border-color: #06B6D4;
box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}
.form-textarea {
resize: vertical;
min-height: 80px;
font-family: 'Courier New', monospace;
}
.form-hint {
font-size: 10px;
color: #64748B;
margin-top: 4px;
}
/* BUTTONS */
.btn {
padding: 10px 16px;
border-radius: 10px;
border: none;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 200ms;
}
.btn-primary {
background: linear-gradient(to right, #06B6D4, #10B981);
color: #000;
box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}
.btn-primary:hover {
box-shadow: 0 0 25px rgba(6, 182, 212, 0.5);
}
.btn-secondary {
background: rgba(6, 182, 212, 0.1);
border: 1px solid rgba(6, 182, 212, 0.3);
color: #06B6D4;
}
.btn-secondary:hover {
background: rgba(6, 182, 212, 0.2);
}
/* API ENDPOINTS */
.endpoints-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.endpoint-card {
background: rgba(15, 23, 42, 0.8);
border: 1px solid #1E293B;
border-radius: 10px;
padding: 12px;
}
.endpoint-method {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
margin-bottom: 6px;
}
.method-post { background: rgba(59, 130, 246, 0.2); color: #3B82F6; }
.method-get { background: rgba(34, 197, 94, 0.2); color: #22C55E; }
.endpoint-path {
font-size: 11px;
color: #CBD5E1;
font-family: monospace;
word-break: break-all;
margin-bottom: 8px;
}
.endpoint-desc {
font-size: 10px;
color: #94A3B8;
line-height: 1.4;
}
/* BACKTEST RESULTS */
.backtest-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.metric-card {
background: rgba(15, 23, 42, 0.8);
border: 1px solid #1E293B;
border-radius: 10px;
padding: 12px;
text-align: center;
}
.metric-label {
font-size: 10px;
color: #64748B;
margin-bottom: 6px;
}
.metric-value {
font-size: 18px;
font-weight: 700;
color: #F1F5F9;
font-family: monospace;
}
.metric-positive { color: #10B981; }
.metric-negative { color: #EF4444; }
.metric-neutral { color: #FCD34D; }
/* CHART */
.equity-curve {
width: 100%;
height: 200px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid #1E293B;
padding: 12px;
position: relative;
}
/* TABLE */
.table-wrapper {
overflow-x: auto;
border-radius: 10px;
background: rgba(5, 9, 21, 0.6);
border: 1px solid #1E293B;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
}
th {
background: rgba(15, 23, 42, 0.8);
padding: 10px;
text-align: left;
color: #64748B;
font-weight: 600;
border-bottom: 1px solid rgba(30, 41, 59, 0.3);
}
td {
padding: 10px;
border-bottom: 1px solid rgba(30, 41, 59, 0.2);
color: #CBD5E1;
}
tr:hover { background: rgba(6, 182, 212, 0.05); }
.badge {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
}
.badge-primary { background: rgba(6, 182, 212, 0.2); color: #06B6D4; }
.badge-success { background: rgba(16, 185, 129, 0.2); color: #10B981; }
.badge-danger { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
/* STATUS */
.status-box {
background: rgba(6, 182, 212, 0.1);
border: 1px solid rgba(6, 182, 212, 0.3);
border-left: 3px solid #06B6D4;
border-radius: 8px;
padding: 12px;
margin: 12px 0;
}
.status-title {
font-size: 11px;
font-weight: 600;
color: #06B6D4;
margin-bottom: 4px;
}
.status-text {
font-size: 11px;
color: #CBD5E1;
line-height: 1.5;
}
.status-code {
font-family: monospace;
background: rgba(15, 23, 42, 0.8);
padding: 2px 6px;
border-radius: 3px;
color: #FCD34D;
}
/* RESPONSIVE */
@media (max-width: 1024px) {
.integration-flow { grid-template-columns: 1fr; }
.sidebar { width: 180px; }
.endpoints-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.container { flex-direction: column; }
.sidebar { width: 100%; padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); border-right: none; border-bottom: 1px solid #1E293B; max-height: 80px; }
.main-content { padding: 12px; }
.card { padding: 12px; }
.integration-flow { grid-template-columns: 1fr; }
.backtest-metrics { grid-template-columns: repeat(2, 1fr); }
.equity-curve { height: 150px; }
}
@media (max-width: 400px) {
.header { flex-direction: column; gap: 8px; align-items: flex-start; }
.sidebar { grid-template-columns: 1fr; }
.main-content { padding: 8px; gap: 12px; }
.card { padding: 10px; }
.backtest-metrics { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- HEADER -->
<div class="header">
<div class="logo">
<div class="logo-circle">Fi</div>
<div class="logo-text">
<div class="logo-title">Finamatrix vGRE-Lite</div>
<div class="logo-subtitle">Intelligence Layer for Trading Systems</div>
</div>
</div>
<div class="header-badge">
π API Integration Ready
</div>
</div>
<!-- CONTAINER -->
<div class="container">
<!-- SIDEBAR NAVIGATION -->
<div class="sidebar">
<div class="sidebar-section">
<div class="sidebar-label">INTELLIGENCE</div>
<button class="sidebar-btn active" onclick="switchPanel('dashboard')">π Dashboard</button>
<button class="sidebar-btn" onclick="switchPanel('backtest')">π Backtest Engine</button>
<button class="sidebar-btn" onclick="switchPanel('derivatives')">βοΈ Derivatives Risk</button>
</div>
<div class="sidebar-section">
<div class="sidebar-label">INTEGRATION</div>
<button class="sidebar-btn" onclick="switchPanel('api')">π API Docs</button>
<button class="sidebar-btn" onclick="switchPanel('webhooks')">π Webhooks</button>
<button class="sidebar-btn" onclick="switchPanel('connectors')">βοΈ Connectors</button>
</div>
<div class="sidebar-section">
<div class="sidebar-label">RESOURCES</div>
<button class="sidebar-btn" onclick="switchPanel('examples')">π» Code Examples</button>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="main-content">
<!-- DASHBOARD PANEL -->
<div id="dashboard" class="panel active">
<div class="card">
<div class="card-header">
<div>
<div class="card-title">vGRE-LITE INTELLIGENCE LAYER</div>
<div class="card-desc">Real-time decision matrix engine integrated into your trading systems</div>
</div>
</div>
<div class="integration-flow">
<div class="flow-stage">
<div class="flow-icon">π</div>
<div class="flow-label">1. DATA INPUT</div>
<div class="flow-desc">Connect your data feed (TradingView, MT5, IBKR, Binance, Yahoo)</div>
</div>
<div class="flow-stage">
<div class="flow-icon">β‘</div>
<div class="flow-label">2. vGRE ANALYSIS</div>
<div class="flow-desc">Regime detection, probability analysis, correlation evaluation</div>
</div>
<div class="flow-stage">
<div class="flow-icon">π―</div>
<div class="flow-label">3. ACTION MATRIX</div>
<div class="flow-desc">Ranked trading decisions (ROLL, ADD, REDUCE, CLOSE, HOLD)</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">CONNECTED SYSTEMS</div>
<div class="card-desc">vGRE integrates as an intelligence layer in your existing workflow</div>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;">
<div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 8px; padding: 12px; text-align: center;">
<div style="font-size: 24px; margin-bottom: 4px;">π</div>
<div style="font-size: 11px; font-weight: 600; color: #3B82F6;">TradingView</div>
<div style="font-size: 9px; color: #94A3B8; margin-top: 4px;">Real-time data feed</div>
</div>
<div style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 8px; padding: 12px; text-align: center;">
<div style="font-size: 24px; margin-bottom: 4px;">π±</div>
<div style="font-size: 11px; font-weight: 600; color: #F59E0B;">MetaTrader 5</div>
<div style="font-size: 9px; color: #94A3B8; margin-top: 4px;">Execution alerts</div>
</div>
<div style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 8px; padding: 12px; text-align: center;">
<div style="font-size: 24px; margin-bottom: 4px;">π¦</div>
<div style="font-size: 11px; font-weight: 600; color: #22C55E;">Interactive Brokers</div>
<div style="font-size: 9px; color: #94A3B8; margin-top: 4px;">Trade execution</div>
</div>
<div style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; padding: 12px; text-align: center;">
<div style="font-size: 24px; margin-bottom: 4px;">βΏ</div>
<div style="font-size: 11px; font-weight: 600; color: #EF4444;">Binance API</div>
<div style="font-size: 9px; color: #94A3B8; margin-top: 4px;">Crypto trading</div>
</div>
<div style="background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 8px; padding: 12px; text-align: center;">
<div style="font-size: 24px; margin-bottom: 4px;">πΎ</div>
<div style="font-size: 11px; font-weight: 600; color: #8B5CF6;">Custom Datafeed</div>
<div style="font-size: 9px; color: #94A3B8; margin-top: 4px;">Your own systems</div>
</div>
<div style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px; padding: 12px; text-align: center;">
<div style="font-size: 24px; margin-bottom: 4px;">π</div>
<div style="font-size: 11px; font-weight: 600; color: #06B6D4;">REST API</div>
<div style="font-size: 9px; color: #94A3B8; margin-top: 4px;">Standard integration</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">QUICK START</div>
<div class="card-desc">Get your first vGRE decision in under 5 minutes</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Asset Ticker</label>
<input class="form-input" id="quick-asset" type="text" placeholder="e.g., EURUSD, AAPL, BTC-USD" value="EURUSD" />
</div>
<div class="form-group">
<label class="form-label">Time Horizon</label>
<select class="form-select" id="quick-horizon">
<option value="1H">1 Hour</option>
<option value="4H">4 Hours</option>
<option value="1D">1 Day</option>
<option value="1W" selected>1 Week</option>
<option value="1M">1 Month</option>
</select>
</div>
<button class="btn btn-primary" onclick="runQuickAnalysis()">Generate vGRE Decision Matrix β</button>
<div id="quick-result" style="display: none; margin-top: 12px;">
<div class="status-box">
<div class="status-title">β Analysis Complete</div>
<div class="status-text" id="quick-result-text"></div>
</div>
<div class="card" style="background: transparent; border: none; padding: 0; margin-top: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">DECISION MATRIX - RANKED ACTIONS</div>
<div id="quick-matrix" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;">
<!-- Action cards will populate here -->
</div>
</div>
<div class="card" style="background: transparent; border: none; padding: 0; margin-top: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">ACTION RANKINGS</div>
<div class="table-wrapper">
<table id="quick-actions-table">
<thead>
<tr>
<th>Rank</th>
<th>Action</th>
<th>Score</th>
<th>Max Gain</th>
<th>Max Loss</th>
<th>Recommendation</th>
</tr>
</thead>
<tbody id="quick-actions-body">
<!-- Rows will populate here -->
</tbody>
</table>
</div>
</div>
<div class="card" style="background: transparent; border: none; padding: 0; margin-top: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">MARKET METRICS</div>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
<div class="metric-card">
<div class="metric-label">Spot Price</div>
<div class="metric-value" id="quick-spot" style="color: #06B6D4;">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Volatility</div>
<div class="metric-value" id="quick-vol" style="color: #FCD34D;">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Up Probability</div>
<div class="metric-value" id="quick-prob" style="color: #10B981;">-</div>
</div>
</div>
</div>
<div class="card" style="background: transparent; border: none; padding: 0; margin-top: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">REGIME ANALYSIS</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
<div style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px; padding: 12px;">
<div style="font-size: 10px; color: #64748B; margin-bottom: 4px;">REGIME</div>
<div style="font-size: 14px; font-weight: 700; color: #06B6D4;" id="quick-regime">-</div>
</div>
<div style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px; padding: 12px;">
<div style="font-size: 10px; color: #64748B; margin-bottom: 4px;">SIGNAL STRENGTH</div>
<div style="font-size: 14px; font-weight: 700; color: #06B6D4;" id="quick-strength">-</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BACKTEST PANEL -->
<div id="backtest" class="panel">
<div class="card">
<div class="card-header">
<div>
<div class="card-title">BACKTEST ENGINE</div>
<div class="card-desc">Validate vGRE decision matrix performance on historical data</div>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px;">
<div class="form-group">
<label class="form-label">Asset</label>
<input class="form-input" id="bt-asset" type="text" placeholder="EURUSD" value="EURUSD" />
</div>
<div class="form-group">
<label class="form-label">Start Date</label>
<input class="form-input" id="bt-start" type="date" value="2024-01-01" />
</div>
<div class="form-group">
<label class="form-label">End Date</label>
<input class="form-input" id="bt-end" type="date" value="2025-01-21" />
</div>
<div class="form-group">
<label class="form-label">Initial Capital ($)</label>
<input class="form-input" id="bt-capital" type="number" placeholder="100000" value="100000" />
</div>
</div>
<button class="btn btn-primary" onclick="runBacktest()">Run Backtest β</button>
<div id="bt-loading" style="display: none; margin-top: 12px; text-align: center; color: #06B6D4;">
Running backtest... (this may take a few seconds)
</div>
<div id="bt-results" style="display: none; margin-top: 16px;">
<div class="backtest-metrics">
<div class="metric-card">
<div class="metric-label">Total Return</div>
<div class="metric-value metric-positive" id="bt-return">+18.4%</div>
</div>
<div class="metric-card">
<div class="metric-label">Sharpe Ratio</div>
<div class="metric-value metric-positive" id="bt-sharpe">1.64</div>
</div>
<div class="metric-card">
<div class="metric-label">Max Drawdown</div>
<div class="metric-value metric-negative" id="bt-dd">-8.3%</div>
</div>
<div class="metric-card">
<div class="metric-label">Win Rate</div>
<div class="metric-value metric-positive" id="bt-wr">62%</div>
</div>
<div class="metric-card">
<div class="metric-label">Total Trades</div>
<div class="metric-value metric-neutral" id="bt-trades">47</div>
</div>
<div class="metric-card">
<div class="metric-label">Profit Factor</div>
<div class="metric-value metric-positive" id="bt-pf">2.14</div>
</div>
</div>
<div class="card" style="background: transparent; border: none; padding: 0;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">EQUITY CURVE</div>
<svg class="equity-curve" viewBox="0 0 800 200" preserveAspectRatio="xMidYMid meet">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0" />
</linearGradient>
</defs>
<polyline points="20,140 80,120 140,100 200,115 260,95 320,85 380,70 440,65 500,75 560,60 620,50 680,55 740,45 760,40" stroke="#06B6D4" stroke-width="2" fill="none" />
<polyline points="20,140 80,120 140,100 200,115 260,95 320,85 380,70 440,65 500,75 560,60 620,50 680,55 740,45 760,40 760,180 20,180" fill="url(#gradient)" />
<line x1="20" y1="160" x2="760" y2="160" stroke="#334155" stroke-width="1" stroke-dasharray="5,5" />
<text x="5" y="165" font-size="10" fill="#64748B">100k</text>
</svg>
</div>
<div class="card" style="background: transparent; border: none; padding: 0; margin-top: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">TRADE SUMMARY</div>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Trade #</th>
<th>Action</th>
<th>Entry</th>
<th>Exit</th>
<th>P&L</th>
<th>Return</th>
<th>Status</th>
</tr>
</thead>
<tbody id="bt-trades-table">
<tr>
<td>#1</td>
<td><span class="badge badge-primary">ROLL</span></td>
<td>1.1550</td>
<td>1.1625</td>
<td style="color: #10B981;">+$750</td>
<td>+0.75%</td>
<td><span class="badge badge-success">WIN</span></td>
</tr>
<tr>
<td>#2</td>
<td><span class="badge badge-primary">ADD</span></td>
<td>1.1630</td>
<td>1.1580</td>
<td style="color: #EF4444;">-$500</td>
<td>-0.50%</td>
<td><span class="badge badge-danger">LOSS</span></td>
</tr>
<tr>
<td>#3</td>
<td><span class="badge badge-primary">REDUCE</span></td>
<td>1.1585</td>
<td>1.1645</td>
<td style="color: #10B981;">+$600</td>
<td>+0.60%</td>
<td><span class="badge badge-success">WIN</span></td>
</tr>
<tr>
<td>#4</td>
<td><span class="badge badge-primary">HOLD</span></td>
<td>1.1650</td>
<td>1.1670</td>
<td style="color: #10B981;">+$200</td>
<td>+0.20%</td>
<td><span class="badge badge-success">WIN</span></td>
</tr>
<tr>
<td>#5</td>
<td><span class="badge badge-primary">CLOSE</span></td>
<td>1.1675</td>
<td>1.1635</td>
<td style="color: #EF4444;">-$400</td>
<td>-0.40%</td>
<td><span class="badge badge-danger">LOSS</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- API DOCS PANEL -->
<div id="api" class="panel">
<div class="card">
<div class="card-header">
<div>
<div class="card-title">REST API ENDPOINTS</div>
<div class="card-desc">Direct integration for your trading systems</div>
</div>
</div>
<div class="endpoints-grid">
<div class="endpoint-card">
<div class="endpoint-method method-post">POST</div>
<div class="endpoint-path">/api/v1/analyze</div>
<div class="endpoint-desc">Generate vGRE decision matrix for asset</div>
<div class="form-hint">Returns: ranked actions with scores</div>
</div>
<div class="endpoint-card">
<div class="endpoint-method method-post">POST</div>
<div class="endpoint-path">/api/v1/backtest</div>
<div class="endpoint-desc">Backtest strategy on historical data</div>
<div class="form-hint">Returns: metrics, equity curve, trades</div>
</div>
<div class="endpoint-card">
<div class="endpoint-method method-get">GET</div>
<div class="endpoint-path">/api/v1/market/{symbol}</div>
<div class="endpoint-desc">Fetch current market state & regime</div>
<div class="form-hint">Returns: spot, vol, regime, probability</div>
</div>
<div class="endpoint-card">
<div class="endpoint-method method-post">POST</div>
<div class="endpoint-path">/api/v1/webhook</div>
<div class="endpoint-desc">Register webhook for trade signals</div>
<div class="form-hint">Real-time POST to your endpoint</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">REQUEST EXAMPLE</div>
<div class="card-desc">Sample API call to generate decision matrix</div>
</div>
</div>
<div class="form-group">
<label class="form-label">POST /api/v1/analyze</label>
<textarea class="form-textarea" readonly>
{
"asset": "EURUSD",
"horizon": "1W",
"include_greeks": true,
"backtest_period": "1Y"
}
</textarea>
</div>
<div class="form-group">
<label class="form-label">RESPONSE (200 OK)</label>
<textarea class="form-textarea" readonly>
{
"asset": "EURUSD",
"spot_price": 1.1643,
"volatility": 5.2,
"regime": "mixed_up",
"up_probability": 0.58,
"actions": [
{
"name": "REDUCE",
"score": 7.4,
"max_loss": -330,
"max_gain": 420,
"copilot_hint": "De-risk while keeping upside"
},
{
"name": "HOLD",
"score": 7.1,
"max_loss": -650,
"max_gain": 850,
"copilot_hint": "Keep position but cut quickly"
}
]
}
</textarea>
</div>
</div>
</div>
<!-- WEBHOOKS PANEL -->
<div id="webhooks" class="panel">
<div class="card">
<div class="card-header">
<div>
<div class="card-title">WEBHOOK CONFIGURATION</div>
<div class="card-desc">Receive real-time trading signals to your system</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Webhook Endpoint URL</label>
<input class="form-input" id="wh-url" type="url" placeholder="https://your-broker.com/signals" />
<div class="form-hint">Your system will receive POST requests with vGRE decisions</div>
</div>
<div class="form-group">
<label class="form-label">Trigger Events</label>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
<input type="checkbox" checked />
<span style="font-size: 11px; color: #CBD5E1;">Action Change</span>
</label>
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
<input type="checkbox" checked />
<span style="font-size: 11px; color: #CBD5E1;">Score Update</span>
</label>
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
<input type="checkbox" />
<span style="font-size: 11px; color: #CBD5E1;">Regime Change</span>
</label>
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
<input type="checkbox" />
<span style="font-size: 11px; color: #CBD5E1;">Error Alert</span>
</label>
</div>
</div>
<button class="btn btn-primary" onclick="registerWebhook()">Register Webhook β</button>
<div id="wh-status" style="display: none; margin-top: 12px;">
<div class="status-box">
<div class="status-title">β Webhook Registered</div>
<div class="status-text">Your endpoint will receive vGRE signals. Test payload sent.</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">WEBHOOK PAYLOAD</div>
<div class="card-desc">Sample data you will receive</div>
</div>
</div>
<textarea class="form-textarea" readonly style="margin-bottom: 12px;">
{
"timestamp": "2025-01-21T07:15:30Z",
"asset": "EURUSD",
"event_type": "action_change",
"previous_action": "HOLD",
"new_action": "REDUCE",
"new_score": 7.4,
"regime": "mixed_up",
"up_probability": 0.58,
"spot_price": 1.1643,
"volatility": 5.2,
"recommendation": "De-risk while keeping upside exposure"
}
</textarea>
</div>
</div>
<!-- CONNECTORS PANEL -->
<div id="connectors" class="panel">
<div class="card">
<div class="card-header">
<div>
<div class="card-title">TRADING SYSTEM CONNECTORS</div>
<div class="card-desc">Pre-built integrations for popular platforms</div>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;">
<div class="endpoint-card">
<div style="font-size: 14px; margin-bottom: 8px;">π TradingView</div>
<div style="font-size: 11px; color: #CBD5E1; margin-bottom: 8px;">Pine Script webhook connector</div>
<button class="btn btn-secondary" style="width: 100%; font-size: 11px;">View Connector β</button>
</div>
<div class="endpoint-card">
<div style="font-size: 14px; margin-bottom: 8px;">π± MetaTrader 5</div>
<div style="font-size: 11px; color: #CBD5E1; margin-bottom: 8px;">Expert Advisor (EA) plugin</div>
<button class="btn btn-secondary" style="width: 100%; font-size: 11px;">View Connector β</button>
</div>
<div class="endpoint-card">
<div style="font-size: 14px; margin-bottom: 8px;">π¦ Interactive Brokers</div>
<div style="font-size: 11px; color: #CBD5E1; margin-bottom: 8px;">TWS API integration</div>
<button class="btn btn-secondary" style="width: 100%; font-size: 11px;">View Connector β</button>
</div>
<div class="endpoint-card">
<div style="font-size: 14px; margin-bottom: 8px;">βΏ Binance</div>
<div style="font-size: 11px; color: #CBD5E1; margin-bottom: 8px;">REST API wrapper for crypto</div>
<button class="btn btn-secondary" style="width: 100%; font-size: 11px;">View Connector β</button>
</div>
<div class="endpoint-card">
<div style="font-size: 14px; margin-bottom: 8px;">π» Python Client</div>
<div style="font-size: 11px; color: #CBD5E1; margin-bottom: 8px;">pip install finamatrix-vgre</div>
<button class="btn btn-secondary" style="width: 100%; font-size: 11px;">View Connector β</button>
</div>
<div class="endpoint-card">
<div style="font-size: 14px; margin-bottom: 8px;">π Custom Datafeeds</div>
<div style="font-size: 11px; color: #CBD5E1; margin-bottom: 8px;">Generic REST API approach</div>
<button class="btn btn-secondary" style="width: 100%; font-size: 11px;">View Connector β</button>
</div>
</div>
</div>
</div>
<!-- DERIVATIVES PRICING & RISK PANEL -->
<div id="derivatives" class="panel">
<div class="card">
<div class="card-header">
<div>
<div class="card-title">DERIVATIVES PRICING & RISK ANALYTICS</div>
<div class="card-desc">Greeks analysis, VaR modeling, and option pricing engine</div>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px;">
<div class="form-group">
<label class="form-label">Underlying Asset</label>
<input class="form-input" id="deriv-asset" type="text" placeholder="e.g., SPY, EURUSD" value="SPY" />
</div>
<div class="form-group">
<label class="form-label">Spot Price ($)</label>
<input class="form-input" id="deriv-spot" type="number" placeholder="450.00" value="450.00" />
</div>
<div class="form-group">
<label class="form-label">Strike Price ($)</label>
<input class="form-input" id="deriv-strike" type="number" placeholder="450.00" value="450.00" />
</div>
<div class="form-group">
<label class="form-label">Time to Expiry (Days)</label>
<input class="form-input" id="deriv-tte" type="number" placeholder="30" value="30" />
</div>
<div class="form-group">
<label class="form-label">Volatility (%)</label>
<input class="form-input" id="deriv-vol" type="number" placeholder="25" value="25" />
</div>
<div class="form-group">
<label class="form-label">Risk-Free Rate (%)</label>
<input class="form-input" id="deriv-rate" type="number" placeholder="5.0" value="5.0" />
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;">
<button class="btn btn-primary" onclick="analyzeCall()">Analyze CALL Option β</button>
<button class="btn btn-primary" onclick="analyzePut()">Analyze PUT Option β</button>
</div>
<div id="deriv-results" style="display: none;">
<!-- Call Option Results -->
<div class="card" style="background: transparent; border: none; padding: 0; margin-bottom: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">CALL OPTION PRICING</div>
<div class="backtest-metrics">
<div class="metric-card">
<div class="metric-label">Option Price</div>
<div class="metric-value metric-positive" id="deriv-call-price">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Intrinsic Value</div>
<div class="metric-value metric-neutral" id="deriv-call-intrinsic">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Time Value</div>
<div class="metric-value metric-neutral" id="deriv-call-time">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Break-even</div>
<div class="metric-value" id="deriv-call-breakeven" style="color: #06B6D4;">-</div>
</div>
</div>
</div>
<!-- Greeks for Call -->
<div class="card" style="background: transparent; border: none; padding: 0; margin-bottom: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">CALL OPTION GREEKS</div>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Greek</th>
<th>Value</th>
<th>Interpretation</th>
<th>Risk Level</th>
</tr>
</thead>
<tbody id="deriv-call-greeks">
<!-- Greeks will populate here -->
</tbody>
</table>
</div>
</div>
<!-- Put Option Results -->
<div class="card" style="background: transparent; border: none; padding: 0; margin-bottom: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">PUT OPTION PRICING</div>
<div class="backtest-metrics">
<div class="metric-card">
<div class="metric-label">Option Price</div>
<div class="metric-value metric-positive" id="deriv-put-price">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Intrinsic Value</div>
<div class="metric-value metric-neutral" id="deriv-put-intrinsic">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Time Value</div>
<div class="metric-value metric-neutral" id="deriv-put-time">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Break-even</div>
<div class="metric-value" id="deriv-put-breakeven" style="color: #06B6D4;">-</div>
</div>
</div>
</div>
<!-- Greeks for Put -->
<div class="card" style="background: transparent; border: none; padding: 0; margin-bottom: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">PUT OPTION GREEKS</div>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Greek</th>
<th>Value</th>
<th>Interpretation</th>
<th>Risk Level</th>
</tr>
</thead>
<tbody id="deriv-put-greeks">
<!-- Greeks will populate here -->
</tbody>
</table>
</div>
</div>
<!-- Risk Analytics -->
<div class="card" style="background: transparent; border: none; padding: 0; margin-bottom: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">PORTFOLIO RISK ANALYTICS</div>
<div class="backtest-metrics">
<div class="metric-card">
<div class="metric-label">Value at Risk (95%)</div>
<div class="metric-value metric-negative" id="deriv-var95">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Value at Risk (99%)</div>
<div class="metric-value metric-negative" id="deriv-var99">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Expected Shortfall</div>
<div class="metric-value metric-negative" id="deriv-es">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Max Profit Potential</div>
<div class="metric-value metric-positive" id="deriv-maxprofit">-</div>
</div>
</div>
</div>
<!-- Greeks Visualization -->
<div class="card" style="background: transparent; border: none; padding: 0; margin-bottom: 16px;">
<div style="font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 12px;">GREEKS SENSITIVITY GUIDE</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
<div style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; font-weight: 600; color: #06B6D4; margin-bottom: 6px;">DELTA (Ξ)</div>
<div style="font-size: 10px; color: #CBD5E1; line-height: 1.4;">
<strong>Range:</strong> -1 to +1<br>
<strong>Meaning:</strong> Sensitivity to spot price changes<br>
<strong>Usage:</strong> Hedge directional exposure
</div>
</div>
<div style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; font-weight: 600; color: #06B6D4; margin-bottom: 6px;">GAMMA (Ξ)</div>
<div style="font-size: 10px; color: #CBD5E1; line-height: 1.4;">
<strong>Range:</strong> 0 to +β<br>
<strong>Meaning:</strong> Rate of delta change<br>
<strong>Usage:</strong> Monitor acceleration risk
</div>
</div>
<div style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; font-weight: 600; color: #06B6D4; margin-bottom: 6px;">VEGA (Ξ½)</div>
<div style="font-size: 10px; color: #CBD5E1; line-height: 1.4;">
<strong>Range:</strong> -β to +β<br>
<strong>Meaning:</strong> Sensitivity to volatility<br>
<strong>Usage:</strong> Manage vol exposure
</div>
</div>
<div style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; font-weight: 600; color: #06B6D4; margin-bottom: 6px;">THETA (Ξ)</div>
<div style="font-size: 10px; color: #CBD5E1; line-height: 1.4;">
<strong>Range:</strong> -β to +β<br>
<strong>Meaning:</strong> Time decay per day<br>
<strong>Usage:</strong> Track premium erosion
</div>
</div>
<div style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; font-weight: 600; color: #06B6D4; margin-bottom: 6px;">RHO (Ο)</div>
<div style="font-size: 10px; color: #CBD5E1; line-height: 1.4;">
<strong>Range:</strong> -β to +β<br>
<strong>Meaning:</strong> Sensitivity to interest rates<br>
<strong>Usage:</strong> Monitor rate changes
</div>
</div>
<div style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; font-weight: 600; color: #06B6D4; margin-bottom: 6px;">LAMBDA (Ξ»)</div>
<div style="font-size: 10px; color: #CBD5E1; line-height: 1.4;">
<strong>Range:</strong> Variable<br>
<strong>Meaning:</strong> Leverage of position<br>
<strong>Usage:</strong> Assess position elasticity
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CODE EXAMPLES PANEL -->
<div id="examples" class="panel">
<div class="card">
<div class="card-header">
<div>
<div class="card-title">CODE EXAMPLES</div>
<div class="card-desc">Ready-to-use integration examples</div>
</div>
</div>
<div style="margin-bottom: 16px;">
<label class="form-label">Python: Generate Decision Matrix</label>
<textarea class="form-textarea" readonly>
import requests
api_key = "your_api_key"
headers = {"Authorization": f"Bearer {api_key}"}
response = requests.post(
"https://api.finamatrix.com/v1/analyze",
headers=headers,
json={
"asset": "EURUSD",
"horizon": "1W"
}
)
data = response.json()
for action in data['actions']:
print(f"{action['name']}: {action['score']}/10 - {action['copilot_hint']}")
</textarea>
</div>
<div style="margin-bottom: 16px;">
<label class="form-label">JavaScript: Webhook Handler</label>
<textarea class="form-textarea" readonly>
const express = require('express');
const app = express();
app.post('/vgre-webhook', (req, res) => {
const signal = req.body;
console.log(`Action: ${signal.new_action}`);
console.log(`Score: ${signal.new_score}/10`);
console.log(`Recommendation: ${signal.recommendation}`);
// Send order to your broker
executeOrder(signal.new_action, signal.asset);
res.json({ status: 'received' });
});
app.listen(3000);
</textarea>
</div>
<div>
<label class="form-label">cURL: Backtest Strategy</label>
<textarea class="form-textarea" readonly>
curl -X POST https://api.finamatrix.com/v1/backtest \
-H "Authorization: Bearer your_api_key" \
-H "Content-Type: application/json" \
-d '{
"asset": "EURUSD",
"start_date": "2024-01-01",
"end_date": "2025-01-21",
"initial_capital": 100000
}'
</textarea>
</div>
</div>
</div>
</div>
</div>
<script>
function switchPanel(panelName) {
// Hide all panels
document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
// Show selected panel
document.getElementById(panelName).classList.add('active');
// Update sidebar buttons
document.querySelectorAll('.sidebar-btn').forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');
}
function runQuickAnalysis() {
const asset = document.getElementById('quick-asset').value;
const horizon = document.getElementById('quick-horizon').value;
// Simulated vGRE analysis data
const analysisData = {
spot_price: 1.1643,
volatility: 5.2,
regime: 'mixed_up',
up_probability: 0.58,
signal_strength: 'MODERATE',
actions: [
{
rank: 1,
name: "REDUCE",
score: 7.4,
max_gain: 420,
max_loss: -330,
hint: "De-risk while keeping upside exposure"
},
{
rank: 2,
name: "HOLD",
score: 7.1,
max_gain: 850,
max_loss: -650,
hint: "Keep position but cut quickly on break"
},
{
rank: 3,
name: "ROLL",
score: 6.8,
max_gain: 620,
max_loss: -280,
hint: "Stay modestly bullish with protection"
},
{
rank: 4,
name: "ADD",
score: 5.2,
max_gain: 950,
max_loss: -890,
hint: "Build position on weakness"
},
{
rank: 5,
name: "CLOSE",
score: 3.1,
max_gain: 0,
max_loss: 0,
hint: "Exit all positions immediately"
}
]
};
// Populate summary
const top = analysisData.actions[0];
const result = `
<strong>${asset}</strong> (${horizon}) β Recommend <strong style="color: #06B6D4;">${top.name}</strong> (Score: ${top.score}/10)<br>
<em style="color: #94A3B8;">"${top.hint}"</em>
`;
document.getElementById('quick-result-text').innerHTML = result;
// Populate decision matrix cards with visual ranking
const matrixHTML = analysisData.actions.map((action, idx) => {
let bgColor = 'rgba(15, 23, 42, 0.8)';
let borderColor = '#1E293B';
let scoreColor = '#F1F5F9';
let borderWidth = '1px';
if (idx === 0) {
bgColor = 'rgba(16, 185, 129, 0.15)';
borderColor = '#10B981';
scoreColor = '#10B981';
borderWidth = '2px';
} else if (idx === 1) {
bgColor = 'rgba(6, 182, 212, 0.15)';
borderColor = '#06B6D4';
scoreColor = '#06B6D4';
borderWidth = '2px';
} else if (idx === 2) {
bgColor = 'rgba(252, 211, 77, 0.15)';
borderColor = '#FCD34D';
scoreColor = '#FCD34D';
borderWidth = '2px';
}
return `
<div style="background: ${bgColor}; border: ${borderWidth} solid ${borderColor}; border-radius: 12px; padding: 14px; text-align: center; transition: all 200ms;">
<div style="font-size: 11px; font-weight: 700; color: ${scoreColor}; margin-bottom: 4px;">RANK #${action.rank}</div>
<div style="font-size: 16px; font-weight: 700; color: #F1F5F9; margin-bottom: 8px;">${action.name}</div>
<div style="font-size: 24px; font-weight: 700; color: ${scoreColor}; margin-bottom: 8px;">${action.score}/10</div>
<div style="font-size: 9px; color: #94A3B8; margin-bottom: 8px; line-height: 1.3;">${action.hint}</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 9px;">
<div style="background: rgba(16, 185, 129, 0.2); padding: 4px; border-radius: 4px; color: #10B981;">+$${action.max_gain}</div>
<div style="background: rgba(239, 68, 68, 0.2); padding: 4px; border-radius: 4px; color: #EF4444;">-$${Math.abs(action.max_loss)}</div>
</div>
</div>
`;
}).join('');
document.getElementById('quick-matrix').innerHTML = matrixHTML;
// Populate action rankings table
const tableHTML = analysisData.actions.map(action => `
<tr style="${action.rank === 1 ? 'background: rgba(16, 185, 129, 0.05);' : ''}">
<td><strong>${action.rank}</strong></td>
<td><span class="badge badge-primary">${action.name}</span></td>
<td style="color: ${action.score >= 7 ? '#10B981' : action.score >= 5 ? '#FCD34D' : '#EF4444'}; font-weight: 600;">${action.score}/10</td>
<td style="color: #10B981;">+$${action.max_gain}</td>
<td style="color: #EF4444;">-$${Math.abs(action.max_loss)}</td>
<td style="font-size: 10px; color: #CBD5E1;">${action.hint}</td>
</tr>
`).join('');
document.getElementById('quick-actions-body').innerHTML = tableHTML;
// Populate market metrics
document.getElementById('quick-spot').textContent = analysisData.spot_price.toFixed(4);
document.getElementById('quick-vol').textContent = analysisData.volatility.toFixed(1) + '%';
document.getElementById('quick-prob').textContent = (analysisData.up_probability * 100).toFixed(0) + '%';
document.getElementById('quick-regime').textContent = analysisData.regime.toUpperCase();
document.getElementById('quick-strength').textContent = analysisData.signal_strength;
// Show results
document.getElementById('quick-result').style.display = 'block';
}
function runBacktest() {
const asset = document.getElementById('bt-asset').value;
document.getElementById('bt-loading').style.display = 'block';
document.getElementById('bt-results').style.display = 'none';
setTimeout(() => {
document.getElementById('bt-loading').style.display = 'none';
document.getElementById('bt-results').style.display = 'block';
}, 2000);
}
function registerWebhook() {
const url = document.getElementById('wh-url').value;
if (!url) {
alert('Please enter a webhook URL');
return;
}
document.getElementById('wh-status').style.display = 'block';
}
// Black-Scholes option pricing model
function blackScholesCall(S, K, T, r, sigma) {
const d1 = (Math.log(S / K) + (r + 0.5 * sigma * sigma) * T) / (sigma * Math.sqrt(T));
const d2 = d1 - sigma * Math.sqrt(T);
const Nd1 = normalCDF(d1);
const Nd2 = normalCDF(d2);
const callPrice = S * Nd1 - K * Math.exp(-r * T) * Nd2;
return callPrice;
}
function blackScholesPut(S, K, T, r, sigma) {
const d1 = (Math.log(S / K) + (r + 0.5 * sigma * sigma) * T) / (sigma * Math.sqrt(T));
const d2 = d1 - sigma * Math.sqrt(T);
const Nd1 = normalCDF(d1);
const Nd2 = normalCDF(d2);
const putPrice = K * Math.exp(-r * T) * (1 - Nd2) - S * (1 - Nd1);
return putPrice;
}
// Normal CDF approximation
function normalCDF(x) {
const a1 = 0.254829592;
const a2 = -0.284496736;
const a3 = 1.421413741;
const a4 = -1.453152027;
const a5 = 1.061405429;
const p = 0.3275911;
const sign = x < 0 ? -1 : 1;
x = Math.abs(x) / Math.sqrt(2);
const t = 1.0 / (1.0 + p * x);
const t2 = t * t;
const t3 = t2 * t;
const t4 = t3 * t;
const t5 = t4 * t;
const erf = 1 - (((((a5 * t5 + a4 * t4) + a3 * t3) + a2 * t2) + a1 * t) * t * Math.exp(-x * x));
return 0.5 * (1.0 + sign * erf);
}
// Greeks calculations
function calculateGreeks(S, K, T, r, sigma, optionType) {
const d1 = (Math.log(S / K) + (r + 0.5 * sigma * sigma) * T) / (sigma * Math.sqrt(T));
const d2 = d1 - sigma * Math.sqrt(T);
const phi_d1 = Math.exp(-0.5 * d1 * d1) / Math.sqrt(2 * Math.PI);
const Nd1 = normalCDF(d1);
const Nd2 = normalCDF(d2);
const N_minus_d1 = 1 - Nd1;
const N_minus_d2 = 1 - Nd2;
let delta, gamma, vega, theta, rho;
if (optionType === 'call') {
delta = Nd1;
theta = -(S * phi_d1 * sigma) / (2 * Math.sqrt(T)) - r * K * Math.exp(-r * T) * Nd2;
rho = K * T * Math.exp(-r * T) * Nd2;
} else {
delta = Nd1 - 1;
theta = -(S * phi_d1 * sigma) / (2 * Math.sqrt(T)) + r * K * Math.exp(-r * T) * N_minus_d2;
rho = -K * T * Math.exp(-r * T) * N_minus_d2;
}
gamma = phi_d1 / (S * sigma * Math.sqrt(T));
vega = S * phi_d1 * Math.sqrt(T) / 100;
theta = theta / 365;
rho = rho / 100;
return { delta: delta.toFixed(4), gamma: gamma.toFixed(6), vega: vega.toFixed(4), theta: theta.toFixed(4), rho: rho.toFixed(4) };
}
function analyzeCall() {
const S = parseFloat(document.getElementById('deriv-spot').value);
const K = parseFloat(document.getElementById('deriv-strike').value);
const days = parseFloat(document.getElementById('deriv-tte').value);
const T = days / 365;
const sigma = parseFloat(document.getElementById('deriv-vol').value) / 100;
const r = parseFloat(document.getElementById('deriv-rate').value) / 100;
const callPrice = blackScholesCall(S, K, T, r, sigma);
const intrinsic = Math.max(S - K, 0);
const timeValue = callPrice - intrinsic;
const breakeven = K + callPrice;
const greeks = calculateGreeks(S, K, T, r, sigma, 'call');
document.getElementById('deriv-call-price').textContent = '$' + callPrice.toFixed(2);
document.getElementById('deriv-call-intrinsic').textContent = '$' + intrinsic.toFixed(2);
document.getElementById('deriv-call-time').textContent = '$' + timeValue.toFixed(2);
document.getElementById('deriv-call-breakeven').textContent = '$' + breakeven.toFixed(2);
const greeksHTML = `
<tr>
<td><strong>Delta (Ξ)</strong></td>
<td style="color: #06B6D4; font-weight: 600;">${greeks.delta}</td>
<td style="font-size: 9px; color: #94A3B8;">+${(parseFloat(greeks.delta) * 100).toFixed(1)}% per 1% move</td>
<td><span class="badge badge-primary">TRACK</span></td>
</tr>
<tr>
<td><strong>Gamma (Ξ)</strong></td>
<td style="color: #06B6D4; font-weight: 600;">${greeks.gamma}</td>
<td style="font-size: 9px; color: #94A3B8;">Delta acceleration</td>
<td><span class="badge badge-primary">MONITOR</span></td>
</tr>
<tr>
<td><strong>Vega (Ξ½)</strong></td>
<td style="color: #FCD34D; font-weight: 600;">${greeks.vega}</td>
<td style="font-size: 9px; color: #94A3B8;">+$${greeks.vega} per 1% vol</td>
<td><span class="badge badge-primary">MANAGE</span></td>
</tr>
<tr>
<td><strong>Theta (Ξ)</strong></td>
<td style="color: #EF4444; font-weight: 600;">$${greeks.theta}</td>
<td style="font-size: 9px; color: #94A3B8;">Time decay per day</td>
<td><span class="badge badge-success">TRACK</span></td>
</tr>
<tr>
<td><strong>Rho (Ο)</strong></td>
<td style="color: #06B6D4; font-weight: 600;">${greeks.rho}</td>
<td style="font-size: 9px; color: #94A3B8;">Per 1% rate change</td>
<td><span class="badge badge-primary">LOW</span></td>
</tr>
`;
document.getElementById('deriv-call-greeks').innerHTML = greeksHTML;
// Risk metrics
const var95 = (callPrice * 1.645 * sigma).toFixed(2);
const var99 = (callPrice * 2.326 * sigma).toFixed(2);
const es = (callPrice * 2.663 * sigma).toFixed(2);
const maxProfit = (S > K ? 'UNLIMITED' : '$' + (callPrice * 100).toFixed(0));
document.getElementById('deriv-var95').textContent = '-$' + var95;
document.getElementById('deriv-var99').textContent = '-$' + var99;
document.getElementById('deriv-es').textContent = '-$' + es;
document.getElementById('deriv-maxprofit').textContent = maxProfit;
document.getElementById('deriv-results').style.display = 'block';
}
function analyzePut() {
const S = parseFloat(document.getElementById('deriv-spot').value);
const K = parseFloat(document.getElementById('deriv-strike').value);
const days = parseFloat(document.getElementById('deriv-tte').value);
const T = days / 365;
const sigma = parseFloat(document.getElementById('deriv-vol').value) / 100;
const r = parseFloat(document.getElementById('deriv-rate').value) / 100;
const putPrice = blackScholesPut(S, K, T, r, sigma);
const intrinsic = Math.max(K - S, 0);
const timeValue = putPrice - intrinsic;
const breakeven = K - putPrice;
const greeks = calculateGreeks(S, K, T, r, sigma, 'put');
document.getElementById('deriv-put-price').textContent = '$' + putPrice.toFixed(2);
document.getElementById('deriv-put-intrinsic').textContent = '$' + intrinsic.toFixed(2);
document.getElementById('deriv-put-time').textContent = '$' + timeValue.toFixed(2);
document.getElementById('deriv-put-breakeven').textContent = '$' + breakeven.toFixed(2);
const greeksHTML = `
<tr>
<td><strong>Delta (Ξ)</strong></td>
<td style="color: #06B6D4; font-weight: 600;">${greeks.delta}</td>
<td style="font-size: 9px; color: #94A3B8;">${(parseFloat(greeks.delta) * 100).toFixed(1)}% per 1% move</td>
<td><span class="badge badge-primary">TRACK</span></td>
</tr>
<tr>
<td><strong>Gamma (Ξ)</strong></td>
<td style="color: #06B6D4; font-weight: 600;">${greeks.gamma}</td>
<td style="font-size: 9px; color: #94A3B8;">Delta acceleration</td>
<td><span class="badge badge-primary">MONITOR</span></td>
</tr>
<tr>
<td><strong>Vega (Ξ½)</strong></td>
<td style="color: #FCD34D; font-weight: 600;">${greeks.vega}</td>
<td style="font-size: 9px; color: #94A3B8;">+$${greeks.vega} per 1% vol</td>
<td><span class="badge badge-primary">MANAGE</span></td>
</tr>
<tr>
<td><strong>Theta (Ξ)</strong></td>
<td style="color: #EF4444; font-weight: 600;">$${greeks.theta}</td>
<td style="font-size: 9px; color: #94A3B8;">Time decay per day</td>
<td><span class="badge badge-success">TRACK</span></td>
</tr>
<tr>
<td><strong>Rho (Ο)</strong></td>
<td style="color: #06B6D4; font-weight: 600;">${greeks.rho}</td>
<td style="font-size: 9px; color: #94A3B8;">Per 1% rate change</td>
<td><span class="badge badge-primary">LOW</span></td>
</tr>
`;
document.getElementById('deriv-put-greeks').innerHTML = greeksHTML;
// Risk metrics
const var95 = (putPrice * 1.645 * sigma).toFixed(2);
const var99 = (putPrice * 2.326 * sigma).toFixed(2);
const es = (putPrice * 2.663 * sigma).toFixed(2);
const maxProfit = (S < K ? '$' + ((K - S) * 100).toFixed(0) : '$' + (putPrice * 100).toFixed(0));
document.getElementById('deriv-var95').textContent = '-$' + var95;
document.getElementById('deriv-var99').textContent = '-$' + var99;
document.getElementById('deriv-es').textContent = '-$' + es;
document.getElementById('deriv-maxprofit').textContent = maxProfit;
document.getElementById('deriv-results').style.display = 'block';
}
</script>
</body>
</html>
Finamatrix 